美文网首页
JavaScrip--

JavaScrip--

作者: 岸与海 | 来源:发表于2018-09-18 08:09 被阅读0次

多重条件判断语句

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

相关文章

  • JavaScrip--

    多重条件判断语句 数组 数组常用方法 通过标签获取元素 循环语句 去重 字符串处理的方法 字符串反转 定时器弹框 ...

  • Myeclipse 中jQuery代码提示

    第一步、右键项目选择Properties(属性) 第二步、选择Myeclipse-->JavaScrip-->In...

  • JavaScrip--事件

    事件 事件冒泡 事件冒泡 : 当一个元素接收到事件的时候,会把他接收到的所有传播给他的父级,一直到顶层window...

  • JavaScrip-->数组

    数组 在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于...

  • JavaScrip-->Date

    Date 创建 Date 实例用来处理日期和时间。Date 对象基于1970年1月1日(世界标准时间)起的毫秒数。...

  • JavaScrip--事件应用

    事件应用 拖拽 拖拽原理 三大事件 -鼠标和Div的相对距离不变 把拖拽加到document上 如果拖得太快,会移...

  • JavaScrip-->运算符

    运算符 JavaScript中运算符主要用于连接简单表达式,组成一个复杂的表达式。常见的有算数表达式、比较表达式、...

  • JavaScrip-->面向对象编程

    面向对象编程 javascript语言中一切皆为对象! 对象究竟是什么?什么叫面向对象编程? 对象(object)...

  • JavaScrip-->字符串

    字符串 字符串就是零个或多个排在一起的字符,放在单引号或双引号之中。 单引号字符串的内部,可以使用双引号。双引号字...

  • JavaScrip-->数据类型

    数据类型 JavaScript语言的每一个值,都属于某一种数据类型。JavaScript的数据类型,共有六种 数值...

网友评论

      本文标题:JavaScrip--

      本文链接:https://www.haomeiwen.com/subject/owwenftx.html