美文网首页
2019-06-13

2019-06-13

作者: 多喝烫水_ | 来源:发表于2019-06-14 15:01 被阅读0次

    单体创建对象

    var Tom = {

    // 属性

    name:'tom',

    age:18,

    // 方法

    showName:function(){

    alert(

    this.name);

    },

    showAge:function(){

    alert(this.age);

    }

    }

    //调用属性

    alert(

    Tom.name);

    alert(Tom.age);

    //调用方法

    Tom.showName();

    工厂模式创建对象

    function Person(name,age,job){

    //创建一个空对象

    // var o = new Object();//方式一

    var o = {};//方式二

    o.name = name;

    o.age = age;

    o.job = job;

    o.showName = function(){

    alert(

    this.name);

    }

    o.showAge = function(){

    alert(this.age);

    }

    o.showJob = function(){

    alert(this.job);

    }

    return o;

    }

    var Tom = Person('tom',18,'程序猿');

    Tom.showJob();

    var Jack = Person('jack',19,'攻城狮');

    Jack.showJob();

    构造函数

    function Person(name,age,job){

    this.name = name;

    this.age = age;

    this.job = job;

    this.showName = function(){

    alert(

    this.name);

    }

    this.showAge = function(){

    alert(this.age);

    }

    this.showJob = function(){

    alert(this.job);

    }

    }

    //new的作用就相当于工厂模式中最开始创建了一个空对象,最后把对象返回

    var Bob = new Person('bob',18,'产品汪');

    Bob.showJob();

    var Alex = new Person('alex',19,'运营喵');

    Alex.showJob();

    alert(Bob.showName == Alex.showName);//false

    原型模式

    function Person(name,age,job){

    this.name = name;

    this.age = age;

    this.job = job;

    Person.prototype.showName = function(){

    alert(

    this.name);

    }

    Person.prototype.showAge = function(){

    alert(this.age);

    }

    Person.prototype.showJob = function(){

    alert(this.job);

    }

    }

    //先去自己的对象中找showName函数,再去构造函数的原型找

    var Lucy = new Person('lucy',18,'测试鼠');

    //重写自身对象中的方法,不会影响其它对象

    Lucy.showName = function(){

    alert('我的名字是' +

    this.name);

    }

    Lucy.showName();//我的名字是lucy

    var Lily = new Person('lily',19,'市场鸡');

    Lily.showName();//lily

    alert(Lucy.showName == Lily.showName);//false

    call和apply的区别

    二者都可以改变当前的this,区别在于apply方法要将参数放入数组中再传参

    function aa(a,b){

    alert('我的this是' + this + ',我的a是' + a + ',我的b是' + b);

    }

    //我的this是[object Window],我的a是2,我的b是3

    // aa(2,3);

    //我的this是abc,我的a是2,我的b是3

    // aa.call('abc',2,3);

    //我的this是abc,我的a是2,我的b是3

    aa.apply('abc', [2,3]);

    函数的继承

    //父类

    function Fclass(name, age){

    this.name = name;

    this.age = age;

    }

    Fclass.prototype.showName = function(){

    alert(

    this.name);

    }

    Fclass.prototype.showAge = function(){

    alert(this.age);

    }

    //子类

    function Sclass(name, age, job){

    //属性用call或者apply的方式来继承

    Fclass.call(this, name, age);

    this.job = job;

    }

    //方法继承:将父类的一个实例赋值给子类的原型属性

    Sclass.prototype = new Fclass();

    Sclass.prototype.showJob = function(){

    alert(this.job);

    }

    //由于已经继承了父类的属性和方法,所以可以直接调用

    var Driver = new Sclass('tom',18,'老司机');

    Driver.showName();

    Driver.showAge();

    Driver.showJob();

    jquery介绍

    jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

    jQuery的版本分为1.x系列和2.x、3.x系列,1.x系列兼容低版本的浏览器,2.x、3.x系列放弃支持低版本浏览器,目前使用最多的是1.x系列的。

    jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。

    jQuery加载

    $(function(){

    var $div = $('#div');//CSS样式怎么写,这里就怎么写

    //html()方法相当于原生JS的innerHTML

    alert($div.html() + 'jQuery');

    })

    相关文章

      网友评论

          本文标题:2019-06-13

          本文链接:https://www.haomeiwen.com/subject/dfqpfctx.html