Python24/13jQuery_Advanced/day01/basic01.html at master · ItJava/Python24 · GitHub

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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="../../12jQuery_Basic/day01/js/jquery-1.12.4.min.js"></script>
    <script>

        // 事件委托，如果直接li的设置的话，需要找8次，事件委托给ul的话，效率会高一点
        // 委托的话，点击哪一个li才会绑定这个事件，不点击则不会绑定所有的li
        // delegate(真实的事件源, 事件类型, 匿名函数)
        $(function () {
            function func1() {
                $("#ul01").delegate('li', 'click', function () {
                    console.log("点击了li标签...");
                })

                // on和delegate一样可以绑定事件和给未来元素添加功能，但是并没有效率的提升
                $("li").on('click', function () {
                    console.log("点击了li标签...");
                })
            }

            // 节点操作,创建一个节点使用$(str)才能append上，不是单纯的字符串, prepend追加到开头, appedend追加到结尾
            // 简单的html(str)追加的是string，$(str)创建的是一个对象，两者效果都相同
            // 追加结点步骤：1- 声明变量保存节点数据(拼接字符串) 2- 使用appendTo(str)，追加到父级或者子级
            // 子级添加元素append等，同级使用的是insert
            function func2() {

                var str = $("<li>222</li>")

                // 子级追加
                str.appendTo($("#ul02"))
                $("#ul02").append(str)

                str.prependTo($("#ul02"))
                $("#ul02").prepend(str)

                // 同级追加
                var oDiv = $("<div>This is div</div>")

                oDiv.insertAfter($("#ul02"))
                $("#ul02").after(oDiv)

                // 删除ul这个标签
                $("#ul02").remove()

                // 删除li标签里面的内容，但是标签还在
                $("li").empty()


            }

            func2()
        })

    </script>

</head>
<body>

    <!-- 事件委托 -->
    <ul id="ul01">
        <li>文字1</li>
        <li>文字2</li>
        <li>文字3</li>
        <li>文字4</li>
        <li>文字5</li>
        <li>文字6</li>
        <li>文字7</li>
        <li>文字8</li>
    </ul>

    <!-- 节点操作 -->

    <ul id="ul02">

        <li>111</li>

    </ul>

</body>
</html>