JavaScrip--

多重条件判断语句

if语句
            语法三：
                if(条件表达式){
                    语句...
                }else if(条件表达式){
                    语句...
                }else if(条件表达式){
                    语句...
                }else{
                    语句...
                }
        
                if...else if...else
                    当该语句执行时，会从上到下依次对条件表达式进行求值判断
                    如果值为true，则执行当前语句。
                    如果值为false，则继续向下判断。
                    如果所有的条件都不满足，则执行最后一个else后的语句
                    该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束语句
         */

        /*
        条件分支语句也叫switch语句
            语法：
                switch(条件表达式){
                    case 表达式:
                        语句...
                        break;
                case 表达式:
                        语句...
                        break;
                    default:
                        语句...
                        break;
                }
        
            执行流程：
                switch...case..语句
                在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较，
                    如果比较结果为true，则从当前case处开始执行代码。
                        当前case后的所有的代码都会执行，我们可以在case的后边跟着一个break关键字，
                        这样可以确保只会执行当前case后的语句，而不会执行其他的case
                    如果比较结果为false，则继续向下比较
                    如果所有的比较结果都为false，则只执行default后的语句
        
            switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，同样使用if也可以实现switch的功能，所以我们使用时，可以根据自己的习惯选择。
        */
        var today = 4;
        // if(today == 1){
        //  alert('语文');
        // }else if(today == 2){
        //  alert('数学');
        // }else if(today == 3){
        //  alert('英语');
        // }else if(today == 4){
        //  alert('美术');
        // }else if(today == 5){
        //  alert('舞蹈');
        // }else{
        //  alert('不补习');
        // }

        switch(today){
            case 1:
                alert('语文');
                break;//结束整个switch语句
            case 2:
                alert('数学');
                break;
            case 3:
                alert('英语');
                break;
            case 4:
                alert('美术');
                break;
            case 5:
                alert('舞蹈');
                break;
            default:
                alert('不补习');
                break;//最后一个default可以不写break，但建议写上
        }

数组

//面向对象的方式创建
        var aRr01 = new Array(1,2,3,'abc');
        //直接创建
        var aRr02 = [1,2,3,'def'];//推荐使用，性能更高

        //获取数组的成员数量（长度）
        // alert(aRr02.length);//弹出4
        // alert(aRr02[3]);//弹出cdf

        var aRr03 = [[1,2,3],['a','b','c','d'],[true,false]];
        // alert(aRr03.length);//弹出3
        // alert(aRr03[1].length);//弹出3
        alert(aRr03[1][2]);//弹出c

数组常用方法

var aRr = [1,2,3,4];
        //用-连接数组元素并转为字符串
        //var sTr = aRr.join("-");//用-连接数组元素并转为字符串，弹出1-2-3-4

        // var sTr = aRr.join('');//用空串连接
        // alert(sTr);//弹出1234

        //向数组最后追加元素
        // aRr.push(5);
        // alert(aRr);//1,2,3,4,5

        //删除末尾元素
        // aRr.pop();
        // alert(aRr);//1,2,3

        //向最前面插入元素0
        // aRr.unshift(0);
        // alert(aRr);//0,1,2,3,4

        //删除第一个（索引为0的）元素
        // aRr.shift();
        // alert(aRr);//2,3,4

        //反转
        // aRr.reverse();
        // alert(aRr);//4,3,2,1

        //查找字母'b'第一次出现的索引
        var aRr2 = ['a','b','c','d','a','b','c','d'];
        var num = aRr2.indexOf('b');
        // alert(num);//1

        //从第2索引元素开始，删除1个元素
        // aRr2.splice(2,1);//删除c
        // alert(aRr2);//a,b,d,a,b,c,d

        //从第2索引元素开始，删除1个元素，再插入e
        // aRr2.splice(2,1,'e');//把c替换成e
        // alert(aRr2);//a,b,e,d,a,b,c,d

        //删除后面的abcd，改为fghi
        aRr2.splice(4,4,'f','g','h','i');
        alert(aRr2);//a,b,c,d,f,g,h,i

通过标签获取元素

window.onload = function(){
            // //获取页面上所有的li
            // var aLi = document.getElementsByTagName('li');

            //获取id为list01的ul
            var oList = document.getElementById('list01');
            //再获取这个ul下的所有li
            var aLi = oList.getElementsByTagName('li');
            alert(aLi.length);//8
            // aLi.pop();//错误用法，aLi是一个类似数组的选择集，没有数组通用的一些方法

            aLi[0].style.backgroundColor = 'gold';
            aLi[1].style.backgroundColor = 'gold';
        }

循环语句

循环语句：
            通过循环语句可以反复的执行一段代码多次
        
        while循环
            - 语法：
                while(条件表达式){
                    语句...
                }
        
            - while语句在执行时，
                先对条件表达式进行求值判断，
                    如果值为true，则执行循环体，
                        循环体执行完毕以后，继续对表达式进行判断
                        如果为true，则继续执行循环体，以此类推
                    如果值为false，则终止循环
        
        do...while循环
            - 语法：
                do{
                    语句...
                }while(条件表达式)
        
            - 执行流程：
                do...while语句在执行时，会先执行循环体，
                    循环体执行完毕以后，在对while后的条件表达式进行判断，
                    如果结果为true，则继续执行循环体，执行完毕继续判断以此类推
                    如果结果为false，则终止循环
        
                实际上这两个语句功能类似，不同的是while是先判断后执行，
                    而do...while会先执行后判断，
                do...while可以保证循环体至少执行一次，
                    而while不能

        for语句，也是一个循环语句，也称为for循环
            在for循环中，为我们提供了专门的位置用来放三个表达式：
                1.初始化表达式
                2.条件表达式
                3.更新表达式
        
        for循环的语法：
                for(①初始化表达式;②条件表达式;④更新表达式){
                    ③语句...
                }
        
                for循环的执行流程：
                    ①执行初始化表达式，初始化变量（初始化表达式只会执行一次）
                    ②执行条件表达式，判断是否执行循环。
                        如果为true，则执行循环③
                        如果为false，终止循环
                    ④执行更新表达式，更新表达式执行完毕继续重复②

        任意一种循环都可以互相嵌套
        */
        window.onload = function(){
            var oList = document.getElementById('list01');
            var aLi = oList.getElementsByTagName('li');
            /*for (var i = 0; i < aLi.length; i++) {
                if(i % 2 == 0){
                    aLi[i].style.background = 'gold';
                }
            }*/

            /*for(var j in aLi){
                aLi[j].style.background = 'red';
            }*/

            //创建一个循环，往往需要三个步骤
            //1.创初始化一个变量
            var j = 0;
            //2.在循环中设置一个条件表达式
            /*while(j < aLi.length){
                aLi[j].style.background = 'gold';
                //3.定义一个更新表达式，每次更新初始化变量
                j++;
            }*/

            do{
                aLi[j].style.background = 'gold';
                j++;
            }while(j < 0)

            /*
            以下是死循环的写法
            像这种将条件表达式写死为true的循环，叫做死循环
            该循环不会停止，除非浏览器关闭，死循环在开发中慎用
            可以使用break，来终止循环
            */
            /*while(true){
                if(j>10){
                    break;//退出整个循环
                }
                j++;
            }
            //for循环的死循环写法
            for(;;){

            }*/

            /*
            break关键字可以用来退出switch或循环语句
                不能在if语句中使用break和continue
                break关键字，会立即终止离他最近的那个循环语句
            continue关键字可以用来跳过当次循环
                同样continue也是默认只会对离他最近的循环循环起作用
             */
            /*
            可以为循环语句创建一个label，来标识当前的循环
                label:循环语句
            使用break语句时，可以在break后跟着一个label，
                这样break将会结束指定的循环，而不是最近的
             */

            outer:
            for(var i=0 ; i<5 ; i++){
                console.log("@外层循环"+i);
                for(var j=0 ; j<5; j++){
                    console.log("内层循环:"+j);
                    break outer

去重

var aRr = [1,3,4,1,6,9,1,2,5,3,1,6,5,4,4];
        var aRr2 = [];

        for(var i=0; i<aRr.length; i++){
            //判断元素第一次出现的位置，恰好是当前索引时，就将元素放入新数组
            if(aRr.indexOf(aRr[i]) == i){
                aRr2.push(aRr[i]);
            }
        }

        alert(aRr2);//1,3,4,6,9,2,5

字符串处理的方法

/*字符串切断转成数组*/
        var sTr = '2018-06-20';
        var aRr = sTr.split('-');
        // alert(aRr);//2018,06,20
        // console.log(aRr);

        var aRr2 = sTr.split('');
        // console.log(aRr2);

        /*实际上就是修改了<title>标签的内容*/
        // document.title = aRr2;

        var sTr2 = '#div1';
        var sTr3 = '.div1';

        /*获取指定索引的字符*/
        var sTr4 = sTr2.charAt(0);
        if(sTr4 == '#'){
            // alert('id选择器');
        }

        /*查看子串第一次出现的位置*/
        var sTr5 = 'Microsoft Yahei';
        var num = sTr5.indexOf('Yahei');
        // alert(num);//10

        var num2 = sTr5.indexOf('xihei');
        // alert(num2);//没有找到就弹出-1

        /*substring截取子串*/
        //从10开始，截到15（包括开始位置，不包括结束位置）
        // var sTr6 = sTr5.substring(10,15);//Yahei
        //从10开始截取到末尾
        var sTr6 = sTr5.substring(10);//Yahei
        // alert(sTr6);

        /*全部转为大写字母*/
        // alert(sTr6.toUpperCase());//YAHEI
        /*全部转为小写字母*/
        alert(sTr6.toLowerCase());//yahei

字符串反转

var sTr = "123asdf79888asdfe21";
        //1、split字符串转成数组
        //2、reverse数组反转
        //3、join数组转成字符串
        var sTr2 = sTr.split('').reverse().join('');
        alert(sTr2);//12efdsa88897fdsa321

定时器弹框

.pop{
            width: 400px;
            height: 300px;
            background-color: #fff;
            border: 1px solid #000;
            /*固定定位*/
            position: fixed;
            /*左上角位于页面中心*/
            left: 50%;
            top: 50%;
            /*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/
            margin-left: -200px;
            margin-top: -150px;
            /*弹窗在最上面*/
            z-index: 9999;
        }
        /*遮罩样式*/
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #000;
            left: 0;
            top: 0;
            /*设置透明度30%*/
            opacity: 0.3;
            filter: alpha(opacity=30);/*兼容IE6、7、8*/
            /*遮罩在弹窗的下面，在网页所有内容的上面*/
            z-index: 9990;
        }
        .pop_con{
            display: none;/*默认不显示，用定时器显示*/
        }
    </style>
    <script type="text/javascript">
        /*
        setTimeout      只执行一次的定时器
        clearTimeout    关闭只执行一次的定时器
        setInterval     反复执行的定时器
        clearInterval   关闭反复执行的定时器
        */

        window.onload = function(){
            var oPop = document.getElementById('pop');
            var oShut = document.getElementById('shutOff');

            /*setTimeout(showPop, 3000);//开启定时器，3秒后调用函数showPop()弹框

            function showPop(){
                oPop.style.display = 'block';//显示弹框和遮罩
            }*/
            //开启定时器的简写方式：调用匿名函数
            setTimeout(function(){
                oPop.style.display = 'block';
            }, 3000);

            oShut.onclick = function(){
                oPop.style.display = 'none';//关闭弹框和遮罩
            }
        }

变量的作用域

局变量：函数外部定义的变量，函数内部和外部都可以访问，它的值可以共享

        局部变量：函数内部定义的变量，函数内部可以访问，外部无法访问。函数内部访问变量时，先在内部查找是否有此变量，如果有，就使用内部变量，如果没有，就去外部查找

        函数内部如果不用'var'关键字定义变量，变量可能会变成全局变量，如果用严格模式解析会报错
        */
        var a = 12;

        function aa(){
            // var a = 5;
            var b = 7;

            // alert(a);
        }

        // alert(a);
        // alert(b);//报错

        aa();

封闭函数

/*原来的写法
        function myAlert(){
            var str = '欢迎访问我的主页';
            alert(str);
        }

        myAlert();*/

        var str = function(){
            alert('test');
        }
        
        //封闭函数的一般写法
        //封闭函数定义：(function(){……})()
        /*
        ;;(function(){
            var str = '欢迎访问我的主页';
            alert(str);
        })();//最后的()表示马上执行
        */

        //封闭函数其他的写法：在匿名函数前加“！”或者“~”，之后加“()”
        ~function(){
            var str = '欢迎访问我的主页';
            alert(str);
        }();

用变量的方式定义函数

原来的写法：可以提前
        myAlert();

        function myAlert(){
            alert('hello!');
        }*/

        //函数用变量方式定义：先定义再使用
        // myalert();//提前会报错
        var myAlert = function(){
            alert('hello!');
        }

        myAlert();//放在下面可以执行

闭包

闭包的本质就是函数嵌套，就是在函数里面定义函数，
内部函数可以引用外部函数的参数和变量
参数和变量不会被垃圾回收机制给回收
闭包的用途：可以存循环的索引值、做私有变量计数器

闭包的一般写法
        function aa(b){
            var a = 12;

            function bb(){
                alert(a);
                alert(b);
            }

            return bb;
        }

        var cc = aa(24);

闭包的封闭函数写法
        var cc = (function(b){
            var a = 12;

            function bb(){
                alert(a);
                alert(b);
            }

            return bb;
        })(24);

        cc();

只能调用一次的闭包
        (function(b){
            var a = 12;

            function bb(){
                alert(a);
                alert(b);
            }

            return bb;
        })(24)();

闭包做选项卡

.btns{
            width: 500px;
            height: 50px;
        }
        /*选项卡的样式*/
        .btns input{
            width: 100px;
            height: 50px;
            background-color: #ddd;/*默认灰色*/
            color: #666;
            border: 0px;
        }
        /*被选中的选项卡的样式*/
        .btns input.cur{
            background-color: gold;
        }
        /*内容区的样式*/
        .contents div{
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;/*默认隐藏*/
            line-height: 300px;
            text-align: center;
        }
        /*被选中的内容区的样式*/
        .contents div.active{
            display: block;

获取地址栏参数

window.onload = function(){
            //url？aa=tom#12
            var data = window.location.search;//？aa=tom
            var hash = window.location.hash;//#12
            alert(hash);//#12

            var oSpan = document.getElementById('span01');
            // alert(data);//？aa=tom

            var arr = data.split('=');
            // alert(arr);//?aa,tom

            var name = arr[1];
            oSpan.innerHTML = name;
        }

单体创建对象

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

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