跳转至

JavaScript与JQuery

约 1432 个字 697 行代码 预计阅读时间 13 分钟

JQuery介绍

官网入口

jQuery是一个快速的、小型的、具有丰富功能的JavaScript库。它的出现使得网页中的DOM、事件、动画、Ajax等操作变得更加简单。“写更少的代码，做更多的事儿”是jQuery一直坚信的开发理念

库就是一组代码，这组代码中包含了一些已经定义好的对象和函数。只需要将库引入到页面中，即可直接使用这些对象和函数。库中的代码通常是为了解决一些我们开发中的一些不便。jQuery中的代码就是为了简化原生JS的操作，同样一个功能使用原生JS你也许要编写五行代码，使用jQuery一行就可以搞定，同时jQuery还可以帮助我们处理掉浏览器的兼容问题

所有的库都是为了解决我们开发时的痛点而存在的。jQuery解决的问题主要有两个：简化DOM操作、解决浏览器兼容问题。然而随着前端的发展、DOM标准的更新、IE的消亡。DOM操作和浏览器兼容性早已不是什么大问题了，再加上React、Vue、Angular这些大型框架的出现，在实际项目中使用jQuery的机会可以说是少之又少

JQuery引入

库就是一组现成的JS代码，要使用库就需要先把这组代码引入到页面中，也就是引入库。实际的操作就是通过script标签引入一个外部的js文件，这一点所有的库都是一样的。

引入jQuery，可以直接下载jQuery脚本文件，然后放入本地服务器，并在网页中通过script标签进行引入。也可以通过公共的cdn来引入。

例如下面的代码：

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 本地引入原始文件 -->
    <script src="./JQuery/jquery-3.7.1.js"></script>
    <!-- 本地引入压缩后的文件 -->
    <script src="./JQuery/jquery-3.7.1.slim.min.js"></script>
</head>
<body>

</body>
</html>

使用公共CDN比较简单，以字节跳动静态资源为例，要引入3.x版本的jQuery，只需要将如下代码粘贴到网页中即可：

HTML
1
2
3
4
<!-- 引入原始文件 -->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js"></script>
<!-- 引入压缩后的文件 -->
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>

JQuery核心函数介绍

引入jQuery后，它会自动在全局作用域添加一个名为jQuery的新函数，新函数还有一个别名$。换句话说，通过jQuery和$都可以访问到这个函数，这个函数我们称为jQuery的核心函数。前面引入jQuery目的就是得到这个函数

可以通过两种方式来使用核心函数，一种是将其作为对象使用，此时它是一个工具类，在其中封装了一些属性和方法。例如下面的方法：

  1. jQuery.contains()
  2. jQuery.isArray()
  3. jQuery.isFunction()
  4. jQuery.isNumeric()

上面的方法在新版的JavaScript中也有类似功能的方法，所以不再赘述其使用

另一种是将其作为函数调用，根据参数的不同可以会发挥不同的作用。在jQuery中，核心函数可以根据下面几种参数发挥不同的作用：

  1. jQuery(函数)：将函数作为核心函数的参数时，这个函数会在文档加载完毕后执行，相当于：document.addEventListener("DOMContentLoaded", 函数)，关于文档加载内容见JavaScript与DOM操作部分
  2. jQuery(选择器)：将选择器作为核心函数的参数时，jQuery自动去网页中查找元素，其作用类似于：document.querySelectorAll("...")，但是通过核心函数获取到的并不是原生DOM对象，而是jQuery封装后的对象，这个对象也被称为jQuery对象，通过jQuery对象就可以调用其中的方法实现网页的相关操作，但是不能调用原生DOM对象的方法。习惯上为jQuery对象命名时，会使用$开头，加以区分
  3. jQuery(DOM对象)：将原生DOM对象作为核心函数的参数时，可以将DOM对象转换为jQuery对象，从而使用jQuery对象的方法
  4. jQuery(HTML代码)：将HTML代码字符串作为核心函数的参数，会根据HTML代码来创建元素（jQuery对象）

例如下面的代码：

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 本地引入原始文件 -->
    <script src="./JQuery/jquery-3.7.1.js"></script>
    <script src="./test.js"></script>
</head>
<body>
    <button type="button" id="btn"></button>
</body>
</html>
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
$(function(){

    // 为按钮绑定点击事件
    $("#btn").click(function(){

        let btn = document.getElementById("btn"); // [object HTMLButtonElement]

        let $btn = $("#btn"); // [object Object]

        let $h1 = $("<h1>我是一个标题</h1>"); // 会根据html代码创建元素

        $("div").append($h1);
    })
});

JQuery对象

通过jQuery核心函数获取到的对象就是jQuery对象，jQuery对象是jQuery中定义的对象，可以将其理解为是DOM对象的升级版，在jQuery对象中为程序员提供了很多简单易用的方法来帮助简化DOM操作

jQuery对象本质上是一个DOM对象的数组（类数组），可以通过索引获取jQuery对象中的DOM对象，当修改jQuery对象时，它会自动修改jQuery对象中的所有元素，这一特点称为jQuery的隐式迭代

通常情况下，jQuery对象方法的返回值依然是一个jQuery对象，所以我们可以在调用一个方法后继续调用其他的jQuery对象的方法，这一特性也称为jQuery对象的链式调用

例如下面的代码：

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 本地引入原始文件 -->
    <script src="./JQuery/jquery-3.7.1.js"></script>
    <script src="./test.js"></script>
</head>
<body>
    <button id="btn01">Click</button>
    <ul>
        <li id="swk">Mark</li>
        <li id="zbj">Peter</li>
        <li>David</li>
        <li>Alice</li>
        <li>John</li>
    </ul>
</body>
</html>
JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
$("#btn01").click(function () {
    let $li = $("li");
    alert($li[0].textContent); // 每一个元素都是原生DOM对象，可以调用原生DOM对象的方法

    $li.text("哈哈哈"); // 修改所有li中的元素内容

    let text = $li.text(); // 读取文本，返回所有标签中的文本将其拼接为一个字符串
    let id = $li.attr("id"); // 读取属性时，返回第一个标签的属性

    var result = $li.text("新的文本内容"); // 返回jQuery对象
    alert(result === $li); // true

    $li.text("新的文本内容").css("color", "red"); // 链式调用
});

JQuery对象方法

前面已经简单了解了jQuery对象，其中有很多的方法，但是因为方法太多，本文档不会全部列举，但是jQuery对象的方法使用方式都基本类似，所以本文档会主要介绍方法的使用方式，其他方法见官方文档

下面以addClass()方法为例，在jQuery中，addClass()表示为元素添加一个或多个class：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }

        .box2 {
            border: 10px red solid;
        }

        .box3 {
            background-color: orange;
        }
    </style>
</head>
<body>

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

<hr />

<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
</body>
<!-- 本地引入原始文件 -->
<script src="./JQuery/jquery-3.7.1.js"></script>
<script src="./test.js"></script>
</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
// 为按钮绑定响应函数
$("#btn").click(function () {
    // 为box1添加class
    $(".box1").addClass(["box2", "box3"]);

    // addClass传递回调函数时，其回调函数参数有两个
    // 第一个参数表示jQuery对象下标
    // 第二个参数表示类名
    $(".box1").addClass(function (index, className) {
        // 在回调函数中，this表示的是当前的元素
        if (index % 2 === 0) {
            // 添加box2
            $(this).addClass("box2");
        } else {
            // 添加box3
            $(this).addClass("box3");
        }
    });

    $(".box1").addClass(function(index){

        // 回调函数的返回值会成为当前元素的class
        // return ["box2", "box3"];

        if(index % 2 === 0){
            return "box2";
        }else{
            return "box3";
        }

    })
});

后面的内容思路与DOM操作基本一致，所以将以代码形式演示：

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 lang="zh">
    <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>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <script>
            $(function(){

                $("#list li:nth-child(1)").click(function(){
                    alert("孙悟空");
                })

                /* 
                    clone() 用来复制jQuery对象
                */
                var $swk = $("#list li:nth-child(1)").clone(true);
                var $list2 = $("#list2");

                $("#btn").click(function(){
                    $list2.append($swk);
                })
            })

        </script>
    </head>
    <body>

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

        <hr>

        <ul id="list">
            <li>孙悟空</li>
            <li>猪八戒</li>
        </ul>

        <ul id="list2">
            <li>沙和尚</li>
            <li>唐僧</li>
        </ul>
    </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
<!DOCTYPE html>
<html lang="zh">
    <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>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <script>
            $(function () {
                /* 
                    unwrap() 删除外层父元素
                    wrap() 为当前元素添加一个容器
                    wrapAll() 为当前的所有元素统一添加容器
                    wrapInner() 为当前元素添加一个内部容器
                */
                $("#btn").click(function () {
                    // $("#list li").unwrap()
                    // $("#list li").wrap("<div/>")
                    // $("#list li").wrapAll("<div/>")
                    $("#list li").wrapInner("<div/>")

                })
            })
        </script>
    </head>
    <body>
        <button id="btn">点我</button>

        <hr />

        <ul id="list">
            <li>孙悟空</li>
            <li>猪八戒</li>
        </ul>

        <ul id="list2">
            <li>沙和尚</li>
            <li>唐僧</li>
        </ul>
    </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
<!DOCTYPE html>
<html lang="zh">
    <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>
        <style>
            #box1 {
                width: 200px;
                height: 200px;
                background-color: #bfa;
            }

            #box2 {
                width: 100px;
                height: 100px;
                background-color: orange;
            }

            #box3 {
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
        </style>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <script>
            $(function () {
                /* 
                    append()
                        - 向父元素后边添加一个子元素
                    appendTo()
                        - 将子元素添加到父元素后边
                    prepend()
                    prependTo()
                        - 向父元素的前边添加子元素
                    text()
                        - 获取/设置元素的文本内容
                    html()
                        - 获取/设置元素的html代码

                */
                $("#btn").click(function () {

                    // $("#box1").append("<div id='box2'/>")

                    // $("<div id='box2'/>").appendTo("#box1")

                    // $("#box1").prepend("<div id='box2'/>")
                    $("<div id='box2'/>").prependTo("#box1")

                })
            })
        </script>
    </head>
    <body>
        <button id="btn">点我</button>
        <hr />

        <div id="box1">
            <div id="box3"></div>
        </div>
    </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
<!DOCTYPE html>
<html lang="zh">
    <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>
        <style>
            #box1 {
                width: 200px;
                height: 200px;
                background-color: #bfa;
            }

            #box2 {
                width: 100px;
                height: 100px;
                background-color: orange;
            }

            #box3 {
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
        </style>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <script>
            $(function () {
                /* 
                    empty() 删除所有的子元素
                    remove() 移除元素（移除事件）
                    detach() 移除元素
                */

                var $li = $("li:nth-child(1)")

                $li.click(function () {
                    alert("哈哈哈")
                })

                $("#btn").click(function () {
                    // $("ul").empty()

                    // $("li:nth-child(1)").remove()
                    $("li:nth-child(1)").detach()
                })

                $("#btn2").click(function () {
                    $("ul").append($li)
                })

                $("#btn3").click(function () {
                    /* 
                        attr() 读取布尔值返回实际值
                        prop() 读取布尔值返回 true/false
                            - 用来读取或设置元素的属性
                            - 读取布尔值属性时两者不会返回不同的值
                    */

                    var type = $("input[type=text]").attr("type")
                    var name = $("input[type=text]").prop("name")

                    var checked = $("input[type=radio]").prop("checked")

                    // alert(checked)

                    // $("input[type=text]").prop("value","哈哈")
                    // $("input[type=radio]").prop("checked", true)

                    $("input[type=text]").val("xxx")

                })
            })
        </script>
    </head>
    <body>
        <button id="btn">点我</button>
        <button id="btn2">点我2</button>
        <hr />

        <ul>
            <li>孙悟空</li>
            <li>猪八戒</li>
            <li>沙和尚</li>
            <li>唐僧</li>
        </ul>

        <input type="radio" name="gender" value="male" /> 男
        <input type="radio" name="gender" value="female"  /> 女

        <hr />

        <input type="text" name="username" />

        <hr />

        <button id="btn3">点我3</button>
    </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
<!DOCTYPE html>
<html lang="zh">
    <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>
        <style>
            #box1 {
                width: 200px;
                height: 200px;
                padding: 100px;
                border: 10px red solid;
                background-color: #bfa;
            }

            #box2 {
                width: 100px;
                height: 100px;
                background-color: orange;
            }

            #box3 {
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
        </style>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <script>
            $(function () {
                $("#btn").click(function () {
                    /* 
                        css 可以用来读取或设置元素的样式
                    */

                    var $width = $("#box1").css("width")

                    // alert($("#box1").css("background-color"))
                    // alert($("#box1").css("left"))

                    // $("#box1").css("width", 300)

                    // $("#box1").css({width:300, height:500, backgroundColor:"yellow"})

                    // alert($("#box1").innerHeight())

                    // $("#box1").innerHeight(500)

                    // alert($("#box1").offset().top + '--' + $("#box1").offset().left)

                    $("#box1").offset({ top: 500, left: 300 })
                })

                $("#btn2").click(function () {})

                $("#btn3").click(function () {})
            })
        </script>
    </head>
    <body>
        <button id="btn">点我</button>
        <button id="btn2">点我2</button>
        <hr />

        <div id="box1"></div>

        <hr />

        <hr />

        <button id="btn3">点我3</button>
    </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
<!DOCTYPE html>
<html lang="zh">
    <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>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <style>
            .box1 {
                float: left;
                width: 100px;
                height: 100px;
                border: 1px red solid;
                margin: 10px;
            }
        </style>

        <script>
            $(function () {
                $("#btn01").click(function () {
                    //     $(".box1").css("background-color", "#bfa")

                    // eq()用来获取jQuery对象中指定索引的元素
                    // first() 获取第一个元素
                    // last() 获取最后一个元素
                    // even() 获取索引为偶数的元素
                    // odd() 获取索引为奇数的元素
                    // slice() 切片
                    // $(".box1").eq(-1).css("background-color", "#bfa")
                    // $(".box1").even().css("background-color", "#bfa")

                    // $(".box1").slice(1, 3).css("background-color", "#bfa")

                    $(".box1").filter(".a").css("background-color", "#bfa")

                    // $(".box1")[0]
                    // $(".box1").get(0)
                })
            })
        </script>
    </head>
    <body>
        <button id="btn01">点我</button>

        <hr />

        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box1 a"></div>
        <div class="box1 a"></div>
        <div class="box1 a"></div>
        <div class="box1"></div>
        <div class="box1 a"></div>
        <div class="box1"></div>
        <div class="box1"></div>
    </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
<!DOCTYPE html>
<html lang="zh">
    <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>
        <script src="./scripts/jquery-3.6.1.js"></script>
        <style>
            .box1 {
                float: left;
                width: 100px;
                height: 100px;
                border: 1px red solid;
                margin: 10px;
            }

            .box2{
                float: left;
                width: 200px;
                height: 200px;
                border: 1px orange solid;
            }
        </style>

        <script>
            $(function () {
                $("#btn01").click(function () {
                    // end() 将jQuery对象恢复到筛选前的状态
                    // add() 向jQuery对象中添加元素
                    // contents() 获取当前jQuery对象中所有元素的内容

                    // $(".box1")
                    //     .filter(".a")
                    //     .css("background-color", "#bfa")
                    //     .end()
                    //     .css("border-color", "blue")
                    // $(".box1")
                    //     .css("border-color", "blue")
                    //     .filter(".a")
                    //     .css("background-color", "#bfa")


                    // $(".box1").add(".box2").css("background-color", "#bfa")

                    $(".box1").contents().addBack().css("background-color", "#bfa")
                })
            })
        </script>
    </head>
    <body>
        <button id="btn01">点我</button>

        <hr />

        <div class="box1"><span>我是span</span></div>
        <div class="box1"><span>我是span</span></div>
        <div class="box1"><span>我是span</span></div>
        <div class="box1 a"><span>我是span</span></div>
        <div class="box1 a"><span>我是span</span></div>
        <div class="box1 a"></div>
        <div class="box1"></div>
        <div class="box1 a"></div>
        <div class="box1"></div>
        <div class="box1"></div>

        <div class="box2"></div>
    </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
<!DOCTYPE html>
<html lang="zh">
<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>
    <script src="./scripts/jquery-3.6.1.js"></script>
    <style>
        .box1{
            float: left;
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 2px red solid;
        }

    </style>
</head>
<body>
<body>
    <button id="btn01">点我</button>
    <button id="btn02">点我2</button>
    <button id="btn03">点我3</button>

    <a href="#">超链接</a>

    <hr>

    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box1"></div>

    <script>
        $(function(){

            // 可以通过指定方法来为jQuery对象绑定事件
            $("a").click(function(event){
                // 在jQuery的事件响应函数中，同样有事件对象，但是这个对象是经过jQuery包装过的新的对象
                // 包装该对象主要是为了解决兼容性的问题

                event.stopPropagation()
                event.preventDefault()

                alert(123)

                // 在jQuery的事件回调函数中，可以通过return false来取消默认行为和冒泡
                // return false
            })

            // $(document.body).click(function(){
            //     alert("body")
            // })


            // 也可以通过on()方法来绑定事件
            $("#btn01").on("click.a", function(){
                alert("通过on绑定的事件！")
            })

            $("#btn01").on("click.b", function(){
                alert("通过on绑定的事件！2")
            })

            $("#btn01").on("click.c", function(){
                alert("通过on绑定的事件！3")
            })

            $("#btn02").on("click", function(){
                // off()可以用来取消事件的绑定
                $("#btn01").off("click.a")
            })

            $("#btn03").on("click", function(){
                $(document.body).append("<div class='box1'/>")
            })

            // $(".box1").on("click", function(){
            //     alert("哈哈")
            // })

            // $(document).on("click",".box1", function(event){
            //     alert("哈哈")
            // })

            // one()用来绑定一个一次性的事件
            $(".box1").one("click", function(){
                alert('嘻嘻')
            })

        })

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