构造函数及jQuery基础

1. 闭包存循环索引

window.onload = function () {
            var a = document.getElementsByTagName("li");
            // alert(a.length)
            for (var i = 0; i < a.length; i++) {
                (function (i) {
                    a[i].onclick = function () {
                        alert(i)
                    }
                })(i)
            }
        }

  //如果直接写不用闭包则结果会循环很快，结果只会是最后一个值

2. 面向对象

2.1 单体创建对象

var Tom = {
            name: 'tom',
            age: 18,
            showname: function () {
                alert('我的名字叫' + this.name);
            },
            showage: function () {
                alert('我今年' + this.age + '岁');
            }
        }
        Tom.showage();
        alert(Tom.age)

2.2 工厂模式

 function Person(name, age, job) {
            var o = new Object();
            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; //必须有return
        }

        var tom = Person('tom', 18, '程序员');//直接调用函数
        alert(tom.job)

        tom.showname();

3. 构造函数

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)
            }
            //不必须有return
        }
        var jack = new Person("jack", 22, "攻城狮");//实例化注意和面向对象中工厂的区别
        // var tom = new Person('tom', 22, '程序员');
        // jack.showjob()
        // alert(jack.name==tom.name)
        function aa(a,b) {
            alert(this+" "+a+" "+b)
        }
        aa(1,2)
        aa.call("abf",1,2)//更改this值
        aa.apply("abf",[2,3])//更改this值

4. 继承

  function Father(name, age) {
            this.name = name;
            this.age = age;
        }
        Father.prototype.showname = function () {
            alert(this.name)
        };
        Father.prototype.showage = function () {
            alert(this.age)
        };

        //子类
        function Son(name, age, job) {
            Father.call(this, name, age);//属性继承
            this.job = job
        }
        //方法继承
        Son.prototype=new Father();
        Son.prototype.showjob = function () {
            alert(this.job)
        };
        var jack = new Son("jack", 18, '程序猿');
        jack.showname();
        jack.showage();
        jack.showjob();


        //不必须有return

5.jQuery部分选择器

 $("#div1").next().css({//下一个元素
        color: 'red'
    })
    $("#div1").nextAll().css({//也可以选择特定的元素如：$("#div1").nextAll('p')
        background:'aqua'
    })
    $("#span1").parent().css({
        width:'100px',
        backgroundColor:'red',
        fontSize:'30px'
    })
    $("#two").closest('div').css({//祖先
        background:'gold'
    })
    $(".list").children().css({
        background:'green'
    })
    .end().css({
        background:'red'
    })
    $(".list2 li:eq(2)").css({
        background:'black'
    })
    .siblings().css({//选择同级兄弟元素
        background:'red'
    })
    $(".div2").find("#link1").css({
        background:'gold'
    })

6. 增删样式

 // alert($(".box1").css('font-size'))
    $(".box1").css({
        background:'gold'
    })
    $(".box1").addClass('big')
    $(".box1").removeClass('box1')

7. 点击事件

 $(function () {
            $("#btn").click(function () {
                $(".box1").toggleClass('sty')//切换样式
            })
        })

8. 获取索引值