JavaScript（一）

天才小楼楼

已于 2023-08-28 22:34:33 修改

阅读量231

点赞数

分类专栏：前端文章标签：前端 javascript vue.js

于 2023-02-20 10:07:59 首次发布

本文链接：https://blog.csdn.net/sinat_29214327/article/details/129119186

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、js编写格式

1.1、在html代码中，js代码一般写在<script> 标签内

    <!--  script标签存放JS代码  -->
    <script type="text/javascript">
        /*
        控制浏览器弹出一个警告框，"警告框"
        alert("警告框")
        */
        /*
        计算机在"当前浏览器页面"中输出一个内容"sudada"，就是向<body>内写一个内容：<body>"sudada"</body>
        代码：document.write("sudada")
        */
        /*
        向控制台"Console"输出内容
        console.log("日志输出")
        */
        /*js代码的执行顺序时从上到下，依次执行*/
        // alert("警告框")
        // document.write("sudada")
        // console.log("日志输出")
    </script>

1.2、在html代码中，也可以把js代码写在标签的属性内（不推荐这么使用）

<body>
    <!--  js代码可以写在标签的属性中，属于结构和行为的耦合，不方便维护，不推荐使用  -->
    <!--  可以将js代码写到标签onclick属性中  -->
    <button onclick="alert('点击弹窗')">点击按钮</button>
    <!--  可以将js代码写到超链接属性中  -->
    <a href="javascript:alert('点击弹窗')">超链接地址</a>
</body>

1.3、可以直接写一个xxx.js文件，专门存放js代码逻辑，然后引入使用（推荐使用）

<!--  script标签如果引入了外部的js文件，那么在标签内就不能在编写js代码了，写了不会被执行  -->
<script type="application/javascript" src="01.js"></script>

<!--  可以在写一个script标签，单独写js代码  -->
<script type="application/javascript">
    alert("js文件的代码")
</script>

1.4、js代码注释格式

    <script type="application/javascript">
        /*
        多行注释
        */
        
        //   单行注释 
    </script>

二、js语法

2.1、基本语法

1.js中严格区分大小写

2.js每一条语句以;(分号)结尾

3.js会忽略多个空格和换行，可以利用空格和换行对代码做格式化

2.2、变量

在js中使用 "var name=xxx" 这种方式定义/声明变量（首次声明一个变量A需要使用var关键字，后续再对变量A做修改时，不需要再使用var关键字了）。

// 第一次定义变量时，使用关键字 var
var name = "zhangsan";
var age = 19;

// 同时定义多个变量，用"逗号"分开
var name = "zhangsan", age = 19;

// 再次给相同的变量重新赋值时，就不需要使用 var 了
name = 'wangwu';
age = 19;

2.3、标识符（变量名，函数名，属性名都属于标识符）

标识符命名规则：

1.标识符里面可以包含：字母，数字，下划线，$符号

2.标识符不能以"数字开头"

3.标识符不能以"js关键字"命名：break、else、new、var、 case、 finally 、 return、 void 、 catch 、for 、switch 、 while 、 continue、 function 、this 、 with 、default 、 if 、 throw 、 delete 、 in 、 try 、do 、 instranceof、 typeof

4.标识符命名：驼峰体

三、JS数据类型

3.1、String 字符串（基本数据类型）

使用 "双引号" 或 '单引号' 引起来

var Name="zhangsan";
var Name='zhangsan';

使用 \ 作为转译字符

var msg = "aa\"bbb\"cc";

\n 换行

\t tab键

\\ 打印\时，需要双\转译

3.2、Number 数字（基本数据类型）

1.使用 typeof 查看一个变量的类型

    <script type="application/javascript">
        var a = 123;
        console.log(a)
        var b='123'
        console.log(b)
        // 使用 typeof 查看一个变量的类型
        console.log(typeof a)  // 返回：number
        console.log(typeof b)  // 返回：string
    </script>

2.JS的最大数字和最小数字(小数)上限

    <script type="application/javascript">
        // JS中可以表示的最大数字（1.7976931348623157e+308）1xxx，如果超过了这个值，则返回Infinity(正无穷大)，-Infinity(负无穷大)
        console.log(Number.MAX_VALUE)
        // JS中可以表示的最小数字（5e-324）0.xxx(是一个小数)
        console.log(Number.MIN_VALUE)
        // 变量为Infinity时，类型为number
        var c = Infinity
        console.log(typeof c)  // 返回：number
    </script>

3.什么是 NaN（Not A Number）

    <script type="application/javascript">
        // 字符串相乘（做乘法计算得到的结果不是整数时，返回NaN[Not A Number]）
        var d = 'szq' * 'asdas'
        console.log(d)  // 返回 NaN
        var e = NaN
        console.log(typeof e)  // 返回：number
    </script>

4.JS的浮点数做减法运算，可能会得到一个不精确的结果

    <script type="application/javascript">
        // JS的浮点数做减法运算，可能会得到一个不精确的结果
        var f = 0.1+0.2
        console.log(f)  // 返回：0.30000000000000004
    </script>

3.3、Boolean 布尔值（基本数据类型）

    <script type="application/javascript">
        var a = true;
        var b = false;
        console.log(typeof a) // 返回：boolean
        console.log(a) // 返回：true
        console.log(b) // 返回：false
        console.log(typeof b) // 返回：boolean
    </script>

3.4、Null 空对象（基本数据类型）

    <script type="application/javascript">
        // Null(空对象)类型的值，只有一个null（这个值专门用来表示一个"为空的对象"）
        var a = null;
        console.log(a) // 返回：null
        console.log(typeof a) // 返回：object
    </script>

3.5、Undefined 定义的变量未赋值（基本数据类型）

    <script type="application/javascript">
        // Undefined(定义的变量未赋值)类型的值，只有一个undefined
        var c // 定义一个变量c，但是不赋值
        console.log(c)  // 返回：undefined
        console.log(typeof c) // 返回：undefined
    </script>

3.6、Object 对象（引用数据类型）详见第九章

3.7、强制类型转换（将数据类型转为其他数据类型）

3.7.1、将Number类型，Boolean类型，Null类型和Undefined类型，转换为String类型

方法1：调用"被转换类型"的toString()方法，得到一个返回值

    <script type="application/javascript">
        // 方法1：调用"被转换类型"的toString()方法，得到一个返回值
        var a = 123;  // Number类型
        var a = true; // Bool类型
        // var a = null; // Null类型没有toString()方法
        // var a = undefined; // Undefined类型没有toString()方法

        a = a.toString()  // 将a.toString()方法的"返回值"再赋值给a
        console.log(a) // 返回：123 | true
        console.log(typeof a) // 返回值都为：string
    </script>

方法2：调用String()函数，把"被转换类型"a作为"参数"传递给String()函数，得到一个返回值

    <script type="application/javascript">
        // 方法2：调用String()函数，把"被转换类型"a作为"参数"传递给String()函数，得到一个返回值
        var a = 123;  // Number类型
        var a = true; // Bool类型
        var a = null; // Null类型
        var a = undefined; // Undefined类型

        a=String(a) // 将String(a)方法的"返回值"再赋值给a
        console.log(a) // 返回：123 | true | null | undefined
        console.log(typeof a) // 返回值都为：string
    </script>

3.7.3、将String类型，Boolean类型，Null类型和Undefined类型，转换为Number类型

调用Number()函数，把"被转换类型"a作为"参数"传递给Number()函数，得到一个返回值

    <script type="application/javascript">
        // 调用Number()函数，把"被转换类型"a作为"参数"传递给Number()函数，得到一个返回值
        // 场景一："纯数字"字符串
        var a = '123';
        a=Number(a)
        console.log(a) // 返回值为：123
        console.log(typeof a) // 返回值为：number

        // 场景二："非纯数字"字符串
        var a = 'q123e';
        a=Number(a)
        console.log(a)  // 返回值为：NaN
        console.log(typeof a) // 返回值为：number

        // 场景三："空"或者"空格"字符串
        var a = ' ';
        a=Number(a)
        console.log(a)  // 返回值为：0
        console.log(typeof a) // 返回值为：number

        // 场景四：bool类型
        var a = true;
        var a = false;
        a=Number(a)
        console.log(a)  // true返回值为：1，false返回值为：0
        console.log(typeof a) // 返回值为：number

        // 场景五：null类型
        var a = null;
        a=Number(a)
        console.log(a)  // 返回值为：0
        console.log(typeof a) // 返回值为：number

        // 场景四：undefined类型
        var a = undefined;
        a=Number(a)
        console.log(a)  // 返回值为：NaN
        console.log(typeof a) // 返回值为：number
    </script>

parseInt()函数：把一个字符串转换为一个整数(从左往右依次转换,如果某个字符不是数字就停止转换)

    <script type="application/javascript">
        // parseInt()函数：把一个字符串转换为一个整数(从左往右依次转换,如果某个字符不是数字就停止转换)
        var a='123px';
        a=parseInt(a)
        console.log(a) // 返回值为：123
        console.log(typeof a) // 返回值为：number

        var b='1234aa567px';
        b=parseInt(b)
        console.log(b) // 返回值为：1234
        console.log(typeof b) // 返回值为：number

        var c='1234666.456aa789px';
        c=parseInt(c)
        console.log(c) // 返回值为：1234666
        console.log(typeof c) // 返回值为：number

        // 对小数取整
        var c=123.456;
        c=parseInt(c)
        console.log(c) // 返回值为：123
        console.log(typeof c) // 返回值为：number

        // 如果对非String类型使用parseInt()函数，或者parseFloat(e)函数，会将其先转换为String，然后再操作转换
        var a=true; // a=true == a='true';
        a=parseFloat(a)
        console.log(a) // 返回值为：NaN(因为'true'字符串内不包含数字)
        console.log(typeof a) // 返回值为：number
    </script>

parseFloat()函数：把一个字符串转换为一小数

    <script type="application/javascript">
        // parseFloat()函数：把一个字符串转换为一小数
        var d='123.456px';
        d=parseFloat(d)
        console.log(d) // 返回值为：123.456
        console.log(typeof d) // 返回值为：number

        var e='123.456.789px';
        e=parseFloat(e)
        console.log(e) // 返回值为：123.456
        console.log(typeof e) // 返回值为：number

        // 如果对非String类型使用parseInt()函数，或者parseFloat(e)函数，会将其先转换为String，然后再操作转换
        var a=true; // a=true == a='true';
        a=parseFloat(a)
        console.log(a) // 返回值为：NaN(因为'true'字符串内不包含数字)
        console.log(typeof a) // 返回值为：number
    </script>

3.7.4、转换为Boolean类型

调用Boolean()函数将"变量"转换为布尔值(true/false)

    <script type="application/javascript">
        // 调用Boolean()函数将a转换为布尔值
        // "数字"转化为Boolean时，除了0和NaN(是false)，其余的都是true
        var a = 123;    // 返回值为：true
        var a = -123;   // 返回值为：true
        var a = Infinity;   // 返回值为：true
        var a = 0;      // 返回值为：false
        var a = NaN;        // 返回值为：false
        a=Boolean(a)
        console.log(a)
        console.log(typeof a) // boolean

        // "字符串"转化为Boolean时，除了"空"(是false)，其余的都是true
        var b = "hello"    // 返回值为：true
        var b = ""    // 返回值为：false
        b=Boolean(b)
        console.log(b)
        console.log(typeof b) // boolean

        // "null"和"undefined"转化为Boolean时，都是false
        var c = null    // 返回值为：false
        var c = undefined    // 返回值为：false
        c=Boolean(c)
        console.log(c)
        console.log(typeof c) // boolean
    </script>

四、运算符

4.1、算数运算符（加/减/乘/除/取余，+-*/%）

加法运算

    <script type="application/javascript">
        var a = 123;
        var b = "abc";
        var c = "ABC";
        console.log(a+1) // 返回：124（正常的求和）
        console.log(a+b) // 返回：123abc（任何值和字符串做加法运算，都是先转换为字符串，然后再做字符拼接）
        console.log(b+c) // 返回：abcABC（字符串相加时，做字符拼接）
        console.log(true+false) // 返回：1（true转换为number是1，false转换为number是0）
        console.log(2+null) // 返回：2（null转换为number是0）
        console.log(2+NaN) // 返回：NaN（任何值和NaN做运算结果都是NaN）
    </script>

减法运算

    <script type="application/javascript">
        var a = 100;
        var b = "11";
        var c = "ABC";
        console.log(a-1) // 返回：99（正常的减法）
        console.log(a-b) // 返回：89（任何值和字符串做减法运算，都是先转换为Number，然后再做减法运算）
        console.log(b-c) // 返回：NaN（字符串相减时，返回NaN）
        console.log(100-true) // 返回：99（true转换为number是1，false转换为number是0）
        console.log(a-null) // 返回：100（null转换为number是0）
        console.log(a-NaN) // 返回：NaN（任何值和NaN做运算结果都是NaN）
    </script>

乘法运算

    <script type="application/javascript">
        var a = 100;
        var b = "11";
        var c = "ABC";
        console.log(a*1) // 返回：100（正常的乘法）
        console.log(a*b) // 返回：1100（任何值和字符串做乘法运算，都是先转换为Number，然后再做乘法运算）
        console.log(b*c) // 返回：NaN（字符串相乘时，返回NaN）
        console.log(100*true) // 返回：100（true转换为number是1，false转换为number是0）
        console.log(a*null) // 返回：0（null转换为number是0）
        console.log(a*NaN) // 返回：NaN（任何值和NaN做运算结果都是NaN）
    </script>

除法运算

    <script type="application/javascript">
        var a = 100;
        var b = "10";
        var c = "ABC";
        console.log(a/1) // 返回：100（正常的除法）
        console.log(a/b) // 返回：10（任何值和字符串做除法运算，都是先转换为Number，然后再做除法运算）
        console.log(b/c) // 返回：NaN（字符串相除时，返回NaN）
        console.log(100/true) // 返回：100（true转换为number是1，false转换为number是0）
        console.log(a/null) // 返回：Infinity（null转换为number是0，除0返回Infinity）
        console.log(a/NaN) // 返回：NaN（任何值和NaN做运算结果都是NaN）
    </script>

取余

    <script type="application/javascript">
        console.log(9%3) // 返回：0（9/3=3余数为0）
        console.log(9%4) // 返回：1（9/4=2余数为1）
        console.log(9%5) // 返回：4（9/5=1余数为4）
    </script>

4.2、一元运算符（+正，-负）

    <script type="application/javascript">
        // + 正号
        // - 负号
        var a = 123;
        console.log(+a) // 返回：123
        console.log(-a) // 返回：-123

        //任意数据类型做一元计算时，都是先转换为Number，在做运算
        var b =true;    //（true转换为number是1，false转换为number是0）
        console.log(+b) // 返回：1
        console.log(-b) // 返回：-1

        var c ="123";   //（"123"转换为number是123）
        console.log(+c) // 返回：123
        console.log(-c) // 返回：-123
    </script>

4.3、自增，自减

    <script type="application/javascript">
        var a =  123;
        console.log(a++)  // 返回：123（a++返回的是原值）
        var b =  123;
        console.log(++b)  // 返回：124（++a返回的是+1后的值）
    </script>

    <script type="application/javascript">
        var a =  123;
        console.log(a--)  // 返回：123（--返回的是原值）
        var b =  123;
        console.log(--b)  // 返回：122（--a返回的是-1后的值）
    </script>

4.4、逻辑运算符（&&与 ||或 !非）

!非：就是取反

    <script type="application/javascript">
        // !非，对bool值取反
        var a =true;
        a=!a
        console.log(a)  // 返回：false
        var b =false;
        b=!b
        console.log(b)  // 返回：true

        // !非，对Number值取反
        var c = 10; // 先把10转换为Bool值true，在取反
        c=!c
        console.log(c)  // 返回：false
    </script>

&&与：

    <script type="application/javascript">
        // &&与，对bool值运算
        var a=true && true;  // 都为true时
        console.log(a)  // 返回：true

        var b=true && false;  // 一个为true一个为false时
        console.log(b)  // 返回：false

        var c=false && false;  // 都为false时
        console.log(c)  // 返回：false
    </script>

||或：

    <script type="application/javascript">
        // ||非，对bool值运算
        var a=true || true;  // 都为true时
        console.log(a)  // 返回：true
        
        var b=true || false;  // 一个为true一个为false时
        console.log(b)  // 返回：true

        var c=false || false; // 都为false时
        console.log(c)  // 返回：false
    </script>

4.5、赋值运算符（=，+=，-=，*=，/+）

    <script type="application/javascript">
        var a =10;
        a+=2  // a=a+2
        a-=2  // a=a-2
        a*=2  // a=a*2
        a/=2  // a=a/2
        a%=3  // a=a%3
    </script>

4.6、关系运算符（>，>=，<，<=，==，!=）

>，>=，<，<= 比较2个值得大小关系，如果关系成立返回true，否则返回false

    <script type="application/javascript">
        // Number类型作比较时
        console.log(5>1) // 返回：true
        console.log(5>=5) // 返回：true
        console.log(5>10) // 返回：false

        // String和Number作比较时（String先转换为Number，在做比较）
        console.log(5>true) // 返回：true
        console.log("5">3) // 返回：true
        console.log(5>"0") // 返回：true
        console.log(5>null) // 返回：true
        console.log(5>undefined) // 返回：false
        console.log(5>NaN) // 返回：false

        // String和String作比较时（比较的是字符串的字符编码）
        console.log("aaa">"bbb") // 返回：false
        console.log("111">"222") // 返回：false
    </script>

==，!= 判断2个值相等或者不相等（会对2个值做自动类型转换）， =（一个"="号是赋值），==（两个"="号是判断2个值是否相等）

    <script type="application/javascript">
        // 判断2个值是否相等(==)  或者不相等(!=)
        console.log("aaa"=='bbb') // 返回：false
        console.log("aaa"=='aaa') // 返回：true
        console.log(5==5) // 返回：true
        console.log(5!=5) // 返回：false
        console.log("a"==5) // 返回：false
        // 不同类型做相等判断时，会自动转换为相同的类型
        console.log("1"==1) // 返回：true
        console.log(11=="11") // 返回：true
        console.log(true=="1") // 返回：true
        console.log(null==0) // 返回：false（这里的null没有转换，所以返回false）
        console.log(null==undefined) // 返回：true（undefined衍生自null，所以返回true）
        // NaN不和任何值相等，包括NaN
        console.log(NaN==NaN) // 返回：false
        // 可以通过isNaN()函数来判断一个值是否为NaN
        var a =NaN
        console.log(isNaN(a)) // 返回：true
    </script>

===，!== 判断2个值全相等或者全不相等（不会对2个值做自动类型转换，如果2个值的类型不同，直接返回false或者true）

    <script type="application/javascript">
        // ===全相等（不会自动转换类型，如果2个值得类型不同，直接返回false）
        console.log("123"===11) // 返回：false
        console.log("aaa"==='aaa') // 返回：true

        // !==全不相等（不会自动转换类型，如果2个值得类型不同，直接返回true）
        console.log("123"!==11) // 返回：true
        console.log("aaa"!=='aaa') // 返回：false
    </script>

4.7、条件运算符（三元运算符）

语法：条件表达式?语句1:语句2

执行的流程：先对条件表达式进行求值，
如果该值为true，则执行语句1，并返回执行结果
如果该值为false，则执行语句2，并返回执行结果

    <script type="application/javascript">
        // 例子1：
        false?console.log('111'):console.log('222') // 返回：111
        true?console.log('111'):console.log('222')  // 返回：222

        // 例子2：
        var a= 10;
        var b= 20;
        a>b?console.log('aaa'):console.log('bbb')  // 返回：bbb

        // 例子3：取a,b值里面大的那个赋值给max
        var a= 10;
        var b= 20;
        var max = a>b?a:b;
        console.log(max)
    </script>

4.8、运算符的优先级（如果不清楚哪个优先级更高，可以把括号运用上）

1. 小括号（） # 有括号先算括号里面的；

2. 一元运算符

加加（++）；减减（--）；非（!）

3. 算数运算符

加（+）;减（-）;乘（*）;除（/）;取于（%）；这里是先乘（*）除（/）取于（%）后加（+）减（-）。

4. 关系运算符

大于（>）;大于等于（>=）;小于（<）;小于等于（<=）。

5. 相等运算符

等于（==）；不等于（!=）;全等于（===）;不全等于（!==）。

6. 逻辑运算符

先且（&&）后或（||）。

7. 赋值运算符（=）。

8. 逗号运算符（,）。

五、代码块 {}

    <script type="application/javascript">
        // js中使用{}对语句进行分组，一个{}内的语句就是一个代码块
        // js的代码块，只具有分组的作用，没有其他的作用
        // 代码块内部的内容，在外部也是可以调用的
        {
            var a= 10;
            console.log(11);
            console.log(22);
            console.log(33);
        }
        console.log(a)  // 返回: 10
    </script>

六、if 条件判断

语法

if (条件表达式) {
    语句。。。
} else if (条件表达式) {
    语句。。。
} else if (条件表达式) {
    语句。。。
} else {
    语句。。。
}

6.1、if判断单个条件

    <script type="application/javascript">
        var a= 1;
        // if语句只能控制紧随其后的那个语句，如果想要控制多条语句的话，就需要用到代码块{}
        if(a>10) {
            alert('a>10');
            alert('111');
        }
        else {
            alert('a<10');
            alert('222');
        }
    </script>

6.2、if判断多个条件

    <script type="application/javascript">
        var a= 15;
        // if语句只能控制紧随其后的那个语句，如果想要控制多条语句的话，就需要用到代码块{}
        if(a>10 && a<20) {
            alert('a>10 and a<20');
        }
        else {
            alert('other');
        }
    </script>

6.3、prompt函数(获取输入框内容)

    <script type="application/javascript">
        // prompt函数: 弹出一个输入框，输入后得到一个返回值（String类型）
        var szq = prompt('输入: ')
        console.log(szq)
    </script>

6.4、if语句嵌套

    <script type="application/javascript">
        // prompt函数: 弹出一个输入框，输入后得到一个返回值（String类型）
        var szq = Number(prompt('输入: '))
        if (szq == 100){
            console.log('优秀')
        } else if (szq<100){
            if (szq>60 && szq<80){
                console.log('及格')
            } else if (szq>80 && szq<100) {
                console.log('良好')
            } else {
                console.log('不及格')
            }
        } else {
            console.log('未知')
        }
    </script>

6.5、条件分支语句（switch语句）

语法：

switch (条件表达式){
    case 表达式:
        语句。。。
        break;
    case 表达式:
        语句。。。
        break;
    case 表达式:
        语句。。。
        break;
    default :
        语句。。。
        break;
}

例子：

    <script type="application/javascript">
        // 条件分支语句：switch语句
        var cmd = prompt('输入: ')
        switch (cmd) {
            case 'start':
                // cmd = "start",触发
                console.log('start')
                break;  // break 执行完就退出switch语句,（如果不加break的话，后面会继续执行）
            case "stop":
                // cmd = "stop",触发
                console.log('stop')
                break;
            case "reload":
                // cmd = "reload",触发
                console.log('reload')
                break;
            default :
                // 以上都不匹配时,触发该逻辑
                console.log('未找到该指令')
                break;
        }
    </script>

七、while循环

7.1、while语法：

while (条件表达式) {
    语句。。。
}

例子：while语句，条件不成立就不执行

    <script type="application/javascript">
        var num = 10;
        while (num > 0){
            console.log(num)
            num-=1

            if (num==2){
                console.log('2222')
                break;  // break 执行完就退出while语句,（如果不加break的话，后面会继续执行）
            }
        }
    </script>

7.2、do{xxx} while(xxx) 语法：可以理解为把while循环反过来写

do{
    语句。。。
} while (条件表达式)

例子：do while语句，先执行在判断条件是否成立，也就是会先执行一次(哪怕条件不成立)

    <script type="application/javascript">
        var num = 10;
        do {
            console.log(num)
            num-=1

            if (num==2){
                console.log('2222')
                break;  // break 执行完就退出while语句,（如果不加break的话，后面会继续执行）
            }
        } while (num > 0)
    </script>

7.3、例子：本金1000，利率5%，存多少年到5000块

    <script type="application/javascript">
        var num = 1000;  // 本金
        var lilv=1.05;  // 利率固定
        var years=0     // 年
        while (num < 5000) {
            num=num*lilv
            years+=1
            if (num >= 5000){
                console.log(years)
                break
            }
        }
    </script>

八、for循环

8.1、for循环语法

for循环 语法
for (初始化表达式; 条件表达式; 更新表达式){
    语句。。。
}

for循环 执行流程
 1.初始化表达式，初始化变量(只会执行一次)
 2.执行条件表达式，判断结果(true/false)是否执行循环
 3.为true时，执行，否则终止循环
 4.执行更新表达式。然后继续重复第2~4步骤。

8.2、for循环例子1（这个例子里面for循环和while实现效果是一样的，只是写法上的差异。for循环结构更清晰）

    <script type="application/javascript">
        // for写法1
        for (var i = 0; i<10; i++){
            console.log(i)
        }
        // for写法2 (for循环中的三个部分都可以省略，也可以写在外面) 分号";"不能省略
        var i = 0
        for (;i<10;){
            console.log(i)
            i++
        }
        // while写法1
        var n =1;
        while (n<10){
            console.log(n)
            n++
        }
    </script>

8.2、for循环例子2：死循环

    <script type="application/javascript">
        // for 死循环
        var i = 0
        for (;;){
            console.log(i)
            i++
        }
        // while 死循环
        while (true){
            console.log(n)
            n++
        }
    </script>

8.3、for循环例子3:（求1-100奇数的和）

    <script type="application/javascript">
        var num=0;
        for (var i=0; i<=100; i++){
            if (i%2!=0){
                console.log('奇数',i)
                num+=i;
            }
        }
        console.log('奇数和',num)
    </script>

8.4、for循环嵌套（九九乘法表）

    <script type="application/javascript">
        // 高度1~9
        for (var i =1; i<=9; i++){
            // 宽度1~9
            for (var n =1; n<=i; n++){
                document.write("<span>"+n+"*"+i+"=",i*n+"</span>")
            }
            document.write("<br />")
        }
    </script>

    // 格式渲染
    <style type="text/css">
        span{
            display: inline-block;
            width: 90px;
        }
    </style>

8.5、break和continue

break：退出当前for循环

continue：跳过当前循环，进入下一次循环

例子：for循环嵌套（内部的for循环使用break终止外部的for循环）

        <script type="application/javascript">
            // 创建一个label: "outer:"
            outer:
            for (var i =1; i<=3; i++){
                console.log("外层循环"+i)
                for (var n =1; n<=3; n++){
                    // 在(内部)使用"break outer"即可终止外部的for循环语句，不加的话只会终止当前内部的for循环语句
                    break outer;
                    console.log("内层循环"+n)
                }
            }
        </script>

九、Object 对象（引用数据类型）

9.1、对象{key:value}简介

对象属于一种复合的数据类型，在对象中可以保存多个不同类型的属性

对象的分类：

1.内建对象：ES标准定义的对象（Match String Number Boolean Function Object）

2.宿主对象：JS运行环境提供的对象（BOM[浏览器对象模型] DOM[文档对象模型]）

3.自定义对象：开发人员创建的

9.2、对象{key:value}的操作方法（创建对象，对象进行"增"删"改"查"操作）

    <script type="application/javascript">
        // 创建对象：使用"new"关键字调用的函数，是构造函数(专门创建对象的函数)
        var obj = new Object();
        console.log(typeof obj)  // 使用"typeof obj"时，返回的是"object"

        // 向对象中添加属性("对象里面的值"称为"属性")
        obj.age=18;
        obj.name='sudada';
        obj.gender='男';
        console.log(obj)  // 返回值： {age: 18, name: 'sudada', gender: '男'}

        // 读取对象中的属性
        console.log(obj.age)    // 返回值：18
        console.log(obj.name)   // 返回值：sudada
        console.log(obj.gender) // 返回值：男

        // 读取一个对象中不存在的属性(不会报错，返回undefined)
        console.log(obj.xxx)  // 返回值：undefined

        // 修改对象属性的值
        obj.age=20;
        console.log(obj.age)    // 返回值：20

        // 删除对象属性的值
        delete obj.age;
        console.log(obj.age)    // 返回值：undefined
    </script>

9.3、对象{key:value}的"属性名(key)"和"属性值(value)"

属性名：使用特殊的属性名称时：对象["属性名"]=属性值

属性值：可以是任意类型的数据

        <script type="application/javascript">
            // 属性名称
            var obj = new Object();
            // 使用特殊的属性名称时：对象["属性名"]=属性值
            obj["123"]=456;
            console.log(obj["123"])  // 返回值：456

            // 可以在["变量"]传入一个变量
            var n = "123"
            console.log(obj[n])  // 返回值：456

            // 属性的值（JS属性值，可以是任意的数据类型）
            obj.aaa=456;
            console.log(obj.aaa)  // 返回值：456
            obj.bbb="aaa";
            console.log(obj.bbb)  // 返回值：aaa
            obj.ccc=true;
            console.log(obj.ccc)  // 返回值：true

            // 属性的值可以是一个对象
            var obj2 = new Object();  // 新建一个对象obj2
            obj2.name="sudada";
            obj2.age=18;
            // 把对象obj2赋值给obj对的ddd属性
            obj.ddd=obj2;
            console.log(obj.ddd)  // 返回值：{name: 'sudada', age: 18}
            console.log(obj.ddd.name)  // 返回值：sudada

            // 检查"属性"在某个"对象内"是否存在（使用in运算符）
            console.log('aaa' in obj )   // 返回值：true
        </script>

9.4、创建对象的多种方式

    <script type="application/javascript">
        // 对象创建方式-1
        var obj1 = new Object();
        console.log(typeof obj1)    // 返回值：object

        // 对象创建方式-2
        var obj2 = {};
        console.log(typeof obj2)    // 返回值：object

        obj2.name="sudada";
        obj2.age=18;
        console.log(obj2)   // 返回值：{name: 'sudada', age: 18}

        // 对象创建方式-3（创建对象并添加属性和属性值）常用
        var obj3 = {
            name: 'sss',
            age: 28,
            test: {
                name:"test",
                age:18
            }
        };
        console.log(obj3)
    </script>

9.5、对象的"方法"method（对象的一个属性是函数，那么该函数就是该对象的"方法"，调用函数就是调用该对象的方法）

    <script type="application/javascript">
        // 定义对象
        var obj = {
            name:"sudada",
            age:18
        };
        // 对象的属性是一个匿名函数（函数是对象的一个属性，那么该函数就是该对象的"方法"，调用函数就是调用该对象的方法method）
        obj.sayname=function (){
            console.log(obj.name)
        };
        // 调用该函数(调用obj对象的sayname方法)
        obj.sayname();
    </script>

    <script type="application/javascript">
        // 写法2
        var obj = {
            name:"sudada",
            age:18,
            sayname:function (){
                console.log(obj.name)
            }
        };
        // 调用该函数(调用obj对象的sayname方法)
        obj.sayname();
    </script>

9.5.1、for循环对象，获取对象的"属性名"和"属性值"

    <script type="application/javascript">
        var obj = {
            name:"sudada",
            age:18,
            address:'shanghai',
        };
        // for循环默认获取的是key（属性名）
        for(var n in obj){
            console.log(n)  //返回值：name,age,address
            // 获取对象的属性值
            console.log(obj[n])  //返回值：sudada,18,shanghai
        }
    </script>

9.6、使用工厂方法创建对象（大批量的创建对象）

    <script type="application/javascript">
        // 使用工厂方法创建对象（大批量的创建对象），使用的构造函数都是Object，所以创建的对象都是Object类型
        function createfun(name,age){
            // 创建新对象
            var obj = new Object();
            // 新对象赋值
            obj.name = name;
            obj.age = age;
            obj.sayname = function (){
                console.log(this.name)
            }
            // 将新对象返回
            return obj;
        }
        // 调用函数，传递参数，拿到对象
        var obj2=createfun("sudada",18);
        var obj3=createfun("sss",28);
        var obj4=createfun("www",38);
        console.log(obj2)  // 返回值：{name: 'sudada', age: 18, sayname: ƒ}
        console.log(obj3)  // 返回值：{name: 'sss', age: 28, sayname: ƒ}
        console.log(obj4)  // 返回值：{name: 'www', age: 38, sayname: ƒ}
    </script>

十、函数

10.1、函数简介

函数也是一个对象。

函数里面封装了一个功能，在需要时即可执行。

10.2、函数的"创建"和"使用"

方式1：创建一个函数对象（不常用）

    <script type="application/javascript">
        // 方式1：创建一个"函数对象"
        var fun = new Function("console.log('sssss')");
        console.log(fun)         // 返回值：ƒ anonymous() {}
        console.log(typeof fun)  // 返回值：function

        // 调用函数的语法：函数对象()
        fun()  // 返回值：sssss

        // 函数对象也是一个对象，也可以当做普通对象来使用
        fun.hello="sudada";
        fun.age=18;
        console.log(fun.hello)  // 返回值：sudada
        console.log(fun.age)    // 返回值：18
    </script>

方式2：使用"函数声明"，来创建一个"函数" 常用

    <script type="application/javascript">
        // 方式2：使用"函数声明"，来创建一个"函数"
        // 语法: function 函数名(参数1,参数2,参数3) { 语句 }
        function fun(num){
            console.log("打印函数") // 返回值：打印函数~
            console.log(num)  // 返回值：10
        }
        num=99
        // 调用函数
        fun(num)
    </script>

方式3：使用"函数表达式"，来创建一个"函数"（创建一个匿名函数，赋值给一个变量fun）常用

    <script type="application/javascript">
        // 方式3：使用"函数表达式"，来创建一个"函数"（创建一个匿名函数，赋值给一个变量）
        var fun = function(num){
            console.log('匿名函数') // 返回值：匿名函数
            console.log(num)  // 返回值：10
        };
        num=10
        // 调用函数
        fun(num)
    </script>

10.3、函数的"参数"

    <script type="application/javascript">
        function sum(a,b){
            console.log(a)  // 返回值：1
            console.log(b)  // 返回值：2
            console.log(a+b)// 返回值：3
        }
        // 传递参数，需要检查参数是否非法
        sum(1,2)
    </script>

    <script type="application/javascript">
        function sum(a,b){
            console.log(a)  // 返回值：123
            console.log(b)  // 返回值：'hello'
            console.log(a+b)// 返回值：123hello
        }
        // 参数参数时，解析器不会检查实参的数量，多余的实参传递了无用
        sum(123,'hello',111)
    </script>

    <script type="application/javascript">
        function sum(a,b){
            console.log(a)  // 返回值：123
            console.log(b)  // 返回值：undefined
            console.log(a+b)// 返回值：NaN
        }
        // 解析参数时，解析器不会检查实参的数量，少传递一个参数时，接收到的值就是undefined
        sum(123)
    </script>

10.3.1、函数的"实参"可以是"任意值"，例子：

函数的参数是"对象"

    <script type="application/javascript">
        // 将对象作为参数传递
        var obj={
            name:"sudada",
            age:19
        }
        function fun(obj){
            console.log("名字:",obj.name,"年龄:",obj.age)
        }
        fun(obj)
    </script>

函数的参数是"函数"

    <script type="application/javascript">
        // 将"函数"作为参数传递
        function aaa(a,b){
            console.log(a+b)
        }
        function bbb(func){
            // 这里调用的func就是"aaa函数"
            func(1,2)
        }
        bbb(aaa)  //返回值：3
    </script>

函数的参数是"函数的返回值"

    <script type="application/javascript">
        // 将"函数的返回值"作为参数传递
        function aaa(a,b){
            return a+b
        }
        function bbb(num){
            console.log(num)
        }
        bbb(aaa(1,2))  //返回值：3
    </script>

10.4、函数的"返回值"

    <script type="application/javascript">
        function sum(a,b){
            var res=a+b;
            // 将结果通过 return 返回
            return res
            // return后不加返回值的话，默认返回的就是：return undefined
        }
        // 执行函数，并返回结果，返回赋值给变量 result
        var result = sum(123,456);
        console.log(result)   //返回值：579
    </script>

    <script type="application/javascript">
        function sum(a,b){
            var res=a+b;
            // 函数内如果没有返回值，那么调用该函数默认返回的就是：undefined
        }
        // 执行函数
        console.log(sum(123,456))   //返回值：undefined
    </script>

    <script type="application/javascript">
        function sum(a,b){
            var res=a+b;
            // return后的返回值是什么，执行函数拿到的结果就是什么
            return "sudada"
        }
        // 执行函数
        console.log(sum(123,456))   //返回值：sudada
    </script>

10.5、立即执行的函数

    <script type="application/javascript">
        // 立即执行函数：函数定义完后立即会被执行
        // 不传参
        (function(){
            console.log("匿名函数")
        })();
        // 传参
        (function(a,b){
            console.log(a)
            console.log(b)
        })(123,456);
    </script>

10.6、全局作用域

1.作用域是指一个变量作用的范围
2.全局作用域在页面打开时创建，在页面关闭时销毁
3.全局作用域有一个"全局对象window(DOM)"，可以直接使用（window(DOM)代表的是浏览器的窗口，它由浏览器创建，可以直接使用）
4.在全局作用域中：创建的变量都会作为"window对象"的"属性"保存，创建的函数都会作为"window(DOM)对象"的"方法"保存
5.在全局作用域中的变量，是全局变量

    <script type="application/javascript">
        // 在全局作用域中：创建的变量都会作为"window对象"的"属性"保存
        var test="sudada";
        console.log(window.test)   //返回值：sudada

        // 在全局作用域中：创建的函数都会作为"window对象"的"方法"保存
        function fun(){
            console.log('fun函数')
        }
        window.fun()   //返回值：fun函数

        // 使用var关键字声明的变量，会在代码开始之前被声明(但是未赋值)，即：var a;
        var a = 123;
        console.log(a)   //返回值：123
        // 如果不写var关键字，那么：a = 123; 等于 window.a=123;
        a = 123;
        console.log(a)   //返回值：123

        // 使用"函数声明"创建的函数"function fun1(){}"，会在所有代码执行之间就被创建，所以就可以在函数声明前(任意位置)来调用函数
        fun1()   //返回值：fun1函数
        function fun1(){
            console.log('fun1函数')
        }

        // 使用"函数表标式"创建的函数，则不会被提前创建
        fun2()   //返回值：fun2 is not a function
        var fun2 = function (){
            console.log('fun2函数')
        }
    </script>

10.7、函数作用域

1.调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁（每调用一次函数，就是创建一个新的函数作用域，之间相互独立）。

2.函数作用域中定义的变量，在全局作用域中无法访问。

3.函数作用域中，可以访问全局作用域中定义的变量。

4.在函数作用域中操作一个变量时，会先在自身的作用域中寻找，如果没有就直接向上一级作用域中查找，直到找到全局作用域为止(如果全局作用域找不到的话，就报错xx is not defined)

5.在函数中，访问全局作用域的变量是使用：window.变量名称。

6.在函数中，如果变量没有使用关键字"var"声明，那么该变量属于全局变量。

7.定义形参就相当于是在函数作用域中声明了变量。

    <script type="application/javascript">
        // 函数作用域：
        // 调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁（每调用一次函数，就是创建一个新的函数作用域，之间相互独立）
        // 函数作用域中定义的变量，在全局作用域中无法访问
        function fun3(){
            var s=123;
        }
        fun3()
        console.log(s)   // 返回值：Uncaught ReferenceError: s is not defined

        // 函数作用域中，访问全局作用域的变量
        var a =10;
        function fun(){
            console.log(a)  // 返回值：10
        }
        fun()

        // 在函数作用域中操作一个变量时，会先在自身的作用域中寻找，如果没有就直接向上一级作用域中查找，直到找到全局作用域为止(如果全局作用域找不到的话，就报错xx is not defined)
        var a =10;
        function fun(){
            var a =456;
            function fun2(){
                console.log(a)  // 返回值：456
            }
            fun2()
            }
        fun()

        // 在函数中，访问全局作用域的变量是使用：window.变量名称。
        var a =10;
        function fun(){
            var a =456;
            function fun2(){
                console.log(window.a)  // 返回值：10
            }
        fun2()
        }
        fun()

        // 在函数中，如果变量没有使用关键字"var"声明，那么该变量属于全局变量
        var a = 10;
        function fun(){
            console.log('fun')
            a=100
        }
        fun()
        console.log(a)  // 返回值：100

        // 定义形参就相当于是在函数作用域中声明了变量
        var b = 10;
        function fun2(b){
            console.log(b)
        }
        fun2()   // 返回值：undefined
        fun2(20) // 返回值：20
    </script>

10.8、"函数对象"的call方法和apply方法

function fun1(){
    console.log("fun函数")
}
// 以下3个方法执行结果都一样
fun1.call()     // 返回值: "fun函数"
fun1.apply()    // 返回值: "fun函数"
fun1()          // 返回值: "fun函数"

// 不同点在于: call方法和apply方法可以将一个对象指定为第一个参数,那么这个参数(对象)就是函数执行时的this
var obj = {"name":"zhangsan"}
function fun2(){
    console.log(this.name)
}
fun2.call(obj)  // 返回值: "zhangsan"
fun2.apply(obj) // 返回值: "zhangsan"

10.9、函数的arguments

// 函数在调用时，浏览器每次都会传递进2个隐含的参数: 1.this, 2.arguments(类数组对象)用来保存函数传递的实参
function fun(a,b){
    console.log(typeof arguments)   // 返回值: object
    console.log(arguments)          // 返回值: [Arguments] { '0': 'aaa', '1': 'bbb' }
    console.log(arguments.length)   // 获取实参的数量，返回值: 2
    console.log(arguments[0])       // 获取实参的值(索引为0的值)，返回值: "aaa"
}
fun("aaa","bbb")

十一、构造函数（类）

11.1、什么构造函数(类)？

创建一个构造函数(类)"Person"，专门用来创建对象。
构造函数一般首字母大写。
普通函数直接调用，构建函数(类)使用new关键字来调用。
使用一个构建函数(类)创建的对象，称为一类对象，也将一个构造函数称为一个类。
使用 instanceof 来检查一个"对象"是否属于"某个类"，是的话返回true，否则返回false。

11.2、构造函数(类)的创建流程

1.立刻创建一个新的对象；
2.将新建的对象，设置为函数中的this，在构造函数中可以使用this来引用新建的对象；
3.逐行执行函数内的代码；
4.将新的对象作为返回值返回；

    <script type="application/javascript">
        // 构造函数的执行流程：
        // 1.立刻创建一个新的对象
        // 2.将新建的对象，设置为函数中的this，在构造函数中可以使用this来引用新建的对象
        // 3.逐行执行函数内的代码
        // 4.将新的对象作为返回值返回
        function Person(name,age){
            this.name=name
            this.age=age
            this.sayname=function (){
                return this.name
            }
        }

        // 使用一个构造函数创建的对象，称为一类对象，也将一个构造函数称为一个类
        var per = new Person("sudada",18)
        var per2 = new Person("sss",28)
        console.log(per)  // 返回值：Person {name: 'sudada', age: 18, sayname: ƒ}
        console.log(per2)  // 返回值：Person {name: 'sss', age: 28, sayname: ƒ}

        // 使用 instanceof 来检查一个"对象"是否属于"某个类"，是的话返回true，否则返回false
        console.log(per instanceof Person)  // 返回值：true
    </script>

11.3、构造函数内的"函数复用"(将函数定义在全局作用域)

    <script type="application/javascript">
        // 创建一个构造函数"Person"，专门用来创建对象。
        function Person(name,age){
            this.name=name
            this.age=age
            this.sayname=fun
        }
        function fun(){
            console.log("fun函数")
        }

        // 使用一个构建函数创建的对象，称为一类对象，也将一个"构造函数"称为一个"类"
        var per = new Person("sudada",18)
        var per2 = new Person("sss",28)
        per.sayname()  // 返回值："fun函数"
        per2.sayname()  // 返回值："fun函数"
        console.log(per.sayname == per2.sayname)  // 返回值：true
    </script>

十二、this

12.1、什么是this？

解析器在调用函数时，每次都会向函数内部传递一个隐含的参数"this"（是一个对象，称为"上下文对象"）

根据函数"调用方式"的不同，this指向不同的对象
1.以"函数的方式"调用时,this永远都是window（函数内调用this时，this指的是window）
2.以"对象方法的方式"调用时,this就是调用的对象（谁调用this，this就是谁）

    <script type="application/javascript">
        // 解析器在调用函数时，每次都会向函数内部传递一个隐含的参数"this"（是一个对象，称为"上下文对象"）
        // 根据函数"调用方式"的不同，this指向不同的对象

        // 1.以"函数的方式"调用时,this永远都是window
        var name = "szq";
        function fun(){
            console.log(this)  // 返回值：Window
            console.log(this.name)  // 返回值："szq"
        }
        fun()

        // 2.以"对象方法的方式"调用时,this就是调用的对象（谁调用this，this就是谁）
        var obj={
            name:"sudada",
            sayname:fun,
        }
        obj.sayname()  // 返回值：obj对象:{name: 'sudada', sayname: ƒ}，以及obj.name："sudada"

        var obj2={
            name:"zhangsan",
            sayhi:fun,
        }
        obj2.sayhi()  // 返回值：obj2对象:{name: 'zhangsan', sayhi: ƒ}，以及obj.name："zhangsan"
    </script>

12.2、在使用"函数","方法","构造函数"时，this代表什么？

1.当以函数的形式调用时，this就是window；
2.当以方法的形式调用时，谁调用方法this就是谁；
3.当以构造函数(类)的形式调用时，this就是新创建的那个对象；

十三、原型对象 prototype

13.1、什么是原型对象？

原型对象(prototype)相当于一个公共区域，一个类的所有对象都可以访问该公共区域。（可以把一些公共函数，放到类的原型对象里面）

在原型对象里面定义的"属性"或者"方法"，对象可以直接调用(对象会优先取自己的"属性"或者"方法"值，如果没有的话，再去原型对象里面找)。

当一个对象的"属性/方法"不存在时，去"原型对象"内查找，还不存在就去"原型对象的原型对象"中查找，直到找到"Object对象的原型"为止。如果"Object对象的原型"也没有，那么就返回undefined。

13.2、原型对象使用

例子1：原型对象内添加属性/方法

    <script type="application/javascript">
        // 每个函数都有一个唯一的属性prototype，这个prototype属性对应一个对象，就是原型对象。
        // 只有通过构造函数创建的对象才会有有一个隐藏的属性，可以通过__proto__来访问该属性。
        // 原型对象相当于一个公共区域，一个类的所有对象都可以访问该公共区域。（可以把一些公共函数，放到类的原型对象里面）
        function Person(){
        }
        // 往"原型对象"里面添加一个属性"num"值为123
        Person.prototype.num=123
        // 往"原型对象"里面添加一个sayname方法
        Person.prototype.sayname=function (){
            console.log("fun函数")
        }
        // 实例化对象
        var sudada = new  Person()
        // 查看"sudada对象"的"num属性"的值(如果"sudada对象"没有"num属性"，那么就去原型对象里面找"num属性")
        console.log(sudada.num)  // 返回值：123
        sudada.sayname() // 返回值：fun函数
        // sudada对象的__proto__的值，和Person.prototype的值相等
        console.log(Person.prototype == sudada.__proto__)  // 返回值：true
    </script>

例子2：判断 "对象自身" 或 "对象(的原型对象)" 是否存在某个属性

    <script type="application/javascript">
        function Person(){}
        Person.prototype.name="原型对象的name"
        var obj = new Person()
        // 使用 "in" 判断 "对象(的原型对象)" 是否有某个属性
        console.log("name" in obj)  // 返回值：true

        // 使用对象的 "hasOwnProperty()方法" 判断"对象自身"是否有某个属性
        console.log(obj.hasOwnProperty("name"))  // 返回值：false
        obj.age=18
        console.log(obj.hasOwnProperty("age"))  // 返回值：true
    </script>

十四、数组

14.1、创建数组

// 创建数组-方式1(构建函数创建)
var arr = new Array();

// 数组内添加值
arr[0]=10;
arr[1]=20;
arr[2]=30;
console.log(arr)  // 返回值：[ 10, 20, 30 ]
console.log(typeof arr)  // 返回值：object

// 获取数值的长度
console.log(arr.length)  // 返回值：3

// 创建数组-方式2
var arr1 = ["a","b","c","d", { "name": "sudada", "age": 18 }]
console.log(arr1.length)  // 返回值：5

// 获取数组"索引"对应的值
console.log(arr1[2])  // 返回值：c
console.log(arr1[4])  // 返回值：{ "name": "sudada", "age": 18 }

14.2、数组的常用方法

// 数组的常用方法
var arr2 = ["a","b","c"]

// 1、unshift：往数组的开头添加元素
arr2.unshift("1","2")
console.log(arr2)  // 返回值：[ '1', '2', 'a', 'b', 'c', 'test1' ]

// 2、push：往数组末尾添加值
arr2.push("test1", "test2")
console.log(arr2)  // 返回值：[ 'a', 'b', 'c', 'test1', 'test2' ]

// 3、shift：删除数组第一个元素，并将被删除的那个元素当做返回值返回
res1=arr2.shift()
console.log(res1)  // 返回值：1
console.log(arr2)  // 返回值：[ '2', 'a', 'b', 'c', 'test1' ]

// 4、pop：删除数组最后一个元素，并将被删除的那个元素当做返回值返回
res=arr2.pop()
console.log(res)  // 返回值：test2
console.log(arr2)  // 返回值：[ 'a', 'b', 'c', 'test1' ]

14.3、数组的遍历

例子1：简单的数组便利（for循环数组时，拿到的是"数组的索引"）

var arr3 = ["a","b","c"]

for (var n in arr3){
    // 这里的n取到的是数组的"索引"
    console.log(n)  // 返回值：数组的"索引"
    console.log(arr3[n])  // 返回值：数组的"值"
}

例子2：数组便利时条件判断

// 创造一些数据
function Person(name,age){
    this.name=name;
    this.age=age;
}
var per = new Person("aaa", 18)
var per2 = new Person("bbb", 28)
var per3 = new Person("ccc", 38)
var per4 = new Person("ccc", 48)

// 数组perArr的值，有4个对象
var perArr = [per, per2, per3, per4]

// 把数组perArr对象age>18的人提取出，放到一个新的数组newArr内
function szq(arr){
    var newArr=[];
    for (var i in arr){
        if ( arr[i].age > 18){
            newArr.push(arr[i])
        }
    }
    return newArr
}
console.log(szq(perArr))  // 返回值：[Person { name: 'bbb', age: 28 },Person { name: 'bbb', age: 38 },Person { name: 'bbb', age: 48 }]

14.4、数组的forEath方法

数组的forEach方法
1.forEach方法需要一个函数作为参数；
2.数组中有N个元素，那么forEach就会执行N次；
3.每次执行时会将"便利到的值"以实参的方式传递进来，可以定义形参接收；
4.传递进来的参数有3个，分别是：参数1(数组的第一个值)，参数2(数组的第一个索引)，参数3(数组的所有值)；

var arr = ["aa","bb","cc","dd",]
arr.forEach(function (value,index,obj){
    console.log(value,index,obj)
})
// 返回值：
// aa 0 [ 'aa', 'bb', 'cc', 'dd' ]
// bb 1 [ 'aa', 'bb', 'cc', 'dd' ]
// cc 2 [ 'aa', 'bb', 'cc', 'dd' ]
// dd 3 [ 'aa', 'bb', 'cc', 'dd' ]

14.4、数组slice（从数组中提取选定的元素）

参数：1.起始值的索引，2.结尾值的索引(不包含结束索引)

var arr2 = ["a","b","c","d","e"]

// 取数组索引 0, 1 的值
console.log(arr2.slice(0,2))
// 返回值: [ 'a', 'b' ]

// 取数组索引 0 以后的所有值
console.log(arr2.slice(0))
// 返回值: [ 'a', 'b', 'c', 'd', 'e' ]

// 取数组索引 1 至 倒数第1个值
console.log(arr2.slice(1,-1))
// 返回值: [ 'b', 'c', 'd' ]

14.5、数组splice（删除元素，同时向数组内添加新的元素）

参数：1.起始值的索引，2.需要删除的索引数量，3.新添加的值

var arr2 = ["a","b","c","d","e"]

// 从删除数组索引为0的值开始删除，删除2个值(删除索引0,1)
arr2.splice(0,2)
console.log(arr2)
// 返回值: [ 'c', 'd', 'e' ]

// 从删除数组索引为1的值开始删除，删除2个值(删除索引1,2)
arr2.splice(1,2)
console.log(arr2)
// 返回值: [ 'a', 'd', 'e' ]

// 删除数组前2个值(删除索引0,1), 删除完毕后，在被删除索引处，添加新的值"sudada"和"zhangsan"
arr2.splice(0,2, "sudada","zhangsan")
console.log(arr2)
// 返回值: [ 'sudada', 'zhangsan', 'c', 'd', 'e' ]

// 删除数组所有的值
arr2.splice(0)
console.log(arr2)
// 返回值: [ ]

14.6、数组去重

// 数组去重
arr2=[1,2,3,3,4,2,2,5,6,7,4,5,3,]

// 获取数组中的每个元素
for (var n=0; n<=arr2.length; n++){
    // console.log(arr2[n])
    for (var i=n+1; i<=arr2.length; i++){
        // console.log(arr2[i])
        // 判断2个元素的值是否相等，如果相等说明出现了重复的元素，则删除i对应的元素
        if (arr2[n]==arr2[i]){
            arr2.splice(i,1)
            // 删除了i所在的元素之后，后面的元素会自动补位，此时不会在比较这个"补位"的元素，需要在比较一次i位置所在的元素
            i--; // 这里自建i--，循环后上面在自增i++，相当于没加没减，又重复的执行了一次
        }
    }
}
console.log(arr2)
// 返回值: [ 1, 2, 3, 4, 5, 6, 7 ]

14.7、数组的join方法（指定分隔符）

// join方法：将数组转换为字符串(可以指定分隔符)。该方法不会对原数组产生影响
var arr = ["aa", "bb", "cc"]
// 默认的分隔符为","
console.log(arr.join())
// 返回值: aa,bb,cc

// 指定分隔符为"/"
console.log(arr.join("/"))
// 返回值: aa/bb/cc

14.7、数组的concat方法（多个数组合并）

// concat方法：合并多个数组(也可以合并字符串)，将合并的值返回。该方法不会对原数组产生影响
var arr1 = ["a","b","c","d","e"]
var arr2 = ["A","B","D","D","E"]
var arr3 = ["aa", "bb", "cc"]

console.log(arr1.concat(arr2, arr3, "zhangsan"))
// 返回值: [ 'a', 'b', 'c', 'd', 'e', 'A', 'B', 'D', 'D', 'E', "aa", "bb", "cc", "zhangsan" ]

14.7、数组的reverse方法（反转数据）

// reverse方法：反转数组，将数组值的顺序颠倒。该方法会修改原数组
var arr = ["aa", "bb", "cc"]
console.log(arr.reverse())
// 返回值: [ 'cc', 'bb', 'aa' ]

14.7、数组的sort方法（数组排序）

// sort方法：对数组进行排序。该方法会修改原数组
var arr = ["b","c","d","a","e"]
console.log(arr.sort())
// 返回值: [ 'a', 'b', 'c', 'd', 'e' ]

十五、Date对象，时间相关

15.1、Data对象来表示一个时间

var d = new Date();
console.log(d)  // 返回值：2023-08-06T12:45:42.716Z

// 快速获取当前的时间戳
console.log(Date.now()) // 返回值：1691328309245

15.2、创建一个 "指定时间" 的 "时间对象"（在构造函数中传递一个 "表示时间的字符串" 作为参数）

// 创建一个 "指定时间" 的 "时间对象"（在构造函数中传递一个 "表示时间的字符串" 作为参数）
var d2 = new Date("2023/08/06 12:10:10")
console.log(d2)  // 返回值：2023-08-06T04:10:10.000Z

获取当前日期对象是哪一天
console.log(d2.getDate())   // 返回值：6

获取当前日期对象是周几，0表示周末
console.log(d2.getDay())   // 返回值（0-6）：0

获取当前日期对象是几月份，0表示1月份
console.log(d2.getMonth())   // 返回值（0-11）：7

获取当前日期对象的年份
console.log(d2.getFullYear())   // 返回值：2023

获取当前日期对象的小时数
console.log(d2.getHours())   // 返回值：12

获取当前日期对象的分钟数
console.log(d2.getMinutes())   // 返回值：10

获取当前日期对象的秒数
console.log(d2.getSeconds())   // 返回值：10

获取当前日期对象的时间戳,1970年1月1日00:00:00到当前时间的秒数
console.log(d2.getTime())   // 返回值：1691295010000

十六、Math

Math和其他对象不同，不是一个构造函数。是一个工具类对象，里面封装了数学运算相关的属性和方法

16.1、Math对象属性

获取圆周率
console.log(Math.PI) // 返回值：3.141592653589793

16.2、Math对象方法

// 一个数字的绝对值
console.log(Math.abs(12)) // 返回值：12
console.log(Math.abs(-1)) // 返回值：1

// 上舍入（向上取整，小数位有值，就自动进1）
console.log(Math.ceil(1.5)) // 返回值：2
console.log(Math.ceil(1.1)) // 返回值：2
console.log(Math.ceil(1.0)) // 返回值：1

// 下舍入（向下取整，小数位有值，就自动减掉小数位的值）
console.log(Math.floor(1.5)) // 返回值：1
console.log(Math.floor(1.1)) // 返回值：1
console.log(Math.floor(1.0)) // 返回值：1

// 四舍五入
console.log(Math.round(1.5)) // 返回值：2
console.log(Math.round(1.4)) // 返回值：1

// 取随机值（取0-1之间的随机数）
console.log(Math.random()) // 返回值：0.8869327992322307
// 生成一个0-10之间的随机数
console.log(Math.round(Math.random()*10))
// 生成一个0-100之间的随机数
console.log(Math.round(Math.random()*100))

// 生成一个x-y之间的随机数
var x =20;
var y =40;
console.log(Math.round(Math.random()*(y-x))+x)

// 获取最大值
console.log(Math.max(10,20,30,40))   // 返回值：40

// 获取最小值
console.log(Math.min(10,20,30,40))   // 返回值：10

十七、字符串String的相关方法

17.1、常见用法

// 创建一个字符串
var str = "hello"   // 字符串是以"字符数组"的形式保存的 [ "h","e","l","l","o" ]

// 查看字符串的长度
console.log(str.length) // 返回值：5

// 返回指定位置的字符（根据索引获取数组的值）
console.log(str.charAt(0)) // 返回值：h
console.log(str[0]) // 返回值：h

// 把变量 "str" 的值和 " all" 连接在一起
console.log(str.concat(" all")) // 返回值：hello all

// 检查某个值是否存在变量 "str" 中（从前往后找）
// 检索"aaa"是否存在于变量 "str" 中，如果存在则返回对应的"索引值"，如果不存在则返回"-1"
console.log(str.indexOf("aaa")) // 返回值：-1
// 检索"o"是否存在于变量 "str" 中，如果存在则返回对应的"索引值"，如果不存在则返回"-1"
console.log(str.indexOf("o")) // 返回值：4

// 检查某个值是否存在变量 "str" 中，同时指定查找位置（从前往后找）
// 检索"h"是否存在于变量 "str" 中，从"str"第0个索引开始查找，如果找到则返回对应的"索引值"，如果没找到则返回"-1"
console.log(str.indexOf("h", 0)) // 返回值：0
// 检索"h"是否存在于变量 "str" 中，从"str"第1个索引开始查找，如果找到则返回对应的"索引值"，如果没找到则返回"-1"
console.log(str.indexOf("h", 1)) // 返回值：-1

var name = "sudad"
// 检查某个值是否存在变量 "name" 中（从后往前找）
// 检索"aaa"是否存在于变量 "name" 中，如果存在则返回对应的"索引值"，如果不存在则返回"-1"
console.log(name.lastIndexOf("aaa")) // 返回值：-1
// 检索"a"是否存在于变量 "name" 中，如果存在则返回对应的"索引值"，如果不存在则返回"-1"
console.log(name.lastIndexOf("a")) // 返回值：3

var str1= "asdnnwuch";
// 截取字符串索引0,1的值
console.log(str1.slice(0,2)) // 返回值：as

// 截取字符串索引1和1之后所有的值
console.log(str1.slice(1)) // 返回值：sdnnwuch

// 截取字符串索引1 ~ -1的值
console.log(str1.slice(1,-1)) // 返回值：sdnnwuc

var str2= "123d,235,asdjkl,a123d";
// 指定字符串的分隔符为","，将分割后的数据以数组的格式展示
console.log(str2.split(',')) // 返回值：[ '123d', '235', 'asdjkl', 'a123d' ]

var str3= "AsdiqamSdkwqemasdS";
// 字符串转为大写
console.log(str3.toUpperCase()) // 返回值：ASDIQAMSDKWQEMASDS

// 字符串转为小写
console.log(str3.toLowerCase()) // 返回值：asdiqamsdkwqemasds

十八、正则表达式

18.1、字符串常用的正则表达式方法

var str = "asdmka,dsji,98823jkl,asdj"
// 将字符串拆分为数组
console.log(str.split()) // 返回值： [ 'asdmka,dsji,98823jkl,asdj' ]

// 将字符串指定分隔符拆分为数组
console.log(str.split(",")) // 返回值： [ 'asdmka', 'dsji', '98823jkl', 'asdj' ]

var str1 = "a1b2b3b4n5m6"
// 将任意字母均作为分隔符，拆分字符串
console.log(str1.split(/[a-z]/)) // 返回值： ['',  '1', '2', '3', '4', '5', '6']

var str2 = "hello abc hello sdf"
// 搜索"abc"是否存在，如果存在则返回索引值，不存在则返回-1
console.log(str2.search("abc")) // 返回值：6

// 搜索 "abc" 或 "sdf" 是否存在，如果存在则返回索引值，不存在则返回-1
console.log(str2.search(/abc|sdf/)) // 返回值：6

// 搜索 "a * c" 是否存在，如果存在则返回索引值，不存在则返回-1
console.log(str2.search(/a[bc]c/)) // 返回值：6

var str3 = "ma9m9ZidTY"
// 提取所有字母（只返回匹配到的第一个字母），返回一个数组格式
console.log(str3.match(/[a-z]/)) // 返回值： ['m']
// 提取所有字母（返回所有的小写字母），返回一个数组格式
console.log(str3.match(/[a-z]/g)) // 返回值： [ 'm', 'a', 'm', 'i', 'd' ]
// 提取所有字母（返回所有的字母，忽略大小写），返回一个数组格式
console.log(str3.match(/[a-z]/gi)) // 返回值： [ 'm', 'a', 'm', 'Z', 'i', 'd', 'T', 'Y']

var str4 = "abc abc ABC sdf ert"
// 内容替换，把"abc"替换为"sudada"，默认只替换第一个匹配到的
console.log(str4.replace("abc", "sudada")) // 返回值：sudada abc ABC sdf ert
// 替换完毕后，原来的值不会发生改变
console.log(str4) // 返回值：abc abc ABC sdf ert

// 内容替换，把"abc"替换为"sudada"，替换所有（不忽略大小写）
console.log(str4.replace(/abc/g, "sudada")) // 返回值：sudada sudada ABC sdf ert

// 内容替换，把"abc"替换为"sudada"，替换所有（忽略大小写）
console.log(str4.replace(/abc/gi, "sudada")) // 返回值：sudada sudada sudada sdf ert

18.2、正则表达式语法

// 字符串"b"出现的次数: {3} 表示字符串"b"出现的次数为3次，和字符串"a"无关
var reg1 = /ab{3}/
console.log(reg1.test("acabbb")) // 返回值：true
console.log(reg1.test("ab")) // 返回值：false

// 字符串"ab"出现的次数: {3} 表示字符串"ab"出现的次数为3次
var reg2 = /(ab){3}/
console.log(reg2.test("abababa")) // 返回值：true
console.log(reg2.test("ab")) // 返回值：false

// 字符串"b"出现的次数: {1,3} 表示字符串"b"出现的次数为1~3次
var reg3 = /ab{1,3}c/
console.log(reg3.test("abbbc")) // 返回值：true
console.log(reg3.test("abbbbc")) // 返回值：false

// 字符串"b"出现的次数: {3,} 表示字符串"b"出现的次数为3次及以上
var reg4 = /ab{3,}c/
console.log(reg4.test("abbbbbc")) // 返回值：true
console.log(reg4.test("abbc")) // 返回值：false

// 字符串"b"出现的次数: + 表示字符串"b"出现的次数为1次及以上，相当于{1,}
var reg5 = /ab+c/
console.log(reg5.test("abc")) // 返回值：true

// 字符串"b"出现的次数: * 表示字符串"b"出现的次数为0次及以上，相当于{0,}
var reg6 = /ab*c/
console.log(reg6.test("aac")) // 返回值：true
console.log(reg6.test("abc")) // 返回值：true

// 字符串"b"出现的次数: ? 表示字符串"b"出现的次数为0~1次，相当于{0,1}
var reg7 = /ab?c/
console.log(reg7.test("abc")) // 返回值：true
console.log(reg7.test("abbc")) // 返回值：false

// 检查一个字符串是否是以a开头，使用：^
var reg8 = /^a/
console.log(reg8.test("abc")) // 返回值：true
console.log(reg8.test("bac")) // 返回值：false

// 检查一个字符串是否是以a结尾，使用：$
var reg9 = /a$/
console.log(reg9.test("ba")) // 返回值：true
console.log(reg9.test("abad")) // 返回值：false

// 检查手机号是否符合长度(规范)
var reg10 = /^1[0-9]{10}$/
console.log(reg10.test("13245678912")) // 返回值：true

// 检查字符串中是否存在：. (.表示任意字符，这里需要用到转译字符"\")
var reg11 = /\./
console.log(reg11.test("as.dj")) // 返回值：true
console.log(reg11.test("adas")) // 返回值：true

// 检查字符串中是否存在：字母，数字，_
var reg12 = /\w/
console.log(reg12.test("as")) // 返回值：true
console.log(reg12.test("123")) // 返回值：true
console.log(reg12.test("_")) // 返回值：true

// 检查字符串中是否存在："字母，数字，_"之外的其他的值
var reg13 = /\W/
console.log(reg13.test(".*")) // 返回值：true
console.log(reg13.test("as")) // 返回值：false
console.log(reg13.test("123")) // 返回值：false
console.log(reg13.test("_")) // 返回值：false

// 检查字符串中是否存在：任意的数字，相当于 [0-9]
var reg14 = /\d/
console.log(reg14.test("123")) // 返回值：true
console.log(reg14.test("abc")) // 返回值：false

// 检查字符串中是否存在：数字之外的其他的值
var reg15 = /\D/
console.log(reg15.test("123")) // 返回值：false
console.log(reg15.test("abc")) // 返回值：true

// \s 检查字符串中是否存在：" "
var reg16 = /\s/
console.log(reg16.test(" ")) // 返回值：true
console.log(reg16.test("abc")) // 返回值：false

// \S 检查字符串中是否存在：" "之外的其他的值
var reg17 = /\S/
console.log(reg17.test(" ")) // 返回值：false
console.log(reg17.test("abc")) // 返回值：true

十九、DOM

19.1、什么是dom？

Document Object Module 文档对象模型

在JS中通过DOM来对HTML文档进行操作

19.2、事件

事件发生：就是用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动，关闭窗口等。

事件处理：接收(捕捉)用户的交互行为后，响应该行为(事件)。

19.3、文档的加载（onload事件会在"整个页面"加载完成之后才触发）

<head>
    <title>Title</title>
    <script type="application/javascript">
        // onload事件会在"整个页面"加载完成之后才触发
        // 为windows绑定一个onload事件：
            // 该事件对应的响应函数将会在页面加载完成之后执行
            // 这样可以确保我们的代码执行时，所有的DOM对象已经加载完毕了
        window.onload = function () {
            // 绑定id为btn的按钮
            var btn = document.getElementById("btn")
            btn.onclick = function (){
                alert('sss')
            }
        }
    </script>
</head>

<body>
    <button id="btn">点我</button>
</body>

如果不使用onload事件的话，因为页面加载顺序是从上而下的，会找不到"btn"对象，如下：

<head>
    <title>Title</title>
    <script type="application/javascript">
        // 绑定id为btn的按钮
        var btn = document.getElementById("btn")
        btn.onclick = function (){
            alert('sss')
        }
    </script>
</head>

<body>
    <button id="btn">点我</button>
</body>

不使用onload事件，如何解决？把script标签写到button标签下面即可，如下：

<body>
    <button id="btn">点我</button>

    <script type="application/javascript">
        // 绑定id为btn的按钮
        var btn = document.getElementById("btn")
        btn.onclick = function (){
            alert('sss')
        }
    </script>
</body>

19.4、dom查询一（获取元素节点，通过document对象调用）

读取元素节点属性，直接使用"元素.属性名"
例子："元素.id" 或 "元素.name" 或 "元素.value"
例外："class属性" 不能这么读，属于保留字（读取"class属性"时要使用 "元素.className"）

19.4.1、document.getElementById("btn")

通过id属性，获取一个元素节点对象

<body>
    <button id="btn">dianji</button>

    <script type="application/javascript">
        // 获取id为btn的按钮
        var btn = document.getElementById("btn")
        // 获取btn的按钮的值
        // innerHTML用于获取元素内部的HTML代码的值
        console.log(btn.innerHTML)  // 返回值：dianji
    </script>
</body>

19.4.2、document.getElementsByTagName("li")

通过标签名，获取一组元素节点对象

<body>
    <li>shanghai</li>
    <li>beijing</li>
    <li>shenzhen</li>

    <script type="application/javascript">
        // 通过标签名，获取一组元素节点对象（拿到的是一个数组）
        var lis = document.getElementsByTagName("li")
        // 循环获取li标签的值
        for (var i =0;i<=lis.length;i++) {
            // innerHTML用于获取元素内部的HTML代码的值
            console.log(lis[i].innerHTML)   // 返回值：shanghai，beijing，shenzhen
        }
    </script>
</body>

19.4.3、document.getElementsByName("gender")

通过name属性，获取一组元素节点对象（输入框input,表单form）

<body>
    <div>
        <input type="text" name="gender" value="male">
        <input type="text" name="gender" value="female">
    </div>

    <script type="application/javascript">
        // 通过name属性，获取一组元素节点对象（拿到的是一个数组）
        var inputs = document.getElementsByName("gender")
        for (var i =0;i<=inputs.length;i++) {
            // 读取元素节点属性，直接使用"元素.属性名"
                // 例子："元素.id" 或 "元素.name" 或 "元素.value"
                // 例外："class属性" 不能这么读，属于保留字
                    // 读取"class属性"时要使用 "元素.className"
            console.log(inputs[i].value)   // 返回值：male，female
        }
    </script>
</body>

19.4.4、图片切换的小功能（上述3个功能结合实现）

<body>
<div>
    <img src="img/1.jpg" alt="xxx">
    <p id="info"></p>
    <button id="prev">prev</button>
    <button id="next">next</button>
</div>

<script type="application/javascript">
    window.onload = function () {
        // 获取标签名为"img"的节点对象
        var imgs = document.getElementsByTagName("img")[0]

        // 存放图片的数组
        var imgArr = [ "img/1.jpg", "img/2.jpg" ]

        // 创建一个变量，保存当前正在显示的图片索引
        var index = 0

        // 获取id="info"的节点对象
        var infos = document.getElementById("info")
        infos.innerHTML = 'all' + imgArr.length + 'jpg, now' + (index+1) + 'page'

        // 获取id="prev"的节点对象
        var prevs = document.getElementById("prev")
        // 为该节点绑定onclick方法
        prevs.onclick = function (){
            index--
            if (index < 0){
                index = imgArr.length-1
            }
            // 为imgs节点对象的".src"属性赋值
            imgs.src = imgArr[index]
            // 点击按钮后，设置一次提示词
            infos.innerHTML = '一共' + imgArr.length + '张图片, 当前是第' + (index+1) + '张'
        }

        // 获取id="next"的节点对象
        var nexts = document.getElementById("next")
        // 为该节点绑定onclick方法
        nexts.onclick = function (){
            index++
            if (index > imgArr.length-1){
                index = 0
            }
            // 为imgs节点对象的".src"属性赋值
            imgs.src = imgArr[index]
            // 点击按钮后，设置一次提示词
            infos.innerHTML = 'all' + imgArr.length + 'jpg, now' + (index+1) + 'page'
        }
    }
</script>
</body>

19.5、dom查询二（获取元素节点的子节点，通过具体的元素节点调用）

<body>
    <ul id="city">
        <li>shanghai</li>
        <li>beijing</li>
        <li>shenzhen</li>
    </ul>

    <script type="application/javascript">
        // 获取id="city"的节点对象
        var citys = document.getElementById("city")

        // 通过节点对象"citys"，获取标签为"li"的子节点对象
        lis = citys.getElementsByTagName("li")
        for (var i=0;i<lis.length;i++) {
            console.log(lis[i])  //返回值：shanghai，beijing，shenzhen
        }
        // 获取当前节点的所有子节点（childNodes会获取包括文本节点在内的所有子节点）
        // 方法1:
        var cns = citys.childNodes
        console.log(cns.length)  //返回值：7（3个li加4个换行符）

        // 方法2:（推荐使用）
        var cns2 = citys.children
        console.log(cns2.length) //返回值：3

        // 获取当前节点的第一个子节点（firstChild会获取到当前元素的第一个子节点，包括空白文本节点）
        var cns3 = citys.firstChild
        console.log(cns3) //返回值：#text

        // 获取当前节点的最后第一个子节点（lastChild会获取到当前元素的最后一个子节点，包括空白文本节点）
        var cns4 = citys.lastChild
        console.log(cns4) //返回值：#text

    </script>
</body>

19.6、dom查询三（获取元素节点的父节点/同级节点，通过具体的节点调用）

<body>
<ul id="city">
    <li id="sh">shanghai</li><li id="bj">beijing</li><li id="sz">shenzhen</li>
</ul>

<script type="application/javascript">
    // 获取id="bj"的节点对象
    var bj = document.getElementById("bj")

    // 获取当前节点"bj"的"父节点"
    var pn = bj.parentNode
    console.log(pn.innerHTML)  // 返回值(有标签)：<li id="sh">shanghai</li>,<li id="bj">beijing</li>,<li id="sz">shenzhen</li>
    console.log(pn.innerText)  // 返回值(无标签)：shanghai,beijing,shenzhen

    // 获取当前节点"bj"的"前一个同级节点"（有空白或者换行符时，返回值为undefined）
    var pn2 = bj.previousSibling
    console.log(pn2.innerText)  // 返回值：shanghai

    // 获取当前节点"bj"的"后一个同级节点"（有空白或者换行符时，返回值为undefined）
    var pn3 = bj.nextSibling
    console.log(pn3.innerText)  // 返回值：shenzhen
</script>
</body>

19.7、dom查询四（body标签，html标签，页面所有标签，元素的class属性）

<body>
<div class="box1">
    <div>box1中的div</div>
</div>

<script type="application/javascript">
    var body = document.body;
    console.log(body)  // body标签

    var html = document.documentElement;
    console.log(html)  // html根标签

    var all = document.all;
    console.log(all)  // 当前页面的所有元素

    // 根据元素的class属性值查询一组元素节点对象
    var box1 = document.getElementsByClassName("box1")
    console.log(box1)  // 返回class="box1"的div

    // 获取div内部的div
    var box2 = document.querySelector(".box1")
    console.log(box2.innerHTML) // box1中的div
</script>
</body>

19.8、全选样例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<form method="post" action="">
    <br />
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <input type="checkbox" id="checkAllBox" />全选/全不选
    <br />
    <input type="button" id="checkAllBtn" value="全 选" />
    <input type="button" id="checkNoBtn" value="全不选" />
    <input type="button" id="checkRevBtn" value="反 选" />
    <input type="button" id="sendBtn" value="提 交" />
</form>

<script type="application/javascript">
    // 获取"全选/全不选"的节点对象
    var checkAllBox = document.getElementById("checkAllBox")
    // 绑定点击事件
    checkAllBox.onclick = function () {
        // 获取input标签
        var items = document.getElementsByName("items")
        for (var i=0; i<items.length; i++){
            // 设置input标签的状态为"checkAllBox.checked"的值（this===checkAllBox）
            // checkAllBox.checked=true"时，全选
            // checkAllBox.checked=false"时，全不选
            items[i].checked=this.checked
        }
    }

    // 获取"全选按钮"的节点对象
    var checkAllBtn = document.getElementById("checkAllBtn")
    // 绑定点击事件
    checkAllBtn.onclick = function () {
        // 获取input标签
        var items = document.getElementsByName("items")
        for (var i=0; i<items.length; i++){
            // 设置input标签的状态为"选中"
            items[i].checked=true
        }
        // 全选后设置checkAllBox.checked=true
        checkAllBox.checked=true
    }

    // 获取"全不选按钮"的节点对象
    var checkNoBtn = document.getElementById("checkNoBtn")
    // 绑定点击事件
    checkNoBtn.onclick = function () {
        // 获取input标签
        var items = document.getElementsByName("items")
        for (var i=0; i<items.length; i++){
            // 设置input标签的状态为"全不选中"
            items[i].checked=false
        }
        // 全不选后设置checkAllBox.checked=false
        checkAllBox.checked=false
    }

    // 获取"反选按钮"的节点对象
    var checkRevBtn = document.getElementById("checkRevBtn")
    // 绑定点击事件
    checkRevBtn.onclick = function () {
        // 默认先将checkAllBox设置为选中
        checkAllBox.checked=true
        // 获取input标签
        var items = document.getElementsByName("items")
        for (var i=0; i<items.length; i++){
            // 已选中(checked=true)的取消，未选中(checked=false)的选中
            items[i].checked = !items[i].checked
            // 反选时也需要判断4个input框是否全都选中了
            if (!items[i].checked){
                checkAllBox.checked=false
            }
        }
    }

    // 提交按钮（将所有选中的多选框弹出）
    var sendBtn = document.getElementById("sendBtn")
    // 绑定点击事件
    sendBtn.onclick = function () {
        // 获取input标签
        var items = document.getElementsByName("items")
        for (var i=0; i<items.length; i++){
            // 打印已选中(checked=true)的元素的value
            if (items[i].checked) {
                console.log(items[i].value)
            }
        }
    }

    // 为4个input框分别绑定"点击响应函数"
    var items = document.getElementsByName("items")
    for (var i=0; i<items.length; i++){
        items[i].onclick = function () {
            // 默认先将checkAllBox设置为选中
            checkAllBox.checked=true
            // 循环判断items[n].checked的值，如果有一个为false，则checkAllBox.checked=false
            for (var n=0; n<items.length; n++) {
                if (!items[n].checked){
                    checkAllBox.checked=false
                    // 将checkAllBox.checked设置为false后直接退出循环
                    break
                }
            }
        }
    }
</script>
</body>

19.9、DOM增删改