【javaScript常识中常识】JavaScript的第一次认识

1-操作classList

    <div id="beizi" class="wei mou"></div>
    <script>
        var beizi=document.getElementById('beizi');
        console.log(beizi.className);
        console.log(beizi.classList);
        beizi.classList.add('lobe'); //增加一个class
        beizi.classList.remove('mou'); //擅长一个class
        console.log(beizi.classList);
        beizi.classList.replace('wei','xinleiyo'); //把已有的class换成没有的class
        console.log(beizi.classList);
        console.log(beizi.classList.contains('xinleiyo')); // true

2-for-in语句

        var mao={'xin':"xin1",'heig':'heig1','you':22}
        for(var m in mao){console.log(m);} // xin heig you
        for(var m in mao){console.log(mao[m]);} // xin1 heig1 22
        // ====================== 
        var xiu=['love',8,true,undefined];
        for(var i in xiu){console.log(i);} // 0 1 2 3
        for(var i in xiu){console.log(xiu[i]);} // love 8 true undefined

3-function的声明

        // 函数声明及函数表达式
        function fn(){alert('函数声明');} // 函数声明
        fn();  // 函数调用
        var fn2=function(){alert('函数表达式');} 
        fn2(); //函数调用
        // 函数调用方式：事件调用、非事件调用
        // docum.onclick=function(){} //事件调用
        // arguments用于获取函数实参
        function fn3(){console.log(arguments);}
        fn3(1,3,4,6,9); // 1 3 4 6 9

4-作用域

        // 作用域：全局作用域、函数作用域、块级作用域
        // 作用域链：近水楼台先得月，由近及远，直到window
        // function fn(a){
        //     console.log(a);
        //     function a(){};
        //     var a=5;
        // }
        // fn(88); // f a(){} 为什么？？？因为发生了预解析
        // 变量和函数的声明会提升

5-闭包

        // 闭包：一个函数内嵌套一个子函数，子函数可以调用父函数的局部作用域，形成闭包
        // 闭包-官方：一个函数调用另一个函数的局部变量
        function fn(){
            var a=1;
            function fn2(){
                a++;
                console.log(a);
            }
            fn2();
        }
        fn(); //2

闭包的使用_如何获取一组元素的下标

        var ali=document.getElementsByTagName('li');
        // 1 自定义属性
        // for(var i=0;i<ali.length;i++){
        //     ali[i].index=i;
        //     ali[i].onclick=function(){
        //         alert(this.index);
        //     }
        // }
        // 2 闭包
        for(var i=0;i<ali.length;i++){
            (function(index){
                console.log(index);
                ali[index].onclick=function(){
                    alert(index);
                }
            })(i)
        }

6-函数的this指向及改变

函数的this指向：非事件函数指向window，事件函数指向事件对象本体 <br>
改变函数的this指向有3个方法：call、bind、apply <br>
call和apply只是传递参数形式不同，会立即调用函数 <br>
bind生成一个新函数,改变的是新函数的this指向

        // function fn(){alert(this);}
        // fn();
        // document.onclick=function(){
        //     alert(this);
        // }
        // function fn2(a){
        //     a+=3;
        //     console.log(this);
        //     console.log(a);
        // }
        // fn2(3); // window 6
        
        call
        // fn2.call(document.body,5); // body 8
        
        apply
        // function fn3(){
        //     console.log(arguments);
        //     console.log(this);
        // }
        // fn3(8,3); // 8 3 window
        // fn3.apply(document.body,[8,3,2]) // 8 3 2 body
        
        bind
        function fn4(){
            console.log(arguments);
            console.log(this);
        }
        var newfn4=fn4.bind(document);
        newfn4(); // document
        console.log(typeof newfn4); // function
        console.log((fn4==newfn4)); // false
        fn4.bind(document.body)(3,5,9); // 3 5 9 body