《从0到1：JavaScript 快速上手》

发表于 | 分类于 ， |

微信读书
操作笔记 03
2023-06-08 11:34:11（开始）
2023-06-12 18:11:18（结束）
.
ES6 再学习-2021-01-08
【日期标记】2023-06-29 17:45:04 以上同步完成

js简介

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<pre>
    JavaScript，就是我们通常所说的JS。
    这是一种嵌入到HTML页面中的编程语言，由浏览器一边解释一边执行。
    
1．JavaScript与Java有什么关系吗？
    很多人看到JavaScript和Java，自然而然就会问：“这两个究竟有什么关系？”其实，它们也是“有一毛钱关系”的，并不能说完全没有关系。
    JavaScript最初的确是受Java启发而开始设计的，而且设计的目的之一就是“看上去像Java”，因此语法上它们有不少类似之处，JavaScript的很多名称和命名规则也借自Java。
    但实际上，JavaScript的主要设计原则源自Self和Scheme。JavaScript和Java虽然名字相似，但是本质上是不同的，主要体现在以下2个方面。JavaScript往往都是在网页中使用的，而Java却可以在软件、网页、手机App等各个领域中使用。从本质上讲，Java是一门面向对象的语言，而JavaScript更像是一门函数式编程语言。
    
2．我的页面加入了JavaScript特效，那这个页面是静态页面，还是动态页面呢？
    不是“会动”的页面就叫动态页面，静态页面和动态页面的区别在于是否与服务器进行数据交互。
    
3．对于学习JavaScript，有什么好的建议呢？
    JavaScript是当下较流行也是较复杂的一门编程语言，对于JavaScript的学习，我给初学者2个建议。
    学完JavaScript入门（也就是本书内容）后，不要急于去学习JavaScript进阶的内容而应该先去学习jQuery。
    经过jQuery的学习，可以让我们对JavaScript的基础知识有更深一层的理解。学完了jQuery，再去学习JavaScript进阶的内容会更好。
    很多人在学习JavaScript的时候，喜欢在第一遍的学习过程中就对每一个细节都“抠”清楚，实际上，这是效率最低的学习方法。
    在第一遍的学习中，如果有些内容我们实在没办法理解，那就直接跳过，等学到后面或者看第2遍的时候，自然而然就懂了。
</pre>
</body>
</html>

document.write

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        document.write("绿叶学习网，给你初恋般的感觉~");
    </script>
</head>
<body>
</body>
</html>

元素事件js

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
<input type="button" value="按钮" onclick="alert('绿叶学习，给你初恋般的感觉')"/>
</body>
</html>

元素事件调用js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        function alertMes() {
            alert("绿叶学习网，给你初恋般的感觉");
        }
    </script>
</head>
<body>
<input type="button" value="按钮" onclick="alertMes()"/>
</body>
</html>

浏览器开关

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        /*
            下面这个例子实现的功能：当页面打开时，会弹出对话框，内容为“欢迎光临萌萌小店”；
            当页面关闭时，也会弹出对话框，内容为“记得下次再来喔”。
        */
        window.onload = function () {
            alert("欢迎光临萌萌小店！");
        }
        window.onbeforeunload = function (event) {
            var e = event || window.event;
            e.returnValue = "记得下来再来喔！";
        }
    </script>
</head>
<body>
</body>
</html>

字符串转数字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        /*
            Number 会保留小数
            Number 完全数字转换
            
            parseInt 会舍去小数
            截取数字转换
            
            parseFloat 会保留小数
            截取数字转换
        */
        document.write("Number('123')：" + Number("123") + "<br/>");
        document.write("Number('3.1415')：" + Number("3.1415") + "<br/>");
        document.write("Number('hao123')：" + Number("hao123") + "<br/>");
        document.write("Number('100px')：" + Number("100px") + "<br/>");
        
        document.write("<br/>");

        document.write("parseInt('123')：" + parseInt("123") + "<br/>");
        document.write("parseInt('3.1415')：" + parseInt("3.1415") + "<br/>");
        document.write("parseInt('3.999')：" + parseInt("3.999") + "<br/>");
        document.write("parseInt('hao123')：" + parseInt("hao123") + "<br/>");
        document.write("parseInt('100px')：" + parseInt("100px")+ "<br/>");
        document.write("parseInt('+123')：" + parseInt("+123") + "<br/>");
        document.write("parseInt('-123')：" + parseInt("-123")+ "<br/>");

        document.write("<br/>");

        document.write("parseFloat('123')：" + parseFloat("123") + "<br/>");
        document.write("parseFloat('3.1415')：" + parseFloat("3.1415") + "<br/>");
        document.write("parseFloat('3.999')：" + parseFloat("3.999") + "<br/>");
        document.write("parseFloat('hao123')：" + parseFloat("hao123") + "<br/>");
        document.write("parseFloat('100px')：" + parseFloat("100px")+ "<br/>");
        document.write("parseFloat('+123')：" + parseFloat("+123") + "<br/>");
        document.write("parseFloat('-123')：" + parseFloat("-123")+ "<br/>");
    </script>
</head>
<body>
</body>
</html>

转义符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        document.write("绿叶，给你初恋般的感觉~");

        document.write("<br>");
        
        /*
                \' 单引号
                \" 双引号
                \n 换行
         */

        document.write("绿叶，给你\"初恋\"般的感觉~");
    </script>
</head>
<body>
</body>
</html>

while true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        while (true) {
            alert("我也是醉了~");
        }
    </script>
</head>
<body>
</body>
</html>

判断整数 小数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        var n = 3.14;
        if (parseInt(n.toString()) == parseFloat(n.toString())) {
            document.write(n + "是整数")
        } else {
            document.write(n + "是小数")
        }
    </script>
</head>
<body>
</body>
</html>

水仙花数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        //定义一个空字符串，用来保存水仙花数
        var str = "";
        for (var i = 100; i < 1000; i++) {
            var a = i % 10;             //提取个位数
            var b = (i / 10) % 10       //提取十位数
            b = parseInt(b);            //舍弃小数部分
            var c = i / 100;            //提取百位数
            c = parseInt(c);            //舍弃小数部分
            if (i == (a * a * a + b * b * b + c * c * c)) {
                str = str + i + "、";
            }
        }
        document.write("水仙花数有：" + str);
    </script>
</head>
<body>
</body>
</html>

三种循环1加到100

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum+=i;
        }
        document.write("fori 1+2+3+...+100=" + sum);
        document.write("<br>");

        sum = 0;
        var i = 1;
        do {
            sum+=i;
            i++;
        }while (i<=100);
        document.write("do-while 1+2+3+...+100=" + sum);
        document.write("<br>");
        
        sum=0;
        i=1;
        while (i<=100){
            sum+=i;
            i++;
        }
        document.write("while 1+2+3+...+100=" + sum);
        document.write("<br>");
    </script>
</head>
<body>
</body>
</html>

循环输出菱形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>

        var i, j;
        for (var step = 0; step < 7; step++) {
            if (step == 0) {
                i = 3;
                j = 1;
            } else if (step <= 3) {
                i--;
                j += 2;
            } else {
                i++;
                j -= 2;
            }

            for (var k = 0; k < i; k++) {
                document.write("-");
            }
            for (var k = 0; k < j; k++) {
                document.write("*");
            }
            document.write("<br>");
        }

    </script>
</head>
<body>
</body>
</html>

九九乘法表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
                1 * 1 = 1
                1 * 2 = 2    2 * 2 = 4
                1 * 3 = 3    2 * 3 = 6    3 * 3 = 9
                ……
         */
        for (var i = 1; i <= 9; i++) {
            for (var j = 1; j <= i; j++) {
                document.write(i + "*" + j + "=" + (i * j));
                document.write("&nbsp;&nbsp;&nbsp;");
            }
            document.write("<br>");
        }
    </script>
</head>
<body>
</body>
</html>

内置函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
                内置函数
                
                函数	                说明
                parseInt()	            提取字符串中的数字，只限提取整数
                parseFloat()	        提取字符串中的数字，可以提取小数
                isFinite()	            判断某一个数是否是一个有限数值
                isNaN()	                判断一个数是否是NaN值
                escape()	            对字符串进行编码
                unescape()	            对字符串进行解码
                eval()                  把一个字符串当做一个表达式一样去执行
         */
    </script>
</head>
<body>
</body>
</html>

字符串对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script>
        /*
            字符串名.length
            
            字符串名.toLowerCase()
            字符串名.toUpperCase()
            
            字符串名.charAt(n)
            
            字符串名.substring(start, end)
                substring（start,end）的截取范围为“[start,end）”，也就是包含start，但不包含end。
                end可以省略。当end省略时，截取的范围为“start到结尾”。
        
            字符串名.replace(原字符串, 替换字符串)
            字符串名.replace(正则表达式, 替换字符串)
                str.replace("陶攀峰", "taopanfeng")   只替换第一个
                str.replace(/陶攀峰/g, "taopanfeng")   替换全部
            
            字符串名.split("分割符")
                注意，split（" "）和split（""）是不一样的。
                前者两个引号之间有空格，表示用空格作为分割符来分割。
                后者两个引号之间没有空格，可以用来分割字符串的每一个字符。
                这个技巧非常棒，也用得很多，小伙伴们可以记一下。
                
            字符串名.indexOf(指定字符串)
            字符串名.lastIndexOf(指定字符串)
                indexOf 首次出现的下标位置
                lastIndexOf 最后出现的下标位置  
                indexOf()和lastIndexOf()不仅可以用于检索字符串，还可以用于检索单个字符。
                如果字符串中不包含“指定字符串”,indexOf（　）或lastIndexOf（　）会返回-1。
         */
        var str = "陶攀峰你好啊陶攀峰";
        var s1 = str.replace(/陶攀峰/g, "taopanfeng");
        document.write(s1);// taopanfeng你好啊taopanfeng
        document.write("<br>")

        var s2 = str.replace("陶攀峰", "taopanfeng");
        document.write(s2)// taopanfeng你好啊陶攀峰
        document.write("<br>")

        var str = "Rome was not built in a day.";
        document.write(str.indexOf("rome"));
    </script>
    <title></title>
</head>
<body>
</body>
</html>

遍历对象

JavaScript 遍历对象—CSDN

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# 补 2023-09-21 19:18:00
for...in 循环：for...in 循环用于遍历对象的属性。例如：
        const obj = {a: 1, b: 2, c: 3}
        for (const key in obj) {
          console.log(key, obj[key])
        }


for...in 循环遍历原型链中的属性。
这意味着每当我们使用 for...in 循环遍历一个对象时，我们都需要使用 hasOwnProperty 检查该属性是否属于该对象：
        const obj = {a: 1, b: 2, c: 3}
        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            console.log(`${key}: ${obj[key]}`);
          }
        }

Object.keys() 方法：Object.keys() 方法返回一个包含对象所有可枚举属性名称的数组。例如：
        const obj = {a: 1, b: 2, c: 3}
        const keys = Object.keys(obj)
        for (const key of keys) {
          console.log(key, obj[key])
        }

Object.entries() 方法：Object.entries() 方法返回一个包含对象所有可枚举属性键值对的数组。例如：
        const obj = {a: 1, b: 2, c: 3}
        const entries = Object.entries(obj)
        for (const [key, value] of entries) {
          console.log(key, value)
        }

Object.getOwnPropertyNames() 方法：Object.getOwnPropertyNames() 方法返回一个包含对象所有属性名称的数组（包括不可枚举属性）。例如：
        const obj = {a: 1, b: 2, c: 3}
        const keys = Object.getOwnPropertyNames(obj)
        for (const key of keys) {
          console.log(key, obj[key])
        }

Map

JavaScript Map — W3C

数组对象

(JavaScript 数组参考手册 — w3school)[https://www.w3school.com.cn/jsref/jsref_obj_array.asp]

1
2
3
4
5
6
7
8
9
10
# 去重
arr = Array( ... new Set(arr))

# 排序
arr.sort()  默认按照unicode编码进行排序
arr.sort( (a,b)=>a-b)  数值升序排序
arr.sort( (a,b)=>b-a)  数值降序排序

# 翻转
数组名.reverse();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script>
        /*
            数组删除元素
            del(id, i) {
                // 成功 ===> 根据属性
                // this.booksList = this.booksList.filter(e => e.id !== id)

                // 成功 ===> 根据下标   从i开始，删除1个
                this.booksList.splice(i, 1)
            }
        
        
        
            6.2 数组的创建
                var 数组名 = new Array(元素1, 元素2, ……, 元素n);    //完整形式
                var 数组名 = [元素1, 元素2, ……, 元素n];             //简写形式
                    在实际开发中，我们更倾向于使用简写形式来创建一个数组。
                    var arr = [];                              //创建一个空数组
                    var arr = ["HTML","CSS", "JavaScript"];    //创建一个包含3个元素的数组
                
            6.3 数组的获取
                arr[3]表示获取数组arr的第4个元素，而不是第3个元素。
            
            6.4 数组的赋值
                arr[i] = 值; 
            
            6.5 获取数组长度
                数组名.length
            
            6.6 截取数组部分
                数组名.slice(start, end);
                slice(start,end)截取范围为：[start,end)，也就是“包含start但不包含end”。
                其中，end可以省略。当end省略时，获取的范围为：start到结尾。
                
                var arr = [1,2,3,4,5];
                var result = arr.slice(1, 3);
                document.write(result);// 2,3
                
            6.7 添加数组元素
                在数组开头添加元素：unshift()
                    数组名.unshift(新元素1, 新元素2, ……, 新元素n)
                    表示在数组开头添加的新元素。
                    
                    var arr = ["JavaScript", "jQuery"];
                    arr.unshift("HTML", "CSS");
                    document.write(arr);// HTML,CSS,JavaScript,jQuery
                
           ******在数组结尾添加元素：push()
                    数组名.push(新元素1, 新元素2, ……, 新元素n)
                    表示在数组结尾添加的新元素。
                    
                    var arr = ["HTML", "CSS"];
                    arr.push("JavaScript","jQuery");
                    document.write(arr);// HTML,CSS,JavaScript,jQuery
            
            6.8 删除数组元素
                删除数组中第一个元素：shift()
                    数组名.shift()
                    unshift()方法用于在数组开头添加新元素，shift()方法用于删除数组开头第一个元素，两者是相反操作。
                    
                    var arr = ["HTML", "CSS", "JavaScript", "jQuery"];
                    arr.shift();
                    document.write(arr);// CSS,JavaScript,jQuery
            ******删除数组最后一个元素：pop()
                    数组名.pop()
                    push()用于在数组结尾处添加新的元素，pop()用于删除数组最后一个元素，两者也是相反操作。
                    
                    var arr = ["HTML", "CSS", "JavaScript", "jQuery"];
                    arr.pop();
                    document.write(arr);// HTML,CSS,JavaScript
            6.9 数组大小比较
                数组名.sort(函数名)
                    //定义一个升序函数
                    function up(a, b) { return a - b; }
            
                    //定义一个降序函数
                    function down(a, b) {return b - a;}
            
                    //定义数组
                    var arr = [3, 9, 1, 12, 50, 21];
                    arr.sort(up);
                    document.write("升序：" + arr.join("、"));// 升序：1、3、9、12、21、50
                    document.write("<br>");
                    arr.sort(down);
                    document.write("降序：" + arr.join("、"));// 降序：50、21、12、9、3、1
            
            6.10 数组颠倒顺序
                数组名.reverse();
                
                var arr = [3, 1, 2, 5, 4];
                arr.reverse();
                document.write("反向排列后的数组：" + arr);// 反向排列后的数组：4,5,2,1,3
            
            6.11 将数组元素连接成字符串
                数组名.join("连接符");
                连接符是可选参数，用于指定连接元素之间的符号。默认情况下，则采用英文逗号（,）作为连接符来连接。
                
                var arr = ["HTML", "CSS", "JavaScript", "jQuery"];
                document.write(arr.join());// HTML,CSS,JavaScript,jQuery
                document.write("<br>");
                document.write(arr.join("*"));// HTML*CSS*JavaScript*jQuery
                
                注意，join(" ")和join("")是不一样的！
                前者两个引号之间是有空格的，所以表示用空格作为连接符来连接，而后者两个引号之间是没有空格的。
         */

    </script>
    <script>
        // 6.12 实战题：数组与字符串的转换操作
        var str1 = "绿叶学习网";
        var str2 = str1.split("").join("><");
        var arr = str2.split("");
        arr.unshift("<");
        arr.push(">");
        var result = arr.join("");
        document.write(result);// <绿><叶><学><习><网>
        document.write("<hr>")
    </script>
    <script>
        // 6.13 实战题：计算面积与体积，返回一个数组
        function getSize(width, height, depth) {
            var area = width * height;
            var volume = width * height * depth;
            var sizes = [area, volume];
            return sizes;
        }

        var arr = getSize(30, 40, 10);
        document.write("底部面积为：" + arr[0] + "<br/>");
        document.write("体积为：" + arr[1]);
    </script>
    <title></title>
</head>
<body>
</body>
</html>

时间对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
            var 日期对象名 = new Date();
            
            getFullYear()	获取年份，取值为4位数字
            getMonth()	    获取月份，取值为0（一月）到11（十二月）之间的整数
                var myMonth = d.getMonth() + 1;   必须加上1，这样月份才正确。
            getDate()	    获取日数，取值为1~31之间的整数
                获取当前的“日”，不是使用getDay()，而是使用getDate()，大家要看清楚啦！
            getHours()	    获取小时数，取值为0~23之间的整数
            getMinutes()	获取分钟数，取值为0~59之间的整数
            getSeconds()	获取秒数，取值为0~59之间的整数
            getDay()        返回一个数字，其中0表示星期天，1表示星期一……6表示星期六。
                    var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
                    var d = new Date();
                    document.write("今天是" + weekday[d.getDay()]);
            
            setFullYear()	可以设置年、月、日
                时间对象.setFullYear(year,month,day);
                year表示年，是必选参数，用一个4位的整数表示，如2017、2020等。
                month表示月，是可选参数，用0~11之间的整数表示。其中0表示1月，1表示2月，以此类推。
                day表示日，是可选参数，用1~31之间的整数表示。
            setMonth()	    可以设置月、日
                时间对象.setMonth(month, day);
                month表示月，是必选参数，用0~11之间的整数表示。其中0表示1月，1表示2月，以此类推。
                day表示日，是可选参数，用1~31之间的整数表示。
            setDate()	    可以设置日
                时间对象.setDate(day);
                day表示日，是必选参数，用1~31之间的整数表示。
            setHours()	    可以设置时、分、秒、毫秒
                时间对象.setHours(hour, min, sec, millisec);
                hour是必选参数，表示时，取值为0~23之间的整数。
                min是可选参数，表示分，取值为0~59之间的整数。
                sec是可选参数，表示秒，取值为0~59之间的整数。
                millisec是可选参数，表示毫秒，取值为0~999之间的整数。
            setMinutes()	可以设置分、秒、毫秒
                时间对象.setMinutes( min, sec, millisec);
                min是必选参数，表示分，取值为0~59之间的整数。
                sec是可选参数，表示秒，取值为0~59之间的整数。
                millisec是可选参数，表示毫秒，取值为0~999之间的整数。
            setSeconds()	可以设置秒、毫秒
                时间对象.setSeconds(sec, millisec);
                sec是必选参数，表示秒，取值为0~59之间的整数。
                millisec是可选参数，表示毫秒，取值为0~999之间的整数。
            

         */
    </script>
</head>
<body>
</body>
</html>

数学对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
            Math对象的属性
                PI	    圆周率	            π
                LN2	    2的自然对数	        ln(2)
                LN10	10的自然对数	        ln(10)
                LOG2E	以2为底的e的对数	    log2e
                LOG10E	以10为底的e的对数	log10e
                SQRT2	2的平方根	        √2
                SQRT1_2	2的平方根的倒数	    1/√2
                
                在实际开发中，所有角度都是以“弧度”为单位的，例如180°就应该写成Math.PI，而360°就应该写成Math.PI*2，以此类推。
                对于角度，在实际开发中推荐这种写法：“度数 * Math.PI/180”，因为这种写法可以让我们一眼就能看出角度是多少，例如：
                    120*Math.PI/180   //120°
                    150*Math.PI/180   //150°
                上面这个技巧非常重要，在以后的各种开发（如JavaScript动画、HTML5 Canvas动画等）中用得也非常多，大家要认真掌握。
                
            Math对象中的方法（常用）
                max(a,b,…,n)	返回一组数中的最大值
                min(a,b,…,n)	返回一组数中的最小值
                    var a = Math.max(3, 9, 1, 12, 50, 21);
                    var b = Math.min(3, 9, 1, 12, 50, 21);
                    document.write("最大值为：" + a + "<br/>");
                    document.write("最小值为：" + b);
                sin(x)	        正弦
                cos(x)	        余弦
                tan(x)	        正切
                asin(x)	        反正弦
                acos(x)	        反余弦
                atan(x)	        反正切
                atan2(y, x)	    反正切（注意y、x顺序）
                floor(x)	    向下取整
                ceil(x)	        向上取整
                    floor()表示“地板”，也就是向下取整。 舍去小数
                    ceil()表示“天花板”，也就是向上取整。 小数进位
                random()	    生成随机数
            
            Math对象中的方法（不常用）
                abs(x)	    返回x的绝对值
                sqrt(x)	    返回x的平方根
                log(x)	    返回x的自然对数（底为e）
                pow(x,y)	返回x的y次幂
                exp(x)	    返回e的指数

            随机数
                （1）Math.random()*m     表示生成0~m之间的随机数，例如“Math.random()*10”表示生成0-10之间的随机数。
                （2）Math.random()*m+n   表示生成n~m+n之间的随机数，例如“Math.random()*10+8”表示生成8-18之间的随机数。
                （3）Math.random()*m-n   表示生成-n~m-n之间的随机数，例如“Math.random()*10-8”表示生成-8-2之间的随机数。
                （4）Math.random()*m-m   表示生成-m~0之间的随机数，例如“Math.random()*10-10”表示生成-10-0之间的随机数。
                
                如果你想生成0~5之间的随机整数，应该写成：Math.floor(Math.random()*(5+1))
                也就是说，如果你想生成0到m之间的随机整数，应该这样写：Math.floor(Math.random()*(m+1))
                如果你想生成1到m之间的随机整数（包括1和m），应该这样写：Math.floor(Math.random()*m)+1
                如果你想生成n到m之间的随机整数（包括n和m），应该这样写：Math.floor(Math.random()*(m-n+1))+n
                
            随机验证码
                var str = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";
                var arr = str.split("");
                var result = "";
                for (var i = 0; i < 4; i++) {
                    var n = Math.floor(Math.random() * arr.length);
                    result += arr[n];
                }
                document.write(result);
         */

    </script>
</head>
<body>
</body>
</html>

DOM对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
            DOM，全称是“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。
            
            简单地说，DOM里面有很多方法，我们可以通过它提供的方法来操作一个页面中的某个元素，
            如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。
            
            一句话总结：DOM操作，可以简单地理解成“元素操作”。
            
            9.2.2 DOM结构
            DOM采用的是“树形结构”，用“树节点”的形式来表示页面中的每一个元素。
            是不是很像一棵树？其实，这也叫作“DOM树”。在这棵“树”上，HTML元素是树根，也叫根元素。
            在html下面，我们发现有head和body这两个分支，它们位于同一层次上，并且有着共同的父节点（即html），所以它们是兄弟节点。
            
            9.3 节点类型
            JavaScript会把元素、属性以及文本当作不同的节点来处理。
            节点和元素是不一样的概念，节点是包括元素的。
            nodeType的值是一个数字，而不是像“element”或“attribute”那样的英文字符串。
            
            对于节点类型，需要特别注意以下3点。
            1. 一个元素就是一个节点，这个节点称为“元素节点”。
            2. 属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。
            3. 只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。
            
         */

    </script>
</head>
<body>
</body>
</html>

获取元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
            9.4 获取元素
                在JavaScript中，我们可以通过以下6种方式来获取指定元素。
                1. getElementById（　）。
                2. getElementsByTagName（　）。
                3. getElementsByClassName（　）。
                4. querySelector（　） 和 querySelectorAll（　）。
                5. getElementsByName（　）。
                6. document.title 和 document.body。
            
            请注意，JavaScript是严格区分大小写的，所以在书写的时候，不要把这些方法写错。
            例如，把“getElementById（　）”写成“getelementbyid（　）”，就无法得到正确的结果。
         */

    </script>
</head>
<body>
</body>
</html>

getElementById

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
            9.4.1 getElementById()
                document.getElementById("id名")
                
                实际上，getElementById()类似于CSS中的id选择器，只不过getElementById()是JavaScript的操作方式，而id选择器是CSS的操作方式。
                
                
                window.onload = function () {
                    ……
                }
                上面表示在整个页面加载完成后执行的代码块。我们都知道，浏览器是从上到下解析一个页面的。
                这个例子的JavaScript代码在HTML代码的上面，如果没有window.onload，浏览器解析到document.getElementById(“div1”)就会报错，因为它不知道id为"div1"的元素究竟是哪位兄弟。
                
                因此我们必须使用window.onload，使得浏览器把整个页面解析完了再去解析window.onload内部的代码，这样就不会报错了。
                
                注意，getElementById()方法中的id是不需要加上井号（#）的，如果你写成getElementById(”#div1")就是错的。

                此外，getElementById()获取的是一个DOM对象，我们在给变量命名的时候，习惯性地以英文“o”开头，以便跟其他变量区分开来，让我们一眼就看出来这是一个DOM对象。
         */

        window.onload = function () {
            var oDiv = document.getElementById("div1");
            oDiv.style.color = "red";
        }
    </script>
</head>
<body>
<div id="div1">JavaScript</div>
</body>
</html>

getElementsByTagName

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
           9.4.2 getElementsByTagName()
           
           document. getElementsByTagName("标签名")
           
           同样，getElementsByTagName()类似于CSS中的“元素选择器”。
           
           getElementsByTagName()方法中“elements”是一个复数，写的时候别漏掉了“s”。
           这是因为getElementsByTagName()获取的是多个元素（即集合），而getElementById()获取的仅仅是一个元素。
           
            window.onload = function () {
                var oUl = document.getElementById("list");
                var oLi = oUl.getElementsByTagName("li");
                oLi[2].style.color = "red";
            }
            <ul id="list">
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
                <li>jQuery</li>
                <li>Vue.js</li>
            </ul>
           准确来说，getElementsByTagName()方法获取的是一个“类数组”（也叫伪数组），这不是真正意义上的数组。
           为什么这样说呢？因为我们只能使用到数组的length属性以及下标的形式，但是对于push()等方法是没办法在这里用的，小伙伴试一下就知道了。
           记住，类数组只能用到两点：length属性；下标形式。
           
           // oLi.length表示获取“类数组”oLi的长度，有多少个元素，长度就是多少。这个技巧经常会使用到，大家要记住了喔。
           // oLi[i].innerHTML = arr[i];表示设置li元素中的内容为对应下标的数组arr中的元素
        */

        window.onload = function () {
            var arr = ["HTML", "CSS", "JavaScript", "jQuery", "Vue.js"];
            var oUl = document.getElementById("list");
            var oLi = document.getElementsByTagName("li");

            // oLi.length表示获取“类数组”oLi的长度，有多少个元素，长度就是多少。这个技巧经常会使用到，大家要记住了喔。
            for (var i = 0; i < oLi.length; i++) {
                oLi[i].innerHTML = arr[i];
                // oLi[i].innerHTML = arr[i];表示设置li元素中的内容为对应下标的数组arr中的元素
                oLi[i].style.color = "red";
            }
        }
    </script>
</head>
<body>
<ul id="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

getElementsByClassName

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
           9.4.3 getElementsByClassName()
           
           document. getElementsByClassName("类名")
           
           同样地，getElementsByClassName（　）类似于CSS中的class选择器。
          
        */
        window.onload = function () {
            var oLi = document.getElementsByClassName("select");
            oLi[0].style.color = "red";
        }
    </script>
</head>
<body>
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li class="select">JavaScript</li>
    <li class="select">jQuery</li>
    <li class="select">Vue.js</li>
</ul>
</body>
</html>

querySelector querySelectorAll

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
           9.4.4 querySelector()和querySelectorAll()

            document.querySelector("选择器");
            document.querySelectorAll("选择器");
            
            querySelector()表示选取满足选择条件的第1个元素，
            querySelectorAll()表示选取满足条件的所有元素。
            
            这两个方法都是非常简单的，它们的写法跟CSS选择器的写法是完全一样的。
            document.querySelector("#main")
            document.querySelector("#list li:nth-child(1)")
            document.querySelectorAll("#list li")
            document.querySelectorAll("input:checkbox")
            
            对于id选择器来说，由于页面只有一个元素，建议大家用getElementById()，而不是用querySelector()或querySelectorAll()这两个。
            因为getElementById()方法效率更高，性能也更快。
            
            window.onload = function () {
                var oDiv = document.querySelectorAll(".test");
                oDiv[1].style.color = "red";
            }
            <div>JavaScript</div>
            <div class="test">JavaScript</div>
            <div class="test">JavaScript</div><!--红色-->
            <div>JavaScript</div>
            <div class="test">JavaScript</div>
            
            
            
            “document.querySelector（"#list li:nth-child（3）"）”表示选取id为"list"的元素下的第3个元素，nth-child（n）属于CSS3的选择器。
            关于CSS3的知识，可以参考“从0到1”系列的《从0到1:HTML5+CSS3修炼之道》。
            
            实际上，我们也可以使用“document.querySelectorAll（"#list li:nth-child（3）"）[0]”来实现，两者效果是一样的。
            需要注意的是，querySelectorAll（　）方法得到的是一个类数组，即使获取的只有一个元素，也必须使用下标[0]才可以正确获取。
        */
        window.onload = function () {
            var oLi = document.querySelector("#list li:nth-child(3)");
            oLi.style.color = "red";
        }
    </script>
</head>
<body>
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li><!--红色-->
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>
</body>
</html>

getElementsByName

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
           9.4.5 getElementsByName()

            document.getElementsByName("name名")
            
            getElementsByName()获取的也是一个类数组，如果想要准确得到某一个元素，可以使用数组下标形式来获取。
            
            getElementsByName()只用于表单元素，一般只用于单选按钮和复选框。
            
            window.onload = function () {
                var oInput = document.getElementsByName("status");
                oInput[2].checked = true;
            }
            你的最高学历:
            <label><input type="radio" name="status" value="本科"/>本科</label>
            <label><input type="radio" name="status" value="硕士"/>硕士</label>
            <label><input type="radio" name="status" value="博士"/>博士</label><!--默认选中-->
         */

        window.onload = function () {
            var oInput = document.getElementsByName("fruit");
            // 这里使用for循环来将每一个复选框的checked属性都设置为true（被选中）。
            for (var i = 0; i < oInput.length; i++) {
                oInput[i].checked = true;
            }
        }
    </script>
</head>
<body>
你喜欢的水果:
<label><input type="checkbox" name="fruit" value="苹果"/>苹果</label>
<label><input type="checkbox" name="fruit" value="香蕉"/>香蕉</label>
<label><input type="checkbox" name="fruit" value="西瓜"/>西瓜</label>
</body>
</html>

title body

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
           9.4.6 document.title和document.body

            由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取，JavaScript专门为我们提供了两个非常方便的方法：document.title和document.body。
            
            【日期标记】2023-06-08 19:04:57 以上同步完成
         */

        window.onload = function () {
            document.title = "梦想是什么？";
            document.body.innerHTML = "<strong style='color:red'>梦想就是一种让你感到坚持就是幸福的东西。</strong>";
        }
    </script>
</head>
<body>
</body>
</html>

创建元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        table {
            border-collapse: collapse;
        }

        tr, td {
            width: 80px;
            height: 20px;
            border: 1px solid gray;
        }
    </style>
    <script>
        /*
            var e1 = document.createElement("元素名");       //创建元素节点
            var txt = document.createTextNode("文本内容");   //创建文本节点
            e1.appendChild(txt);                            //把文本节点插入元素节点中
            e2.appendChild(e1);                             //把组装好的元素插入已存在的元素中
            
        case 1 创建复杂元素（带属性）
            window.onload = function () {
                var oDiv = document.getElementById("content");
                var oStrong = document.createElement("strong");
                var oTxt = document.createTextNode("绿叶学习网");
                //将文本节点插入strong元素
                oStrong.appendChild(oTxt);
                //将strong元素插入div元素（这个div在HTML已经存在）
                oDiv.appendChild(oStrong);
            }
            <div id="content"></div>
            
        case 2 动态创建图片
            window.onload = function () {
                var oInput = document.createElement("input");
                oInput.id = "submit";
                oInput.type = "button";
                oInput.value = "提交";
                document.body.appendChild(oInput);
            }
            
            在操作动态DOM时，设置元素class用的是className而不是class，这是初学者最容易忽略的地方。
            为什么JavaScript不用class，而是用className呢？
            其实JavaScript有很多关键字和保留字，其中class已经作为保留字，所以就另外起了一个className来用。
            了解这个背后的故事，以后我们也不容易犯错。
            
        case 3 创建多个元素
        
        
        总结一下，如果想要创建一个元素，需要以下4步。
            ① 创建元素节点：createElement()
            ② 创建文本节点：createTextNode()
            ③ 把文本节点插入元素节点：appendChild()
            ④ 把组装好的元素插入到已有元素中：appendChild()
         */
        window.onload = function () {
            //动态创建表格
            var oTable = document.createElement("table");
            for (var i = 0; i < 3; i++) {
                var oTr = document.createElement("tr");
                for (var j = 0; j < 3; j++) {
                    var oTd = document.createElement("td");
                    oTr.appendChild(oTd);
                }
                oTable.appendChild(oTr);
            }
            //添加到body中去
            document.body.appendChild(oTable);
        }
    </script>
</head>
<body>

</body>
</html>

插入元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
    尾插 A.appendChild(B);
            A表示父元素，B表示动态创建好的新元素。
            在JavaScript中，我们可以使用appendChild()把一个新元素插入到父元素的内部子元素的 末尾 。
            
            window.onload表示页面加载完成后会做些什么，而oBtn.onclick表示点击按钮后会做些什么。
            
            window.onload = function () {
                var oBtn = document.getElementById("btn");
                //为按钮添加点击事件
                oBtn.onclick = function () {
                    var oUl = document.getElementById("list");
                    var oTxt = document.getElementById("txt");
                    //将文本框的内容转换为“文本节点”
                    var textNode = document.createTextNode(oTxt.value);
                    //动态创建一个li元素
                    var oLi = document.createElement("li");
                    //将文本节点插入li元素中去
                    oLi.appendChild(textNode);
                    //将li元素插入ul元素中去
                    oUl.appendChild(oLi);
                };
            }
            <ul id="list">
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
            <input id="txt" type="text"/><input id="btn" type="button" value="插入"/>
            
    任意插 A.insertBefore(B,ref);
    头插 A.insertBefore(B, A.firstElementChild);// 头插：把B插入到A的第一个元素前面
            A表示父元素，B表示新子元素。ref表示指定子元素，在这个元素之前插入新子元素。
            在JavaScript中，我们可以使用insertBefore()方法将一个新元素插入到父元素中的某一个子元素“之前”。
            
            此外需要注意一点，appendChild()和insertBefore()这两种插入元素的方法都需要获取父元素才可以操作。
         */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                var oUl = document.getElementById("list");
                var oTxt = document.getElementById("txt");
                //将文本框的内容转换为“文本节点”
                var textNode = document.createTextNode(oTxt.value);
                //动态创建一个li元素
                var oLi = document.createElement("li");
                //将文本节点插入li元素中
                oLi.appendChild(textNode);
                //将li元素插入到ul的第1个子元素前面
                oUl.insertBefore(oLi, oUl.firstElementChild);
            }
        }
    </script>
</head>
<body>
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<input id="txt" type="text"/><input id="btn" type="button" value="插入"/>
</body>
</html>

删除元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
    任意删 A.removeChild(B);
            A表示父元素，B表示父元素内部的某个子元素。
            
    尾删 oUl.removeChild(oUl.lastElementChild);表示删除ul中最后一个li元素，其中oUl.lastElementChild表示ul中的最后一个子元素。
            如果想要删除第一个子元素，可以使用以下代码来实现：oUl.removeChild(oUl.firstElementChild);
            
            举例 1：删除最后一个子元素
                window.onload = function () {
                    var oBtn = document.getElementById("btn");
                    oBtn.onclick = function () {
                        var oUl = document.getElementById("list");
                        //删除最后一个子元素
                        oUl.removeChild(oUl.lastElementChild);
                    }
                }
                <ul id="list">
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                    <li>jQuery</li>
                    <li>Vue.js</li>
                </ul>
                <input id="btn" type="button" value="删除"/>
                
            举例 2：删除整个列表
            
            在使用removeChild（　）方法删除元素之前，我们必须找到以下2个元素。
                1. 被删除的子元素。
                2. 被删除子元素的父元素。
        */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                var oUl = document.getElementById("list");
                document.body.removeChild(oUl);
            }
        }
    </script>
</head>
<body>
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除"/>
</body>
</html>

复制元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
            obj.cloneNode(bool)
            
            参数obj表示被复制的元素，而参数bool是一个布尔值，取值如下。
                1或true：表示复制元素本身以及复制该元素下的所有子元素。
                0或false：表示仅仅复制元素本身，不复制该元素下的子元素。
        */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                var oUl = document.getElementById("list");
                // document.body.appendChild(oUl.cloneNode(1));// 会在input之后添加
                document.body.insertBefore(oUl.cloneNode(1), oBtn);// 会在input之前添加
            }
        }
    </script>
</head>
<body>
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<input id="btn" type="button" value="复制"/>
</body>
</html>

替换元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
            A.replaceChild(new, old);
            A表示父元素，new表示新子元素，old表示旧子元素。
            
            当我们在第1个文本框中输入“h1”，在第2个文本框中输入“jQuery”，然后点击【替换】按钮
        */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                //获取body中的第1个元素
                var oFirst = document.querySelector("body *:first-child");
                //获取2个文本框
                var oTag = document.getElementById("tag");
                var oTxt = document.getElementById("txt");
                //根据2个文本框的值来创建一个新节点
                var oNewTag = document.createElement(oTag.value);
                var oNewTxt = document.createTextNode(oTxt.value);
                oNewTag.appendChild(oNewTxt);
                document.body.replaceChild(oNewTag, oFirst);
            }
        }
    </script>
</head>
<body>

<p>JavaScript</p>
<hr/>
输入标签：<input id="tag" type="text"/><br/>
输入内容：<input id="txt" type="text"/><br/>
<input id="btn" type="button" value="替换"/>

</body>
</html>

获取HTML属性值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
        举例1：获取静态HTML中的属性值
            window.onload = function () {
                var oBtn = document.getElementById("btn");
                oBtn.onclick = function () {
                    alert(oBtn.id);// btn
                };
            }
            <input id="btn" class="myBtn" type="button" value="获取"/>

            oBtn.id表示获取按钮的id属性值。
            同样的，想要获取type属性值可以写成oBtn.type，以此类推。是不是非常简单呢？
            不过需要特别提醒大家一点，如果想要获取一个元素的class，写成oBtn.class是错误的，正确的应该写成oBtn.className。

        举例2：获取动态DOM中的属性值
            window.onload = function () {
                //动态创建一个按钮
                var oInput = document.createElement("input");
                oInput.id = "submit";
                oInput.type = "button";
                oInput.value = "提交";
                document.body.appendChild(oInput);
                //为按钮添加点击事件
                oInput.onclick = function () {
                    alert(oInput.id);// submit
                };
            }
            
        举例3：获取文本框的值
            window.onload = function () {
                var oBtn = document.getElementById("btn");
                oBtn.onclick = function () {
                    var oTxt = document.getElementById("txt");
                    alert(oTxt.value);
                };
            }
            <input id="txt" type="text"/>   <!-- value 默认 "" -->
            <!--等价于-->
            <!--<input id="txt" type="text" value=""/>-->
            <input id="btn" type="button" value="获取"/>
        
        举例4：获取单选框的值
            window.onload = function () {
                var oBtn = document.getElementById("btn");
                // document.getElementsByName(“fruit”)表示获取所有name属性值为fruit的表单元素。
                // getElementsByName()只限用于表单元素，它获取的也是一个元素集合，也就是类数组。
                var oFruit = document.getElementsByName("fruit");
                oBtn.onclick = function () {
                    //使用for循环遍历所有的单选框
                    for (var i = 0; i < oFruit.length; i++) {
                        //判断当前遍历的单选框是否选中（也就是checked是否为true）
                        if (oFruit[i].checked) {
                            alert(oFruit[i].value);
                        }
                    }
                };
            }
            <div>
                <label><input type="radio" name="fruit" value="苹果" checked/>苹果</label>
                <label><input type="radio" name="fruit" value="香蕉"/>香蕉</label>
                <label><input type="radio" name="fruit" value="西瓜"/>西瓜</label>
            </div>
            <input id="btn" type="button" value="获取"/>
        举例5：获取下拉菜单的值
            window.onload = function () {
                var oBtn = document.getElementById("btn");
                var oFruit = document.getElementsByName("fruit");
                var str = "";
                oBtn.onclick = function () {
                    for (var i = 0; i < oFruit.length; i++) {
                        if (oFruit[i].checked) {
                            str += oFruit[i].value;
                        }
                    }
                    alert(str);
                };
            }
            <div>
                <label><input type="checkbox" name="fruit" value="苹果"/>苹果</label>
                <label><input type="checkbox" name="fruit" value="香蕉"/>香蕉</label>
                <label><input type="checkbox" name="fruit" value="西瓜"/>西瓜</label>
            </div>
            <input id="btn" type="button" value="获取"/>
            
        举例6：获取下拉菜单的值
        */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            var oSelect = document.getElementById("select");
            oBtn.onclick = function () {
                // 下拉菜单有点特殊，当用户选中一个option时，该option的value值就会自动变成当前select元素的value值。
                // 其中，value是传给后台处理的，而标签中的文本是给用户看的。
                alert(oSelect.value);
            };
        }
    </script>
</head>
<body>

<select id="select">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="广州">广州</option>
    <option value="深圳">深圳</option>
    <option value="杭州">杭州</option>
</select>
<input id="btn" type="button" value="获取"/>

</body>
</html>

设置HTML属性值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
        
        case 1 修改按钮显示值
            window.onload = function () {
                var oBtn = document.getElementById("btn");
                oBtn.onclick = function () {
                    oBtn.value = "button";
                };
            }
            <input id="btn" type="button" value="修改"/>
            
        case 2 点击图片切换
         */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            var oPic = document.getElementById("pic");
            var flag = true;
            oBtn.onclick = function () {
                if (flag) {
                    oPic.src = "img/聊天结束.png";
                    flag = false;
                } else {
                    oPic.src = "img/仓鼠.jpg";
                    flag = true;
                }
            };
        }

    </script>
</head>
<body>

<img id="pic" src="img/仓鼠.jpg"/>
<input id="btn" type="button" value="切换"/><br/>

</body>
</html>

HTML属性操作 getAttribute

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
        obj.getAttribute("attr")
        obj.attr // 获取不了自定义属性

        这里我们为input元素自定义了一个data属性。所谓的自定义属性，指的是这个属性是用户自己定义的而不是元素自带的。
        此时我们使用obj.attr（也就是对象属性方式）是无法获取自定义属性值的，只能用getAttribute（"attr"）（也就是对象方法方式）来实现。
         */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                alert(oBtn.getAttribute("id"));// btn
                alert(oBtn.data);// undefined
            }
        }
    </script>
</head>
<body>

<input id="btn" type="button" value="获取" data="JavaScript"/>

</body>
</html>

HTML属性操作 setAttribute

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        /*
        obj.setAttribute("attr","值")
        obj.attr = "值";// 设置不了自定义属性

        同样地，对于自定义属性的值的设置，我们也只能用setAttribute（　）方法来实现。
         */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                oBtn.setAttribute("value", "button");
            };
        }
    </script>
</head>
<body>

<input id="btn" type="button" value="修改"/>

</body>
</html>

HTML属性操作 removeAttribute

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        .main {
            color: red;
            font-weight: bold;
        }
    </style>
    <script>
        /*
        obj.removeAttribute("attr")

        如果我们用oP[0].className="";来代替oP[0].removeAttribute("class");，效果也是一样的。
        想要为一个元素添加一个class（即使不存在class属性），可以使用：
            oP[0].className = "main";
            
        想要为一个元素删除一个class，可以使用：
            oP[0].className = "";
            或
            oP[0].removeAttribute("class");
         */
        window.onload = function () {
            var oP = document.getElementsByTagName("p");
            var oBtnAdd = document.getElementById("btn_add");
            var oBtnRemove = document.getElementById("btn_remove");
            //添加class
            oBtnAdd.onclick = function () {
                oP[0].className = "main";// 因为class是关键字，所有样式属性变为 className
            };
            //删除class
            oBtnRemove.onclick = function () {
                oP[0].removeAttribute("class");
            };
        }
    </script>
</head>
<body>

<p>你偷走了我的影子，无论你在哪里，我都会一直想着你。</p>
<input id="btn_add" type="button" value="添加样式"/>
<input id="btn_remove" type="button" value="删除样式"/>

</body>
</html>

HTML属性操作 hasAttribute

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        .main {
            color: red;
            font-weight: bold;
        }
    </style>
    <script>
        /*
        obj.hasAttribute("attr")

        hasAttribute（　）方法会返回一个布尔值。如果包含该属性，会返回true；如果不包含该属性，会返回false。
        
        
        最后，对于操作HTML属性的两种方式，我们来总结一下。
        （1）“对象属性方式”和“对象方法方式”，这两种方式都不仅可以操作静态HTML的属性，也可以操作动态DOM的属性。
        （2）只有“对象方法方式”才可以操作自定义属性。
         */
        window.onload = function () {
            var oP = document.getElementsByTagName("p");
            if (oP[0].hasAttribute("class")) {
                oP[0].onclick = function () {
                    oP[0].removeAttribute("class");
                };
            }
        }
    </script>
</head>
<body>

<p class="main">你偷走了我的影子，无论你在哪里，我都会一直想着你。</p>

</body>
</html>

获取CSS属性值 getComputedStyle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        #box {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
    <script>
        /*
        getComputedStyle(obj).attr

        obj表示DOM对象，也就是通过getElementById()、getElementsByTagName()等方法获取的元素节点。
        attr表示CSS属性名。我们要特别注意一点，这里的属性名使用的是“骆驼峰型”的CSS属性名。
        
        
        下面两种写法等价：
            getComputedStyle(oBox).backgroundColor
            getComputedStyle(oBox)["backgroundColor"]
        
        事实上，凡是对象的属性都有这两种写法，例如
            oBtn.id可以写成oBtn["id"]，
            document.getElementById("btn")可以写成document["getElementById"]("btn")，
            以此类推。
         */
        window.onload = function () {
            var oBtn = document.getElementById("btn");// 二者等同
            // var oBtn = document["getElementById"]("btn");
            
            var oBox = document.getElementById("box");
            oBtn.onclick = function () {
                alert(getComputedStyle(oBox).backgroundColor);
            };
        }
    </script>
</head>
<body>

<input id="btn" type="button" value="获取颜色"/>
<div id="box"></div>

</body>
</html>

设置CSS属性值 style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        #box {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
    <script>
        /*
        obj.style.attr = "值";

        obj表示DOM对象，attr表示CSS属性名，采用的同样是“骆驼峰”型。
        obj.style.attr等价于obj.style["attr"]，例如oDiv.style.width等价于oDiv.style["width"];
        
        case 1 设置属性
            window.onload = function () {
                var oBtn = document.getElementById("btn");
                var oBox = document.getElementById("box");
                oBtn.onclick = function () {
                    oBox.style.backgroundColor = "red";
                };
            }
            <input id="btn" type="button" value="设置"/>
            <div id="box"></div>
            
            width:50px;height:50px;background-color:red;
            此时用style来实现，就得一个个来写，实现代码如下：
            oDiv.style.width = "50px";
            oDiv.style.height = "50px";
            oDiv.style.backgroundColor = "red";
            
            这样一个个来写，我们自己都觉得很傻。那么有没有一种高效点的实现方式呢？当然有啊，那就是cssText属性。
         */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            var oBox = document.getElementById("box");
            oBtn.onclick = function () {
                //获取两个文本框的值（也就是输入的内容）
                var attr = document.getElementById("attr").value;// 请输入 backgroundColor
                var val = document.getElementById("val").value;// 请输入 red
                oBox.style[attr] = val;
            };
        }
    </script>
</head>
<body>

属性：<input id="attr" type="text"/><br/>
取值：<input id="val" type="text"/><br/>
<input id="btn" type="button" value="设置"/>
<div id="box"></div>

</body>
</html>

设置CSS属性值 cssText

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        .oldBox {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }

        .newBox {
            width: 50px;
            height: 50px;
            background-color: lightskyblue;
        }
    </style>
    <script>
        /*
        obj.style.cssText = "值";

        obj表示DOM对象，cssText的值是一个字符串，例如：
        oDiv.style.cssText = "width:100px;height:100px;border:1px solid gray;";
        注意，这个字符串中的属性名不再使用骆驼峰型写法，而是使用平常的CSS写法，例如background-color应该写成background-color，而不是backgroundColor。
        
        case 1 设置 cssText
            #box {
                width: 100px;
                height: 100px;
                background-color: hotpink;
            }
            window.onload = function () {
                var oBtn = document.getElementById("btn");
                var oBox = document.getElementById("box");
                oBtn.onclick = function () {
                    //获取文本框的值（也就是输入的内容）
                    var txt = document.getElementById("txt").value;// 请输入 width:50px;height:50px;background-color:red;
                    oBox.style.cssText = txt;
                };
            }
            <input id="txt" type="text"/>
            <input id="btn" type="button" value="设置"/>
            <div id="box"></div>
        
        在实际开发的时候，如果想要为一个元素同时设置多个CSS属性，我们很少使用cssText来实现，
        更倾向于使用操作HTML属性的方式给元素加上一个class属性值，从而把样式整体给元素添加上。这个技巧非常棒，在实际开发中经常用到。
        
        */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            var oBox = document.getElementById("box");
            oBtn.onclick = function () {
                oBox.className = "newBox";
            };
        }
    </script>
</head>
<body>

<input id="btn" type="button" value="切换" />
<div id="box" class="oldBox"></div>

</body>
</html>

为什么 getComputedStyle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        #box1 {
            width: 100px;
            height: 100px;
            background-color: hotpink;
        }

        #box3 {
            width: 150px !important;
        }
    </style>
    <script>
        /*
        获取CSS属性值，不可以用obj.style.attr或obj.style.cssText吗？为什么一定要用getComputedStyle()呢？
        
        style 只能获取行内样式的值，而不能获取 css应用之后的最终值。
        getComputedStyle 则可以获取css应用后的最终值。
        
        1．使用style对象来设置样式时，为什么我们不能使用background-color这种写法，而必须使用backgroundColor”这种骆驼峰型写法呢？
           大家别忘了，在obj.style.backgroundColor中，backgroundColor其实也是一个变量，
           变量中是不允许出现中划线的，因为中划线在JavaScript中是减号的意思。
        */
        window.onload = function () {
            var oBtn1 = document.getElementById("btn1");
            var oBox1 = document.getElementById("box1");
            oBtn1.onclick = function () {
                // 行内无，css 100px
                alert(oBox1.style.width);// "" 空

            };

            var oBtn2 = document.getElementById("btn2");
            var oBox2 = document.getElementById("box2");
            oBtn2.onclick = function () {
                // 行内 100px，css无
                alert(oBox2.style.width);// 100px
            };

            var oBtn3 = document.getElementById("btn3");
            var oBox3 = document.getElementById("box3");
            oBtn3.onclick = function () {
                // 从预览效果就可以看出来了，由于使用了!important，根据CSS优先级的计算，box的最终宽度为150px。
                // 如果用oBox.style.width获取的结果却是100px，然而我们都知道这不正确。
                
                // 行内 100px，css 150px
                alert(getComputedStyle(oBox3).width);// 150px
                alert(oBox3.style.width);// 100px
            };
        }
    </script>
</head>
<body>


<div id="box1"></div>
<input id="btn1" type="button" value="获取宽度"/>

<hr>
<div id="box2" style="width:100px;height:100px;background-color:hotpink"></div>
<input id="btn2" type="button" value="获取宽度"/>

<hr>
<div id="box3" style="width:100px;height:100px;background-color:hotpink"></div>
<input id="btn3" type="button" value="获取宽度"/>

</body>
</html>

获取父元素 parentNode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        table {
            border-collapse: collapse;
        }

        table, tr, td {
            border: 1px solid gray;
        }
    </style>
    <script>
        /*
        obj.parentNode
        
        当我们随便点击一个单元格时，就会为该单元格所在的行设置样式。
        */
        window.onload = function () {
            var oTd = document.getElementsByTagName("td");
            //遍历每一个td元素
            for (var i = 0; i < oTd.length; i++) {
                //为每一个td元素添加点击事件
                oTd[i].onclick = function () {
                    //获得当前td的父元素（即tr）
                    var oParent = this.parentNode;
                    //为当前td的父元素添加样式
                    oParent.style.color = "white";
                    oParent.style.backgroundColor = "red";
                };
            }
        }
    </script>
</head>
<body>

<table>
    <caption>考试成绩表</caption>
    <tr>
        <td>小明</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>90</td>
        <td>90</td>
        <td>90</td>
    </tr>
    <tr>
        <td>小杰</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
</table>

</body>
</html>

获取子元素 children firstElementChild lastElementChild

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
        在JavaScript中，我们可以使用以下两组方式来获得父元素中的所有子元素或某个子元素。
                了解即可（1）childNodes、firstChild、lastChild
                重点记忆（2）children、firstElementChild、lastElementChild
        其中，childNodes获取的是所有的子节点（包含空格节点）。
        注意，这个子节点是包括元素节点以及文本节点的。而children获取的是所有的元素节点，不包括文本节点。
        
        举例 1：childNodes与children的比较
        */
        window.onload = function () {
            var oUl1 = document.getElementById("list1");
            var childNodesLen1 = oUl1.childNodes.length;// 7
            var childrenLen1 = oUl1.children.length;// 3
            alert("childNodes的长度为：" + childNodesLen1 + "\n" + "children的长度为：" + childrenLen1);

            var oUl2 = document.getElementById("list2");
            var childNodesLen2 = oUl2.childNodes.length;// 6（少了一个文本节点，这里的文本节点不是li标签里面的文本节点，而是li标签与 li标签之间的文本节点，在这个例子中是空格）
            var childrenLen2 = oUl2.children.length;// 3
            alert("childNodes的长度为：" + childNodesLen2 + "\n" + "children的长度为：" + childrenLen2);
        }
    </script>
</head>
<body>

<ul id="list1">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<ul id="list2">
    <li>HTML</li><li>CSS</li>
    <li>JavaScript</li>
</ul>

</body>
</html>

查找子元素 lastChild

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
        在JavaScript中，我们可以使用以下两组方式来获得父元素中的所有子元素或某个子元素。
        （1）childNodes、firstChild、lastChild
        （2）children、firstElementChild、lastElementChild
        其中，childNodes获取的是所有的子节点。
        注意，这个子节点是包括元素节点以及文本节点的。而children获取的是所有的元素节点，不包括文本节点。
        
        
        */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("list");
            oBtn.onclick = function () {
                // 当我们尝试点击【删除】按钮时，会发现一个很奇怪的现象：需要点击两次才可以删除一个li元素！
                // 因为一次删除文本节点，一次删除li标签
                // 了解即可
                oUl.removeChild(oUl.lastChild);
            }
        }
    </script>
</head>
<body>

<input id="btn" type="button" value="删除"/>
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>

</body>
</html>

查找子元素 lastElementChild

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
        在JavaScript中，我们可以使用以下两组方式来获得父元素中的所有子元素或某个子元素。
        （1）childNodes、firstChild、lastChild
        （2）children、firstElementChild、lastElementChild
        其中，childNodes获取的是所有的子节点。
        注意，这个子节点是包括元素节点以及文本节点的。而children获取的是所有的元素节点，不包括文本节点。
        
        使用childNodes、firstChild、lastChild这几个来操作元素节点是非常麻烦的，因为它们都把文本节点（一般是空白节点）算进来了。
        实际上，上面这种是旧的做法，JavaScript为了让我们可以快速开发，提供了新的方法，也就是只针对元素节点的操作属性：children、firstElementChild、lastElementChild。
        */
        window.onload = function ()
        {
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("list");
            oBtn.onclick = function ()
            {
                oUl.removeChild(oUl.lastElementChild);
            }
        }
    </script>
</head>
<body>

<input id="btn" type="button" value="删除" />
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>

</body>
</html>

查找兄弟元素 previousElementSibling

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
        在JavaScript中，我们可以使用以下2组方式来获得兄弟元素。
                了解即可（1）previousSibling、nextSibling
                重点记忆（2）previousElementSibling、nextElementSibling
        previousSibling查找前一个兄弟节点，nextSibling查找后一个兄弟节点。
        previousElementSibling查找前一个兄弟元素节点，nextElementSibling查找后一个兄弟元素节点。
        
        跟查找子元素的两组方式一样，previousSibling nextSibling可能是文本节点（一般是空白节点）。

        */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            var oUl = document.getElementById("list");
            oBtn.onclick = function () {
                var preElement = oUl.children[2].previousElementSibling;// 第三个元素的前一个元素，也就是查找第二个元素
                oUl.removeChild(preElement);
            };
        }
    </script>
</head>
<body>

<input id="btn" type="button" value="删除"/>
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>

</body>
</html>

设置内容 innerHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在JavaScript中，我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”，也可以使用innerText属性获取和设置一个元素的“内部文本”。
        */
        window.onload = function () {
            // var oImg = document.createElement("img");
            // oImg.className = "pic";
            // oImg.src = "img/仓鼠.jpg";
            // oImg.style.border = "1px solid silver";
            // document.body.appendChild(oImg);
            
            // 等同于
            document.body.innerHTML = '<img class="pic" src="img/仓鼠.jpg" style="border:1px solid silver"/>';
        }
    </script>
</head>
<body>

</body>
</html>

获取内容 innerHTML innerText

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        window.onload = function () {
            var oP = document.getElementById("content");
            // innerHTML  获取的是元素内部所有的内容（把标签当做文本），
            // innerText  获取的仅仅是文本内容（忽略标签）。
            document.getElementById("txt1").value = oP.innerHTML;// 11<strong style="color:hotpink;">绿叶学习网</strong>
            document.getElementById("txt2").value = oP.innerText;// 11绿叶学习网
        }
    </script>
</head>
<body>

<p id="content">11<strong style="color:hotpink;">绿叶学习网</strong></p>
innerHTML是：<input id="txt1" type="text"><br/>
innerText是：<input id="txt2" type="text">

</body>
</html>

innerHTML 反斜杠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            细心的小伙伴可能还注意到了一点，这个例子innerHTML后面的字符串居然可以换行来写！
            一般情况下，代码里面的字符串是不能换行的，但是为了可读性，我们往往希望将字符串截断分行显示。
            方法很简单，只需要在字符串每一行后面加上个反斜杠（\）就可以了。这是一个非常实用的小技巧。
        */
        window.onload = function () {
            // 绿叶学习网 JavaScript 入门教程
            document.getElementById("div1").innerHTML = '<span>绿叶学习网</span>\
                           <span style="color:hotpink;">JavaScript</span>\
                           <span style="color:deepskyblue;">入门教程</span>';

            // 存在即合理（设置会应用所有的标签）
            document.getElementById("div2").innerHTML = '<div>存在即<span>合理</span><strong></strong></div>';

            // <div>存在即<span>合理</span><strong></strong></div>（会全部当做纯文本输出）
            document.getElementById("div3").innerText = '<div>存在即<span>合理</span><strong></strong></div>';
        }
    </script>
</head>
<body>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

</body>
</html>

innerHTML 与 document.write

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        // 049_插入按钮 练习.html
        window.onload = function () {
            // 《appendChild 与 innerHTML》
            // var input = document.createElement('input');
            // input.id='btn';
            // input.type='button';
            // input.value='按钮';
            // document.body.appendChild(input);
            
            // 二者效果相同
            document.body.innerHTML='<input id="btn" type="button" value="按钮"/>';

            // 《innerHTML 与 document.write》
            // 两者都是对HTML页面进行输出，但大多数情况下优先考虑inner HTML。
            // 两者有主要区别：
            // inner HTML将内容写入某个DOM节点，
            // document.write（）直接输出内容（页面加载时) 或清除整个HTML页面，打开新的页面输出document.write（）（页面加载后)
            // 
            // 二者效果相同
            // document.body.innerHTML='<div style="color: red;">00<span>11</span>22</div>';
            // document.write('<div style="color: red;">00<span>11</span>22</div>');
        }
    </script>
</head>
<body>
</body>
</html>

事件调用 onxxx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            obj.事件名 = function() {
                ……
            };
            obj是一个DOM对象，所谓的DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。
            由于上面是一个赋值语句，而语句一般都是要以英文分号结束的，所以最后需要添加一个英文分号（;）。虽然没加上也不会报错，不过为了规范，还是加上比较好。
         */
        window.onload = function () {
            //获取元素
            var oBtn = document.getElementById("btn");
            //为元素添加点击事件
            oBtn.onclick = function () {
                alert("绿叶学习网");
            };
        }

        function alertMes() {
            alert("绿叶学习网");
        }
    </script>
</head>
<body>

<h1>方式1 推荐（解耦）</h1>
<input id="btn" type="button" value="弹出"/>
<hr>

<h1>方式2</h1>
<input type="button" onclick="alertMes()" value="弹出"/>
<hr>

<h1>方式3</h1>
<input type="button" onclick="alert('绿叶学习网')" value="弹出" />

</body>
</html>

鼠标事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        #btn {
            display: inline-block;
            width: 80px;
            height: 24px;
            line-height: 24px;
            font-family: 微软雅黑;
            font-size: 15px;
            text-align: center;
            border-radius: 3px;
            background-color: deepskyblue;
            color: White;
            cursor: pointer;
        }

        #btn:hover {
            background-color: dodgerblue;
        }
    </style>
    <script>
        /*
            事件	    说明
            onclick	    鼠标单击事件
            onmouseover	鼠标移入事件
            onmouseout	鼠标移出事件
            onmousedown	鼠标按下事件
            onmouseup	鼠标松开事件
            onmousemove	鼠标移动事件
            
            我们可以为任何元素添加鼠标单击事件！
         */
        window.onload = function () {
            // case 1
            var oDiv = document.getElementById("btn");
            // oDiv.onclick = function () {
            //     alert("我出来啦？");
            // };
            // 二者等同
            oDiv.onclick = alertMes;

            function alertMes() {
                alert("我出来啦？");
            }


            // case 2
            var oP = document.getElementById("content");
            oP.onmouseover = function () {
                // this.style.color = "red";// 放上去

                // 二者等同   这里this=oP
                oP.style.color = "red";// 放上去
            };
            oP.onmouseout = function () {
                this.style.color = "black";// 挪开
            };


            // case 3
            var oTitle = document.getElementById("title");
            var oBtn2 = document.getElementById("btn2");
            oBtn2.onmousedown = function () {
                oTitle.style.color = "red";// 按下
            };
            oBtn2.onmouseup = function () {
                oTitle.style.color = "black";// 松开
            };
        };
    </script>
</head>
<body>

<div id="btn">调试代码</div>

<hr>

<p id="content">绿叶学习网</p>

<hr>

<h1 id="title">绿叶学习网</h1>
<input id="btn2" type="button" value="button"/>

</body>
</html>

键盘事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在JavaScript中，常用的键盘事件共有2种。
            （1）键盘按下：onkeydown
            （2）键盘松开：onkeyup
            onkeydown表示键盘按下一瞬间所触发的事件，而onkeyup表示键盘松开一瞬间所触发的事件。
            对于键盘来说，都是先有“按下”，才有“松开”，也就是onkeydown发生在onkeyup之前。
            
            键盘事件一般有两个用途：表单操作和动画控制。
            对于动画控制，常见于游戏开发中，例如在《英雄联盟》中控制人物行走或释放技能，就是通过键盘来控制的。
         */
        window.onload = function () {
            // case 1 计算输入长度
            {
                var oTxt = document.getElementById("txt");
                var oNum = document.getElementById("num");
                oTxt.onkeyup = function () {
                    var str = oTxt.value;
                    oNum.innerHTML = str.length;
                };
            }

            // case 2 输入是否正确
            {
                var oTxt = document.getElementById("txt2");
                var oDiv = document.getElementById("content2");
                //定义一个变量，保存正则表达式
                var myregex = /^[0-9]*$/;
                oTxt.onkeyup = function () {
                    //判断是否输入为数字
                    if (myregex.test(oTxt.value)) {
                        oDiv.innerHTML = "输入正确";
                    } else {
                        oDiv.innerHTML = "必须输入数字";
                    }
                };
            }
        };
    </script>
</head>
<body>

<input id="txt" type="text"/>
<div>字符串长度为：<span id="num">0</span></div>

<hr>

<input id="txt2" type="text"/>
<div id="content2" style="color:red;"></div>

</body>
</html>

表单事件 焦点 onfocus onblur

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在JavaScript中，常用的表单事件有3种。
            （1）onfocus 和 onblur
                    （1）表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）
                    （2）超链接
            （2）onchange
                    onchange事件常用于“具有多个选项的表单元素”。
                    （1）单选框(radio) 选择某一项时触发。
                    （2）复选框(checkbox) 选择某一项时触发。
                    （3）下拉列表(select option) 选择某一项时触发。
            （3）onselect
                    选中内容时，就会触发onselect事件。
                        “单行文本框 text”
                        “多行文本框 textarea”
            （4）onsubmit （一般都是结合后端技术来使用）
         */
        window.onload = function () {
            // case 1 实现 placeholder 功能
            {
                //获取元素对象
                var oSearch = document.getElementById("search");
                //获取焦点
                oSearch.onfocus = function () {
                    if (this.value == "百度一下，你就知道") {
                        this.value = "";
                    }
                };
                //失去焦点
                oSearch.onblur = function () {
                    if (this.value == "") {
                        this.value = "百度一下，你就知道";
                    }
                };

                // 像上面这种搜索框的提示文字效果，其实我们也可以使用HTML5表单元素新增的placeholder属性来实现，代码如下：
                // <input id="search" type="text" placeholder="百度一下，你就知道" />
            }

            // case 2 页面打开 默认获取焦点
            {
                var oTxt = document.getElementById("txt");
                oTxt.focus();
                // focus()跟onfocus是不一样的。
                // focus()是一个方法，仅仅用于让元素获取焦点。而onfocus是一个属性，它是用于事件操作的。
            }
        };
    </script>
</head>
<body>

<input id="search" type="text" value="百度一下，你就知道"/>
<input type="button" value="搜索"/>

<hr>

<input id="txt" type="text"/>

</body>
</html>

表单事件 改变 onchange

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在JavaScript中，常用的表单事件有3种。
            （1）onfocus 和 onblur
                    （1）表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）
                    （2）超链接
            （2）onchange
                    onchange事件常用于“具有多个选项的表单元素”。
                    （1）单选框(radio) 选择某一项时触发。
                    （2）复选框(checkbox) 选择某一项时触发。
                    （3）下拉列表(select option) 选择某一项时触发。
            （3）onselect
                    选中内容时，就会触发onselect事件。
                        “单行文本框 text”
                        “多行文本框 textarea”
            （4）onsubmit （一般都是结合后端技术来使用）
         */
        window.onload = function () {
            // case 1 单选按钮，提示选中文字
            {
                var oFruit = document.getElementsByName("fruit");
                var oP = document.getElementById("content");
                for (var i = 0; i < oFruit.length; i++) {
                    oFruit[i].onchange = function () {
                        if (this.checked) {
                            oP.innerHTML = "你选择的是：" + this.value;
                        }
                    };
                }
            }

            // case 2 全选/反选
            {
                var oSelectAll = document.getElementById("selectAll");
                var oFruit = document.getElementsByName("fruit2");
                oSelectAll.onchange = function () {
                    // 如果选中，即this.checked返回true
                    // 哪个元素在搞事（触发事件），this就是哪个。
                    if (this.checked) {
                        for (var i = 0; i < oFruit.length; i++) {
                            oFruit[i].checked = true;
                        }
                    } else {
                        for (var i = 0; i < oFruit.length; i++) {
                            oFruit[i].checked = false;
                        }
                    }
                };
            }

            // case 3
            {
                var oList = document.getElementById("list");
                oList.onchange = function () {
                    var link = this.options[this.selectedIndex].value;
                    window.open(link);
                    // window.open()表示打开一个新的窗口
                };
            }
        };
    </script>
</head>
<body>

<div>
    <label><input type="radio" name="fruit" value="苹果"/>苹果</label>
    <label><input type="radio" name="fruit" value="香蕉"/>香蕉</label>
    <label><input type="radio" name="fruit" value="西瓜"/>西瓜</label>
</div>
<p id="content"></p>

<hr>

<div>
    <p><label><input id="selectAll" type="checkbox"/>全选/反选：</label></p>
    <label><input type="checkbox" name="fruit2" value="苹果"/>苹果</label>
    <label><input type="checkbox" name="fruit2" value="香蕉"/>香蕉</label>
    <label><input type="checkbox" name="fruit2" value="西瓜"/>西瓜</label>
</div>

<hr>

<select id="list">
    <option value="http://wwww.baidu.com">百度</option>
    <option value="http://www.sina.com.cn">新浪</option>
    <option value="http://www.qq.com">腾讯</option>
    <option value="http://www.sohu.com">搜狐</option>
</select>

</body>
</html>

表单事件 选中 onselect

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在JavaScript中，常用的表单事件有3种。
            （1）onfocus 和 onblur
                    （1）表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）
                    （2）超链接
            （2）onchange
                    onchange事件常用于“具有多个选项的表单元素”。
                    （1）单选框(radio) 选择某一项时触发。
                    （2）复选框(checkbox) 选择某一项时触发。
                    （3）下拉列表(select option) 选择某一项时触发。
            （3）onselect
                    选中内容时，就会触发onselect事件。
                        “单行文本框 text”
                        “多行文本框 textarea”
            （4）onsubmit （一般都是结合后端技术来使用）
         */
        window.onload = function () {
            // case 1 选中框中文字，弹出提示
            {
                var oTxt1 = document.getElementById("txt1");
                var oTxt2 = document.getElementById("txt2");
                oTxt1.onselect = function () {
                    alert("你选中了单行文本框中的内容");
                };
                oTxt2.onselect = function () {
                    alert("你选中了多行文本框中的内容");
                };
            }

            // case 2 点击搜索框，选中所有文字
            {
                var oSearch = document.getElementById("search");
                oSearch.onclick = function () {
                    this.select();
                    // select()跟onselect是不一样的。
                    // select()是一个方法，仅仅用于全选文本。而onselect是一个属性，它是用于事件操作的。
                    // select()和onselect的关系，跟focus()和onfocus的关系是相似的。
                };
            }
        };
    </script>
</head>
<body>

<input id="txt1" type="text" value="如果我真的存在，也是因为你需要我。"/><br/>
<textarea id="txt2" cols="20" rows="5">如果我真的存在，也是因为你需要我。</textarea>

<hr>

<input id="search" type="text" value="百度一下，你就知道"/>

</body>
</html>

编辑事件 oncopy onselectstart oncontextmenu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在JavaScript中，常用的编辑事件有3种。
                oncopy             防止页面内容被复制（即使可复制，粘贴也无内容）
                onselectstart      防止页面内容被选取
                oncontextmenu      禁止鼠标右键
            
         */
        window.onload = function () {
            // case 1 防止复制（即使可复制，粘贴也无内容）
            {
                // document.body.oncopy = function () {
                //     return false;
                // }
                document.getElementById("div1").oncopy = function () {
                    return false;
                }
            }

            // case 2 防止页面内容被选取
            {
                // document.body.onselectstart = function () {
                //     return false;
                // }
                document.getElementById("div2").onselectstart = function () {
                    return false;
                }
            }

            // case 3 禁止鼠标右键
            // 虽然鼠标右键功能被禁止了，但是我们依旧可以用快捷键，如使用ctrl+c快捷键来复制内容；使用ctrl+s快捷键来保存网页等。
            {
                // document.oncontextmenu = function () {
                //     return false;
                // }
                document.getElementById("div3").oncontextmenu = function () {
                    return false;
                }
            }

        };
    </script>
</head>
<body>

<div id="div1">防止复制：不要用战术上的勤奋，来掩盖战略上的懒惰。</div>

<hr>

<div id="div2">防止选取：成功的人总喜欢神化自己，为的是让其他人觉得成功很难。</div>

<hr>

<div id="div3">禁止右键：每个人的人生掌握在自己的手里，而不是别人的评价里。</div>

</body>
</html>

页面事件 onload

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            onload 文档加载完成后再执行的一个事件。
            
            onbeforeunload表示离开页面之前触发的一个事件。
            
            与window.onload相对的应该是window.onunload，不过一般情况下我们极少用到window.onunload，而更倾向于使用window.onbeforeunload。
         */

        // 当我们点击【提交】按钮时，浏览器会报错。
        // 这是因为在默认情况下，浏览器是从上到下来解析一个页面的。
        // 当解析到var oBtn = document.getElementById("btn");这一句时，浏览器找不到id为btn的元素
        // var oBtn = document.getElementById("btn");
        // oBtn.onclick = function () {
        //     alert("JavaScript");
        // };

        // 这里，浏览器从上到下解析到window.onload时，就会先不解析window.onload里面的代码，
        // 而是继续往下解析，直到把整个HTML文档解析完了之后才会回去执行window.onload里面的代码。
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                alert("JavaScript");
            };
        }

        window.onbeforeunload = function (e) {
            // e是一个event对象。
            e.returnValue = "离开了哦！";
        }
    </script>
</head>
<body>

<input id="btn" type="button" value="提交"/>

</body>
</html>

添加事件监听 addEventListener

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
        所谓的“事件监听器”，指的是使用addEventListener()方法来为一个元素添加事件，我们又称之为“绑定事件”。
            obj.addEventListener(type , fn , false)
        obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。
        type是一个字符串，指的是事件类型。例如单击事件用click，鼠标移入用mouseover等。一定要注意，这个事件类型是不需要加上“on”前缀的。
        fn是一个函数名，或者一个匿名函数。
        false表示事件冒泡阶段调用。对于事件冒泡，我们在JavaScript进阶教程再详细介绍。这里简单了解即可。
        
        我们可以使用事件监听器这种方式来为同一个元素添加多个相同的事件，而这一点是事件处理器做不到的。
        
        为元素仅仅添加一个事件的话，下面两种方式其实是等价的。
            obj.addEventListener("click", function () {……}, false);
            obj.onclick = function () {……};
            
        
        2023-06-12 15:13:42 留个疑问：是不是vue就是用这个监听实现的，双向绑定之类的，我猜测它肯定是，
         */
        window.onload = function () {

            // case 1 事件处理器定义多次
            {
                var oBtn = document.getElementById("btn1");
                // 事件处理器是没办法为一个元素添加多个相同事件的。
                oBtn.onclick = function () {
                    alert("第1次");
                };
                oBtn.onclick = function () {
                    alert("第2次");
                };
                oBtn.onclick = function () {
                    alert("第3次");
                };
            }

            // case 2 监听的单次绑定
            {
                var oBtn = document.getElementById("btn2");
                // oBtn.addEventListener("click", alertMes, false);
                // function alertMes() {
                //     alert("JavaScript");
                // }
                // 二者等同
                oBtn.addEventListener("click", function () {
                    alert("JavaScript");
                }, false);
            }

            // case 3 监听的多次绑定
            {
                // 当我们点击按钮后，浏览器会依次弹出3个对话框。
                // 也就是说，我们可以使用事件监听器这种方式来为同一个元素添加多个相同的事件，而这一点是事件处理器做不到的。
                var oBtn = document.getElementById("btn3");
                oBtn.addEventListener("click", function () {
                    alert("第1次");
                }, false);
                oBtn.addEventListener("click", function () {
                    alert("第2次");
                }, false);
                oBtn.addEventListener("click", function () {
                    alert("第3次");
                }, false);
            }
        }
    </script>
</head>
<body>

<input id="btn1" type="button" value="按钮"/>

<input id="btn2" type="button" value="按钮"/>

<input id="btn3" type="button" value="按钮"/>

</body>
</html>

onload 最后一个生效

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在实际开发中，我们有可能会使用多次window.onload，但是会发现JavaScript只执行最后一次window.onload。
            为了解决这个问题，我们就可以使用addEventListener()来实现。
            
            为了解决这个问题，我们就可以使用addEventListener()来实现。
            在这个例子中，我们只需要将每一个window.onload改为以下代码即可：
                window.addEventListener("load",function(){……},false);
         */
        // //第1次调用window.onload => 不生效
        // window.onload = function () {
        //     var oBtn1 = document.getElementById("btn1");
        //     oBtn1.onclick = function () {
        //         alert("第1次");
        //     };
        // }
        // //第2次调用window.onload => 不生效
        // window.onload = function () {
        //     var oBtn2 = document.getElementById("btn2");
        //     oBtn2.onclick = function () {
        //         alert("第2次");
        //     };
        // }
        // //第3次调用window.onload => 生效
        // window.onload = function () {
        //     var oBtn3 = document.getElementById("btn3");
        //     oBtn3.onclick = function () {
        //         alert("第3次");
        //     };
        // }
        window.addEventListener("load", function () {
            var oBtn1 = document.getElementById("btn1");
            oBtn1.onclick = function () {
                alert("第1次");
            };
        }, false);
        window.addEventListener("load", function () {
            var oBtn2 = document.getElementById("btn2");
            oBtn2.onclick = function () {
                alert("第2次");
            };
        }, false);
        window.addEventListener("load", function () {
            var oBtn3 = document.getElementById("btn3");
            oBtn3.onclick = function () {
                alert("第3次");
            };
        }, false);
    </script>
</head>
<body>

<input id="btn1" type="button" value="按钮1"/><br/>
<input id="btn2" type="button" value="按钮2"/><br/>
<input id="btn3" type="button" value="按钮3"/>

</body>
</html>

删除事件监听 removeEventListener

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
        解绑事件
            obj.removeEventListener(type , fn , false);
            obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。
            type是一个字符串，指的是事件类型。例如，单击事件用click，鼠标移入用mouseover等。一定要注意，这里我们是不需要加上on前缀的。
            
            对于removeEventListener()方法来说，fn必须是一个函数名，而不能是一个函数。
            
            如果你想要使用removeEventListener()方法来解除一个事件，那么当初使用addEventListener()添加事件的时候，就一定要用定义函数的形式。
         */
        window.onload = function () {
            // 先点击解除，再点击文字，就无法变色了，因为移除了监听事件。
            var oP = document.getElementById("count");
            var oBtn = document.getElementById("btn");
            //为p添加事件
            oP.addEventListener("click", count, false);
            //点击按钮后，为p解除事件
            oBtn.addEventListener("click", function () {
                oP.removeEventListener("click", count, false);
            }, false);

            var num = 0;
            function count() {
                alert(++num);
            }
        }
    </script>
</head>
<body>

<p id="count">点我+1</p>
<input id="btn" type="button" value="解除"/>

</body>
</html>

解除事件 事件名为null

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            实际上，removeEventListener()只可以解除“事件监听器”添加的事件，它是不可以解除“事件处理器”添加的事件。
            如果想要解除“事件处理器”添加的事件，我们可以使用“obj.事件名 = null;”来实现
         */
        window.onload = function () {
            // 点击按钮，移除 p标签的+1点击事件
            var oP = document.getElementById("count");
            var oBtn = document.getElementById("btn");
            //为P元素添加事件
            oP.onclick = count;
            //点击按钮后，为p元素解除事件
            oBtn.addEventListener("click", function () {
                oP.onclick = null;
            }, false);

            var num = 0;
            function count() {
                alert(++num);
            }
        }
    </script>
</head>
<body>

<p id="count">点我+1</p>
<input id="btn" type="button" value="解除"/>

</body>
</html>

一次性监听 监听到并删除

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            实际上，removeEventListener()只可以解除“事件监听器”添加的事件，它是不可以解除“事件处理器”添加的事件。
            如果想要解除“事件处理器”添加的事件，我们可以使用“obj.事件名 = null;”来实现
            
            学了那么多，我们自然而然就会问：解除事件都有什么用呢？
            一般情况下我们都是添加完事件就算了，没必要去解除事件啊！其实大多数情况确实如此，但是不少情况下是必须要解除事件的。
            再来看下面一个例子。
            
            限制按钮只可以执行一次点击事件。实现思路很简单，在点击事件函数的最后解除事件就可以了。
            在实际开发中，像拖拽这种效果，我们在onmouseup事件中就必须要解除onmousemove事件，如果没有解除就会有bug。
            当然，拖拽效果是比较复杂的，这里不详细展开。对于解除事件，我们学到后面就知道它有什么用了。
         */
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.addEventListener("click", alertMes, false);

            function alertMes() {
                alert("那你很棒棒噢~");
                oBtn.removeEventListener("click", alertMes, false);
            }
        }
    </script>
</head>
<body>

<input id="btn" type="button" value="弹出"/>

</body>
</html>

event对象 keyCode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
        event对象的属性
            属性	    说明
            type	    事件类型
            keyCode	    键码值
            shiftKey	是否按下shift键
            ctrlKey	    是否按下Ctrl键
            altKey	    是否按下Alt键
            
            每次调用一个事件的时候，JavaScript都会默认给这个事件函数加上一个隐藏的参数，这个参数就是event对象。
            一般来说，event对象是作为事件函数的第1个参数传入的。
            其实e仅仅是一个变量名，它存储的是一个event对象。
            
            在JavaScript中，如果我们想要获取按下了键盘中的哪个键，可以使用event对象的keyCode属性来获取。
                    event.keyCode
            event.keyCode返回的是一个数值，常用的如表所示。
                    按键	键码
                    W（上）	87
                    S（下）	83
                    A（左）	65
                    D（右）	68
                    ↑	    38
                    ↓	    40
                    ←	    37
                    →	    39
            
            如果是shift、ctrl和alt键，我们不需要通过keyCode属性来获取，而是可以通过shiftKey、ctrlKey和altKey属性获取。
            e.keyCode返回的是一个数字，而e.shiftKey、e.ctrlKey、e.altKey返回的都是布尔值（true或false），我们注意一下两者的区别。
            
            游戏开发中，我们一般都是通过键盘中的“上”“下”“左”“右”以及“W”“S”“A”“D”键来控制人物行走的方向，这个技巧用得非常多。
            当然以我们现在的水平，离游戏开发还很远啦。有兴趣的小伙伴可以看一下“从0到1”系列的《从0到1：HTML5 Canvas动画开发》。
         */
        window.onload = function () {
            // case 1 禁止按键
            {
                document.onkeydown = function (e) {
                    if (e.shiftKey || e.altKey || e.ctrlKey) {
                        alert("禁止使用shift、alt、ctrl键！")
                    }
                }
            }

            // case 2 上下左右 W A S D
            {
                var oSpan = document.getElementsByTagName("span")[0];
                window.addEventListener("keydown", function (e) {
                    if (e.keyCode == 38 || e.keyCode == 87) {
                        oSpan.innerHTML = "上";
                    } else if (e.keyCode == 39 || e.keyCode == 68) {
                        oSpan.innerHTML = "右";
                    } else if (e.keyCode == 40 || e.keyCode == 83) {
                        oSpan.innerHTML = "下";
                    } else if (e.keyCode == 37 || e.keyCode == 65) {
                        oSpan.innerHTML = "左";
                    } else {
                        oSpan.innerHTML = "";
                    }
                }, false)
            }
        }
    </script>
</head>
<body>

<p> 鱼对水说：你看不见我的眼泪，因为我在水中。<br/>水对鱼说；我能感觉到你的眼泪，因为你在我心中。 </p>

<hr>

<div>你控制的方向是：<span style="font-weight:bold;color:hotpink;"></span></div>

</body>
</html>

this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。
         */
        window.onload = function () {
            // case 1 this 就是调用对象
            {
                var oDiv = document.getElementsByTagName("div")[0];
                oDiv.onclick = function () {
                    // this所在的函数是一个匿名函数，然后这个匿名函数被oDiv调用了，因此this指向的就是oDiv。
                    // this.style.color = "hotpink";
                    oDiv.style.color = "hotpink";
                }
            }

            // case 2 闭包问题
            {
                var oUl = document.getElementById("list");
                var oLi = oUl.getElementsByTagName("li");
                for (var i = 0; i < oLi.length; i++) {
                    oLi[i].onclick = function () {
                        // oLi[i].style.color = "hotpink";// 错误
                        this.style.color = "hotpink";// 正确
                        // 那么为什么用oLi[i]就不正确，而必须要用this呢？其实这就是典型的闭包问题。对于闭包，我们在JavaScript进阶中再详细介绍。
                        // 在事件函数中，想要使用当前元素节点，我们尽量使用this来代替oBtn、oLi[i]等等这种DOM对象的写法。
                    }
                }
            }
        }
    </script>
</head>
<body>

<div>绿叶，给你初恋般的感觉~</div>

<hr>

<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

</body>
</html>

window对象 简介

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在JavaScript中，一个浏览器窗口就是一个window对象（这句话很重要）。图中有3个窗口，也就是3个不同的window对象。
            
            简单来说，JavaScript会把一个窗口看成一个对象，这样我们就可以用这个对象的属性和方法来操作这个窗口。实际上，我们每次打开一个页面时，浏览器都会自动为这个页面创建一个window对象。
            
            window对象存放了这个页面的所有信息，为了更好分类处理这些信息，window对象下面又分为很多对象，如下图所示。
            
            ![window对象](/pic/img-blog.csdnimg.cn/2feef6ac54524b9c92223264e105bfd4.png)
            
            window对象下的子对象
                document	文档对象，用于操作页面元素
                location	地址对象，用于操作URL地址
                navigator	浏览器对象，用于获取浏览器版本信息
                history	    历史对象，用于操作浏览历史
                screen	    屏幕对象，用于操作屏幕宽度高度
                
            你没看错，document对象也是window对象下的一个子对象。很多人以为一个窗口就是一个document对象，其实这个理解是错的。
            因为一个窗口不仅仅包括HTML文档，还包括浏览器信息、浏览历史、浏览地址等等。而document对象仅仅专门用来操作我们HTML文档中的元素。
            一句话概括就是：“一个窗口就是一个window对象，这个窗口里面的HTML文档就是一个document对象，document对象是window对象的子对象。”
            
            window对象及下面这些location、navigator等子对象，由于都是操作浏览器窗口的，所以我们又称之为“BOM”，也就是Browser Object Module（浏览器对象模型）。
            
            此外，你也可以把window下的子对象看成是它的属性，只不过这个属性也是一个对象，所以我们才称之为“子对象”。
            对象一般都有属性和方法，上表介绍的是window对象的属性。实际上，window对象也有非常多的方法，常用的如下表所示。
                alert()	    提示对话框
                confirm()	判断对话框
                prompt()	输入对话框
                open()	    打开窗口
                close()	    关闭窗口
                setTimeout()	开启“一次性”定时器
                clearTimeout()	关闭“一次性”定时器
                setInterval()	开启“重复性”定时器
                clearInterval()	关闭“重复性”定时器
                
            对于window对象来说，无论是它的属性，还是方法，都可以省略window前缀。例如
                window.alert()可以简写为alert()，
                window.open()可以简写为open()，
                甚至window.document.getElementById()可以简写为document.getElementById()，
                以此类推。
         */
    </script>
</head>
<body>
</body>
</html>

打开窗口 open

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在JavaScript中，我们可以使用window对象的open()方法来打开一个新窗口。
                    window.open(url, target)
            window.open()可以直接简写为open()，不过我们一般都习惯加上window前缀。
            window.open()参数有很多，但是只有url和target这两个用得上。
            
            url指的是新窗口的地址，如果url为空，则表示打开一个空白窗口。
                空白窗口很有用，我们可以使用document.write()往空白窗口输出文本，甚至输出一个HTML页面。
            target表示打开方式，它的取值跟a标签中target属性的取值是一样的，常用取值有两个：_blank和_self。
                当target为“_blank（默认值）”，表示在新窗口打开；
                当target为“_self”时，表示在当前窗口打开。
                
            二者等同
                window.open("http://www.lvyestudy.com")
                window.open("http://www.lvyestudy.com", "_blank")
         */
        window.onload = function () {
            // case 1 打开新窗口
            {
                var oBtn = document.getElementById("btn");
                oBtn.onclick = function () {
                    window.open("http://www.lvyestudy.com");
                    // window.open("http://www.lvyestudy.com", "_blank");// 二者等同 
                };
            }


            // case 2 新窗口写入
            {
                var oBtn = document.getElementById("btn2");
                oBtn.onclick = function () {
                    var opener = window.open();
                    opener.document.write("这是一个新窗口");
                    opener.document.body.style.backgroundColor = "lightskyblue";
                };
            }

            // case 3 往空白窗口输出一个页面
            {
                var oBtn = document.getElementById("btn3");
                var opener = null;
                oBtn.onclick = function () {
                    opener = window.open();
                    var strHtml = '<!DOCTYPE html>\
                            <html>\
                            <head>\
                                <title></title>\
                            </head>\
                            <body>\
                                <strong>小心偷影子的人，他会带走你的心。</strong>\
                            </body>\
                            </html>';
                    opener.document.write(strHtml);
                };
            }

            // case 4 往空白窗口输出一个页面（当前页面控制新页面的 document）
            {
                var oBtn = document.getElementsByClassName("btn4");
                var opener = null;
                oBtn[0].onclick = function () {
                    opener = window.open();
                    var strHtml = '<!DOCTYPE html>\
                            <html>\
                            <head>\
                                <title></title>\
                            </head>\
                            <body>\
                                <div>小心偷影子的人，他会带走你的心。</div>\
                            </body>\
                            </html>';
                    opener.document.write(strHtml);
                };
                oBtn[1].onclick = function () {
                    var oDiv = opener.document.getElementsByTagName("div")[0];
                    oDiv.style.fontWeight = "bold";
                    oDiv.style.color = "hotpink";
                };
            }
        }
    </script>
</head>
<body>

<input id="btn" type="button" value="case1"/>

<input id="btn2" type="button" value="case2"/>

<input id="btn3" type="button" value="case3"/>

<input class="btn4" type="button" value="打开新窗口"/>
<input class="btn4" type="button" value="操作新窗口"/>

</body>
</html>

关闭窗口 close

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在JavaScript中，我们可以使用window.close()来关闭一个新窗口。
                    window.close()
            window.close()方法是没有参数的。
         */
        window.onload = function () {
            // case 1 点击关闭当前窗口
            {
                var oBtn = document.getElementById("btn");
                oBtn.onclick = function () {
                    window.close();
                };
            }


            // case 2 关闭新窗口
            {
                var btnOpen = document.getElementById("btn_open");
                var btnClose = document.getElementById("btn_close");
                var opener = null;
                btnOpen.onclick = function () {
                    opener = window.open("http://www.lvyestudy.com");
                };
                btnClose.onclick = function () {
                    opener.close();
                }
            }
        }
    </script>
</head>
<body>

<input id="btn" type="button" value="关闭"/>

<input id="btn_open" type="button" value="打开新窗口"/>
<input id="btn_close" type="button" value="关闭新窗口"/>

</body>
</html>

对话框 alert confirm prompt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在JavaScript中，对话框有3种： alert()、confirm()和prompt()。它们都是window对象的方法。
            前面我们说过，对于window对象的属性和方法，是可以省略window前缀的，例如window.alert()可以简写为alert()。
            
            语法：alert("提示文字")
            alert 仅提示文字， \n换行
            
            语法：confirm("提示文字")
            confirm 提示文字 + 确认
            如果用户点击【确定】按钮，则confirm()返回true。如果用户点击【取消】按钮，则confirm()返回false。
            
            语法：prompt("提示文字")
            prompt 提示文字 + 输入并返回
         */
        window.onload = function () {
            // case 1 alert
            {
                var oBtn = document.getElementById("btn1");
                oBtn.onclick = function () {
                    alert("HTML\nCSS\nJavaScript");
                };
            }

            // case 2 confirm
            {
                var oBtn = document.getElementById("btn2");
                oBtn.onclick = function () {
                    if (confirm("确定要跳转到绿叶首页吗？")) {
                        window.location.href = "http://www.lvyestudy.com";
                    } else {
                        document.write("你取消了跳转");
                    }
                };
            }

            // case 3
            {
                var oBtn = document.getElementById("btn3");
                oBtn.onclick = function () {
                    var name = prompt("请输入你的名字");
                    alert(name);
                };
            }
        }
    </script>
</head>
<body>

<input id="btn1" type="button" value="alert"/>

<input id="btn2" type="button" value="confirm"/>

<input id="btn3" type="button" value="prompt"/>

</body>
</html>

定时器 setTimeout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在JavaScript中，我们可以使用setTimeout()方法来“一次性”地调用函数，并且可以使用clearTimeout()来取消执行setTimeout()。
            
            setTimeout(code, time);
            参数code可以是一段代码，可以是一个函数，也可以是一个函数名。
            参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。
         */
        window.onload = function () {
            // 举例1：code是一段代码
            {
                // setTimeout('alert("欢迎来到绿叶学习网");', 2000);
            }

            // 举例2：code是一段函数
            {
                // setTimeout(function () {
                //     alert("欢迎来到绿叶学习网");
                // }, 2000);
            }

            // 举例3：code是一个函数名
            {
                // setTimeout(alertMes, 2000);
                //
                // function alertMes() {
                //     alert("欢迎来到绿叶学习网");
                // }
            }

            // 举例4：clearTimeout()
            {
                //获取元素
                var oBtn = document.getElementsByTagName("input");
                // timer存放定时器，以便使用clearTimeout(timer)来暂停。
                var timer = null;
                oBtn[0].onclick = function () {
                    timer = setTimeout(function () {
                        alert("欢迎来到绿叶学习网");
                    }, 2000);
                };
                oBtn[1].onclick = function () {
                    clearTimeout(timer);
                };
            }
        }
    </script>
</head>
<body>

<p>2秒后提示欢迎语。</p>
<input type="button" value="开始"/>
<input type="button" value="暂停"/>

</body>
</html>

定时器 setInterval

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            border: 1px solid silver;
        }
    </style>
    <script>
        /*
            在JavaScript中，我们可以使用setInterval()方法来“重复性”地调用函数，并且可以使用clearInterval()来取消执行setInterval()。
            
            setInterval(code, time);
            参数code可以是一段代码，可以是一个函数，也可以是一个函数名。
            参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。
            此外，setInterval()跟setTimeout()语法是一样的，唯一不同的是：
                setTimeout()只执行一次；
                setInterval()可以重复执行无数次。
         */
        window.onload = function () {
            // 举例1：倒计时效果
            {
                //定义全局变量，用于记录秒数
                var n = 5;

                //设置定时器，重复执行函数countDown
                setInterval(countDown, 1000);

                function countDown() {
                    if (n > 0) {//判断n是否大于0，因为倒计时不可能有负数
                        n--;
                        document.getElementById("num").innerHTML = n;
                    }
                }
            }

            // 举例2：clearInterval
            {
                //获取元素
                var oBtn = document.getElementsByTagName("input");
                var oDiv = document.getElementsByTagName("div")[0];
                //定义一个数组colors，存放6种颜色
                var colors = ["red", "orange", "yellow", "green", "blue", "purple"];
                //timer用于定时器
                var timer = null;
                //i用于计数
                var i = 0;
                //“开始”按钮
                oBtn[0].onclick = function () {
                    //每次点击“开始”按钮，一开始就清除一次定时器
                    //避免每一次点击，都会新开一个setInterval()
                    clearInterval(timer);
                    
                    //每隔1秒切换一次背景颜色
                    timer = setInterval(function () {
                        oDiv.style.backgroundColor = colors[i];
                        i++;
                        i = i % colors.length;
                    }, 1000);
                };
                //“暂停”按钮
                oBtn[1].onclick = function () {
                    clearInterval(timer);
                };
            }
        }
    </script>
</head>
<body>

<p>倒计时：<span id="num">5</span></p>

<hr>

<input type="button" value="开始"/>
<input type="button" value="暂停"/>
<div></div>

</body>
</html>

location对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在JavaScript中，我们可以使用window对象下的location子对象来操作当前窗口的URL。
            所谓URL，指的就是页面地址。对于location对象，我们只需要掌握以下3个属性（其他不用管）
                href	当前页面地址
                search	当前页面地址“？”后面的内容
                hash	当前页面地址“#”后面的内容
            
            在JavaScript中，我们可以使用location对象的href属性来获取或设置当前页面的地址。
                    window.location.href
            window.location.href可以直接简写为location.href，不过我们一般都习惯加上window前缀。
            
            在JavaScript中，我们可以使用location对象的search属性来获取和设置当前页面地址“?”后面的内容。
                    window.location.search
         */
        window.onload = function () {
            // 举例1：获取当前页面地址
            {
                // http://localhost:63342/front-end/03_js/071_location%E5%AF%B9%E8%B1%A1.html?_ijt=isc9bistahg5kk0qhq17i5e2i6
                document.getElementById("href").innerHTML = window.location.href;
            }

            // 举例2：设置当前页面地址
            {
                // window.location.href = "http://www.lvyestudy.com";
            }

            // 举例3：设置当前页面地址
            {
                // ?_ijt=isc9bistahg5kk0qhq17i5e2i6
                document.getElementById("search").innerHTML = window.location.search;
            }

            // 举例4：window.location.hash
            {
                // 此时页面是空白的，我们在浏览器地址后面多加上#imgId（要自己手动输入），再刷新页面，就会出现结果了，效果如图所示。
                // 在实际开发中，window.location.hash用得还是比较少，我们了解一下就行。
                document.getElementById("hash").innerHTML = window.location.hash;
            }

        }

    </script>
</head>
<body>

<div id="href"></div>
<hr>

<div id="search"></div>
<hr>

<div id="hash"></div>

</body>
</html>

navigator对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            在JavaScript中，我们可以使用window对象下的子对象navigator来获取浏览器的类型。
                    window.navigator.userAgent
            
            不同浏览器，会弹出相应的版本号信息。不过这3种浏览器都含有独一无二的字符：
                    IE含有“MSIE”；
                    Chrome含有“Chrome”；
                    而Firefox含有“Firefox”。
            根据这个特点，我们可以判断当前浏览器是什么类型的浏览器。
         */
        window.onload = function () {
            // 举例1：获取当前页面地址
            {
                // http://localhost:63342/front-end/03_js/071_location%E5%AF%B9%E8%B1%A1.html?_ijt=isc9bistahg5kk0qhq17i5e2i6
                var userAgent = window.navigator.userAgent;
                document.getElementById("userAgent").innerHTML = userAgent;

                if (userAgent.indexOf("MSIE") != -1) {
                    alert("这是IE");
                } else if (userAgent.indexOf("Chrome") != -1) {
                    alert("这是Chrome");
                } else if (userAgent.indexOf("Firefox") != -1) {
                    alert("这是Firefox");
                }
            }

        }

    </script>
</head>
<body>

<div id="userAgent"></div>

</body>
</html>

document对象 简介

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            我们知道，document对象其实是window对象下的一个子对象，它操作的是HTML文档里所有的内容。
            事实上，浏览器每次打开一个窗口，就会为这个窗口生成一个window对象，并且会为这个窗口内部的页面（即HTML文档）自动生成一个document对象，然后我们就可以通过document对象来操作页面中所有的元素了。
            
            window对象是浏览器为每个窗口创建的一个对象。
            通过window对象，我们可以操作窗口如打开窗口、关闭窗口、浏览器版本等，这些又被统称为“BOM（浏览器对象模型）”。
            
            document对象是浏览器为每个窗口内的HTML页面创建的一个对象。
            通过document对象，我们可以操作页面的元素，这些操作又被统称为“DOM（文档对象模型）”。
            
            由于window对象是包括document对象的，所以我们可以“简单”地把BOM和DOM的关系理解成：BOM包含DOM。
            只不过对于文档操作来说，我们一般不把它看成是BOM的一部分，而是看成独立的，也就是DOM。
            
            其实，我们就已经在大量使用document对象的属性和方法了，如document.write()、document.getElementById()、document.body等。
         */
    </script>
</head>
<body>
</body>
</html>

document对象 属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            document对象常用的属性
                document.title	    获取文档的title
                document.body	    获取文档的body
                document.forms	    获取所有form元素
                document.images	    获取所有img元素
                document.links	    获取所有a元素
                document.cookie	    文档的cookie
                document.URL	    当前文档的URL
                document.referrer	返回使浏览者到达当前文档的URL
                
            （1）document.title 和 document.body 不再论述
            （2）document.forms、document.images、document.links 等同于下面
                document.getElementsByTagName("form")
                document.getElementsByTagName("img")
                document.getElementsByTagName("a")
            （3）document.cookie 前端用的不多
            
            
            document.URL和window.location.href都可以获取当前页面的URL，不过它们也有区别：
                document.URL只能获取不能设置；
                window.location.href既可以获取也可以设置。
                
            在JavaScript中，我们可以使用document对象的referrer属性来获取用户在访问当前页面之前所在页面的地址。
            例如我从页面A的某个链接进入页面B，如果在页面B中使用document.referrer，就可以获取到页面A的地址。
            document.referrer非常酷，因为我们可以通过它来统计用户都是通过什么方式来到你的网站的。
         */
    </script>
</head>
<body>
</body>
</html>

document对象 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            document对象常用的方法
                    document.getElementById()	        通过id获取元素
                    document.getElementsByTagName()	    通过标签名获取元素
                    document.getElementsByClassName()	通过class获取元素
                    document.getElementsByName()	    通过name获取元素
                    document.querySelector()	        通过选择器获取元素，只获取第1个
                    document.querySelectorAll()	        通过选择器获取元素，获取所有
                    document.createElement()	        创建元素节点
                    document.createTextNode()	        创建文本节点
                    document.write()	                输出内容
                    document.writeln()	                输出内容并换行
                    
            document.write()不仅可以输出文本，还可以输出标签。
                document.write('<div style="color:hotpink;">绿叶学习网</div>');
            
            writeln()方法跟write()方法相似，唯一区别是：writeln()方法会在输出内容后面多加上一个换行符\n。
            二者等同
                document.writeln("绿叶学习网");
                document.write("绿叶学习网\n");
         */
    </script>
</head>
<body>
</body>
</html>

结束

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
    </style>
    <script>
        /*
            《HTML+CSS快速上手》
                →《CSS进阶之旅》
                    →《JavaScript快速上手》
                        →《jQuery快速上手》
                            →《HTML5+CSS3修炼之道》
                                →《HTML5 Canvas动画开发》
                                    →未完待续。
           
            ![附录A 字符串的方法](/pic/img-blog.csdnimg.cn/376125af3f66409aa180efb1b0339347.png)
            ![附录B 数组的方法](/pic/img-blog.csdnimg.cn/9e7a4f2bf9f74993af9c65a2def046ec.png)
            ![附录C 时间对象的方法](/pic/img-blog.csdnimg.cn/39c724ff2d0b46e5af02f438d281c548.png)
            ![附录D 数学对象的方法](/pic/img-blog.csdnimg.cn/e320183cf7be4c4797a999a6fc06e169.png)
            ![附录E 常用的随机数](/pic/img-blog.csdnimg.cn/7ea7998d076f4e03833870b5f0589e79.png)
            
            【日期标记】2023-06-12 18:11:18 以上同步完成
            
            
            [ES6 再学习-2021-01-08](https://taopanfeng.com/2021/01/08/2021-01-08...15.40.17/)
            【日期标记】2023-06-29 17:45:04 以上同步完成
         */
    </script>
</head>
<body>
</body>
</html>