js-语法及使用

阅读量

js-语法及使用

一.ECMAscript

1.常量和变量

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 lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
<script>
    // 1.定义局部变量
    var name = "张三";
    var age = 23;

    document.write(name + "," + age + "<br/>");

    //2.定义全部变量
    {
        // 局部变量
        var str1 = "abc";
        // 全局变量
        str2 = "bcd";

        document.write(str1);
        document.write("<br/>");
        document.write(str2);
    }
    // 3.定义常量
    const PI = 3.14;
    // 常量的值不可以被修改
    // PI = 3.15;
    document.write(PI)
</script>
</html>

2.乘法口诀表

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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乘法口诀表</title>
</head>

<body>

</body>
<script>

    for (var i = 1; i <= 9; i++) {
        document.write("<br/>");
        for (var j = 1; j <= i; j++) {
            document.write(i + "*" + j + "=" + (i * j)+"&nbsp;&nbsp;&nbsp;");
        }
    }

</script>

</html>

3.定义数组

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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数组</title>
</head>

<body>

</body>

<script>
    // 定义数组
    var arr = [10, 20, 30];
    // js中数组是可变的
    arr[5] = 99;
    for (let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "<br/>");
    }

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

    // 复制数组
    var arr2 = [...arr];
    for (let i = 0; i < arr2.length; i++) {
        document.write(arr2[i] + "<br/>");
    }

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

    //合并数组
    var arr3 = [40, 50, 60];
    var arr4 = [...arr2, ...arr3];
    for (let i = 0; i < arr4.length; i++) {
        document.write(arr4[i] + "<br/>");
    }
</script>

</html>

4.函数

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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
</head>

<body>

</body>
<script>
    // 无参无返回值的函数
    function println() {
        document.write("hello js<br/>")
    }

    println();

    // 有参有返回值的方法
    function getNum(num1,num2){
        return num1+num2;
    }
    var num = getNum(2,3);
    document.write(num+"<br/>");

    // 可变参数
    function getSum(...params){
        var sum = 0;
        for(var i = 0;i<params.length;i++){
            sum += params[i];
        }
        return sum;
    }
    var result = getSum(1,2,3,4,5,6);
    document.write(result+"<br/>");

    //匿名函数
    var fun = function(){
        document.write("你好呀");
    }
    fun();
</script>

</html>

5.输入输出语句

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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入输出语句</title>
</head>

<body>

</body>
<script>
    //输入框
    //prompt("请输入数据");

    //弹出警告框
    alert("警告框");

    //控制台输出
    console.log("控制台输出");
    console.info("info信息");
    console.error("error信息");

    //页面输出
    document.write("hello js");
    document.write("<br/>");
    document.write("hello js");

</script>


</html>

6.数据类型

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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据类型</title>
</head>

<body>

</body>
<script>

    var l1 = true;
    document.write(typeof (l1) + "<br/>");

    var l2 = null;
    document.write(typeof (l2) + "<br/>");

    var l3;
    document.write(typeof (l3) + "<br/>");

    var l4 = 10;
    document.write(typeof (l4) + "<br/>");

    var l5 = "abc";
    document.write(typeof (l5) + "<br/>");

    var l6 = 10n;
    document.write(typeof (l6) + "<br/>");

    document.write(14 == 16);

</script>

</html>

7.运算符

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运算符</title>
</head>

<body>

</body>
<script>

    var num = "10";
    document.write(num + 5 + "<br/>");
    document.write(num + "5" + "<br/>");
    document.write(num - "5" + "<br/>");
    document.write(num * "5" + "<br/>");
    var nn = -num;//数据类型转换
    document.write("nn:" + typeof (nn) + "<br/>");

    var num2 = 10;
    document.write(num == num2);
    document.write("<br/>");
    document.write(num === num2); 

</script>

</html>

8.注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注释</title>
</head>
<body>
    
</body>
<script>
    //单行注释

    /*
        多行注释
    */

    alert("hello world!");
</script>
</html>

二.DOM

1.属性的操作

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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性的操作</title>

    <style>
        .aColor {
            color: blue;
        }
    </style>

</head>

<body>

    <a>点我呀</a></br>
    <a>点我呀</a></br>
    <a>点我呀</a></br>
    <a>点我呀</a></br>

</body>

<script>

    // 添加属性
    let a = document.getElementsByTagName("a")[2];
    a.setAttribute("href", "http://www.baidu.com");

    //获取属性
    let href = a.getAttribute("href");
    alert(href);

    //删除属性
    // a.removeAttribute("href");

    //添加样式
    a.style.backgroundColor = "red";

    //添加指定样式
    a.className = "aColor";
</script>

</html>

2.文本的操作

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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本的操作</title>
</head>

<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
<script>
    // 无法解析HTML标签
    let div = document.getElementById("div1");
    div1.innerText = "<b>我是div1<b/>";

    // 可以解析html标签
    let div2 = document.getElementById("div2");
    div2.innerHTML = "<b>我是div2<b/>";
</script>

</html>

3.元素的操作1

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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的操作1</title>
</head>

<body>

    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div>
    <input type="text" name="username" />

</body>

<script>
    document.write("<br/>");
    //根据id属性获取元素对象
    let div1 = document.getElementById("div1");
    document.write(div1 + "<br/>");

    // 根据元素名称获取元素对象们，返回数组
    let divs = document.getElementsByTagName("div");
    document.write(divs.length + "<br/>");

    //根据Class获取元素对象们，返回数组
    let cls = document.getElementsByClassName("cls");
    document.write(cls.length + "<br/>");

    //根据name属性值获取元素对象们，返回数组
    let username = document.getElementsByName("username");
    document.write(username.length + "<br/>");


</script>

</html>

4.元素的操作2

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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的操作2</title>
</head>

<body>
    <select id="s">
        <option>---请选择---</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
</body>
<script>
    // 创建新的元素
    let option = document.createElement("option");
    option.innerText = "重庆";

    // 将子元素添加到父元素中
    //现获取父亲sekect标签，通过父亲将孩子添加
    let select = document.getElementById("s");
    select.appendChild(option);

    // 通过父元素删除子元素
    select.removeChild(select.children[2]);

    //用新元素替换老元素
    let option2 = document.createElement("option");
    option2.innerText = "西安";

    //通过父亲标签获取索引为1的孩子
    let option3 = select.children[1];
    //进行替换
    select.replaceChild(option2, option3);
</script>

</html>

5.综合案例-实现图片的切换

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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件使用</title>
</head>

<body>
    <img id="img" src="img/1.jpg" />
    <button id="up">上一张</button>
    <button id="down">下一张</button>


</body>

<script>
    // 显示上一张图片的方法
    function up() {
        let img = document.getElementById("img");
        img.setAttribute("src", "img/1.jpg");
    }

    // 显示下一张图片的方法
    function down() {
        let img = document.getElementById("img");
        img.setAttribute("src", "img/2.jpg");
    }

    // 为上一张的按钮绑定事件
    let betup = document.getElementById("up");
    betup.onclick = up;

    // 为下一张的按钮绑定事件
    let betdown = document.getElementById("down");
    betdown.onclick = down;
</script>

</html>

6.综合案例-动态表格

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table {
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,
        th {
            text-align: center;
            border: 1px solid;
        }

        div {
            text-align: center;
            margin: 50px;
        }
    </style>

</head>

<body>

    <div>
        <input type="text" id="name" placeholder="请输入姓名" autocomplete="off">
        <input type="text" id="age" placeholder="请输入年龄" autocomplete="off">
        <input type="text" id="gender" placeholder="请输入性别" autocomplete="off">
        <input type="button" value="添加" id="add">
    </div>

    <table id="tb">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

    </table>

</body>
<script>

    //添加功能
    //1.为添加按钮绑定单击事件
    document.getElementById("add").onclick = function(){
        //2.创建行元素
        let tr = document.createElement("tr");

        //3.创建4个单元格元素
        let tdName = document.createElement("td");
        let tdAge = document.createElement("td");
        let tdGender = document.createElement("td");
        let tdDel = document.createElement("td");

        //4.将td添加到tr中
        tr.appendChild(tdName);
        tr.appendChild(tdAge);
        tr.appendChild(tdGender);
        tr.appendChild(tdDel);

        //5.获取输入框中的文本信息
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        let gender = document.getElementById("gender").value;

        //6.根据获取到的信息创建三个文本元素
        let textName = document.createTextNode(name);
        let textAge = document.createTextNode(age);
        let textGender = document.createTextNode(gender);

        //7.将三个文本元素添加到td中
        tdName.appendChild(textName);
        tdAge.appendChild(textAge);
        tdGender.appendChild(textGender);


        //8.创建超链接元素和显示的文本以及添加href属性
        let a = document.createElement("a");
        a.innerText = "删除";
        a.setAttribute("href","javascript:void(0);");
        a.setAttribute("onclick","drop(this)");

        //9.将超链接元素添加到td中
        tdDel.appendChild(a);

        //10.获取table元素，将tr添加到table中
        let table = document.getElementById("tb");
        table.appendChild(tr);
    }

    // 删除的功能
    // 1.为每个删除超链接标签添加单击事件的属性
    // 2.定义删除的方法
    function drop(obj){
        // 3.获取table元素
        let table = obj.parentElement.parentElement.parentElement;
        // 4.获取tr元素
        let tr = obj.parentElement.parentElement;
        // 5.通过table删除tr
        table.removeChild(tr);
    }

</script>

</html>

7.面向对象

7.1类的定义和使用
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类的定义和使用</title>
</head>

<body>

</body>
<script>
    class Person {
        //构造方法
        constructor(name, age) {
            this.name = name;
            this.age = age;
        }

        show() {
            document.write(this.name + "," + this.age);
        }

    }
    let p = new Person("账单",23);
    p.show();
</script>

</html>
7.2字面量定义类和使用
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字面量定义类和使用</title>
</head>
<body>
    
</body>
<script>

    // 定义Person
    let person = {
        name : "张三",
        age : 23,
        hobby : ["游戏","电影"],

        eat : function(){
            document.write("吃饭。。。")
        }
    }

    // 使用person的成员变量
    document.write(person.name+","+person.age+","+person.hobby[0]+","+person.hobby[1]+"</br>");

    // 调用方法
    person.eat();
</script>
</html>

8.内置对象

8.1 Number
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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number内置对象</title>
</head>

<body>

</body>
<script>

    // 将转入的字符串浮点数转为浮点数
    let num1 = Number.parseFloat("3.14");
    document.write(num1 + "<br>");

    //将转入的字符串整数转为整数
    let num2 = Number.parseInt("123");
    document.write(num2 + "<br>");

    // 从数字开始转换，直到不是数字位置
    let num3 = Number.parseInt("456abc");
    document.write(typeof (num3) + "," + num3 + "<br>");

    document.write(NaN == NaN);
    document.write("<br>");

    // 判断输入的值是否是NaN
    document.write(Number.isNaN(NaN));
    document.write("<br>");

    document.write("--------------------------<br>");
    let num4 = Number.parseInt("abc");
    document.write(typeof (num4) + ":" + num4);
    document.write("<br>");
    document.write(num4 = NaN);
    document.write("<br>");
    document.write(Number.isNaN(num4));
</script>
</html>
8.2 Math
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 lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math</title>
</head>
<body>
    
</body>
<script>
    //1. ceil(x) 向上取整
    document.write(Math.ceil(4.4) + "<br>");    // 5
    
    //2. floor(x) 向下取整
    document.write(Math.floor(4.4) + "<br>");   // 4
    
    //3. round(x) 把数四舍五入为最接近的整数
    document.write(Math.round(4.1) + "<br>");   // 4
    document.write(Math.round(4.6) + "<br>");   // 5
    
    //4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)
    document.write(Math.random() + "<br>"); // 随机数
    
    //5. pow(x,y) 幂运算 x的y次方
    document.write(Math.pow(2,3) + "<br>"); // 8
</script>
</html>
8.3 Date
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 lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date</title>
</head>
<body>
    
</body>
<script>
    //构造方法
    //1. Date()  根据当前时间创建对象
    let d1 = new Date();
    document.write(d1 + "<br>");

    //2. Date(value) 根据指定毫秒值创建对象
    let d2 = new Date(10000);
    document.write(d2 + "<br>");

    //3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段创建对象(月份是0~11)
    let d3 = new Date(2222,2,2,20,20,20);
    document.write(d3 + "<br>");

    //成员方法
    //1. getFullYear() 获取年份
    document.write(d3.getFullYear() + "<br>");

    //2. getMonth() 获取月份
    document.write(d3.getMonth() + "<br>");

    //3. getDate() 获取天数
    document.write(d3.getDate() + "<br>");

    //4. toLocaleString() 返回本地日期格式的字符串
    document.write(d3.toLocaleString());
</script>
</html>
8.4 String
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String内置对象</title>
</head>

<body>

</body>
<script>

    //1.构造方法创建字符串对象
    let s1 = new String("hello");
    document.write(s1 + "<br>");

    // 直接赋值
    let s2 = "hello";
    document.write(s2 + "<br>");

    // 属性
    // 1.length 获取字符串的长度
    document.write(s2.length + "<br>");

    // 成员方法
    // 1.charAt(index) 获取指定索引处的字符
    document.write(s2.charAt(1) + "<br>");

    // 2.indexOf(value) 获取指定字符串出现的索引位置
    document.write(s2.indexOf("l") + "<br>");

    // 3.substring(start,end) 根据指定索引范围截取字符串（含头不含尾）
    document.write(s2.substring(2, 4) + "<br>");

    // 4.split(value) 根据指定规则切割字符串，返回数组
    let s3 = "张三，23，男";
    let arr = s3.split(",");
    for (let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "<br>");
    }

    // 5.replace(old,new ) 使用字符串替换
    let s4 = "你会不会玩呀，我叼你妈的";
    let s5 = s4.replace("叼你妈的", "****");
    document.write(s5 + "<br>");
</script>
</html>
8.5 RegExp(正则表达式)
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式</title>
</head>
<body>
    
</body>

<script>
    // 验证手机号
    // 规则：第一位1，第二位358，第三位到十一位必须是数字，总长度为11
    let reg1 = /^[1][358][0-9]{9}$/;
    document.write(reg1.test("18300002222")+"<br>");

    // 验证用户名
    // 规则：字母、数字、下划线组成。总长度4~16
    let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
    document.write(reg2.test("zha_aa9")+"<br>");

    // 邮箱验证
    let reg_email = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
    let flag = reg_email.test("e-_eeasd@126.com.cn");
    document.write(flag);
</script>
</html>
8.6 Array
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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

<script>
    let arr = [1, 2, 3, 4, 5];
    // 添加元素到数组的末尾
    arr.push(6);
    document.write(arr + "<br>");

    // 删除数组末尾中的元素
    arr.pop();
    document.write(arr + "<br>");

    // 删除数组最前面的元素
    arr.shift();
    document.write(arr + "<br>");

    // 判断数组中是否包含指定的元素
    document.write(arr.includes(9) + "<br>");

    // 反转数组元素
    arr.reverse();
    document.write(arr + "<br>");

    // 对数组元素进行排序
    arr.sort();
    document.write(arr + "<br>");
</script>
</html>
8.7 Set
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set</title>
</head>

<body>

</body>
<script>

    // 创建集合对象
    let s = new Set();

    // add(元素) 添加元素
    s.add("a");
    s.add("b");
    s.add("c");
    s.add("c");

    // size属性 获取集合的长度
    document.write(s.size + "<br>");

    // keys() 获取迭代器对象
    let st = s.keys();
    for (let i = 0; i < s.size; i++) {
        document.write(st.next().value + "<br>");
    }

    // delete(元素) 删除指定元素
    document.write(s.delete("c") + "<br>");

    let st2 = s.keys();
    for (let i = 0; i < s.size; i++) {
        document.write(st2.next().value + "<br>");
    }

    // 增强for
    document.write("=====================<br>");
    for (let i of s) {
        document.write(i + ",");
    }
    document.write("<br>");
</script>
</html>
8.8 Map
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 lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>map</title>
</head>

<body>

</body>
<script>

    // 创建集合对象
    let map = new Map();

    map.set("张三", 23);
    map.set("李四", 24);
    map.set("王五", 25);

    // 获取集合的长度
    document.write(map.size + "<br>");

    // 根据key获取value
    document.write(map.get("李四") + "<br>");

    // 获取迭代器对象
    let er = map.entries();
    for(let i=0;i<map.size;i++){
        document.write(er.next().value+"<br>");

    }

    document.write("===========================<br>")
    // 获取key的集合，根据key获取value
    let keys = map.keys();
    for(let i=0;i<map.size;i++){
        let k = keys.next().value;
        document.write(k+"="+map.get(k)+"<br>")
    }
    document.write("===========================<br>")

    // 删除元素
    map.delete("张三");

    // 增强for
    for(let item of map.entries()){
        document.write(item[0]+":"+item[1]+"<br>");
    }
</script>
</html>
8.9 JSON
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>json</title>
</head>
<body>
    
</body>
<script>
    // 定义天气对象
    let weather = {
        city:"北京",
        date:"2088-08-08",
        wendu:"10°~23°",
        shidu:"22%"
    };

    // 将天气对象转换为JSON格式的字符串
    let str = JSON.stringify(weather);
    document.write(str+"<br>");

    //将JSON格式字符串解析成JS对象
    let weather2 = JSON.parse(str);

    document.write("城市："+weather2.city+"<br>");
    document.write("日期："+weather2.date+"<br>");
    document.write("温度："+weather2.wendu+"<br>");
    document.write("湿度："+weather2.shidu+"<br>");
</script>
</html>
8.10 登录校验案例
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单校验</title>
    <link rel="stylesheet" href="css/style.css"></link>
</head>
<body>
    <div class="login-form-wrap">
        <h1>黑马程序员</h1>
        <form class="login-form" action="#" id="regist" method="get" autocomplete="off">
            <label>
                <input type="text" id="username" name="username" placeholder="Username..." value="">
            </label>
            <label>
                <input type="password" id="password" name="password" placeholder="Password..." value="">
            </label>
            <input type="submit" value="注册">
        </form>
    </div>
</body>
<script>
    //1.为表单登录绑定提交事件
    document.getElementById("regist").onsubmit = function(){
        // 2.获取填写的用户名和密码
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;

        // 判断用户名是否符合规则 4~16位纯数字
        let reg1 = /^[a-zA-Z]{4,16}$/;
        if(!reg1.test(username)){
            alert("用户名不符合规则，请输入4到16位的纯数字！");
            return false;
        }

        // 判断密码是否符合规则 6位纯数字
        let reg2 = /^[\d]{6}$/;
        if(!reg2.test(password)){
            alert("密码不符合规则，请输入6位纯数字的密码！");
            return false;
        }
        // 如果所有条件都不满足，则提交表单
        return true;
    }

</script>
</html>

三.BOM

1. 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地址栏对象</title>
</head>
<body>
    <p>
        注册成功！<span id="time">5</span>秒之后自动跳转到首页...
    </p>
</body>

<script>

    // 定义方法，改变描述，跳转页面
    let num = 5;
    function showTime(){
        num--;
        if(num<=0){
            // 跳转页面
            location.href = "http://www.baidu.com";
        }
        let span = document.getElementById("time");
        span.innerHTML = num;
    }
    // 设置循环定时器，每一秒钟执行一次showTime方法
    setInterval("showTime()", 1000);
</script>
</html>

2.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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window窗口对象</title>
</head>
<body>
    <div id="div1">123 </div>
</body>
<script>
    // 定时器执行的函数
    function fun(){
        alert("该起床了！");
    }

    // 设置一次性定时器
    let d1 = setTimeout("fun()", 3000);

    // 取消一次性定时器
    clearTimeout(d1);

    // 设置循环定时器
    let d2 = setInterval(() => {
        alert("该下课了");
    }, 3000);

    // 取消循环定时器
    clearInterval(d2);

    // 窗体加载完毕后，执行onload时间
    window.onload = function(){
        let div = document.getElementById("div1");
        alert(div.innerHTML);
    }
</script>
</html>

3. 小结

  • BOM(Browser Object Model)：浏览器对象模型。
  • 将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。
    • Window：窗口对象
    • Location：地址栏对象
    • Navigator：浏览器对象
    • History：当前窗口历史记录对象
    • Screen：显示器屏幕对象
  • Window 窗口对象
    • setTimeout()、clearTimeout()：一次性定时器
    • setInterval()、clearInterval()：循环定时器
    • onload 事件：页面加载完毕触发执行功能
  • Location 地址栏对象 href 属性：跳转到指定的 URL 地址
赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

一枚17级软件工程学生<br><br>愿待java如初恋<br>也希java诚待我