单体创建对象,工厂模式,构造函数,原型模式,call和apply,函数的继承,新增选择器,jQuery加载,jQuery选择器,jQuery样式操作,点击事件,索引值与选项卡

单体:

var ton = {

name:'tom',

age:18,

showName:functionn(){

alert(this.name);},

showAge:function(){

alert(this.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();

构造函数:

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);

}

}

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

Bob.showJob();

原型模式:

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);

}

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

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

call 和 apply 的区别;

function aa(a,b){

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

}

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

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

改变当前的this区别在于apply方法要将参数放到数组里在传参

函数的继承:

        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) {

            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,'老司机');


新增选择器:

document.querySelector('id')

document.querySelectorAll('class')

jquery加载:

        $(document).ready(function () {

            var $div = $('#div');

            alert('Jquery' + div.innerHTML)

        })

        $(function () {

            var $div = $('#div');

            alert('Jquery' + div.innerHTML)

        })

jquery选择器:

        $(function () {

            $('#div1').css({

                color:'pink'

            });;

            $('.box').css({

                fontSize:'15px'

            });;

            $('.list li').css({

                backgroundColor:'green',

                color:'#fff',

                fontSize:'20px',

                marginBottom:'10px'

            });

            $('#div1').next().css({//class为div1的下一个元素

            });

            $('#div1').nextAll('p').css({//div1后边所有的p元素

            });

            $('#div1').parent().css({//转移到父元素身上

            });

              $('#div1').closest('div').css({//选择离自己最近的div祖先元素

            })

        })

jquery样式操作:

        $(function () {

            alert($('div1').css('fontSize'));//读取属性

            $('div1').addClass('big');//添加类 .removeClass删除样式

        })

点击事件:

        $(function () {

            $('#btn').click(function () {//点击后执行里边代码

                $('.box').toggleClass('sty');//toggleclass box的class里有sty就删除。没有就添加

            })

        })

索引值:

        $(function () {

            $('.list li').click(function () {

                // alert(this.innerHTML);

                alert($(this).index())//获取索引值

            })

        })

选项卡:

        $(function () {

            $('#btns input').click(function () {

                $(this).addClass('cur').siblings().removeClass('cur');//sibings选中所有的兄弟元素 然后移除行间样式

                $('#contents  div').eq($(this).index()).addClass('active').siblings().removeClass('active')

          //.eq($(this).index())索引值等于点击的div .addClass('active')添加激活样式.siblings().removeClass('active')其他兄弟移除样式

            })

        })

你可能感兴趣的:(单体创建对象,工厂模式,构造函数,原型模式,call和apply,函数的继承,新增选择器,jQuery加载,jQuery选择器,jQuery样式操作,点击事件,索引值与选项卡)