《从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