深圳的小梅沙真的治愈啊

Chapter 1. 事件

1.1 事件监听机制

事件监听机制，即某些组件被执行了某些操作后，触发某些代码的执行。

  • 事件：某些操作。如：单击

  • 事件源：组件。如：按钮、文本输入框

  • 监听器：代码

  • 注册监听：将事件、事件源、监听器结合在一起，当事件源上发生了某个事件，则触发执行某个监听器的代码。有两个方式，绑定事件：

    方式一：直接在 HTML 标签上，指定事件的属性，其属性值即是 JS 代码

    1
    2
    3
    4
    5
    6
    7
    8
    <body>
        <img id = "light" src = "img/off.gif" onclick = "fun();">
        <script>
        	function fun(){
                alert('我被点击了!');
            }
        </script>
    </body>

    方式二：通过 JS 获取元素对象，指定事件属性，设置函数。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <body>
        <img id = "light" src = "img/off.gif">
        <script>
    		var light = document.getElementById("light"); //获取对象
            light.onclick = function(){
                alert('我被点击了!');
            }
        </script>
    </body>

1.2 常见的事件

（一）点击事件：

  1. onclick：单机事件
  2. ondblclick：双击事件

（二）焦点事件：

  1. onblur：失去焦点，常用于表单校验。
  2. onfocus：元素获得焦点。

（三）加载事件：

  1. onload：一张页面或一幅图像完成加载

（四）鼠标事件：

  1. onmousedown：鼠标按键被按下。
    • 定义方法时，定义一个形参接收 event 对象
    • event 对象的 button 属性，可以知道使用鼠标的哪个按键进行点击。
  2. onmouseup：鼠标按键被松开。
  3. onmousemove：鼠标被移动
  4. onmouseover：鼠标移动到某元素之上。
  5. onmouseout：鼠标从某个元素移开。

（五）键盘事件：

  1. onkeydown：某个键盘按键被按下
  2. onkeyup：某个键盘按键被松下
  3. onkeypress：某个键盘按键被按下并松开

（六）选择和改变：

  1. onchange：域的内容被改变。
    • 应用场景：关于 省、市、区联动的下拉选择的表单
  2. onselectet：用户选取文本时触发

使用举例：

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">
    <title>Title</title>
    <script>
        window.onload = function(){ //整个窗口加载完毕后，再执行下列的时间
            //失去焦点事件
            document.getElementById("username").onblur = function(){
                alert("失去焦点了...");
            }
            //绑定鼠标点击事件
            document.getElementById("username").onmousedown = function (event) {
                alert("鼠标的第" + event.button + "个键点击了!");
            }

            //绑定键盘事件
            document.getElementById("username").onkeydown = function (event) {
                if(event.keyCode == 13){ //当按下键盘的回车键
                    alert("表单提交!");
                }
            }
        }
    </script>
</head>
<body>
    <input name = "username" id = "username">
</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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <script>
        window.onload = function () {
            //1. 获取图片对象
            var img = document.getElementById("checkCodeImg");
            //2. 绑定单机事件
            img.onclick = function () {
                //获取时间戳，从而得到一个“唯一”而“不重复”的值
                var date = new Date().getTime();
                img.src = "/MyEEProjects/checkCodeServlet?" + date;
                //通过传入无用但“唯一”而“不重复”的参数，能够保证点击时更新图片缓存
            }
        }
    </script>
</head>
<body>
    <img id = "checkCodeImg" src = "/MyEEProjects/checkCodeServlet" />
    <!--验证码图片-->
</body>
</html>

（七）表单事件：

  1. onsubmit：确认按钮被点击

    • 可以阻止表单的提交，从而对填写的表单进行校验
    • 当方法的返回值是 false，则阻止提交。

    注意区分，Form 这一 DOM 对象有一方法（不是事件）：submit()，JS能够通过这一 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
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
        	/* 方式一 */
            function checkForm() {
                var flag = true;
                //...
                return flag;
            }
            /* 方式二，此时无需在HTML标签中指定onclick属性
            document.getElementById("form").onsubmit = function () {
                var flag = false;
                //...
                return flag;
            }
            */
        </script>
    </head>
    <body>

        <form action="#" id = "form" onclick="return checkForm();" >
            <input name = "username" id = "username">
            <input type = "submit" value = "提交">
        </form>

    </body>
    </html>

  2. onreset：表单重置时触发

案例：表单全选

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }
        .outBK{
            background-color: white;
        }
        .overBK{
            background-color: #bdedf9;
        }
    </style>
    <script>
        //1. 在页面加载完后绑定事件
        window.onload = function () {
            //2. 给全选按钮绑定单击事件
            document.getElementById("selectAll").onclick = function () {
                var cbs = document.getElementsByName("cb"); //3. 获取数组
                for(var i = 0; i < cbs.length; i++){
                    cbs[i].checked = true;
                }
            }
            //全不选
            document.getElementById("unSelectAll").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for(var i = 0; i < cbs.length; i++){
                    cbs[i].checked = false;
                }
            }
            //反选
            document.getElementById("selectRev").onclick = function () {
                var cbs = document.getElementsByName("cb");
                if(cbs[0].checked == true) cbs[0].checked = false; //全选的反选，保证所有都不选
                for(var i = 1; i < cbs.length; i++){
                    cbs[i].checked = !cbs[i].checked;
                }
            }

            document.getElementById("firstCb").onclick = function () {
                var cbs = document.getElementsByName("cb");
                for(var i = 1; i < cbs.length; i++){
                    cbs[i].checked = this.checked;//所有行的选中状态基于第一行
                }
            }

            //为所有tr标签，绑定“鼠标移到元素之上”和“移出元素之上”的事件
            var trs = document.getElementsByTagName("tr");
            for(var i = 0; i < trs.length; i++){
                trs[i].onmouseover = function () {
                    this.className = "overBK";
                }
                trs[i].onmouseout = function () {
                    this.className = "outBK";
                }
            }
        }
    </script>
</head>
<body>

<table>
    <caption>To Do List</caption>
    <tr>
        <th><input type="checkbox" name = "cb" id = "firstCb"></th>
        <th>编号</th>
        <th>名称</th>
    </tr>
    <tr>
        <td><input type="checkbox" name = "cb"></td>
        <td>1</td>
        <td>写作业</td>
    </tr>
    <tr>
        <td><input type="checkbox" name = "cb"></td>
        <td>2</td>
        <td>刷卷子</td>
    </tr>
    <tr>
        <td><input type="checkbox" name = "cb"></td>
        <td>3</td>
        <td>看网课</td>
    </tr>
</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</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
function checkUsername(){
    var username = document.getElementById("username").value; //获取用户名的值
    var reg_username = /^\w{6, 12}$/; //定义正则表达式
    var flag = reg_username.test(username); //判断值是否符合正则表达式的规则
    var s_username = document.getElementById("s_username");
    if(flag)
        s_username.innerHTML = "<img width = '50%' src = 'img/correct.svg'/>";
    else 
       	s_username.innerHTML = "用户名格式有误";
    return flag;
}
function checkPassword(){
    //...
    return flag;
}
window.onload = function(){
    //给表单绑定 onsubmit 事件，当用户点击提交按钮时，先校验是否通过
    document.getElementById("form").onsubmit = function(){
        return checkUsername() && checkPassword;
    }
    //给每个表单分别绑定离开焦点的事件，用以实时判断表单的合法性
    document.getElementById("username").onblur = checkUsername; //注意，是函数对象
    document.getElementById("password").onblur = checkPassword;
}

Chapter 2. BOM-浏览器对象模型

浏览器对象模型（Browser Object Model），将浏览器的各个组成部分封装为对象，使得 JavaScript 有能力与浏览器“对话”。

其组成有：

  • window——窗口对象
  • navigator——浏览器对象
  • screen——显示器屏幕对象
  • history——历史记录对象
  • location——地址栏对象

2.1 window：窗口对象

window 对象，表示了浏览器窗口，所有 JS 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量，是 window 对象的属性（甚至，HTML DOM 的 document 也是 window 对象的属性之一）；全局函数，是 window 对象的方法。

2.1.1 属性

  1. 获取其他 BOM 对象：
    • history
    • location
    • navigator
    • screen
  2. 获取 DOM 对象：
    • document

2.1.2 特点

  1. window 对象无需创建，即可使用其相关的方法
  2. window 引用可以省略

2.1.3 相关方法

（一）与弹出框有关的方法：

  • alert()：显示带有一段消息和一个确认按钮的警告框
  • confirm()：显示带有一段消息以及确认按钮（若用户点击，则返回 true）和取消按钮（若用户点击，则返回 false）的对话框。
  • prompt()：显示可提示用户输入的对话框，其返回为用户输入的值。

（二）与打开关闭有关的方法：

  • close()：关闭浏览器窗口。“谁调用我，我关闭谁”
  • open()：打开一个新的浏览器窗口，同时返回新的 window 对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <input id = "openBtn" type = "button" value = "打开窗口">
    <script>
    	var openBtn = document.getElementById("openBtn");
        var newWindow;
        openBtn.onclick = function(){
            newWindow = open("https://joydee.top/");
        }
        
        var closeBtn = document.getElementById("closeBtn");
        closeBtn.onclick = function(){
            newWindow.close(); //关闭刚打开的窗口
        }
    </script>
</body>

（三）与定时器有关的方法

  • setTimeout(JS代码或方法对象, 毫秒值)：在指定的毫秒数后调用函数或计算表达式（只会执行一次），它返回的是一个唯一标识，用于取消定时器。
  • clearTimeout()：取消由 setTimeout() 方法设置的 timeout
  • setInterval()：按照指定的周期（以毫秒为单位）来调用传入的函数或计算表达式。
  • clearInterval()：取消由 setInterval() 设置的 timeout
1
2
3
4
5
6
7
8
9
10
11
<body>
    <input id = "openBtn" type = "button" value = "打开窗口">
    <script>
    	var id = setTimeout("fun();", 3000); //3s后，弹出该窗口
        // 或者直接传入方法对象：setTimeout(fun, 3000);
        // 关闭计时：clearTimeout(id); 
        function fun(){
            alert('boom~~~');
        }
    </script>
</body>

案例一：轮播图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <script>
        var cnt = 1;
        function fun() {
            cnt = cnt % 4 + 1;
            var img = document.getElementById("myimg"); //获取id为myimd的对象
            img.src = "./imgs/" + cnt + ".svg";
        }
        setInterval(fun, 2000);
    </script>
</head>
<body>
    <img id = "myimg" src = "./imgs/1.svg" width="50%">
</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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
</head>
<body>
<p>
    <span id = "curtime" style="color: dodgerblue">5</span>秒后，自动跳转到首页...
</p>
<script>
    var ss = 5, id;
    function showTime() {
        ss--;
        if(ss <= 0){
            //clearInterval(id);
            location.href = "https://joydee.top";
        }
        var curtime = document.getElementById("curtime");
        curtime.innerHTML = ss + "";  //使ss自动转为字符串类型
    }
    id = setInterval(showTime, 1000);
</script>
</body>
</html>

2.2 location：地址栏对象

（一）创建（获取）：

  • 直接 window.location 或者不使用window的前缀： location

（二）属性：

  • href：设置或返回完整的 URL

（三）方法：

  • reload()：重新加载当前文档，即刷新

2.3 history：历史记录对象

（一）创建（获取）：

  • 直接 window.history 或者不使用window的前缀： history

（二）属性：

  • length：返回当前窗口历史列表中的 URL 数量

（三）方法：

  • back()：加载 history 列表中的前一个 URL。

  • forward()：加载 history 列表中的下一个 URL。

  • go(参数)：加载 history 列表中的某个具体页面。其参数：

    • 正数：前进几个历史记录

    • 负数：后退几个历史记录

Chapter 3. DOM-文档对象模型

网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），即将标记语言文档的各个组成部分，封装为对象。

W3C DOM 标准被分为 三个部分：

  • 核心 DOM：针对任何结构化文档的标准模型
    • Document：文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象
    • Node：节点对象，其他五个的父对象
  • XML DOM：针对 XML 文档的标准模型
  • HTML DOM：针对 HTML 文档的标准模型

3.1 核心 DOM 模型

3.1.1 Document：文档对象

（一）在 HTML DOM 模型中，可以使用 window 对象来获取：window.document，也可省略前缀：document

（二）方法：

  1. 获取 Element 对象：
    • getElementById()：根据 id 属性值（一般唯一）来获取元素对象
    • getElementsByTagName：根据元素名称获取元素对象们（注意方法名中的 s），返回值是一个数组。
    • getElementsByClassName()：根据 class 属性获取元素对象们，返回值是一个数组
    • getElementByName()：根据 name 属性值获取元素对象们，返回值也是一个数组
  2. 创建其他 DOM 对象：
    • createAttribute(name)
    • createComment()
    • createElement()
    • createTextNode()

3.1.2 Element 元素对象

（一）方法：

  • removeAttribute()：删除属性
  • setAttribute()：设置属性

3.1.3 Node 节点对象

（一）特点：所有DOM对象都可被认为是一个节点

（二）属性：parentNode：返回节点的父节点

（三）方法：CRUD DOM树：

  • appendChild()：向节点的子节点列表的结尾添加子节点
  • removeChild()：删除（并返回）当前节点的指定子节点
  • replaceChild()：用新节点替换一个子节点。
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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动跳转</title>
    <style>
        div {
            border: 1px solid black;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id = "div1">
        <div id = "div2">我是div2</div>
        我是div1
    </div>
    <a href = "javascript:void(0);" id = "del"> 删除子节点 </a>
    <!--为了保证超链接被点击但不发生页面的跳转，href需如上写法 -->
<script>
    var element_a = document.getElementById("del");
    element_a.onclick = function () {
        var mydiv1 = document.getElementById("div1");
        var mydiv2 = document.getElementById("div2");
        mydiv1.removeChild(mydiv2);
    }
</script>
</body>
</html>

3.2 HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM 模型被构造为对象的树：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素

    • 通过 innerHTML 来修改标签体的值

  • JavaScript 能够改变页面中的所有 HTML 属性

  • JavaScript 能够改变页面中的所有 CSS 样式

    方式一：使用 元素的 style 属性来设置

    方式二：提前定义好类选择器的样式，通过元素的 className 属性来设置其 class 属性值。

    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 lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .cls1{
                border: 3px solid dodgerblue;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div id = "div1">
            控制样式方式一
        </div>
        <div id = "div2">
            控制样式方式二
        </div>
    <script>
        var div1 = document.getElementById("div1");
        div1.onclick = function(){
            div1.style.border = "3px solid black";
            div1.style.width = "200px";
            div1.style.fontSize = "20px";
            // font-size 对应于 fontSize
        }

        var div2 = document.getElementById("div2");
        div2.onclick = function(){
            div2.className = "cls1";
            //原本的div2不属于其他的类，现在通过特定的类，即可修改相应的样式
        }
    </script>
    </body>
    </html>

  • JavaScript 能够对页面中的所有事件做出反应

案例：动态表格

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 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="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">
</div>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Luffy</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>
<script>
    //1. 获取按钮
    document.getElementById("btn_add").onclick = function () {
        //2. 获取输入文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;
        //3. 获取table
        var table = document.getElementsByTagName("table")[0];
        table.innerHTML += "<tr>\n" +
            "        <td>" + id + "</td>\n" +
            "        <td>" + name + "</td>\n" +
            "        <td>" + gender + "</td>\n" +
            "        <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\">删除</a></td>\n" +
            "    </tr>";
    }

    function delTr(obj) {
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>
</body>
</html>