前端-JavaScript基础知识（二）

每日分享：

你的心要大，这样看到的世界才会大。不要因为别人的一句话，就丢了一天的快乐，不值得。

目录：

1. 条件语句
2. 获取标签元素
3. 标签属性的获取和设置
4. 数组及操作方法
5. 循环语句
6. 字符串的拼接
7. 定时器

一、条件语句

条件语句就是通过条件来控制程序的走向

1. 条件语句语法

1. if 语句-只有当指定条件为true时，使用该语句来执行代码
2. if...else 语句-当条件为true时执行代码，当条件为false时执行其他代码
3. if...else if...else 语句-使用该语句来判断多条件，执行条件成立的语句

2. 比较运算符

让 x = 5；

比较运算符描述例子==等于x == 6为false===全等（值和类型）x === 5为true；x === "5"为false!=不等于x != 8 为true>大于x > 6 为false=大于或等于x >= 5 为true 获取标签对象

var 变量名 = 标签对象.属性名；->读取属性

标签对象.属性名 = 新属性值; ->设置属性

2. innerHTML

innerHTML可以读取或者设置标签包裹的内容

    
    
    
    Document
    
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            alert(oDiv.innerHTML);
            // 将div中的内容改为一个a标签
            oDiv.innerHTML = '百度';
        }
    


    

        我就是div的包裹的内容
    

结果：

 

四、数组及操作方法 1. 数组的介绍

数组就是一组数据的集合，js中数组里面的数据可以是不同类型的数据，与python中的列表类似

2. 数组的定义及操作 2.1 数组的定义（两种方法）

// 定义数组，用new要注意后面是小括号

        var aArray1 = new Array(1, 2, 3);

// 直接赋值一个数组，数组的表现形式是一对中括号

        var aArray2 = [4, 5, 6];

2.2 多维数组

多维数组就是数组的成员也是数组

// 多维数组

        var aArray3 = [[1, 2, 3], [4, 5, 6]];

2.3 数组的操作

1. 获取数组的长度

// 获取数组长度

        alert(aArray4.length);

2. 根据下标取值

// 根据下标取值,js中的数组不允许负值下标

        alert(aArray4[1]);

3. 在数组最后添加和删除数据

// 追加数据：push，不支持下标追加

        aArray4.push('hello');

        console.log(aArray4);

// 删除最后一个元素，这里pop不支持下标删除

        var aArray5 = [3, 5, 7];

        aArray5.pop();

        console.log(aArray5);

4. 修改数据

// 根据下标修改数据

        aArray4[2] = 90;

5. 根据下标添加和删除

array.splice(start，num，element1，......，elementN)

参数解释：

1. start：必填，开始删除的索引
2. num：选填，删除元素的个数
3. elementN：选填，在索引位置前插入的元素

array.splice(1)：表示从第二个元素开始（包括第二个）到最后一个元素都删除

// 插入数据splice：参数：开始删除的索引 删除的个数 插入的数据
        var aArray6 = [2, 4, 8];
        // 删除个数为0，且有第三个参数就是插入
        // 在第二个元素前面插入数据‘你好’
        aArray6.splice(1, 0, '你好');
        // 删除数据splice
        var aArray7 = [5, 7, 9];
        // 从第二个元素开始删除两个数据
        aArray7.splice(1, 2);
        console.log(aArray7);
        // 添加多个数据
        var aArray8 = [0, 1, 2];
        // 第二个元素前面加元素‘你好’，‘js’
        aArray8.splice(1, 0, '你好', 'js');
        console.log(aArray8);

总体代码：

    
    
    
    Document
    
        // 定义数组，用new要注意后面是小括号
        var aArray1 = new Array(1, 2, 3);
        console.log(aArray1);
        // 直接赋值一个数组，数组的表现形式是一对中括号
        var aArray2 = [4, 5, 6];
        console.log(aArray2);
        // 多维数组
        var aArray3 = [[1, 2, 3], [4, 5, 6]];
        console.log(aArray3);
        // 根据下标获取数据
        alert(aArray3[0][2]);
        var aArray4 = [7, 8, 9];
        // 获取数组长度
        alert(aArray4.length);
        // 根据下标取值,js中的数组不允许负值下标
        alert(aArray4[1]);
        // 根据下标修改数据
        aArray4[2] = 90;
        console.log(aArray4);
        // 追加数据：push，不支持下标追加
        aArray4.push('hello');
        console.log(aArray4);
        // 对同一个数组进行追加操作-终端输出和删除操作-终端输出，会发现两次输出的数组一样，这说明js是先完成操作再取值（如果用alert弹窗则不会这样）
        // 删除最后一个元素，这里pop不支持下标删除
        var aArray5 = [3, 5, 7];
        aArray5.pop();
        console.log(aArray5);
        // 插入数据splice：参数：开始删除的索引 删除的个数 插入的数据
        var aArray6 = [2, 4, 8];
        // 删除个数为0，且有第三个参数就是插入
        // 在第二个元素前面插入数据‘你好’
        aArray6.splice(1, 0, '你好');
        // 删除数据splice
        var aArray7 = [5, 7, 9];
        // 从第二个元素开始删除两个数据
        aArray7.splice(1, 2);
        console.log(aArray7);
        // 添加多个数据
        var aArray8 = [0, 1, 2];
        // 第二个元素前面加元素‘你好’，‘js’
        aArray8.splice(1, 0, '你好', 'js');
        console.log(aArray8);
        // var aArray = [0, 1, 2];
        // aArray.splice(1);
        // console.log(aArray);
    


    

结果：

 

 

 

• 数组的定义：使用一对中括号（或者用new方法）
• 获取数组长度：length属性
• 在数组最后添加：push方法
• 在数组最后删除：pop方法
• 根据下标添加和删除：splice方法

五、循环语句

学到这发现，这不就和c语言的循环一毛一样嘛，js有类似c语言的定义变量、判断语句、循环语句、函数定义使用；但它的数组还和c不一样，而是类似于python的列表。

循环分为三种写法：

• for
• while
• do-while

代码例：

    
    
    
    Document
    
        var aArray = [1, 2, 3, 4];

        for(var index = 0; index < aArray.length; index++){
            alert(aArray[index]);
        }

        var index = 0;
        while(index < aArray.length){
            alert(aArray[index]);
            index++;
        }
        // 不同的是，do-while语句即使条件不成立也会执行一次（因为它是先执行do里面的语句，后在进行判断）
        var index = 0;
        do{
            alert(aArray[index]);
            index++;
        }while(index < aArray.length);
    


    

六、字符串的拼接

字符串的拼接是用 + 这个符号

代码例：

    
    
    
    Document
    
        var iNum = 10;
        var sStr1 = '张三';
        var sStr2 = '法外狂徒';

        alert(sStr2 + sStr1);
        // 字符串和数字可以直接拼接，它会帮你将数字转化为字符串
        alert(sStr1 + iNum);
    


    

结果：

 

 七、定时器

定时器就是在一段特定的时间后执行某段程序代码

有两种定时器：

1. setTimeout(function，delay，param1，param2......)：以指定的时间间隔（毫秒计算）调用一次函数的定时器
2. setInterval(function，delay，param1，param2......)：以指定的时间间隔（毫秒计算）重复调用函数的定时器

参数说明：

• function：表示定时器要执行的函数名
• delay：表示时间间隔，默认是0，以毫秒为单位
• param1：表示定时器执行函数的第一个参数

setTimeout应用代码示例：

// 定时器：根据指定的时间间隔延时调用指定的函数
        function fnShow(name, age){
            alert(name + age);
            alert(tid);
            // 销毁定时器
            clearTimeout(tid);
        }
        // 定义定时器，会把定时器的编号返回，从1开始
        // setTimeout调用一次函数
        var tid = setTimeout(fnShow, 2000, '张三', 18);

setInterval应用代码示例：

    
    
    
    Document
    
        function fnShowInfo(name, age){
            alert(name + age);
        }

        function fnStop(){
            alert(tid);
            // 销毁定时器
            clearInterval(tid);
        }

        var tid = setInterval(fnShowInfo, 2000, '李四', 20);
    


    

定时器不用了要清除定时器

• clearTimeout(timeoutID)清除只执行一次的定时器（对应setTimeout函数）
• clearInterval(timeoutID)清除重复执行的定时器（对应setInterval函数）

timeoutID：为计时器编号（也就是定义计时器的返回值）