44

11

内容回顾：
1.DOM
    - 三步走
        （1）获取事件源
        （2）绑定事件
        （3）事件驱动
    - DOM操作
     - 对节点的操作
        - 对标签属性的操作
                getAttribute()
                setAttribute()
                .src
                .alt
                .id
                .className **
            
            
        - 对DOM的创建 销毁的操作(方法) 动态创建的
                （1）创建
                    document.createElement
                    
                （2）父.appendChild(子)
                
                    父.insertBefore('要插入的节点','参考的子节点')
        
        
                （3）销毁
                    父.removeChild(子)
        - 对样式属性的操作
                oDiv.style.cssStyle
                
                
        - 对值的操作
                
            单闭合标签
            <div></div>
            (1)innerText  只是设置文本
            (2)innerHTML  即设置了文本，又渲染了标签
            
            input
            (3)value
            
            
        - 对dom的获取三种方式
            document.getElementById();
            document.getElementsByTagName();
            document.getElementsByClassName();
            
            
        什么是动态页面（数据交互==》 数据驱动视图     ajax     XMLHttpRequest）和静态页面？
        
        http://www.baidu.com/s?wd=luffycity
        
        
        库和框架
        
        库：小而精 js的一部分的功能
        框架： 大而全 全家桶
        
        http://127.0.0.1:8080/home
        
        http://127.0.0.1:8080/course
        
        http://127.0.0.1:8080/home/light-course
        
        
        交互  数据接口(api)
        
        前后端交互非常重要
        
        
        
        {
            status:200,
            data:[
                {key1:},
                {key2:},
                {key3:},
                {key4:},
                {key5:},
                
            ]
        
        }

今日内容:

1.选项卡
    （1）
         
    var olis = document.getElementsByTagName('li');
    var oPs = document.getElementsByTagName('p');

    var i;
    for(i = 0; i < olis.length; i++){


        olis[i].index = i;


        olis[i].onclick = function() {

            for(var j = 0; j < olis.length; j++){
                olis[j].className = '';
                oPs[j].className = ''
            }
            
            this.className = 'active';
             // olis[this.index].className = 'active';


             oPs[this.index].className = 'active';
        }

    }
    (2)
         let olis = document.getElementsByTagName('li');
        let oPs = document.getElementsByTagName('p');

        
        for(let i = 0; i < olis.length; i++){

            olis[i].onclick = function() {
                for(let j = 0; j < olis.length; j++){
                    olis[j].className = '';
                    oPs[j].className = ''
                } 
                this.className = 'active';
                 oPs[i].className = 'active';
            }

        }
2.定时器
    定时器

    （1）一次性定时器
         可以做异步
    （2）循环周期定时器
        可以做动画

        js跟python一样 都有垃圾回收机制

        but 定时器对象 垃圾回收收不回


        开一次性定时器：
        var timer = setTimeout(fn,1000);
        开循环定时器
        setInterval(fn,1000);


        clearTimeout()
        clearInterval()
        
      /*
        var timer = null;
        document.getElementById('start').onclick = function() {
            
            // 未来 数据交互的时候 如果数据阻塞了，可以考虑 加一个一次性定时器来处理
            timer  = setTimeout(function(){
                console.log(1111);
            },3000);
            console.log(2222);

        }
        document.getElementById('clear').onclick = function() {
            clearTimeout(timer);
        }
        */
        var count = 0;
        var timer = null;
        document.getElementById('start').onclick = function() {

            var oDiv = document.getElementById('box');
            clearInterval(timer);
            
            timer = setInterval(function() {
                count+=10;

                oDiv.style.marginLeft = count + 'px';
                
            }, 50)

        }


3.js面向对象
        //使用Object()内置的构造函数来创建对象


        // new Array()
        // []

        /*
        var person = new Object();

        person.name = 'alex';

        person.age = 18;

        person.fav = function() {
            
            alert(this.name);
        }
        person.fav();
        */
        /*
        // 1.字面量方式创建对象
        var person = {
            name:'玖妖',
            age:18,
            fav:function() {
                alert(this.name)
            }
        };

        person.fav();
        */

        //2.工厂模式创建
        function createPerson(){
            var person = new Object();
            person.name = 'alex';

            person.age = 18;

            person.fav = function() {
                
                alert(this.name);
            }
            return person;
        }


        
        function createFruit(){
            var fruit = new Object();
            fruit.name = 'alex';

            fruit.age = 18;

            fruit.fav = function() {
                
                alert(this.name);
            }
            return fruit;
        }
        var p1 = createPerson();
        var f1 = createFruit();

        console.log(p1 instanceof Object);
        console.log(f1 instanceof Object);
        
        
        //3.自定义构造函数
        function Person(name,age) {
            
            this.name = name;
            this.age = age;
            this.fav = function() {
                alert(this.name);
            }
        }

        function Fruit(name,age) {
            
            this.name = name;
            this.age = age;
            this.fav = function() {
                alert(this.name);
            }
        }
        var p1 = new Person('alex',17);
        var f1 = new Fruit('wusir',19);
        console.log(p1 instanceof Object);
        console.log(f1 instanceof Object);
        console.log(p1 instanceof Person);
        console.log(f1 instanceof Fruit);
        
        
        //4.原型对象创建对象
        function Person(name,age) {
            this.name = name;
            this.age = age;             
        }
        // Person.prototype 它是person的父类


        // 原型 prototype
        Person.prototype.showName = function() {
            // this指的是person
            console.log(this.name)
        }
        var p1 = new Person('alex',18);
        console.log(p1);
        p1.showName();


4.BOM
    本地信息对象
    window.location
    window.open()方法