从0到1：jQuery快速上手

发表于 | 分类于 ， |

微信读书
操作笔记 04
2023-06-13 07:12:25（开始）
2023-06-15 18:50:42（结束）

简介 引入

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    
    jQuery本身就是用JavaScript来写的，它只是把JavaScript中最常用的功能封装起来，以方便开发者快速开发。
    遥想当年，jQuery的创始人John Resig就是受够了JavaScript的各种缺点，所以才开发了jQuery。jQuery具有很多优点，主要包括以下几点。
        ·代码简洁。
        ·完美兼容。
        ·轻量级。
        ·强大的选择器。
        ·完善的Ajax。
        ·丰富的插件。
        
        
    “简洁与高效”是jQuery最大的特点。
    有一句话说得好：“每多学一点知识，就少写一行代码。”实际上jQuery的理念亦是如此：“Write less,do more.”
    
    jQuery官方文档地址如下。
        ·jQuery API文档：http://api.jquery.com。
        ·jQuery UI文档：http://jqueryui.com/demos。
        ·jQuery Mobile文档：http://jquerymobile.com/demos。
        ·jQuery插件：https://plugins.jquery.com。
    
    开发版是没有压缩的，以“jquery.js”命名，一般供开发者学习jQuery内部的实现原理。
    压缩版是经过高度压缩的，以“jquery.min.js”命名，一般供实际开发者使用。
    
    
    
    引入：
        正确
            <script src="jquery-1.12.4.min.js"></script>
            <script>  
                //你的jQuery代码  
            </script>
            
        错误
        <script>
            //你的jQuery代码 
        </script> 
        <script src="jquery-1.12.4.min.js"></script> 
        
        
    
    BootCDN => 稳定、快速、免费的前端开源项目 CDN 加速服务
    https://www.bootcdn.cn/jquery/
            https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js
    -->
</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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        2.2.1 元素选择器       $("元素名")

        2.2.2 id选择器         $("#id名") 
                
        2.2.3 class选择器      $(".类名") 
        
        2.2.4 群组选择器       $("选择器1, 选择器2, ... , 选择器n") 
        
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // 和window.onload=function(){……}是相似的
        $(function () {
            // $("div").css("color","red");

            // $("#lvye").css("color","red");

            // $(".lv").css("color","red");

            $("h3,div,p,span").css("color","red");
            // 二者等同
            // $("h3").css("color","red");
            // $("div").css("color","red");
            // $("p").css("color","red");
            // $("span").css("color","red");
        })
    </script>
</head>
<body>

<!--<div>绿叶学习网</div>-->
<!--<p>绿叶学习网</p>-->
<!--<span>绿叶学习网</span>-->
<!--<div>绿叶学习网</div>-->

<!--<div>绿叶学习网</div>-->
<!--<div id="lvye">绿叶学习网</div>-->
<!--<div>绿叶学习网</div>-->

<!--<div>绿叶学习网</div>-->
<!--<p class="lv">绿叶学习网</p>-->
<!--<span class="lv">绿叶学习网</span>-->
<!--<div>绿叶学习网</div>-->

<h3>绿叶学习网</h3>
<div>绿叶学习网</div>
<p>绿叶学习网</p>
<span>绿叶学习网</span>

</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        ·$("M N")可以使用$(M).find(N)代替。
        ·$("M>N")可以使用$(M).children(N)代替。
        ·$("M~N")可以使用$(M).nextAll(N)代替。
        ·$("M+N")可以使用$(M).next(N)代替。
        
        （
            【日期标记】2023-06-15 11:53:09 以上同步完成
            学了第十章，再来看这第二章，哈哈
        ）
        

        2.3.1 后代选择器       $("M N")
        M下的所有N，包含儿子/孙子/...

        2.3.2 子代选择器       $("M>N") 
        M下的所有N，只包含儿子
                
        2.3.3 兄弟选择器       $("M~N") 
        M后的所有N，不包含前面的
        
        2.3.4 相邻选择器       $("M+N")
        M后的相邻的一个N，不包含前面的
        
        其实我们主要讲解的是两组选择器。
            ·后代选择器和子代选择器。
            ·兄弟选择器和相邻选择器。
        对比记忆，效果倍棒！
        
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // 和window.onload=function(){……}是相似的
        $(function () {
            // $("#first p").css("color", "red");

            // $("#first>p").css("color","red");

            // $("#second~p").css("color", "red");

            $("#second+p").css("color", "red");

            $("li+li").css("border-top", "2px solid red");
            //  每个li之间一个横线
        })
    </script>
</head>
<body>

<div id="first">
    <p>lvye的子元素</p>
    <p>lvye的子元素</p>
    <div id="second">
        <p>lvye子元素的子元素</p>
        <p>lvye子元素的子元素</p>
    </div>
    <p>lvye的子元素</p>
    <p>lvye的子元素</p>
</div>

<hr>

<ul style="width: 80px;height: 120px;border: 2px dashed gray;">
    <li>第1个元素</li>
    <li>第2个元素</li>
    <li>第3个元素</li>
    <li>第4个元素</li>
    <li>第5个元素</li>
</ul>

</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        jQuery属性选择器（E指的是元素，attr指的是属性，value指的是属性值。）
            E[attr]	            元素E，包含属性
            E[attr  = 'value']	元素E，属性等于 value
            E[attr != 'value']	元素E，属性不等于 value
            E[attr ^= 'value']	元素E，属性 value开头
            E[attr $= 'value']	元素E，属性 value结尾
            E[attr *= 'value']	元素E，属性包含 value
            E[attr |= 'value']	元素E，属性等于 value 或 value开头
            E[attr ~= 'value']	元素E，属性等于 value 或 包含value
            
            选取含有class属性的div元素：$("div[class]")
            选取type取值为checkbox的input元素：$("input[type = 'checkbox']")
            选取type取值不是checkbox的input元素：$("input[type != 'checkbox']")
            选取class属性包含nav的div元素（class属性可以包含多个值）：$("div[class *= 'nav']")
            选取class属性以nav开头的div元素，例如：$("div[class ^= 'nav']")      <div class="nav-header"></div>
            选取class属性以nav结尾的div元素，例如：$("div[class $= 'nav']")      <div class="first-nav"></div>
            选取带有id属性并且class属性是以nav开头的div元素，例如：$("div[id][class ^='nav']")      <div id="container" class="nav-header"></div>
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // 和window.onload=function(){……}是相似的
        $(function () {
            $("li[class]").css("color", "red");
        })
    </script>
</head>
<body>

<ul>
    <li>HTML</li>
    <li class="select">CSS</li>
    <li>JavaScript</li>
    <li class="select">jQuery</li>
    <li>Vue.js</li>
</ul>

</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        请写出下面对应的jQuery选择器，每一项对应一个。
        （1）选取含有href属性的a元素。
                $("a[href]")
        （2）选取type取值为radio的input元素。
                $("input[type = 'radio']")
        （3）选取type取值不是checkbox的input元素。
                $("input[type != 'checkbox']")
        （4）选取class属性包含nav的div元素（class属性可以包含多个值）。
                $("div[class *= 'nav']")
        （5）选取class属性以article开头的div元素，例如<div class="article-title"></div>。
                $("div[class ^= 'article']")
        （6）选取class属性以content结尾的div元素，例如<div class="article-content"></div>。
                $("div[class $= 'content']")
        （7）选取带有id属性并且class属性是以article开头的div元素，例如<div id="container"class="article-title"></div>。
                $("div[id][class ^= 'article']")
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // 和window.onload=function(){……}是相似的
        $(function () {
        })
    </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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        位置 伪类选择器 => 指的是根据页面中的位置来选取元素。
            :first	选取某种元素的第一个
            :last	选取某种元素的最后一个
            :odd	选取某种元素中序号为“奇数”的所有元素，序号从0开始
            :even	选取某种元素中序号为“偶数”的所有元素，序号从0开始
            :eq(n)	选取某种元素的第n个，n是一个整数，从0开始
            :lt(n)	选取某种元素中小于n的所有元素，n是一个整数，从0开始
            :gt(n)	选取某种元素中大于n的所有元素，n是一个整数，从0开始
            
            lt表示less than，gt表示greater than
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // 和window.onload=function(){……}是相似的
        $(function () {
            // $("li:first,li:last").css("color", "red");// 第一个，最后一个

            // $("li:odd").css("color", "red");// 奇数，从0开始

            // $("li:eq(3)").css("color", "red");// 第四个，从0开始

            $("li:lt(3)").css("color", "red");// 小于第四个（前三个），从0开始
        })
    </script>
</head>
<body>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>

</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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style-type: none;
        }

        li {
            height: 20px;
        }
    </style>
    <!--
        子元素 伪类选择器 => 指的就是选择某一个元素下的子元素的一种伪类选择器。
            ·:first-child、:last-child、:nth-child(n)、:only-child。
            ·:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type。
            
            E:first-child	选择父元素下的第一个子元素（子元素类型为E，以下类同）
            E:last-child	选择父元素下的最后一个子元素
            E:nth-child(n)	选择父元素下的第n个子元素或奇偶元素，n取值有3种：数字、odd、even，n从1开始
                            特别注意一点，:nth-child(n)中的n是从1开始，而不是从0开始的。
                            这是因为jQuery中的:nth-child(n)完全继承了CSS选择器的规范。
            E:only-child	选择父元素下唯一的子元素，该父元素只有一个子元素
            
            E:first-of-type	    选择父元素下的第一个E类型的子元素
            E:last-of-type	    选择父元素下的最后一个E类型的子元素
            E:nth-of-type(n)	选择父元素下的第n个E类型的子元素或奇偶元素，n取值有3种：数字、odd、even
            E:only-of-type	    选择父元素下唯一的E类型的子元素，该父元素可以有多个子元素
            
            （非常重要的一句话）
            我们记住一句话就好了：在jQuery中，只有:nth-child()、:nth-of-type()这两个选择器的下标是从1开始的，其他所有的选择器和jQuery方法都是从0开始的。
            
            
            case3 总结
            $("div p:first-child")    在div的后代中，p是 p.parentNode的第一个，就高亮。最多高亮一个。
            $("div p:first-of-type")  在div的后代中，p是 p.parentNode的第一个，就高亮。全部都会高亮。
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // 和window.onload=function(){……}是相似的
        $(function () {
            // case1 ----------------------------------
            // $("ul li:first-child").css("background-color", "red");// 第一个
            // $("li:first-child").css("background-color", "red");// 第一个（同上）
            // $("ul li:nth-child(2)").css("background-color", "orange");// 第2个
            // $("ul li:nth-child(3)").css("background-color", "yellow");// 第3个
            // $("ul li:nth-child(4)").css("background-color", "green");// 第4个
            // $("ul li:last-child").css("background-color", "blue");// 最后一个
            // 想要实现上面的效果，很多初学者首先想到的是为每一个li元素添加id或class来实现。但是这样会导致id和class泛滥，不利于后期维护。
            // 而使用“子元素”伪类选择器，可以使HTML结构更加清晰，并且使得结构与样式分离，更利于后期维护和搜索引擎优化（Search Engine Optimization，SEO）。

            // $("ul li:nth-child(odd)").css("background-color", "red");// 奇数 第一个、第三个、...
            // $("ul li:nth-child(even)").css("background-color", "green");// 偶数 第二个、第四个、...


            // case2 ----------------------------------
            // 两者其实有着本质的区别：
            // $(".case2 h1:first-child").css("background-color", "red");// h1 变红
            // $(".case2 p:first-child").css("background-color", "red");// 没反应 => 因为第一个不是 p，是h1
            // $(".case2 span:first-child").css("background-color", "red");// 没反应 => 因为第一个不是 span，是h1

            // $(".case2 h1:first-of-type").css("background-color", "red");// h1 变红
            // $(".case2 p:first-of-type").css("background-color", "red");// p 变红
            // $(".case2 span:first-of-type").css("background-color", "red");// 第一个span 变红

            // case3 ----------------------------------
            // $(".case3 span:first-child").css("background-color", "red");// 111 变红
            // $(".case3 span:first-of-type").css("background-color", "red");// 111 变红
            // $(".case3 p:first-child").css("background-color", "red");// 222 变红
            // $(".case3 p:first-of-type").css("background-color", "red");// 222 333 变红
        })
    </script>
</head>
<body>

<!--<ul>-->
<!--    <li>1</li>-->
<!--    <li>2</li>-->
<!--    <li>3</li>-->
<!--    <li>4</li>-->
<!--    <li>5</li>-->
<!--</ul>-->

<!--<br><br><br>-->
<!--<hr>-->

<div class="case2">
    <h1>1111111</h1>
    <p>22222222</p>
    <span>333333333</span>
    <span>444444444</span>
</div>

<!--<br><br><br>-->
<!--<hr>-->

<!--<div class="case3">-->
<!--    <span>111</span>-->
<!--    <div>-->
<!--        <p>222</p>-->
<!--    </div>-->
<!--    <p>333</p>-->
<!--    <p>444</p>-->
<!--</div>-->

<!--<br><br><br>-->
<!--<hr>-->

</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .select {
            display: none;
        }
    </style>
    <!--
        可见性 伪类选择器 => 所谓的不可见元素，指的是定义了display:none的元素。
            :visible	选取所有可见元素
            :hidden	    选取所有不可见元素
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // 和window.onload=function(){……}是相似的
        $(function () {

            // 这个是jQuery的语法，等价于JavaScript的obj.onclick = function(){}。
            $("#btn").click(function () {
                $("li:hidden").css("display", "block");
            });


        })
    </script>
</head>
<body>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li class="select">jQuery</li>
    <li>Vue.js</li>
</ul>
<input id="btn" type="button" value="显示">

</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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table, tr, td {
            border: 1px solid silver;
        }

        table {
            /*02_css   026_17.2_表格边框合并：border-collapse.html*/
            border-collapse: collapse;
        }

        td {
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
    </style>
    <!--
        内容 伪类选择器 => 指的是根据元素的内部文本或者子元素来选取元素。
            :contains(text)	选取包含指定文本的元素
            :has(selector)	选取包含指定选择器的元素
            :parent	选取元素，含有文本 或含有子元素
            :empty	选取元素，不含文本 并不含子元素，即空元素
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // 和window.onload=function(){……}是相似的
        $(function () {
            // $("p:contains(jQuery)").css("color", "red");

            // $("div:has(span)").css("background-color", "red");

            // $("td:parent").css("background-color", "red");

            $("td:empty").css("background-color", "red");
        })
    </script>
</head>
<body>

<!--<div>jQuery实战开发</div>-->
<!--<p>write less do more</p>-->
<!--<p>从JavaScript到jQuery</p>-->
<!--<div>欢迎来到绿叶学习网</div>-->

<!--<div>-->
<!--    <p>这是一个段落</p>-->
<!--</div>-->
<!--<div>-->
<!--    <p>这是一个段落</p>-->
<!--    <span>这是一个span</span>-->
<!--</div>-->

<table>
    <tr>
        <td>2</td>
        <td>4</td>
        <td>8</td>
    </tr>
    <tr>
        <td>16</td>
        <td>32</td>
        <td>64</td>
    </tr>
    <tr>
        <td>128</td>
        <td>256</td>
        <td></td>
    </tr>
</table>

</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <!--
        表单 伪类选择器 => 指的是专门操作表单元素的一种伪类选择器。
            :input	    选取所有input元素
            :button	    选取所有普通按钮，即<input type="button" />
            :submit	    选取所有提交按钮，即<input type="submit" />
            :reset	    选取所有重置按钮，即<input type="reset" />
            :text	    选取所有单行文本框
            :textarea	选取所有多行文本框
            :password	选取所有密码文本框
            :radio	    选取所有单选框
            :checkbox	选取所有复选框
            :image	    选取所有图片域
            :file	    选取所有文件域
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // 和window.onload=function(){……}是相似的
        $(function () {
            $("input:checkbox").attr("checked", "checked");// 选取所有复选框
        })
    </script>
</head>
<body>

<p>性别：
    <label><input type="radio" name="gender"/>男</label>
    <label><input type="radio" name="gender"/>女</label>
</p>
<p>喜欢的水果：
    <label><input type="checkbox"/>苹果</label>
    <label><input type="checkbox"/>西瓜</label>
    <label><input type="checkbox"/>蜜桃</label>
</p>

</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <!--
        表单属性 伪类选择器 => 指的是根据表单元素的属性来选取的一种伪类选择器。
            :checked	选取所有被选中的表单元素，一般是单选框或复选框
            :selected	选取被选中的表单元素的选项，一般是下拉列表
            :enabled	选取所有可用的表单元素
            :disabled	选取所有不可用的表单元素
            :read-only	选取所有只读的表单元素
            :focus	    选取所有获得焦点的表单元素
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // 和window.onload=function(){……}是相似的
        $(function () {
            var result = $("input:checked").val();// val()方法用于获取表单元素的value属性值
            alert(result);//弹出被选中文本框的值 
        })
    </script>
</head>
<body>

<p>喜欢的水果：
    <label><input type="checkbox" value="苹果"/>苹果</label>
    <label><input type="checkbox" value="西瓜" checked/>西瓜</label>
    <label><input type="checkbox" value="蜜桃"/>蜜桃</label>
</p>

</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <!--
        其他 伪类选择器
            :not(selector)	选取除了某个选择器之外的所有元素
            :animated	    选取所有正在执行动画的元素
            :root	        选取页面根元素，即html元素
            :header	        选取h1~h6的标题元素
            :target	        选取锚点元素
            :lang(language)	选取特定语言的元素
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // 和window.onload=function(){……}是相似的
        $(function () {
            $("li:not(#select)").css("color", "red");// 选取除了id="select"之外的所有li元素。
        })
    </script>
</head>
<body>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li id="select">jQuery</li>
    <li>Vue.js</li>
</ul>

</body>
</html>

DOM 创建元素 append

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <!--
        语法
            $().append("字符串")    把一个新元素插入到父元素内部的子元素的“末尾”
            
            例如：$("#ul1").append("<li>jQuery</li>");
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        // 和window.onload=function(){……}是相似的
        $(function () {
            // 举例1：创建简单元素
            {
                $("#btn1").click(function () {
                    // 方式1、jQuery
                    // 凡是jQuery创建的节点字符串，我们命名的时候都习惯使用“$”开头，以便区别于其他的变量。
                    // var $li = "<li>jQuery</li>";
                    // $("#ul1").append($li);

                    // 方式2、js
                    // var oLi = document.createElement("li");       //创建元素节点
                    // var oTxt = document.createTextNode("jQuery");   //创建文本节点
                    // oLi.appendChild(oTxt);//把文本节点插入元素节点中
                    // document.getElementById("ul1").appendChild(oLi);//把组装好的元素插入已存在的元素中

                    // 方式3、js
                    var oLi = document.createElement("li");
                    // oLi.innerHTML = "jQuery";
                    oLi.innerText = "jQuery";
                    document.getElementById("ul1").appendChild(oLi);
                })
            }

            // 举例2：创建复杂元素
            {
                $("#btn2").click(function () {
                    // 方式1、jQuery
                    // var $li = "<li><a href='http://www.lvyestudy.com'>绿叶学习网</a></li>";
                    // $("#ul2").append($li);

                    // 方式2、js
                    // var oLi = document.createElement("li");       //创建元素节点
                    // var oA = document.createElement("a");       //创建元素节点
                    // oA.href = "http://www.lvyestudy.com";
                    // var oTxt = document.createTextNode("绿叶学习网");   //创建文本节点
                    // oA.appendChild(oTxt);//把文本节点插入元素节点中
                    // oLi.appendChild(oA);
                    // document.getElementById("ul2").appendChild(oLi);//把组装好的元素插入已存在的元素中

                    // 方式3、js
                    var oLi = document.createElement("li");
                    oLi.innerHTML = "<a href='http://www.lvyestudy.com'>绿叶学习网</a>";
                    document.getElementById("ul2").appendChild(oLi);
                })
            }
        })
    </script>
</head>
<body>

<ul id="ul1">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<input id="btn1" type="button" value="添加"/>

<hr>

<ul id="ul2">
    <li><a href="http://www.ptpress.com.cn/">人邮官网</a></li>
    <li><a href="http://www.epubit.com/">异步社区</a></li>
</ul>
<input id="btn2" type="button" value="添加"/>

</body>
</html>

DOM 插入元素 prepend append before after

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p {
            background-color: orange;
        }
    </style>
    <!--
        在JavaScript中，插入节点只有appendChild()和insertBefore()两种方法。
        不过jQuery为我们提供了大量插入节点的方法，极大地方便了我们的操作。
    
        在jQuery中，插入节点的方法有以下4组。
        
        （陶攀峰：推荐）
        => $(selector).xxx(字符串)     例如：$("#case1").prepend("<strong>jQuery教程</strong>");
        （1）prepend()   字符串为selector第一个儿子（儿子）      selector.firstChild = 字符串
        （2）append()    字符串为selector最后一个儿子（儿子）    selector.lastChild = 字符串
        （3）before()    字符串在selector前一个标签（兄弟）      selector.prev = 字符串
        （4）after()     字符串在selector后一个标签（兄弟）      selector.next = 字符串
        
        （陶攀峰：不推荐）
        => $(字符串).xxx(selector)     例如：$("<strong>jQuery教程</strong>").prependTo("#case1");
        （1）prependTo()
        （2）appendTo()
        （3）insertBefore()
        （4）insertAfter()
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
    // 和window.onload=function(){……}是相似的
    $(function () {
        $("#btn").click(function () {
            var $strong = "<strong>jQuery教程</strong>";

            //      <p>绿叶学习网</p>// 插入前
            //      <p><strong>jQuery教程</strong>绿叶学习网</p>// 插入后
            // $("p").prepend($strong);
            // $($strong).prependTo("p");

            //      <p>绿叶学习网</p>// 插入前
            //      <p>绿叶学习网<strong>jQuery教程</strong></p>// 插入后
            // $("p").append($strong);
            // $($strong).appendTo("p");

            //      <p>绿叶学习网</p>// 插入前
            //      <strong>jQuery教程</strong><p>绿叶学习网</p>// 插入后
            // $("p").before($strong);
            // $($strong).insertBefore("p");

            //      <p>绿叶学习网</p>// 插入前
            //      <p>绿叶学习网</p><strong>jQuery教程</strong>// 插入后
            // $("p").after($strong);
            $($strong).insertAfter("p");
        })
    })
</script>
<body>

<p>绿叶学习网</p>
<input id="btn" type="button" value="插入"/>

</body>
</html>

DOM 删除元素 remove detach empty

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <!--
        在jQuery中，想要删除元素，我们有以下3种方法。
            ·remove()。   去除
            ·detach()。   拆卸
            ·empty()。    空的
        
        ·remove()方法用于“彻底”删除元素。所谓的“彻底”，指的是不仅会删除元素，还会把元素绑定的事件删除。
        ·detach()方法用于“半彻底”删除元素。所谓的“半彻底”，指的是只会删除元素，不会把元素绑定的事件删除。
        
        元素被删除后又重新被添加，如果不希望该元素保留原来绑定的事件，应该用remove()方法；
        如果希望该元素保留原来绑定的事件，应该使用detach()方法。
        
        remove()和detach()这两个方法在删除元素时，会将自身元素以及所有后代元素一并删除。
        empty()方法仅仅是删除后代元素，并不会删除自身元素。
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
    // 和window.onload=function(){……}是相似的
    $(function () {
        // 举例1：remove()方法的使用
        // $("#btn").click(function () {
        //     $("li:nth-child(4)").remove();// 删除第四个li标签
        // })

        // 举例2：remove()方法会返回一个值
        // $("#btn").click(function () {
        //      // remove()可以将所选元素删除，并且返回被删除的元素 
        //      var $li = $("li:nth-child(4)").remove();
        //      $($li).appendTo("ul");// ul.tail=li
        // })

        // 举例3：互换元素
        // $("#btn").click(function () {
        //     //将内容为“CSS”这一个li元素删除，并赋值给$li1 
        //     var $li1 = $("li:nth-child(2)").remove();
        //     //将内容为“jQuery”这一个li元素删除，并赋值给$li2 
        //     var $li2 = $("li:nth-child(3)").remove();
        //
        //     $($li1).insertAfter("ul li:nth-child(2)");
        //     $($li2).insertBefore("ul li:nth-child(2)");
        // })

        // 举例4：detach()方法的使用
        // $("li").click(function () {
        //     alert("欢迎来到绿叶学习网！")
        // });
        // $("#btn").click(function () {
        //     // var $li = $("li:nth-child(4)").remove();// 移除后，再添加，事件失效
        //     var $li = $("li:nth-child(4)").detach();// 移除后，再添加，事件仍有效
        //     $($li).appendTo("ul");
        // });

        // 举例5：empty()方法的使用
        $("#btn").click(function () {
            $("ul li:nth-child(4)").empty();
            // <li>jQuery</li>// 清空前
            // <li></li>// 清空后
        })
    })
</script>
<body>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>
<input id="btn" type="button" value="按钮"/>

</body>
</html>

DOM 复制元素 clone

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">
    <title>Title</title>
    <style type="text/css">
    </style>
    <!--
    在jQuery中，我们可以使用clone()方法来复制某一个元素。
        $().clone(bool) 
        
        ·true：表示不仅复制元素，还会复制元素所绑定的事件。
        ·false（默认）：表示仅仅复制元素，但不会复制元素所绑定的事件。
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
    // 和window.onload=function(){……}是相似的
    $(function () {
        $("li").click(function () {
            alert("欢迎来到绿叶学习网！");
        });
        $("#btn").click(function () {
            // var $li = $("ul li:nth-child(4)").clone(true);// 有点击事件
            var $li = $("ul li:nth-child(4)").clone();// 无点击事件
            $($li).appendTo("ul");
        });
    })
</script>
<body>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>
<input id="btn" type="button" value="按钮"/>

</body>
</html>

DOM 替换元素 replaceWith replaceAll

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</title>
    <style type="text/css">
    </style>
    <!--
        在jQuery中，如果想要替换元素，我们有以下两种方法来实现。
        ·replaceWith()。
        ·replaceAll()。
        
        
        $(A).replaceWith(B)    A变成B
        $(A).replaceAll(B)     B变成A
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
    // 和window.onload=function(){……}是相似的
    $(function () {
        $("#btn").click(function () {
            // $("strong").replaceWith('<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>');

            $('<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>').replaceAll("strong");
        });
    })
</script>
<body>

<strong>jQuery教程</strong>
<hr>
<input id="btn" type="button" value="替换"/>

</body>
</html>

DOM 包裹元素 wrap wrapAll wrapInner

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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <!--
        在jQuery中，如果想要将某个元素用其他元素包裹起来，我们有以下3种方法来实现。
            ·wrap()。
            ·wrapAll()。
            ·wrapInner()。
            
            
            $(A).wrap(B)         匹配到三个A，每个单独包，A都变成<B>A</B>
            $(A).wrapAll(B)      匹配到三个A，在一起包，变成 <B>AAA</B>
            $(A).wrapInner(B)    将A元素的“内部所有元素以及文本”用B元素包裹起来。注意，wrapInner()方法不会包裹A元素本身。
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
    // 和window.onload=function(){……}是相似的
    $(function () {
        $("#btn").click(function () {
            // $("p").wrap('<div style="background-color:orange;"></div>');
            /*
                <div><p>绿叶学习网</p><div>
                <div><p>绿叶学习网</p><div> 
                <div><p>绿叶学习网</p><div>
            */

            // $("p").wrapAll('<div style="background-color:orange;"></div>');
            /*
                <div>
                    <p>绿叶学习网</p> 
                    <p>绿叶学习网</p> 
                    <p>绿叶学习网</p> 
                </div> 
             */

            $("p").wrapInner("<strong></strong>");
            /*
                <p><strong>绿叶学习网</strong></p>
                <p><strong>绿叶学习网</strong></p> 
                <p><strong>绿叶学习网</strong></p> 
             */
        });
    })
</script>
<body>

<p>绿叶学习网</p>
<p>绿叶学习网</p>
<p>绿叶学习网</p>
<input id="btn" type="button" value="包它！！！"/>

</body>
</html>

DOM 遍历元素 each

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <!--
        在jQuery中，我们可以使用each()方法轻松实现元素的遍历操作。
            $().each(function(index, element){
                …… 
            }) 
            
            index是一个可选参数，它表示元素的索引号（即下标）。通过形参index以及配合this关键字，我们就可以轻松操作每一个元素。此外注意一点，形参index是从0开始的。
            element是一个可选参数，它表示当前元素，可以使用$(this)来代替。也就是说，$(element)等价于$(this)。
            如果需要退出each循环，可以在回调函数中返回false，也就是return false即可。
    -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
    // 和window.onload=function(){……}是相似的
    $(function () {
        // 举例1：each 遍历元素
        {
            // $("#btn").click(function () {
            //     $("li").each(function (index, element) {
            //         var txt = "第" + (index + 1) + "个li元素";
            //         // $(element).text(txt);
            //         $(this).text(txt);// 二者等同
            //     });
            // });
        }

        // 举例2：为每个li元素添加内容
        {
            // //定义数组 
            // var arr = ["HTML", "CSS", "JavaScript", "jQuery", "Vue.js"];
            // $("#btn").click(function () {
            //     //将数组元素一个个赋值给对应索引号的li元素 
            //     $("li").each(function (index) {
            //         var txt = arr[index];
            //         $(this).text(txt);
            //     });
            // });
        }

        // 举例3：为每个li元素设置不同的背景颜色
        {
            //定义颜色数组 
            var colors = ["red", "orange", "yellow", "green", "blue"];

            //为元素添加背景颜色 
            $("#btn").click(function () {
                $("li").each(function (index) {
                    $(this).css("background-color", colors[index]);
                });
            });
        }
    })
</script>
<body>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<input id="btn" type="button" value="添加内容"/>

</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
    // 和window.onload=function(){……}是相似的
    $(function () {
        var arr = ["red", "orange", "yellow", "green", "blue"];
        $("li").each(function (i) {
            $(this).text(arr[i]);
        })
    })
</script>
<body>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

</body>
</html>

DOM 属性操作 attr prop

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .content {
            color: red;
            font-weight: bold;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        在jQuery中，对于HTML属性的操作共有以下4种。
            ·获取属性。
            ·设置属性。
            ·删除属性。
            ·prop()方法。
            
            获取属性
                $().attr("属性名") 
        
            设置属性
                $().attr("属性", "取值") 
                $().attr({"属性1": "取值1", "属性2":"取值2", …, "属性n":"取值n"}) 
            
            删除属性
                $().removeAttr("属性名") 
            
            jQuery官方建议：具有true和false这两种取值的属性，如checked、selected和disabled等，建议使用prop()方法来操作，而其他的属性都建议使用attr()方法来操作。
        
    -->
</head>
<script>
    // 和window.onload=function(){……}是相似的
    $(function () {
        // case 1 获取属性
        {
            // $("#btn_src").click(function () {
            //     alert($("img").attr("src"));// img/仓鼠.jpg
            // });
            // $("#btn_alt").click(function () {
            //     alert($("img").attr("alt"));// jquery标志
            // });
        }

        // case 2 设置属性
        {
            // var flag = true;
            // $("#btn").click(function () {
            //     if (flag) {
            //         // $("#pic").attr("src", "img/聊天结束.png");
            //         $("#pic").attr({"src": "img/聊天结束.png", "alt": "聊天结束", "title": "聊天结束"});
            //         flag = false;
            //     } else {
            //         // $("#pic").attr("src", "img/仓鼠.jpg");
            //         $("#pic").attr({"src": "img/仓鼠.jpg", "alt": "仓鼠", "title": "仓鼠"});
            //         flag = true;
            //     }
            // });
        }

        // case 3 删除属性
        {
            // $("#btn_add").click(function () {
            //     $("p").attr("class", "content");
            // });
            // $("#btn_remove").click(function () {
            //     $("p").removeAttr("class");
            // });
        }

        // case 4 prop 布尔属性
        {
            $('input[type="radio"]').change(function () {
                // 实际上，对于表单元素的checked、selected、disabled这些属性，我们使用attr()方法是没法获取的，而必须使用prop()方法来获取。
                // 如果某个属性没法使用attr()方法来获取或设置，改换prop()方法就可以实现。
                // var bool = $(this).attr("checked");// 无效果
                var bool = $(this).prop("checked");// 生效
                if (bool) {
                    $("p").text("你选择的是：" + $(this).val());
                }
            })
        }
    })
</script>
<body>

<!--<img src="img/仓鼠.jpg" alt="jquery标志"/><br/>-->
<!--<input id="btn_src" type="button" value="获取src属性值"/>-->
<!--<input id="btn_alt" type="button" value="获取alt属性值"/>-->


<!--<img id="pic" src="img/仓鼠.jpg"/>-->
<!--<input id="btn" type="button" value="修改"/>-->

<!--<p>绿叶学习网</p>-->
<!--<input id="btn_add" type="button" value="添加样式"/>-->
<!--<input id="btn_remove" type="button" value="删除样式"/>-->

<div>
    <label><input type="radio" name="fruit" value="苹果"/>苹果</label>
    <label><input type="radio" name="fruit" value="香蕉"/>香蕉</label>
    <label><input type="radio" name="fruit" value="西瓜"/>西瓜</label>
</div>
<p></p>

</body>
</html>

DOM 样式操作 css

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p {
            font-weight: bold;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        在jQuery中，对于样式操作共有以下3种。
            ·CSS属性操作。
            ·CSS类名操作。
            ·个别样式操作。
        
        获取样式
            $().css("属性名") 
        
        设置样式
            $().css("属性", "取值") 
            $().css({"属性1":"取值1", "属性2":"取值2", ..., "属性n":"取值n"}) 
    -->
</head>
<script>
    // 和window.onload=function(){……}是相似的
    $(function () {
        // case 1 获取样式
        {
            // $("#btn").click(function () {
            //     var result = $("p").css("font-weight");// 700
            //     alert("font-weight取值为：" + result);
            // });
        }

        // case 2 设置样式
        {
            $("#btn").click(function () {
                // 设置第1个、第3个、...
                // $("li:nth-child(odd)").css("color", "red");
                // $("li:nth-child(odd)").css({"color": "red"});// 同上
                $("li:nth-child(odd)").css({"color": "red", "background-color": "silver", "font-weight": "bold"});
            });
        }

    })
</script>
<body>

<!--<p>绿叶学习网</p>-->
<!--<input id="btn" type="button" value="获取"/>-->

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>
<input id="btn" type="button" value="设置"/>

</body>
</html>

DOM 样式操作 addClass

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .select {
            color: red;
            background-color: #F1F1F1;
            font-weight: bold;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        在jQuery中，对于样式操作共有以下3种。
            ·CSS属性操作。
            ·CSS类名操作。
            ·个别样式操作。
        
        添加class
            $().addClass("类名") 
        
        删除class
            $().removeClass("类名") 
        
        切换class
            $().toggleClass("类名")
            
            toggleClass()方法用于检查元素是否有某个class。
            如果class不存在，则为元素添加该class；
            如果class已经存在，则为元素删除该class。
    -->
</head>
<script>
    // 和window.onload=function(){……}是相似的
    $(function () {
        // case 1 添加class
        {
            // $("#btn").click(function () {
            //     $("li:nth-child(odd)").addClass("select");
            // });
        }

        // case 2 删除class
        {
            // $("#btn_add").click(function () {
            //     $("li:nth-child(odd)").addClass("select");
            // });
            // $("#btn_remove").click(function () {
            //     $("li:nth-child(odd)").removeClass("select");
            // });
        }

        // case 3 切换class
        {
            $("#btn").click(function () {
                $("li:nth-child(odd)").toggleClass("select");
            });
        }

    })
</script>
<body>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>
<!--<input id="btn" type="button" value="添加"/>-->

<!--<input id="btn_add" type="button" value="添加"/>-->
<!--<input id="btn_remove" type="button" value="删除"/>-->

<input id="btn" type="button" value="切换"/>

</body>
</html>

DOM 宽高 width height

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box1, #box2 {
            display: inline-block;
            width: 100px;
            height: 60px;
            border: 1px solid gray;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        在jQuery中，如果我们想要“获取”和“设置”元素的宽度和高度，共有3组方法。
            ·width()和height()。
            ·innerWidth()和innerHeight()。
            ·outerWidth()和outerHeight()。

            width()	        width
            innerWidth()	width + padding
            outerWidth()	width + padding + border
            
            height()	    height
            innerHeight()	height + padding
            outerHeight()	height + padding + border
            
        语法
            $().width()     //获取元素宽度
            $().width(n)    //设置元素宽度，n是一个整数，表示n像素
            $().height()     //获取元素高度
            $().height(n)    //设置元素高度，n是一个整数，表示n像素
            
            width(n)方法用于设置宽度时是不需要加单位的
            
            jQuery的很多方法都有这样一个特点：没有参数的方法表示“获取”，带有参数的方法表示“设置”。

    -->
</head>
<script>
    // 和window.onload=function(){……}是相似的
    $(function () {
        $("#btn_get").click(function () {
            var width = $("#box1").width();
            alert(width);
        });
        $("#btn_set").click(function () {
            $("#box2").width(50);
        });
    })
</script>
<body>

<div id="box1"></div>
<div id="box2"></div>
<br/>
获取第1个div的宽度：<input id="btn_get" type="button" value="获取"/><br/>
设置第2个div的宽度：<input id="btn_set" type="button" value="设置">

</body>
</html>

DOM 位置 offset position

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</title>
    <style type="text/css">
        body {
            text-align: center;
        }

        #box1, #box2 {
            display: inline-block;
            height: 100px;
            width: 100px;
        }

        #box1 {
            background-color: Red;
        }

        #box2 {
            background-color: Orange;
        }

        /*------------------------*/

        #father {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        #son {
            position: absolute;
            top: 20px;
            left: 50px;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        在jQuery中，我们可以使用offset()方法来
        => 获取或设置元素相对于“当前文档（也就是浏览器窗口）”的偏移距离。

        语法
            $().offset().top
            $().offset().left
            
            offset()方法返回的是一个坐标对象，该对象有两个属性，这两个属性返回的都是一个不带单位的数字。
            top属性，表示获取元素相对于当前文档“顶部”的距离。
            left属性，表示获取元素相对于当前文档“左部”的距离。 

        --------------------------------------------------------------
        
        在jQuery中，我们可以使用position()方法来
        => 获取或设置当前元素相对于“最近被定位的祖先元素”的偏移位置。d
        
        语法
            $().position().top
            $().position().left
            
            position()方法返回的是一个坐标对象，该对象有两个属性，这两个属性返回的都是一个不带单位的数字。
            top属性，表示获取元素相对于最近被定位的祖先元素“顶部”的距离。
            left属性，表示获取元素相对于最近被定位的祖先元素“左部”的距离。
            
            在实际开发中，获取元素的坐标是很常见的操作。
            大家一定要重点掌握offset()和position()这两个方法。
    -->
</head>
<script>
    // 和window.onload=function(){……}是相似的
    $(function () {
        // case 1 offset
        {
            // var top = $("#box2").offset().top;
            // var left = $("#box2").offset().left;
            // var result = "box2距离顶部：" + top + "px\n" + "box2距离左部：" + left + "px";
            // alert(result);
        }

        // case 2 position
        {
            var top = $("#son").position().top;
            var left = $("#son").position().left;
            var result = "子元素相对父元素顶部的距离是：" + top + "px\n" + "子元素相对父元素左部的距离是：" + left + "px";
            alert(result);
        }
    })
</script>
<body>

<!--<div id="box1"></div>-->
<!--<br/>-->
<!--<div id="box2"></div>-->
<!--<br/>-->

<div id="father">
    <div id="son"></div>
</div>

</body>
</html>

DOM 滚动条距离 scrollTop

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 type="text/css">
        body {
            height: 1800px;
        }
        input{
            position: fixed;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        语法
            $().scrollTop()        //获取滚动距离
            $().scrollTop(n)       //设置滚动距离，n是一个整数，表示n像素 
    -->
</head>
<script>
    // 和window.onload=function(){……}是相似的
    $(function () {
        $(window).scroll(function () {// 滚动事件
            var top = $(this).scrollTop();
            $("input").val("滚动距离   scrollTop=" + top + "px");
        });
    })
</script>
<body>

<input type="text">

</body>
</html>

DOM 内容操作 html text val

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        在jQuery中，对于内容操作共有以下3种方法。
            ·html()。
            ·text()。
            ·val()。
        
        html
            $().html()              //获取html内容
            $().html("html内容")    //设置html内容 
            html()方法和innerHTML方法的效果是一样的，只不过html()是jQuery中的实现方式，而innerHTML是JavaScript中的实现方式。
        
        text
            $().text()             //获取文本内容
            $().text("文本内容")    //设置文本内容 
            text()方法和innerText属性的效果是一样的，只不过text()是jQuery中的实现方式，而innerText是JavaScript中的实现方式。
            
            
        html vs text
            html
                获取 => 标签文本都输出，标签也当做纯文本输出
                设置 => 会把标签应用
            text
                获取 => 忽略标签，只输出文本
                设置 => 把标签当做纯文本
        
        val
            在jQuery中，我们可以使用val()来获取和设置表单元素的值。
                $().val()           //获取值
                $().val("值内容")    //设置值 
        
        
        【日期标记】2023-06-14 07:45:36 以上同步完成
    -->
</head>
<script>
    // 和window.onload=function(){……}是相似的
    $(function () {
        // case 1 html get/set
        {
            $("#btn").click(function () {
                var result = $("#html1").html();
                alert(result);// 绿叶学习网<strong>jQuery教程</strong>

                var str = '<img src="img/仓鼠.jpg" />';
                $("#html2").html(str);
            });
        }

        // case 2 text get/set
        {
            var strHtml = $("#text_p1").html();
            var strText = $("#text_p1").text();

            // html()获取的是元素内部所有的内容，而text()获取的仅仅是文本内容。
            $("#text_1").val(strHtml);// <strong style="color:hotpink">绿叶学习网</strong>
            $("#text_2").val(strText);// 绿叶学习网

            $("#text_p2").text('<strong style="color:hotpink">绿叶学习网</strong>');// 显示 => <strong style="color:hotpink">绿叶学习网</strong>
        }

        // case 3 val get/set
        {
            $("#btn_get").click(function () {
                var str1 = $("#val_1").val();
                alert(str1);
            });
            $("#btn_set").click(function () {
                var str2 = "给你初恋般的感觉";
                $("#val_2").val(str2);
            });
        }
    })
</script>
<body>

<div id="html1">绿叶学习网<strong>jQuery教程</strong></div>
<div id="html2"></div>
<input id="btn" type="button" value="获取"/>

<hr>

<p id="text_p1"><strong style="color:hotpink">绿叶学习网</strong></p>
<p id="text_p2"><strong style="color:hotpink">绿叶学习网</strong></p>
html()是：<input id="text_1" type="text"/><br/>
text()是：<input id="text_2" type="text"/>

<hr>

<input id="val_1" type="text" value="绿叶学习网"/><br/>
<input id="val_2" type="text"/><br/>
获取第1个文本框的值：<input id="btn_get" type="button" value="获取"/><br/>
设置第2个文本框的值：<input id="btn_set" type="button" value="设置">

</body>
</html>

页面事件 ready

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">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        在JavaScript中，onload表示文档加载完成后再执行的一个事件。
            window.onload = function(){
                …… 
            } 
        对于JavaScript的onload事件来说，只有当页面上的所有DOM元素以及所有外部文件（图片、外部CSS、外部JavaScript等）加载完成之后才会执行。
        这里的“所有DOM元素”，指的是HTML部分的代码。
        
        
        在jQuery中，ready也表示文档加载完成后再执行的一个事件。
            $(document).ready(function(){
                …… 
            }) 
        对于jQuery的ready事件来说，只要页面上的所有DOM元素加载完成就可以执行，不需要再等到外部文件（图片、外部CSS、外部JavaScript）加载完成。
        
        jQuery的ready事件仅仅是DOM元素加载完成就可以执行，
        而JavaScript的onload事件在DOM元素加载完成后还需要等所有外部文件也加载完成才可以执行。
        很明显，jQuery的ready事件相对于JavaScript的onload事件来说，极大地提高页面的响应速度，有着更好的用户体验。
        
        ------------------------------------------------------------------------------
        
        ready事件写法
            $(document).ready(function(){ 
                …… 
            })
             
            $(function(){ 
                ……  
            })
        $是jQuery的别名。因此我们可以使用$来代替jQuery，两者是等价的，即$()等价于jQuery()。
        
        
        在JavaScript中，window.onload只能调用一次，如果多次调用，则只会执行最后一个。
        为了解决这个问题，我们大多数时候是使用addEventListener()来实现多次调用的效果，
            window.addEventListener("load", function(){}, false); 
    -->
</head>
<script>

    // 举例1：多次调用window.onload
    {
        // window.onload = function () {// 失效
        //     alert("第1次调用");
        // }
        // window.onload = function () {// 失效
        //     alert("第2次调用");
        // }
        // window.onload = function () {// 有效
        //     alert("第3次调用");
        // }
    }

    // 举例2：多次调用$(document).ready()
    {
        // $(document).ready(function () {// 有效
        //     alert("第1次调用");
        // })
        // $(document).ready(function () {// 有效
        //     alert("第2次调用");
        // })
        // $(document).ready(function () {// 有效
        //     alert("第3次调用");
        // })

        /* --- 简写版 --- */
        $(function () {// 有效
            alert("第1次调用");
        })
        $(function () {// 有效
            alert("第2次调用");
        })
        $(function () {// 有效
            alert("第3次调用");
        })
    }
</script>
<body>

</body>
</html>

鼠标事件 click mouseover mouseout

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</title>
    <style type="text/css">
        div {
            display: inline-block;
            width: 80px;
            height: 24px;
            line-height: 24px;
            font-family: "微软雅黑";
            font-size: 15px;
            text-align: center;
            border-radius: 3px;
            background-color: deepskyblue;
            color: white;
            cursor: pointer;
        }

        div:hover {
            background-color: dodgerblue;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        鼠标事件
            click	    鼠标单击事件
            mouseover	鼠标移入事件
            mouseout	鼠标移出事件
            mousedown	鼠标按下事件
            mouseup	    鼠标松开事件
            mousemove	鼠标移动事件
        
        jQuery事件比JavaScript事件只是少了“on”这个前缀。
        例如鼠标单击事件在JavaScript中是onclick，而在jQuery中是click。
                
        在实际开发中，mousedown、mouseup和mousemove经常用来配合实现拖拽、抛掷等效果。
        不过这些效果非常复杂，感兴趣的小伙伴可以看看本系列图书中的《从0到1：HTML5 Canvas动画开发》来加深理解。
    -->
</head>
<script>
    $(function () {
        // 举例1：为div元素添加单击事件
        {
            $("div").click(function () {
                alert("开玩笑吗？")
            })
        }

        // 举例2：自动触发点击事件
        {
            // $("#btn").click(function () {
            //     alert("欢迎来到绿叶学习网！");
            // }).click();
            // 我们使用click()方法自动触发鼠标点击事件。
            // 在实际开发中，自动触发事件这个小技巧非常有用，像我们常见的图片轮播效果中就用到了。
        }

        // 举例3：移入和移出
        {
            // 这里的$(this)指的其实就是触发当前事件的元素，也就是div元素。
            // 在这个例子中，$(this)等价于$("div")。
            // $("#div3").mouseover(function () {
            //     $(this).css("color", "red");
            // })
            // $("#div3").mouseout(function () {
            //     $(this).css("color", "black");
            // })
        }

        // 举例4：链式调用
        {
            $("#div3").mouseover(function () {
                $(this).css("color", "red");
            }).mouseout(function () {
                $(this).css("color", "black");
            })
        }

        // 举例5：鼠标按下和松开
        {
            $("#btn5").mousedown(function () {
                $("h1").css("color", "red");
            })
            $("#btn5").mouseup(function () {
                $("h1").css("color", "black");
            })
        }
    })
</script>
<body>

<div>调试代码</div>

<input id="btn" type="button" value="按钮">

<div id="div3">绿叶学习网</div>

<hr/>
<h1>绿叶学习网</h1>
<input id="btn5" type="button" value="按钮"/>

</body>
</html>

键盘事件 keyup keydown

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">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        在jQuery中，常用的键盘事件共有两种。
            ·键盘按下：keydown。
            ·键盘松开：keyup。
    -->
</head>
<script>
    $(function () {
        // 举例1：keyup 统计输入字符的长度
        {
            $("#txt").keyup(function () {
                var str = $(this).val();
                $("#num").text(str.length);
            })
        }

        // 举例2：keydown 验证输入是否正确
        {
            //定义一个变量，保存正则表达式 
            var myregex = /^[0-9]*$/;
            $("#txt2").keydown(function () {
                var value = $(this).val();
                //判断输入是否为数字 
                if (myregex.test(value)) {
                    $("#div2").text("输入正确");
                } else {
                    $("#div2").text("必须输入数字");
                }
            })
        }

    })
</script>
<body>

<input id="txt" type="text"/>
字符串长度为：<span id="num">0</span>

<hr>

<input id="txt2" type="text"/>
<div id="div2" style="color:red;"></div>

</body>
</html>

表单事件 focus blur select change

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #search {
            color: #BBBBBB;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        在jQuery中，常用的表单事件有3种。
            ·focus和blur。
            ·select。
            ·change。
        实际上，除了上面这几个，还有一个submit事件。不过，submit事件一般都是结合后端技术来使用
        
        6.5.1 focus 和 blur
            具有“获取焦点”和“失去焦点”特点的元素只有两种。
                ·表单元素（单选按钮、复选框、单行文本框、多行文本框、下拉列表）。
                ·超链接。
            focus()不仅可以作为一个事件，还可以作为一个方法。
        
        6.5.2 select
            在jQuery中，当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发select事件。
            与focus()一样，select()不仅可以作为一个事件，还可以作为一个方法。
        
        6.5.3 change
            在jQuery中，change事件常用于“具有多个选项的表单元素”中change事件在以下3种情况下被触发。
                ·单选框选择某一项时触发。
                ·复选框选择某一项时触发。
                ·下拉菜单选择某一项时触发。
                
            
    -->
</head>
<script>
    $(function () {
        // 举例1：focus blur 搜索框
        {
            //获取文本框默认值 
            var txt = $("#search").val();
            //获取焦点 
            $("#search").focus(function () {
                if ($(this).val() == txt) {
                    $(this).val("");
                }
            })
            //失去焦点 
            $("#search").blur(function () {
                if ($(this).val() == "") {
                    $(this).val(txt);
                }
            })

            // 像上面这种搜索框的文字提示效果，其实我们也可以使用HTML5表单元素新增的placeholder属性来实现，代码如下。
            // <input id="search" type="text" placeholder="百度一下，你就知道" /> 
        }

        // 举例2：自动获取焦点
        {
            $("#txt").focus();
            // focus()不仅可以作为一个事件，还可以作为一个方法。
        }

        // 举例3：select
        {
            $("#txt1").select(function () {
                alert("你选中了单行文本框中的内容")
            })
            $("#txt2").select(function () {
                alert("你选中了多行文本框中的内容")
            })
        }

        // 举例4：点击获取全选文本
        {
            $("#search4").click(function () {
                $(this).select();
            })
        }

        // 举例5：单选框
        {
            $('input[type="radio"]').change(function () {
                var bool = $(this).prop("checked");
                if (bool) {
                    $("p").text("你选择的是：" + $(this).val());
                }
            })
        }

        // 举例6：复选框的全选与反选
        {
            $("#selectAll").change(function () {
                // 哪个元素在“搞事（触发事件）”，$(this)就是哪个。
                var bool = $(this).prop("checked");
                if (bool) {
                    $(".fruit").prop("checked", "checked");
                } else {
                    $(".fruit").removeProp("checked");
                }
            })
        }

        // 举例7：下拉列表
        {
            $("select").change(function () {
                var link = $(":selected").val();
                window.open(link);
            })
        }
    })
</script>
<body>

<input id="search" type="text" value="百度一下，你就知道"/>
<input type="button" value="搜索"/>

<hr>

<input id="txt" type="text"/>

<hr>

<input id="txt1" type="text" value="绿叶学习网，给你初恋般的感觉"/><br/>
<textarea id="txt2" cols="20" rows="5">绿叶学习网，给你初恋般的感觉</textarea>

<hr>

<input id="search4" type="text" value="百度一下，你就知道"/>

<hr>

<div>
    <label><input type="radio" name="fruit" value="苹果"/>苹果</label>
    <label><input type="radio" name="fruit" value="香蕉"/>香蕉</label>
    <label><input type="radio" name="fruit" value="西瓜"/>西瓜</label>
</div>
<p></p>

<hr>

<div>
    <p><label><input id="selectAll" type="checkbox"/>全选/反选：</label></p>
    <label><input type="checkbox" class="fruit" value="苹果"/>苹果</label>
    <label><input type="checkbox" class="fruit" value="香蕉"/>香蕉</label>
    <label><input type="checkbox" class="fruit" value="西瓜"/>西瓜</label>
</div>

<hr>

<select>
    <option value="http://www.lvyestudy.com">绿叶学习网</option>
    <option value="https://www.ptpress.com.cn">人邮官网</option>
    <option value="https://www.epubit.com">异步社区</option>
</select>

</body>
</html>

编辑事件 contextmenu

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div2 {
            width: 150px;
            height: 100px;
            background-color: lightskyblue;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<script>
    $(function () {
        // 举例1：禁用鼠标右键
        {
            $("body").contextmenu(function () {
                return false;
            })
            // 虽然鼠标右键功能被禁止了，但是我们依旧可以用快捷键，
            // 如使用“ctrl”+“c”快捷键来复制内容、使用“ctrl”+“s”快捷键来保存网页等，并不能真正地防止复制。
            // contextmenu事件在大多数情况下都是用来保护版权的。
        }

        // 举例2：点击鼠标右键切换背景颜色
        {
            $("div").contextmenu(function () {
                $(this).css("background-color", "hotpink");
            })
        }
    })
</script>
<body>

<div>不要用战术上的勤奋，来掩盖战略上的懒惰。</div>

<hr>

<div id="div2"></div>

</body>
</html>

滚动事件 scroll

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body {
            height: 1800px;
        }

        #box1, #box2 {
            display: inline-block;
            width: 100px;
            height: 100px;
        }

        #box1 {
            background-color: Red;
        }

        #box2 {
            background-color: Orange;
            position: fixed;
        }

        div {
            position: fixed;
            right: 50px;
            bottom: 50px;
            display: none; /*设置默认情况下元素为隐藏状态*/
            width: 40px;
            height: 40px;
            color: white;
            background-color: #45B823;
            font-family: 微软雅黑;
            font-size: 15px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        当滚动条距离大于box2距离顶部的距离时，设置固定定位；
        当滚动条距离小于box2距离顶部的距离时，设置相对定位。这个技巧非常好用，常用于固定某个栏目。
    -->
</head>
<script>
    $(function () {
        // 举例1：固定栏目
        {
            // //获取box2距离顶部的距离 
            // var top = $("#box2").offset().top;
            // //根据滚动距离判断定位 
            // $(window).scroll(function () {
            //     //当滚动条距离大于box2距离顶部的距离时，设置固定定位 
            //     if ($(this).scrollTop() > top) {
            //         $("#box2").css({"position": "fixed", "top": "0"});
            //     }
            //     //当滚动条距离小于box2距离顶部的距离时，设置相对定位 
            //     else {
            //         $("#box2").css({"position": "relative"});
            //     }
            // });
        }

        // 举例2：回顶部特效
        {
            //根据滚动距离判断按钮是显示或隐藏
            $(window).scroll(function () {
                if ($(this).scrollTop() > 300) {
                    $("div").css("display", "inline-block");
                }
                else {
                    $("div").css("display", "none");
                }
            });
            //实现点击滚动回顶部 
            $("div").click(function () {
                $("html,body").scrollTop(0);
            });
        }
    })
</script>
<body>

<!--<div id="box1"></div>-->
<!--<br/>-->
<!--<div id="box2"></div>-->

<h3>绿叶，给你初恋般的感觉。</h3>
<div>回到顶部</div>

</body>
</html>

绑定事件 on

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 type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        7.1 绑定事件
            jQuery的on()方法，有点类似于JavaScript的addEventListener()方法。
                $().on(type, fn) 
            
            实际上，on()方法还有一种同时绑定多个事件的语法，不过这个语法没太多用处。
            就算要绑定多个事件，我们直接用多个on()方法即可。
            为了减轻记忆负担，大家可以忽略这种语法。
            
            
        在jQuery中绑定事件不是还有bind()方法和live()方法吗？为什么不给我们介绍一下？
        +从jQuery1.7开始（我们现在用的是jQuery 1.12.4），对于绑定事件，jQuery官方建议使用on()方法来统一取代以前的bind()、live()和delegate()方法；
        对于解绑事件，jQuery官方也建议使用off()方法来统一取代以前的unbind()、die()和undelegate()方法。
        因此，大家必须清楚这一点。以后如果在其他书看到bind()、live()等这些方法，直接忽略即可。
    -->
</head>
<script>
    $(function () {
        $("#btn").on("click", function () {
            alert("绿叶，给你初恋般的感觉");
        })
    })
</script>
<body>

<input id="btn" type="button" value="按钮">

</body>
</html>

解绑事件 off

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</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        7.2 解绑事件
            jQuery的off()方法，有点类似于JavaScript的removeEventListener()方法。
                $().off(type) 
            
        
        一般应用于拖拽效果，来解绑mousemove事件。
    -->
</head>
<script>
    $(function () {
        //添加事件 
        $("#btn").click(function () {
            alert("绿叶，给你初恋般的感觉")
        })
        //解绑事件 
        $("#btn_off").click(function () {
            $("#btn").off("click");// 去除了 click事件，再点击按钮就没反应了
        });
    })
</script>
<body>

<input id="btn" type="button" value="按钮"><br/>
<input id="btn_off" type="button" value="解除"/>

</body>
</html>

鼠标移入移出事件 hover

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="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h3 {
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #ddd;
            cursor: pointer;
        }

        #div2 {
            display: none; /*设置默认情况下内容不显示*/
            padding: 10px;
            border: 1px solid silver;
            text-indent: 32px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        7.3 合成事件
            从之前的学习中我们知道，鼠标（指针）移入和鼠标（指针）移出这两个事件往往都是配合起来使用的，而我们需要分别对这两个事件定义。
            为了简化代码，jQuery为我们提供了hover()方法来一次性定义这两个事件，这就是所谓的“合成事件”。
                $().hover(fn1, fn2) 
                参数fn1表示鼠标（指针）移入事件触发的处理函数，
                参数fn2表示鼠标（指针）移出事件触发的处理函数。
    -->
</head>
<script>
    $(function () {
        // 举例1：hover 使用
        {
            $("div").hover(function () {
                $(this).css("color", "red");// 鼠标指针移入 
            }, function () {
                $(this).css("color", "black");// 鼠标指针移出 
            })


            // 二者等同
            // $("div").mouseenter(function () {
            //     $(this).css("color", "red");//鼠标（指针）移入事件
            // })
            // $("div").mouseleave(function () {//鼠标（指针）移出事件 
            //     $(this).css("color", "black");
            // })
        }

        // 举例2：hover 移入显示
        {
            $("h3").hover(function () {
                $("#div2").css("display", "block");
            }, function () {
                $("#div2").css("display", "none");
            })
        }
    })
</script>
<body>

<div>绿叶，给你初恋般的感觉。</div>

<hr>

<h3>绿叶学习网</h3>
<div id="div2">
    绿叶学习网成立于2015年4月1日，是一个富有活力的Web技术学习网站。在这里，我们只提供互联网专业的Web技术教程和愉悦的学习体验。每一个教程、每一篇文章甚至每一个知识点，都体现绿叶精益求精的态度。没有最好，但是我们可以做到更好！
</div>

</body>
</html>

一次事件 one

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 type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        7.4 一次事件
            在jQuery中，我们可以使用one()方法为元素添加一个“只触发一次”的事件。
                $().one(type, fn) 
                
                type是必选参数，它是一个字符串，表示事件类型。
                fn也是必选参数，表示事件的处理函数。
    -->
</head>
<script>
    $(function () {
        $("#btn").one("click", function () {
            alert("欢迎来到绿叶学习网！");
        })

        // 二者等同（用一次后，关闭事件）

        // $("#btn").on("click", function () {
        //     alert("欢迎来到绿叶学习网！");
        //     $(this).off("click");
        // })
    })
</script>
<body>

<input id="btn" type="button" value="按钮"/>

</body>
</html>

自定义事件 on trigger

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">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        7.5 自定义事件
            自定义事件，指的是用户自己定义的事件。
            在jQuery中，我们可以使用on()方法来自定义一个事件，然后使用trigger()方法来触发自定义事件。
    -->
</head>
<script>
    $(function () {
        // 举例1：trigger触发自定义事件
        {
            // $("#btn").on("delay", function () {
            //     setTimeout(function () {
            //         alert("欢迎来到绿叶学习网！")
            //     }, 1000)
            // })
            // $("#btn").click(function () {
            //     $("#btn").trigger("delay");
            // })
        }

        // 举例2：自动触发事件
        {
            // 先搞自己一次，之后的每次点击再搞自己一次
            $("#btn").on("click", function () {
                alert("欢迎来到绿叶学习网！");
            }).trigger("click");

            // 二者等同

            // $("#btn").on("click", function () {
            //     alert("欢迎来到绿叶学习网！");
            // }).click();
        }
    })
</script>
<body>

<input id="btn" type="button" value="按钮"/>

</body>
</html>

event对象 pageX pageY keyCode

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        7.6 event对象
            当一个事件发生的时候，与这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event对象。
            每一个事件，都有一个对应的event对象。
            
            event对象的属性
                type	        事件类型（例如 click）
                target	        事件元素（一般来说，$(this)和$(event.target)是等价的。）
                which	        鼠标左、中、右键
                pageX、pageY	鼠标坐标（相对于左上角）
                shiftKey	    是否按下shift键
                ctrlKey	        是否按下ctrl键
                altKey	        是否按下alt键
                keyCode	        键码值
            
            如果是shift、ctrl和alt这3个键，我们不需要通过keyCode属性来获取，而是可以直接通过shiftKey、ctrlKey和altKey属性来获取。
            
            event.keyCode返回的是一个数值，常用的按键及对应的键码如下表所示
                W（上）	87
                S（下）	83
                A（左）	65
                D（右）	68
                ↑	    38
                ↓	    40
                ←	    37
                →	    39
    -->
</head>
<script>
    $(function () {
        // 举例1：event.type
        {
            $("#btn").click(function (e) {
                alert(e.type);// click 
            })
        }

        // 举例2：event.target
        {
            $("#a2").click(function (e) {
                // var result = $(e.target).attr("href");
                var result = $(this).attr("href");// 二者等同
                alert(result);
                return false;// 阻止超链接跳转 
            })
        }

        // 举例3：event.which 鼠标左、中、右键
        {
            $("#a3").mousedown(function (e) {
                switch (e.which) {
                    case 1:
                        alert("你点击的是左键");
                        break;
                    case 2:
                        alert("你点击的是中键");
                        break;
                    case 3:
                        alert("你点击的是右键");
                        break;
                }
            })
        }

        // 举例4：event.pageX pageY
        {
            $(document).mousemove(function (e) {
                var result = "鼠标坐标为：（" + e.pageX + "，" + e.pageY + "）";
                $("#div4").text(result);
            })
        }

        // 举例5：event.shiftKey altKey ctrlKey
        {
            $(document).keydown(function (e) {
                // 按下三者任意一个按键，就会弹出提示
                if (e.shiftKey || e.ctrlKey || e.altKey) {
                    alert("禁止使用Shift、Ctrl、Alt键！")
                }
            })
        }

        // 举例6：获取“上”“下”“左”“右”方向键
        {
            $(window).keydown(function (e) {
                if (e.keyCode == 38 || e.keyCode == 87) {
                    $("#span6").text("上");
                } else if (e.keyCode == 39 || e.keyCode == 68) {
                    $("#span6").text("右");
                } else if (e.keyCode == 40 || e.keyCode == 83) {
                    $("#span6").text("下");
                } else if (e.keyCode == 37 || e.keyCode == 65) {
                    $("#span6").text("左");
                } else {
                    $("#span6").text("");
                }
            })

            // 在游戏开发中，我们一般都是通过键盘中的“↑”、“↓”、“←”、“→”以及“W”、“S”、“A”、“D”这8个键来控制人物行走的方向，这个技巧用得非常多。
            // 当然，以我们现在的水平，离游戏开发还很远。有兴趣的小伙伴可以看看《从0到1：HTML5 Canvas动画开发》一书。
        }
    })
</script>
<body>

<input id="btn" type="button" value="按钮"/>

<hr>

<a id="a2" href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>

<hr>

<a id="a3" href="http://www.lvyestdy.com" target="_blank">绿叶学习网</a>

<hr>

<div id="div4"></div>

<hr>

<div>
    你控制的方向是：
    <span id="span6" style="color:red;"></span>
</div>

</body>
</html>

this

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        7.7 this
            对于jQuery中的this，我们记住一句话即可：this始终指向触发当前事件的元素。
            
            【日期标记】2023-06-14 18:25:06 以上同步完成
    -->
</head>
<script>
    $(function () {
        // 举例1：this 单个
        {
            $("div").click(function () {
                //$(this)等价于$("div") 
                $(this).css("color", "red");
            })
            $("p").click(function () {
                //$(this)等价于$("p") 
                $(this).css("color", "blue");
            })
        }

        // 举例2：this 列表
        {
            $("li").each(function (index) {
                // $("li") 获取的是集合
                // $(this) 遍历元素本身
                // var text = $("li").text();// 输出一行 HTMLCSSJavaScript
                var text = $(this).text();// 输出三行 分别 HTML CSS JavaScript
                console.log(text);
            })
        }
    })
</script>
<body>

<div>绿叶，给你初恋般的感觉~</div>
<p>绿叶，给你初恋般的感觉~</p>

<hr>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

</body>
</html>

显示隐藏 show hide

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        8.2 显示与隐藏
            在jQuery中，如果想要实现元素的显示与隐藏效果，有以下两种方式。
            ·show() 和 hide()。
            ·toggle()。
            
            $().show(speed, fn)
            $().hide(speed, fn) 
            $().toggle(speed, fn)      jQuery 3.x废弃
            
            show()方法会把元素由display:none;还原为原来的状态（display:block、display:inline-block等）。
            hide()方法会为元素定义display:none;。
            speed是一个可选参数，表示动画的速度，单位为毫秒。如果省略参数，则表示没有动画效果。
            speed有两种取值，一种是“字符串”，另一种是“数值”，如表所示
                    "fast"	    200毫秒
                    "normal"	400毫秒（默认值）
                    "slow"	    600毫秒
            fn也是一个可选参数，表示动画执行完成后的回调函数。在这里，所谓的回调函数，就是在动画执行完成后再执行的一个函数。
            
            此外要说明一点：toggle()方法在jQuery 3.x版本中已经被移除了。当然，如果使用jQuery 1.x版本则不用在意这点。
    -->
</head>
<script>
    $(function () {
        // 举例1：show() hide()
        {
            $("#btn_hide").click(function () {
                // $("img").hide();
                // $("img").css("display", "none");// 二者等同

                $("img").hide("fast");// 带动画
            })
            $("#btn_show").click(function () {
                // $("img").show();
                // $("img").css("display", "block");// 二者等同

                $("img").show(500);// 带动画
            })
        }

        // 举例2：
        {
            $("#btn").click(function () {
                $("img").toggle(500);// 带动画
            })
        }
    })
</script>
<body>

<input id="btn_hide" type="button" value="隐藏"/>
<input id="btn_show" type="button" value="显示"/>
<input id="btn" type="button" value="切换"/>
<hr>
<img src="img/仓鼠.jpg" alt=""/>
<hr>

</body>
</html>

淡入淡出 fadeIn fadeOut fadeTo

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        8.3 淡入与淡出
            在jQuery中，如果想要实现元素的淡入与淡出的渐变效果，有以下3种方式。
                ·fadeIn() 和 fadeOut()。
                ·fadeToggle()。
                ·fadeTo()。
            
            $().fadeIn(speed, fn)
            $().fadeOut(speed, fn) 
            $().fadeToggle(speed, fn) 
            $().fadeTo(speed, opacity, fn) 
            
            speed是一个可选参数，表示动画的速度，单位为毫秒。如果省略参数，则表示采用默认速度。
            speed有两种取值，一种是“字符串”，另一种是“数值”
                    "fast"	    200毫秒
                    "normal"	400毫秒（默认值）
                    "slow"	    600毫秒
            fn也是一个可选参数，表示动画执行完成后的回调函数。
        
            opacity是一个必选参数，表示元素指定的透明度，取值范围为0.0~1.0。
            
            fadeTo()方法只会把元素的透明度指定为某个值，并不会隐藏元素。
        -----------------------------------------------------
        【区别】
           
        ·show()与hide()：通过改变height、width、opacity、display来实现元素的显示与隐藏效果。
        ·fadeIn()与fadeOut()：通过改变opacity、display来实现元素的淡入与淡出效果。
        
        此外，使用这两种方式实现的效果在视觉上也有一定的区别，例如，
            使用hide()方法实现的效果是慢慢缩小来隐藏元素，
            而fadeOut()方法实现的效果是整体淡化直至消失。
                    
    -->
</head>
<script>
    $(function () {
        // 举例1：fadeIn() fadeOut()
        {
            $("#btn_hide").click(function () {
                $("img").fadeOut();// 隐藏
            })
            $("#btn_show").click(function () {
                $("img").fadeIn();// 显示
            })
        }

        // 举例2：切换
        {
            $("#btn").click(function () {
                $("img").fadeToggle(6000);// gif 6s 出图片
            })
        }

        // 举例3：透明度，不会使之消失
        {
            $("img").hover(function () {
                $(this).fadeTo(200, 0.6);
            }, function () {
                $(this).fadeTo(200, 1.0);
            })
        }
    })
</script>
<body>

<input id="btn_hide" type="button" value="隐藏"/>
<input id="btn_show" type="button" value="显示"/>
<input id="btn" type="button" value="切换"/>
<hr>
<img src="img/仓鼠.jpg" alt=""/>
<hr>

</body>
</html>

gif 显示隐藏 淡入淡出

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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        img {
            float: left;
            display: inline-block;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        8.3 淡入与淡出
            
    -->
</head>
<script>
    $(function () {

        // 1. 拼接图片
        var arr = ["1cokc3sajtw.gif", "005MZqZdgw1ezsjivqjhng30cs073e81.gif", "9-16041QF919.gif", "24.gif", "29.gif", "056bb67cade72f9e25.gif", "0065a7iMjw1fbx1o0pcdhg306j07n1kx.gif", "0065mxFoly1ff2o7vxg0ng30b4069e81.gif", "0065mxFoly1ffmxcm6m0wg30a307fe81.gif", "0065mxFoly1fkuli61c7ig30bc0844qr.gif", "0067Ob0cjw1ey314wdecdg309v05k7sb.gif", "680_1000.gif", "9378-gom-kogaru-tits.gif", "34365-1.gif", "36614-3.gif", "45079-1.gif", "179941.gif", "516892.gif", "16806761-1.gif", "21870857.gif", "26703071.gif", "62047472tw1ectrpobmjtg206o08wnpd.gif", "20210429143411_73240.gif", "big-tits_001-19.gif", "danai2695.gif", "DVAJ-137.7.gif", "f50d368de9eb6220a528a19c98b4c82d.gif", "Gifs-for-Tumblr-1664.gif", "qDmCUGD.gif", "tits-shaking-animated-gif.gif", "tumblr_n3yyzoUFK21tobld4o3_250.gif", "tumblr_n3yyzoUFK21tobld4o5_250.gif"];
        arr.forEach(function (e) {
            $("<img src='1' alt=''>").on("load", function () {
                var w = $(this).width();
                var h = $(this).height();
                var max = Math.max(w, h, 200);
                // alert(w + " " + h + " " + max)

                if (max > 200) {
                    var rate = max / 200;
                    $(this).width(w / rate);
                    $(this).height(h / rate);
                }
            }).insertBefore("hr:last");
            $("img:last").attr("src", "tmp/" + e);
        })


        $("img").fadeTo(1, 0.05);// 默认 => 降低透明度
        $("#btn1").click(function () {
            $("img[class != abc]").fadeTo(6000, 0.05);// 降低透明度
        })
        $("#btn2").click(function () {
            $("img[class != abc]").fadeTo(6000, 1);// 增加透明度
        })

        $("img").click(function () {
            $(this).hide(1000);// 点击隐藏 1s隐藏
        })

        $("#btn_show").click(function () {
            $("img").show(3000);// 显示 3s慢慢显示
        })

        $("#btn_hide").click(function () {
            $("img").hide(3000);// 隐藏 3s慢慢隐藏
        })
    })
</script>
<body>

<!--
    1. 控制透明度
    2. 透明度
    3. 遍历所有图片，并拼接
-->
<input id="btn_show" type="button" value="显示"/>
<input id="btn_hide" type="button" value="隐藏"/>
<input id="btn1" type="button" value="透明降低"/>
<input id="btn2" type="button" value="透明增加"/>
<hr>
<hr>

</body>
</html>

滑上滑下 slideUp slideDown

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 300px;
        }

        h3 {
            text-align: center;
            padding: 10px;
            background-color: #EEEEEE;
        }

        h3:hover {
            background-color: #DDDDDD;
            cursor: pointer;
        }

        p {
            background-color: #F1F1F1;
            padding: 8px;
            line-height: 24px;
            display: none;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        8.4 滑上与滑下
            在jQuery中，如果想要实现元素的滑动效果，我们有以下两种方式。
                ·slideUp() 和 slideDown()。
                ·slideToggle()。
            
            $().slideUp(speed, fn)
            $().slideDown(speed, fn)
            $().slideToggle(speed, fn) 
                speed是一个可选参数，表示动画的速度，单位为毫秒。如果省略参数，则表示采用默认速度。
                speed有两种取值，一种是“字符串”，另一种是“数值”
                        "fast"	    200毫秒
                        "normal"	400毫秒（默认值）
                        "slow"	    600毫秒
                fn也是一个可选参数，表示动画执行完成后的回调函数。
            
    -->
</head>
<script>
    $(function () {
        // slideDown slideUp
        {
            //设置一个变量flag用于标记元素状态，是“滑下”还是“滑上” 
            // var flag = 0;
            // $("h3").click(function () {
            //     if (flag == 0) {
            //         $("p").slideDown();// 滑下 显示
            //         flag = 1;
            //     } else {
            //         $("p").slideUp();// 滑上 隐藏
            //         flag = 0;
            //     }
            // });
        }

        // slideToggle
        {
            $("h3").click(function () {
                $("p").slideToggle();
            })
        }
    })
</script>
<body>

<div>
    <h3>绿叶学习网简介</h3>
    <p>
        绿叶学习网成立于2015年4月1日，是一个富有活力的Web技术学习网站。在这里，我们只提供互联网专业的Web技术教程和愉悦的学习体验。每一个教程、每一篇文章甚至每一个知识点，都体现绿叶精益求精的态度。没有最好，但是我们可以做到更好！
    </p>
</div>

</body>
</html>

自定义动画 animate

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 50px;
            height: 50px;
            background-color: lightskyblue;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
    <!--// 注意：第三方插件必须放在 jQuery下面-->
    <!--
        8.5 自定义动画
            对于自定义动画，我们分为以下3个方面来介绍。
                ·简单动画。
                ·累积动画。
                ·回调函数。
            
            $().animate(params, speed, fn) 
                params是一个必选参数，表示属性值列表，也就是元素在动画中变化的属性列表。
                speed是一个可选参数，表示动画的速度，单位为毫秒，默认为400毫秒。
                fn也是一个可选参数，表示动画执行完成后的回调函数。
    -->
</head>
<script>
    $(function () {
        // 简单动画
        {
            $("div").click(function () {
                // 50x50 点击变为 150x150   1秒
                // $(this).animate({"width": "150px", "height": "150px"}, 1000);
                $(this).animate({"width": "150px", "height": "150px", "background-color": "red"}, 1000);
                // animate()无法识别background-color、border-color等颜色属性。
                // 因此，我们需要引入第三方插件 jquery.color.js来修复这个bug。
                // 注意：第三方插件必须放在 jQuery下面
            })
        }

        // 简单动画 对比 累积动画
        {
            //简单动画  50x50 => 100x100
            $("#btn1").click(function () {
                $("#box1").animate({"width": "100px", "height": "100px"}, 1000);
            })
            //累积动画 50x50 => 150x150
            $("#btn2").click(function () {
                $("#box2").animate({"width": "+=100px", "height": "+=100px"}, 1000);
            })
        }

        // 回调函数
        {
            $("#div3").click(function () {
                // 开始执行动画 => 执行函数（同时：与动画一起开始执行）
                // $(this).animate({"width": "150px", "height": "150px"}, 1000)
                //     .css("border", "1px solid red");


                // 动画执行完 => 再执行函数（顺序：动画执行完再执行函数）
                $(this).animate({"width": "150px", "height": "150px"}, 1000, function () {
                    $(this).css("border", "2px solid red");
                });
            })
        }
    })
</script>
<body>

<div></div>

<hr>

<div id="box1"></div>
<input id="btn1" type="button" value="简单动画"/><br/>
<div id="box2"></div>
<input id="btn2" type="button" value="累积动画"/>

<hr>

<div id="div3"></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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 50px;
            height: 50px;
            background-color: lightskyblue;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        8.6 队列动画
           动画一个一个执行，
           
           在jQuery中，队列动画可以是任何动画形式，包括以下4种。
                ·显示与隐藏。 show hide
                ·淡入与淡出。 fadeIn fadeOut
                ·滑上与滑下。 slideUp slideDown
                ·自定义动画。 animate
    -->
</head>
<script>
    $(function () {
        // 一共执行2秒，先1秒宽，再1秒高。
        {
            $("#div1").click(function () {
                $(this)
                    .animate({"width": "150px"}, 1000)
                    .animate({"height": "150px"}, 1000);
            })
        }

        // 一共执行3秒，先1秒宽高，再1秒隐藏，再1秒显示。
        {
            $("#div2").click(function () {
                $(this)
                    .animate({"width": "150px", "height": "150px"}, 1000)
                    .fadeOut(1000)// 隐藏 淡出
                    .fadeIn(1000);// 显示 淡入
            })
        }
    })
</script>
<body>

<div id="div1"></div>

<hr>

<div id="div2"></div>

</body>
</html>

停止动画 stop

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 50px;
            height: 50px;
            background-color: lightskyblue;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
    <!--// 注意：第三方插件必须放在 jQuery下面-->
    <!--
        8.7 停止动画
            在jQuery中，我们可以使用stop()方法来停止元素正在执行的动画效果。
            
            $().stop(stopAll, goToEnd) 
            
            stopAll和goToEnd都是可选参数，它们的取值都是布尔值，默认值都是false。
            ·stopAll表示停止队列动画。
                当取值为false时，仅停止当前动画；当取值为true时，停止当前动画以及后面所有的队列动画。
            ·goToEnd表示将动画跳转到当前动画效果的最终状态。

            stop()	            等价于stop(false, false)，仅停止当前动画，后面的动画还可以继续执行
            stop(true)	        等价于stop(true,false)，停止当前动画，并且停止后面的动画
            stop(true, true)	当前动画继续执行，只停止后面的动画
            stop(false, true)	停止当前动画，跳到最后一个动画，并且执行最后一个动画

    -->
</head>
<script>
    $(function () {
        // 点击可暂停当前动画，继续后门的动画
        {
            $("#btn-start").click(function () {
                // 注意：第三方插件必须放在 jQuery下面
                $("#div1")
                    .animate({"width": "200px"}, 2000)
                    .animate({"background-color": "red"}, 2000)
                    .animate({"height": "200px"}, 2000)
                    .animate({"background-color": "blue"}, 2000);
            });
            $("#btn-stop").click(function () {
                $("#div1").stop();// 等价于stop(false, false)，仅停止当前动画，后面的动画还可以继续执行
            })
        }

        // 鼠标放上去的动画
        {
            $("#div2").hover(function () {
                $(this).animate({"height": "150px"}, 500);// 放上面 高=150
            }, function () {
                $(this).animate({"height": "50px"}, 500); //移出时返回原状态 
            })

            // 在这个例子中，我们使用hover()方法定义鼠标指针移入和鼠标指针移出时的动画效果。
            // 当我们快速地移入或移出元素时，会发现一个很奇怪的bug：元素会不断地变长或变短！也就是说，动画会不断执行，根本停不下来。
            // 
            // 这种“根本停不下来”的bug在实际开发中经常会碰到，小伙伴们一定要特别注意。
            // 实际上，这个bug是由动画累积所导致的。在jQuery中，如果一个动画没有执行完，它就会被添加到“动画队列”中去。
            // 在这个例子中，每一次移入或移出元素，都会产生一个动画，如果该动画没有被执行完，它就会被添加到动画队列中去，然后没有被执行完的动画会继续执行，直到所有动画执行完毕。
            // 
            // 针对这个bug，我们只需要在移入或移出元素产生的动画执行之前加入stop()方法，就能轻松解决。
            // 最终修改后的代码如下。
            // 
            // 对于这种由于动画累积产生的bug，我们还可以通过is(":animated")来判断当前的动画状态并解决。

            $("#div3").hover(function () {
                $(this).stop().animate({"height": "150px"}, 500);// 放上面 高=150
            }, function () {
                $(this).stop().animate({"height": "50px"}, 500); //移出时返回原状态 
            })
        }
    })
</script>
<body>

<input id="btn-start" type="button" value="开始"/>
<input id="btn-stop" type="button" value="停止"/><br/>
<div id="div1"></div>

<hr>

<div id="div2"></div>

<hr>

<div id="div3"></div>

</body>
</html>

延迟动画 delay

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            width: 50px;
            height: 50px;
            background-color: lightskyblue;
            margin-top: 6px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        8.8 延迟动画
            在jQuery中，我们可以使用delay()方法来延迟动画的执行。
            
            $().delay(speed)  
                speed是一个必选参数，表示动画的速度，单位为毫秒。
            
            
            
    -->
</head>
<script>
    $(function () {

        // 一共执行4秒，执行1秒，等待2秒，再执行1秒
        {
            $("div").click(function () {
                $(this)
                    .animate({"width": "150px"}, 1000)
                    .delay(2000)
                    .animate({"height": "150px"}, 1000);
            });
        }

    })
</script>
<body>

<div></div>

</body>
</html>

动画状态 is

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        figure {
            position: relative; /*设置相对定位属性，以便定位子元素*/
            width: 240px;
            height: 200px;
            overflow: hidden;
        }

        img {
            width: 240px;
            height: 200px;
        }

        figcaption {
            position: absolute;
            left: 0;
            bottom: -30px;
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-family: "微软雅黑";
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        8.9 判断动画状态
            在jQuery中，我们可以使用is()方法来判断元素是否正处于动画状态。
                如果元素不处于动画状态，则添加新的动画；
                如果元素正处于动画状态，则不添加新的动画。

            if(!$().is(":animated")) { 
                //如果元素不处于动画状态，则添加新的动画 
            } 
            
            :animated是一个伪类选择器，表示选取所有正在执行动画的元素
    -->
</head>
<script>
    $(function () {

        // 在这个例子中，$(">figcaption",this)表示选取当前元素下面的子元素figcaption，它其实可以等价于$("figure>figcaption")。
        // 这种写法是jQuery的高级技巧，它其实借助了$()方法的第2个参数
        // 
        // 此外，在实际开发中，is(":animated")比stop()方法更加容易理解，也更加常用。
        {
            $("figure").hover(function () {
                if (!$(">figcaption", this).is(":animated")) {
                    $(">figcaption", this).animate({"bottom": "0px"}, 200);
                }
            }, function () {
                if (!$(">figcaption", this).is(":animated")) {
                    $(">figcaption", this).animate({"bottom": "-30px"}, 200);
                }
            })
        }

    })
</script>
<body>

<figure>
    <img src="img/仓鼠.jpg" alt="">
    <figcaption>小白</figcaption>
</figure>

</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        8.10 深入了解jQuery动画
        
            在之前的学习中，我们接触了以下4种jQuery动画形式。
                ·显示与隐藏。
                ·淡入与淡出。
                ·滑上与滑下。
                ·自定义动画。
            
            所有jQuery动画从本质上来说，都是通过改变元素的CSS属性值来实现的。
            换句话说，jQuery动画其实就是通过将元素的CSS属性从“一个值”在一定时间内平滑地过渡到“另一个值”，从而实现动画效果。
            
            对于前3种动画形式，实现的原理如下。
                ·显示与隐藏：通过改变display、opacity、width、height来实现。
                ·淡入与淡出：通过改变display、opacity来实现。
                ·滑上与滑下：通过改变display、height来实现。
            
            实际上，这3种动画形式就是使用animate()方法来实现的，只不过jQuery把它们封装得更加简单而已。
            
                $().hide(500);
                $().animate({"width":"0", "height":"0", "opacity":"0.0", "display":"none"},500); 
                
                $().fadeOut(500);
                $().animate({"opacity":"0.0", "display":"none"},500); 
                
                $().slideUp(500);
                $().animate({"height":"0", "display":"none"},500); 
            
            
            深入了解才能更加深刻。
    -->
</head>
<script>
    $(function () {
        
    })
</script>
<body>

</body>
</html>

类名过滤 hasClass

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">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        9.2 类名过滤：hasClass()
        
            $().hasClass("类名") 
            
            判断元素是否包含指定的类名
    -->
</head>
<script>
    $(function () {
        $("li").each(function () {
            var bool = $(this).hasClass("select");
            if (bool) {
                $(this).css("color", "red");
            }
        })
    })
</script>
<body>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li class="select">jQuery</li>
    <li>Vue.js</li>
</ul>

</body>
</html>

下标过滤 eq

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 type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        9.3 下标过滤：eq()
        
            $().eq(n) 
            
            n是一个整数。当n取值为0或正整数时，eq(0)获取的是第1个元素，eq(1)获取的是第2个元素，……，以此类推。
            当n取值为负整数时，eq(-1)获取的是倒数第1个元素，eq(-2)获取的是倒数第2个元素，……，以此类推。
    -->
</head>
<script>
    $(function () {
        $("li").eq(3).css("color", "red");// 第四个li，红色
        // $("li:eq(3)").css("color", "red");// 二者等同
    })
</script>
<body>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>

</body>
</html>

判断过滤 is

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        9.3 下标过滤：eq()
        
            $().is(selector) 
            
            参数selector是一个选择器。
            is()判断符合条件的元素：如果存在，则返回true；如果不存在，则返回false。
            
            is()方法非常好用，能不能用好也直接决定你的代码是否高效。
            使用jQuery进行开发，没有做不到的，只有想不到的。
            下面列出的是is()方法的常用功能代码。

                //判断元素是否可见
                $().is(":visible")
                 
                //判断元素是否处于动画中 
                $().is(":animated") 
                 
                //判断单选框或复选框是否被选中 
                $().is(":checked") 
                 
                //判断当前元素是否为第一个子元素 
                $(this).is(":first-child") 
                 
                //判断文本中是否包含jQuery这个词 
                $().is(":contains('jQuery')") 
                 
                //判断是否包含某些类名 
                $().is(".select") 
    -->
</head>
<script>
    $(function () {
        // 举例1：判断复选框是否被选中
        {
            $("#selectAll").change(function () {
                var bool = $(this).is(":checked");
                if (bool) {
                    $(".fruit").prop("checked", "true");
                } else {
                    $(".fruit").removeProp("checked");
                }
            })
        }

        // 举例2：判断是否存在某个类名
        {
            // 实际上，想要判断元素是否存在某个类名，我们有两种方法：一种是hasClass()方法，另一种是is()方法。
            // 在实际开发中，建议优先使用hasClass()方法。
            // 主要是从查找速度来看，hasClass()方法远远优于is()方法。
            // 造成二者查找速度存在差异的原因很简单，is()方法封装的东西比hasClass()方法封装的多得多，运行速度肯定也慢得多。
            $("li").each(function () {
                var bool = $(this).is(".select");
                if (bool) {
                    $(this).css("color", "red");
                }
            })
        }
    })
</script>
<body>

<div>
    <p><label><input id="selectAll" type="checkbox"/>全选/反选：</label></p>
    <label><input type="checkbox" class="fruit" value="苹果"/>苹果</label>
    <label><input type="checkbox" class="fruit" value="香蕉"/>香蕉</label>
    <label><input type="checkbox" class="fruit" value="西瓜"/>西瓜</label>
</div>

<hr>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li class="select">jQuery</li>
    <li>Vue.js</li>
</ul>

</body>
</html>

反向过滤 not

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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        9.5 反向过滤：not()
        
            $().not(selector或fn) 
            
            当not()方法参的数是一个选择器时，表示使用选择器来过滤不符合条件的元素，然后选取其余元素。
            当not()方法的参数是一个函数时，表示使用函数来过滤不符合条件的元素，然后选取其余元素。

    -->
</head>
<script>
    $(function () {
        // 举例1：选择器过滤
        {
            // 没有 .select 变为红色
            $("#ul1 li").not(".select").css("color", "red");
            // $("li:not(.select)").css("color", "red");// 二者等同
        }

        // 举例2：函数过滤
        {
            // 文本内容不为 'HTML' 的变为红色
            $("#ul2 li").not(function () {
                return $(this).text() == "HTML";
            }).css("color", "red");
        }
    })
</script>
<body>

<ul id="ul1">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li class="select">jQuery</li>
    <li>Vue.js</li>
</ul>

<hr>

<ul id="ul2">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li class="select">jQuery</li>
    <li>Vue.js</li>
</ul>

</body>
</html>

filter has

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        9.6 表达式过滤：filter()、has()
        
            9.6.1 filter()
                    选择器过滤，指的是使用选择器来选取符合条件的元素。
                    
                    $().filter(selector 或 fn) 
            
            9.6.2 has()
                    $().has(selector) 
                    
                    它没有 fn函数过滤，等同于   $().filter(selector)

    -->
</head>
<script>
    $(function () {
        // 举例1：选择器过滤
        {
            // 有 .select 的变红色
            $(function () {
                $("#ul1 li").filter(".select").css("color", "red");
            })
        }

        // 举例2：函数过滤
        {
            // 文本为 HTML 的变蓝色
            $("#ul2 li").filter(function () {
                return $(this).text() == "HTML";
            }).css("color", "blue");
        }
    })
</script>
<body>

<ul id="ul1">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li class="select">jQuery</li>
    <li>Vue.js</li>
</ul>

<hr>

<ul id="ul2">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li class="select">jQuery</li>
    <li>Vue.js</li>
</ul>

</body>
</html>

祖先元素 parent

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table, tr, td {
            border: 1px solid silver;
        }

        td {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        10.2 查找祖先元素
        
            在jQuery中，如果想要查找当前元素的祖先元素（父元素、爷元素等），我们有以下3种方法。
                ·parent()。
                ·parents()。
                ·parentsUntil()。
        
        10.2.1 parent()
            在jQuery中，我们可以使用parent()方法来查找当前元素的“父元素”。
            注意，每个元素只有一个父元素。
            
                $.parent(selector) 
                
                selector是一个可选参数，也是一个选择器，用来查找符合条件的父元素。
                    当参数省略时，表示父元素不需要满足任何条件；
                    当参数没有省略时，表示父元素需要满足条件。
        
        10.2.2 parents()
            在jQuery中，我们可以使用parents()方法来查找当前元素的“祖先元素”。
            注意，每个元素可以有多个祖先元素。
            
                $().parents(selector) 
                
                selector是一个可选参数，也是一个选择器，用来查找符合条件的祖先元素。
                    当参数省略时，表示祖先元素不需要满足任何条件；
                    当参数没有省略时，表示祖先元素需要满足条件。
                
        10.2.3 parentsUntil()
                $().parentsUntil(selector) 
                
                selector是一个可选参数，也是一个选择器，用来选择符合条件的祖先元素。
    -->
</head>
<script>
    $(function () {
        // 举例1：不带参数的parent()
        {
            $("#tab1 td").hover(function () {
                // $(this).parent()表示选中当前td元素的父元素（tr），爷元素（table）不会被选中。
                $(this).parent().css("background-color", "silver");
            }, function () {
                $(this).parent().css("background-color", "white");
            })
        }

        // 举例2：带参数的parent()
        {
            // 只有带有 class的才会选中
            $("#tab2 td").hover(function () {
                $(this).parent(".select").css("background-color", "silver")
            }, function () {
                $(this).parent(".select").css("background-color", "white")
            })
        }

        // 举例3：查找所有祖先元素
        {
            var parents = $("#div3 span").parents();
            var result = [];
            $.each(parents, function () {
                // $(this)是jQuery对象，它调用的是jQuery的方法或属性，例如click()、keyup()等。
                // this是DOM对象，它调用的是DOM对象的方法或属性，例如this.id、this.value等。由于tagName属性属于DOM对象，所以我们这里使用的是this.tagName。
                var item = this.tagName.toLowerCase();// 小写标签名
                result.push(item);// 结尾添加一个元素
            });

            $("#div3 p:last").text(result.join(","));// strong,p,div,body,html
        }

        // 举例4：parentsUntil
        {
            var parents = $("#div4 span").parentsUntil("div");// 不包含 div
            var result = [];

            $.each(parents, function () {
                var item = this.tagName.toLowerCase();
                result.push(item);
            });

            $("#div4 p:last").text(result.join(","));// strong,p
        }
    })
</script>
<body>

<table id="tab1">
    <tr>
        <td>2</td>
        <td>4</td>
        <td>8</td>
    </tr>
    <tr>
        <td>16</td>
        <td>32</td>
        <td>64</td>
    </tr>
    <tr>
        <td>128</td>
        <td>256</td>
        <td>512</td>
    </tr>
</table>

<hr>

<table id="tab2">
    <tr>
        <td>2</td>
        <td>4</td>
        <td>8</td>
    </tr>
    <tr class="select">
        <td>16</td>
        <td>32</td>
        <td>64</td>
    </tr>
    <tr>
        <td>128</td>
        <td>256</td>
        <td>512</td>
    </tr>
</table>

<hr>

<div id="div3">
    <p>
        <strong>
            <span>绿叶学习网</span>
        </strong>
    </p>
    <p></p>
</div>

<hr>

<div id="div4">
    <p>
        <strong>
            <span>绿叶学习网</span>
        </strong>
    </p>
    <p></p>
</div>

</body>
</html>

后代元素 children find

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">
    <title>Title</title>
    <style type="text/css">
        p {
            margin: 6px 0;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        10.3 查找后代元素
        
            在jQuery中，如果想要查找当前元素的后代元素（子元素、孙元素等）。
                ·children()。
                ·find()。
        
        10.3.1 children()
            在jQuery中，我们可以使用children()方法来查找当前元素的“子元素”。
            注意，children()方法只能查找子元素，不能查找其他后代元素。
            
                $().children(selector) 
                
                selector是一个选择器，可选参数
                    当参数省略时，表示选择所有子元素；
                    当参数没有省略时，表示选择符合条件的子元素。
        
        10.3.2 find()
            在jQuery中，我们可以使用find()方法来查找当前元素的“后代元素”。
            注意，find()方法不仅能查找子元素，还能查找其他后代元素。
            
                $().find(selector) 
                
                selector是一个可选参数，也是一个选择器，用来查找符合条件的后代元素。
                    当参数省略时，表示选择所有后代元素；
                    当参数没有省略时，表示选择符合条件的后代元素。
    -->
</head>
<script>
    $(function () {
        // 举例1：children   只包含儿子
        {
            $("#wrapper").hover(function () {
                $(this).children(".select").css("color", "red");// 放上去
            }, function () {
                $(this).children(".select").css("color", "black");// 移开
            })
        }

        // 举例1：find   包含所有后代 儿子、孙子、...
        {
            $("#wrapper2").hover(function () {
                $(this).find(".select").css("color", "red");
            }, function () {
                $(this).find(".select").css("color", "black");
            })
        }
    })
</script>
<body>

<div id="wrapper">
    <p>子元素</p>
    <p class="select">子元素 select</p>
    <div>
        <p>孙元素</p>
        <p class="select">孙元素 select</p>
    </div>
    <p>子元素</p>
    <p class="select">子元素 select</p>
</div>

<hr>

<div id="wrapper2">
    <p>子元素</p>
    <p class="select">子元素 select</p>
    <div>
        <p>孙元素</p>
        <p class="select">孙元素 select</p>
    </div>
    <p>子元素</p>
    <p class="select">子元素 select</p>
</div>

</body>
</html>

前兄弟元素 prev

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        10.4 向前查找兄弟元素
                ·prev()。
                ·prevAll()。
                ·prevUntil()。
        
        10.4.1 prev()
            查找某个元素前面“相邻”的兄弟元素。
            
                $().prev() 
                
        10.4.2 prevAll()
            查找某个元素前面“所有”的兄弟元素。
            
                $().prevAll(selector) 
                
                selector是一个选择器，也是一个可选参数，用来查找符合条件的兄弟元素。
                    当参数省略时，表示选择前面所有的兄弟元素；
                    当参数没有省略时，表示选择前面满足条件的兄弟元素。
        
        10.4.3 prevUntil()
                prevUntil()方法是对prevAll()方法的一个补充，它可以查找元素前面“指定范围”中所有的兄弟元素，
                相当于在prevAll()方法返回的集合中截取一部分。
                
                $().prevUntil(selector) 
                
                selector是一个可选参数，也是一个选择器，用来选择前面符合条件的兄弟元素。
    -->
</head>
<script>
    $(function () {
        $("#ul1 .lvye").prev().css("color", "red");

        $("#ul2 .lvye").prevAll().css("color", "red");

        $("#ul3 .lvye").prevUntil("#end").css("color", "red");
    })
</script>
<body>

<ul id="ul1">
    <li>红：red</li>
    <li>橙：orange</li>
    <li>黄：yellow</li>
    <li class="lvye">--绿：green--</li>
    <li>青：cyan</li>
    <li>蓝：blue</li>
    <li>紫：purple</li>
</ul>

<hr>

<ul id="ul2">
    <li>红：red</li>
    <li>橙：orange</li>
    <li>黄：yellow</li>
    <li class="lvye">--绿：green--</li>
    <li>青：cyan</li>
    <li>蓝：blue</li>
    <li>紫：purple</li>
</ul>

<hr>

<ul id="ul3">
    <li id="end">红：red</li>
    <li>橙：orange</li>
    <li>黄：yellow</li>
    <li class="lvye">--绿：green--</li>
    <li>青：cyan</li>
    <li>蓝：blue</li>
    <li>紫：purple</li>
</ul>

</body>
</html>

后兄弟元素 next

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        10.5 向后查找兄弟元素
                ·next()。
                ·nextAll()。
                ·nextUntil()。
        
        10.5.1 next()
            查找某个元素后面“相邻”的兄弟元素。
            
                $().next() 
                
        10.5.2 nextAll()
            查找某个元素后面“所有”的兄弟元素。
            
                $().nextAll(selector) 
                
                selector是一个选择器，也是一个可选参数，用来查找符合条件的兄弟元素。
                    当参数省略时，表示选择后面所有的兄弟元素；
                    当参数没有省略时，表示选择后面满足条件的兄弟元素。
        
        10.5.3 nextUntil()
                nextUntil()方法是对nextAll()方法的一个补充，它可以查找元素后面“指定范围”中所有的兄弟元素，
                相当于在nextAll()方法返回的集合中截取一部分。
                
                $().nextUntil(selector) 
                
                selector是一个可选参数，也是一个选择器，用来选择后面符合条件的兄弟元素。
    -->
</head>
<script>
    $(function () {
        $("#ul1 .lvye").next().css("color", "red");

        $("#ul2 .lvye").nextAll().css("color", "red");

        $("#ul3 .lvye").nextUntil("#end").css("color", "red");
    })
</script>
<body>

<ul id="ul1">
    <li>红：red</li>
    <li>橙：orange</li>
    <li>黄：yellow</li>
    <li class="lvye">--绿：green--</li>
    <li>青：cyan</li>
    <li>蓝：blue</li>
    <li>紫：purple</li>
</ul>

<hr>

<ul id="ul2">
    <li>红：red</li>
    <li>橙：orange</li>
    <li>黄：yellow</li>
    <li class="lvye">--绿：green--</li>
    <li>青：cyan</li>
    <li>蓝：blue</li>
    <li>紫：purple</li>
</ul>

<hr>

<ul id="ul3">
    <li>红：red</li>
    <li>橙：orange</li>
    <li>黄：yellow</li>
    <li class="lvye">--绿：green--</li>
    <li>青：cyan</li>
    <li>蓝：blue</li>
    <li id="end">紫：purple</li>
</ul>

</body>
</html>

所有兄弟元素 siblings

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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        10.6 查找所有兄弟元素
            不分前后的查找方法：siblings()。
            
                $().siblings(selector) 
                
                selector是一个可选参数，也是一个选择器，用来查找符合条件的兄弟元素。
                    当参数省略时，表示选择所有兄弟元素；
                    当参数没有省略时，表示选择满足条件的兄弟元素。
    -->
</head>
<script>
    $(function () {
        $("#ul1 .lvye").siblings().css("color", "red");

        $("#ul2 .lvye").siblings(".select").css("color", "red");
    })
</script>
<body>

<ul id="ul1">
    <li>红：red</li>
    <li>橙：orange</li>
    <li>黄：yellow</li>
    <li class="lvye">--绿：green--</li>
    <li>青：cyan</li>
    <li>蓝：blue</li>
    <li>紫：purple</li>
</ul>

<hr>

<ul id="ul2">
    <li>红：red</li>
    <li class="select">橙：orange</li>
    <li>黄：yellow</li>
    <li class="lvye">--绿：green--</li>
    <li>青：cyan</li>
    <li class="select">蓝：blue</li>
    <li>紫：purple</li>
</ul>

</body>
</html>

函数 URL 数组 对象 检测 自定义

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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--

11.2 字符串操作
            $.trim(str)         首尾空格

11.3 URL操作
            $.param(obj或array) URL拼接

11.4 数组操作
            $.inArray(value, array)   存在返回value的下标；不存在返回-1。
            $.merge(arr1, arr2)       合并arr1和arr2，然后返回新的数组。
            $.makeArray(obj)          返回一个数组。如果obj不是类数组，则返回空数组。
                                      arguments、nodeList 类数组，只能用 length，转换后可用数组方法
            $.grep(array, function(value,index){
                …… 
            }, false)
                过滤数组
                第1个参数array是一个数组。
                第2个参数是一个匿名函数。两个形参：value当前元素“值”，index当前元素“索引”。
                第3个参数是一个布尔值。如果该值为false，则$.grep()只会收集函数返回true的数组元素；如果该值为true，则$.grep()只会收集函数返回false的数组元素。
            
            $.each(array, function(index, value){
                // value 等价于 arr[index]
                …… 
            })
                遍历数组
                第1个参数array是一个数组。
                第2个参数是一个匿名函数。两个形参：value当前元素“值”，index当前元素“索引”。
                如果需要退出each循环，可以在回调函数中return false。
                一定要注意，这里是function(index,value)，而不是function(value,index)。
                $.grep()和$.each()这两个方法中的匿名函数的参数顺序是不一样的。

11.5 对象操作
            $.each(obj, function(key, value){
                // value 等价于 obj[key]
                …… 
            })
            第1个参数obj是一个对象，
            第2个参数是一个匿名函数。该匿名函数有两个形参：key表示“键”，value表示“值”。
            如果需要退出each循环，可以在回调函数中返回false，即return false。
            
11.6 检测操作
            $.isFunction(obj)	        判断变量是否为一个函数，返回true或false
            $.isArray(obj)	            判断变量是否为一个数组，返回true或false
            $.isEmptyObject(obj)	    判断变量是否为一个空对象，返回true或false
            $.isPlainObject(obj)	    判断变量是否为一个原始对象，返回true或false
                                        原始对象，指的是通过“{}”或“new Object()”来创建的对象。
            $.contains(node1, node2)	判断一个DOM节点是否包含另一个DOM节点，返回true或false
            
11.7 自定义工具函数
            (function($){
                $.extend({ 
                    "函数名": function(参数){ 
                        …… 
                    } 
                }); 
            })(jQuery); 
                (function(){})()是JavaScript立即执行函数，这种语法在高级开发中经常用到。
            
            $.extend({
                "函数名": function(参数){ 
                    …… 
                } 
            }); 
                如果不考虑其他情况，仅仅使用上面这段代码，其实也可以定义jQuery工具函数。
                但是为什么我们不这样做，而要在外面套一个立即执行函数呢？
                
                这是因为很多其他的JavaScript库都会用到“$”这个符号，使用$.extend()方法定义工具函数时，就有可能受到其他JavaScript库中“$”变量的影响。
                我们在外面套一个如下所示的立即执行函数，是为了让“$”变量只属于这个立即执行函数的作用域，从而避免受到其他JavaScript库的“污染”。
            
    -->
</head>
<script>
    $(function () {
        {
            var str = $.trim("  陶攀峰   ");
            console.log(str);// "陶攀峰"
        }

        {
            var person = {name: "helicopter", age: 25}
            var str = $.param(person);
            console.log(str);// "name=helicopter&age=25"
        }

        {
            var arr = [1, 2, 3, 4, 5];
            var index = $.inArray(3, arr);
            console.log("元素下标为：" + index);// "元素下标为：2"    未找到返回-1
        }

        {
            var frontEnd = ["HTML", "CSS", "JavaScript"];
            var backEnd = ["PHP", "JSP", "ASP.NET"];
            var result = $.merge(frontEnd, backEnd);
            console.log(result);//  ['HTML', 'CSS', 'JavaScript', 'PHP', 'JSP', 'ASP.NET']
        }

        {
            function test() {
                var arr = $.makeArray(arguments);
                console.log(arr);// ['yes', 1, {…}]
            }

            test("yes", 1, {});
        }

        {
            var arr = $.makeArray($("li"));
            $("ul").html(arr.reverse());// 反转
        }

        {
            var arr = [3, 9, 1, 12, 50, 21];
            var result = $.grep(arr, function (value, index) {
                return value > 10 && index > 3;
            }, false);
            console.log(result);// [50, 21]
        }

        {
            // 求两个数组交集
            var a = [3, 9, 1, 12, 50, 21];
            var b = [2, 9, 1, 16, 50, 32];
            var result = $.grep(a, function (value, index) {
                if (b.indexOf(value) >= 0) {
                    return true;
                }
            }, false);
            console.log(result);// [9, 1, 50]
        }

        {
            var arr = ["HTML", "CSS", "JavaScript"];
            $.each(arr, function (index, value) {
                // var result = "下标：" + index + "，值：" + arr[index];
                var result = "下标：" + index + "，值：" + value;// 二者等同
                console.log(result);
                // 下标：0，值：HTML
                // 下标：1，值：CSS
                // 下标：2，值：JavaScript
            })
        }

        {
            var arr = ["HTML", "CSS", "JavaScript"];
            $.each(arr, function (index, value) {
                var result = value.split("").reverse().join("");
                arr[index] = result;
            })
            console.log(arr);// ['LMTH', 'SSC', 'tpircSavaJ']
        }

        {
            var person = {name: "helicopter", age: 25, hobby: "swimming"};
            $.each(person, function (key, value) {
                // console.log("key=" + key + ", value=" + person[key]);
                console.log("key=" + key + ", value=" + value);// 二者等同
                // key=name, value=helicopter
                // key=age, value=25
                // key=hobby, value=swimming
            })
        }

        // 检查变量是否为函数
        {
            var fn = function () {
            };
            console.log($.isFunction(fn));// true
        }

        // 检查变量是否为数组
        {
            var a = ["HTML", "CSS", "JavaScript"];
            console.log($.isArray(a));    //true 
            var b = {name: "helicopter", age: 25};
            console.log($.isArray(b));    //false 
        }

        // 原生JavaScript判断是否为数组
        {
            function isArr(o) {
                return Object.prototype.toString.call(o) == "[object Array]";
            }

            var a = ["HTML", "CSS", "JavaScript"];
            console.log("isArr a=" + isArr(a));    // isArr a=true
            var b = {name: "helicopter", age: 25};
            console.log("isArr b=" + isArr(b));    // isArr b=false
        }

        // 检测变量是否为空对象
        {
            var a = {};
            var b = {
                name: "helicopter",
                age: 25,
                hobby: "swimming"
            };
            var c = null;
            var d;
            var e = [];
            var f = [null];
            console.log($.isEmptyObject(a));    //true 
            console.log($.isEmptyObject(b));    //false 
            console.log($.isEmptyObject(c));    //true 
            console.log($.isEmptyObject(d));    //true 
            console.log($.isEmptyObject(e));    //true 
            console.log($.isEmptyObject(f));    //false 
            console.log("-----------------");
        }

        // 检测变量是否为原始对象
        {
            console.log("检测变量是否为原始对象");
            var person = {
                name: "helicopter",
                age: 25,
                hobby: "swimming"
            };
            console.log($.isPlainObject(person));    //true 

            function Box(width, height) {
                this.width = width;
                this.height = height;
            }

            var box = new Box(100, 100);
            console.log($.isPlainObject(box));      //false 
        }

        // 检测一个节点是否包含另一个节点
        {
            console.log("检测一个节点是否包含另一个节点");
            var oDiv = $("div");
            var oStrong = $("strong");
            console.log($.contains(oDiv, oStrong));      //false

            // 两个参数需要为DOM对象，而不能为jQuery对象

            var oDiv2 = document.getElementsByTagName("div")[0];
            var oStrong2 = document.getElementsByTagName("strong")[0];
            console.log($.contains(oDiv2, oStrong2));     //true 
        }
    })

    {
        (function ($) {
            $.extend({
                "maxNum": function (m, n) {
                    return (m > n) ? m : n;
                }
            });
        })(jQuery);
        $(function () {
            // 对于自定义的工具函数，我们需要在前面加上“$.”，以表示这是属于jQuery对象下的一个函数。
            var result = $.maxNum(10, 5)
            console.log("最大值是：" + result);// 最大值是：10
        })
    }
</script>
<body>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>

<div>
    <strong>绿叶学习网</strong>
</div>

</body>
</html>

jQuery插件简介

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">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        一个jQuery插件，使用jQuery来封装的一个功能或特效。
        
        一般来说，每一个jQuery插件都是放到独立的一个文件中的。
        我们常说的引入一个jQuery插件，其实就是引入一个外部JavaScript文件。

    语法
        <script src="jquery-1.12.4.min.js"></script>
        <script src="jquery.[插件名].min.js"></script> 
        
    说明
        引入的jQuery插件必须要放到jQuery库文件的下面，不然jQuery插件就无法生效。
        道理很简单，因为jQuery插件就是使用jQuery的语法来编写的。
        （2023-06-15 14:55:13 原来如此，怪不得我 color插件引入失败了呢。）
        
    错误用法
        <script src="jquery.[插件名].min.js"></script>
        <script src="jquery-1.12.4.min.js"></script> 
        
    总结
        jQuery插件的特点
            ·一个jQuery插件，就是一个外部JavaScript文件。
            ·jQuery插件，可以看成是别人封装好的一个功能，与函数一样，只需要调用就可以了，不需要自己去写内部逻辑。
    -->
</head>
<script>
    $(function () {

    })
</script>
<body>

</body>
</html>

文本溢出 dotdotdot

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1 {
            width: 200px;
            height: 100px;
            padding: 10px;
            font-family: "微软雅黑";
            line-height: 20px;
            text-indent: 2em;
            border: 1px solid silver;
        }

        #div2 {
            width: 200px;
            height: 100px;
            padding: 10px;
            font-family: "微软雅黑";
            line-height: 20px;
            text-indent: 2em;
            border: 1px solid silver;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jQuery.dotdotdot/4.1.0/dotdotdot.min.js"></script>
    <!--
12.2.1 文本溢出：dotdotdot.js
        
        学过HTML5+CSS3的小伙伴都知道，我们可以使用以下功能代码来实现文本溢出时显示省略号的效果。
            overflow:hidden;
            white-space:nowrap; 
            text-overflow:ellipsis;  
            
        但是这个功能代码只能实现“单行文本”的省略号效果，并不能用来实现“多行文本”的省略号效果。
        如果想要实现“多行文本”的省略号效果，我们可以使用dotdotdot.js这个jQuery插件。
        
        dotdotdot.js的使用方法非常简单：首先为元素定义宽度和高度，然后针对该元素使用dotdotdot()这个方法就可以了。
        当内容超出元素的宽度和高度时，就会以省略号的形式来显示。
        dotdotdot.js官方地址为http://plugins.jquery.com/dotdotdot/。
   
    -->
</head>
<script>
    $(function () {
        $("#div1").dotdotdot();


        var div = $("#div2");
        var originalText = div.text();
        var originalHeight = div.height();
        var checkOverflow = function () {
            if (div.height() > originalHeight) {
                div.text(originalText + "...");
            }
        };
        checkOverflow();
        $(window).resize(checkOverflow);
    })
</script>
<body>

<div id="div1">
    绿叶学习网成立于2015年4月1日，是一个富有活力的Web技术学习网站。在这里，我们只提供互联网专业的Web技术教程和愉悦的学习体验。每一个教程、每一篇文章甚至每一个知识点，都体现绿叶精益求精的态度。没有最好，但是我们可以做到更好！
</div>

<hr>

<div id="div2">
    绿叶学习网成立于2015年4月1日，是一个富有活力的Web技术学习网站。在这里，我们只提供互联网专业的Web技术教程和愉悦的学习体验。每一个教程、每一篇文章甚至每一个知识点，都体现绿叶精益求精的态度。没有最好，但是我们可以做到更好！
</div>

</body>
</html>

延迟加载 lazyload

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div {
            height: 800px;
            background-color: lightskyblue;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
    <!--
12.2.2 延迟加载：lazyload.js
        
        图片延迟加载，又叫“图片懒加载”。怎么个懒法呢？
        简单来说，就是你不想看就不显示给你看，页面也就懒得把图片加载出来。
        
        例如进入某个页面时，页面上会有很多图片，有些图片在下面，当我们没有看完整个页面时，
        那么下面的图片对我们来说就是“没用”的，加载了也是白加载，而且还会降低页面整体的加载速度。
        
        在jQuery中，我们可以使用lazyload.js这个插件来实现图片的延迟加载。
        也就是只有当我们把滚动条拉到某个位置，相应处的图片才会显示出来，否则就不会显示。
        
        lazyload.js的使用很简单，需要以下3步。
            1 引入jQuery库和lazyload.js插件
                <script src="js/jquery-1.12.4.min.js"></script>
                <script src="js/jquery.lazyload.min.js"></script> 
            2 图片的src用data-original代替
                <img class="lazy" data-original="img/仓鼠.jpg" alt=""> 
            3 添加jQuery代码
                $().lazyload({
                    effect: "fadeIn" 
                }); 
            
            
        还没拖动滚动条的时候，其实图片是没有加载的，因为没有src属性。我们从控制台中可以看出来
        
        文档地址如下。
            ·中文文档：http://code.ciaoca.com/jquery/lazyload。
            ·github文档：https://github.com/tuupola/jquery_lazyload。
    -->
</head>
<script>
    $(function () {
        for (var i = 0; i < 100; i++) {
            $('<img data-original="img/仓鼠.jpg" alt="">').insertAfter("div");
            $('<br>').insertAfter("div");
        }
        // 懒加载，效果 => 淡入
        // 还没拖动滚动条的时候，其实图片是没有加载的，因为没有src属性。我们从控制台中可以看出来
        $("img").lazyload({
            effect: "fadeIn"
        });
    })
</script>
<body>

<div></div>


</body>
</html>

复制粘贴 zclip

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--<script src="https://cdn.bootcdn.net/ajax/libs/zclip/1.1.2/jquery.zclip.min.js"></script>-->
    <!--
12.2.3 复制粘贴：zclip.js
        
        只需两步
            1 引入jQuery库和lazyload.js插件
                <script src="js/jquery-1.12.4.min.js"></script>
                <script src="js/jquery.zclip.min.js"></script> 
            2 添加jQuery代码
                $().zclip({
                    path:"swf文件路径", 
                    //复制内容 
                    copy:function(){ 
                        return xxx; 
                    }, 
                    //复制成功后的操作 
                    afterCopy:function(){ 
                        …… 
                    } 
                }) 
            
            
        zclip.js插件的github地址为 https://github.com/patricklodder/jquery-zclip。
        
        ------------------------------------------------------------------------------
        
        2023-06-15 15:55:28 我询问chatGPT，为什么我的不可以，他回答说：
            在您提供的代码中，您想要实现使用zclip.js插件进行复制粘贴操作。
            看起来代码中引入了必要的jQuery库和zclip.js插件，并在按钮点击事件中调用了zclip函数。
    
            但是，我注意到您的代码中使用的是旧版本的zclip.js插件（1.1.2），它使用了ZeroClipboard.swf文件。
            自2015年起，Flash已经被许多主流浏览器废弃，因此这种方式可能不再有效。
    
            为了实现复制粘贴功能，您可以尝试使用更现代的方法，如使用Clipboard API或使用更新的复制库，例如clipboard.js。
    
            以下是使用Clipboard API的示例代码：
    -->
</head>
<script>
    $(function () {
        // $("#btn").zclip({
        //     path: "https://cdn.bootcdn.net/ajax/libs/zclip/1.1.2/ZeroClipboard.swf",
        //     copy: function () {
        //         return $("#txt").val()
        //     },
        //     afterCopy: function () {
        //         alert("复制成功")
        //     }
        // })

        $("#btn").on("click", function () {
            var textToCopy = $("#txt").val();
            navigator.clipboard.writeText(textToCopy)
                .then(function () {
                    alert("复制成功");
                })
                .catch(function (error) {
                    console.error("复制失败:", error);
                });
        });
    })
</script>
<body>

<input id="txt" type="text"/>
<input id="btn" type="button" value="复制">

</body>
</html>

表单验证 validate

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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.19.5/localization/messages_zh.min.js"></script>
    <!--
12.2.4 表单验证：validate.js
        
        只需两步
            1 引入jQuery库、validate.js插件以及message_zh.js插件
                <script src="js/jquery-1.12.4.min.js"></script>
                <script src="js/jquery.validate.min.js"></script> 
                <script src="js/jquery.message_zh.min.js"></script> 
            2 添加jQuery代码
                $().validate({
                    //自定义验证规则 
                    rules:{ 
                        …… 
                    } 
                }) 
            
            
        validate.js插件的参数非常多，使用也非常灵活。
        小伙伴们可以到官网的validate插件板块查看，网址为http://plugins.jquery.com/validate/。
    -->
</head>
<script>
    $(function () {
        $("#myform").validate({
            //自定义验证规则 
            rules: {
                myname: {required: true, maxlength: 6},
                myemail: {required: true, email: true}
            }
        })
    })
</script>
<body>

<form id="myform" method="post">
    <p><label>账号：<input id="myname" name="myname" type="text" required/></label></p>
    <p><label>邮箱：<input id="myemail" name="myemail" type="email" required/></label></p>
    <input type="submit" value="提交">
</form>

</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
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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
12.3.1 方法类插件
        二者等同
                $.fn.extend({
                    "插件名":function(参数){ 
                        …… 
                    } 
                }) 
                
                $.fn.插件名 = function(参数){
                    …… 
                } 
        
        同时封装多个jQuery插件
                (function($){
                    $.fn.extend({ 
                        "插件1": function(参数){ 
                            …… 
                        }, 
                        "插件2": function(参数){ 
                            …… 
                        }
                    }); 
                })(jQuery); 

12.3.2 函数类插件

            (function($){
                $.extend({ 
                    "插件名": function(){ 
                        …… 
                    } 
                }); 
            })(jQuery) 
            
            函数类插件的语法与方法类插件的语法差不多，仅仅是把$.fn.extend()换成了$.extend()。
            


总结
        方法类插件
                定义 $.fn.extend
                使用 $(selector).插件名
        
        函数类插件
                定义 $.extend
                使用 $(selector).插件名
        
        
        ·插件的文件命名必须严格按照jquery.[插件名].js 或 jquery.[插件名].min.js的格式。
        
        ·在插件的最后必须使用return $(this)来返回当前的jQuery对象，以便保持链式调用的功能。
        
        ·无论是哪一种插件，定义的结尾都必须以分号结束，否则文件被压缩后，可能会出现错误。
        
        ·方法类插件使用的是$.fn.extend()方法，而函数类插件使用的是$.extend()方法。
         我们常说的jQuery插件，指的都是方法类插件。
         
        ·$.extend()方法是在jQuery全局对象上扩展一个方法，而$.fn.extend()方法是在选择器上扩展一个方法。
         因此定义工具函数应该用$.extend()方法，而定义jQuery插件应该用$.fn.extend()方法。
    -->
</head>
<!--举例1：插件定义、简写-->
<script>
    /*(function () {
        $.fn.extend({
            "changeColor": function (fgcolor, bgcolor) {
                //定义鼠标指针移入移出效果 
                $(this).mouseover(function () {
                    $(this).css({"color": fgcolor, "background": bgcolor});
                }).mouseout(function () {
                    $(this).css({"color": "black", "background": "white"});
                });
                //返回jQuery对象，以便链式调用 
                return $(this);
            }
        })
    })(jQuery);*/
    //定义插件 => 插件名为“changeColor”，有两个参数：fgcolor、bgcolor 
    (function () {
        $.fn.changeColor = function (fgcolor, bgcolor) {
            //定义鼠标指针移入移出效果 
            $(this).mouseover(function () {
                $(this).css({"color": fgcolor, "background": bgcolor});
            }).mouseout(function () {
                $(this).css({"color": "black", "background": "white"});
            });
            //返回jQuery对象，以便链式调用 
            return $(this);
        }
    })(jQuery);

    //调用插件 
    $(function () {
        $("h1").changeColor("red", "#F1F1F1")
    })
</script>

<!--举例2：优化传参-->
<script>
    //定义插件 
    (function () {
        $.fn.extend({
            "color": function (options) {
                $(this).mouseover(function () {
                    $(this).css({"color": options.fgcolor, "background": options.bgcolor});
                }).mouseout(function () {
                    $(this).css({"color": "black", "background": "white"});
                });

                return $(this);
            }
        })
    })(jQuery);

    //调用插件 
    $(function () {
        $("h2").color({fgcolor: "red", bgcolor: "#F1F1F1"});
    })
</script>

<!--举例3：设置参数的默认值-->
<script>
    //定义插件 
    (function () {
        $.fn.extend({
            "color": function (options) {
                //设置参数的默认值 
                var defaults = {
                    fgcolor: "hotpink",
                    bgcolor: "lightskyblue"
                };
                var options = $.extend(defaults, options);

                $(this).mouseover(function () {
                    $(this).css({"color": options.fgcolor, "background": options.bgcolor});
                }).mouseout(function () {
                    $(this).css({"color": "black", "background": "white"});
                });

                return $(this);
            }
        })
    })(jQuery);

    //调用插件 
    $(function () {
        $("h3").color();
    })
</script>

<!--举例4：函数类插件-->
<script>
    (function ($) {
        $.extend({
            "maxNum": function (m, n) {
                return (m > n) ? m : n;
            }
        });
    })(jQuery)
    $(function () {
        var result = $.maxNum(10, 5)
        console.log("最大值是：" + result);// 最大值是：10
    })
</script>
<body>

<h1>绿叶学习网</h1>

<hr>

<h2>绿叶学习网</h2>

<hr>

<h3>绿叶学习网</h3>

</body>
</html>

Ajax简介

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
13.2 Ajax简介
        Ajax，全称“Asynchronous JavaScript and XML”，即“异步的JavaScript和XML”。
        其核心是通过JavaScript的XMLHttpRequest对象，以一种异步的方式，向服务器发送数据请求，
        并且通过该对象接收请求返回的数据，从而实现客户端与服务器端的数据操作。
        
        如果没有采用Ajax技术，前端页面更新后端返回来的数据时，整个页面都会被刷新。
        也就是说，凡是想要在前端页面显示后端返回来的信息，都要刷新“整个页面”。
        但若使用Ajax技术，我们只需要刷新登录栏目那一部分即可，其他部分都不用刷新。
        
        Ajax其实非常简单。对于Ajax，可以用一句话概括：
            Ajax能够刷新指定的页面区域，而不是刷新整个页面，
            从而减少客户端和服务端之间传输的数据量，提高页面速度，使得用户体验更好。
    -->
</head>
<script>
    $(function () {

    })
</script>
<body>

</body>
</html>

ajax

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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
13.8 $.ajax()方法
        
        load()方法、$.getJSON()方法、$.get()方法、$.post()方法。
        事实上，这几种方法从本质上来说都是使用$.ajax()方法来实现的。
        
        $.ajax(options)     
            url	        被加载的页面地址
            type	    数据请求方式，“get"或"post”，默认为"get"
            data	    发送到服务器的数据，可以是字符串或对象
            dataType	服务器返回数据的类型，如：text、html、script、json、xml
            beforeSend	发送请求前可以修改XMLHttpRequest对象的函数
            complete	请求“完成”后的回调函数
            success	    请求“成功”后的回调函数
            error	    请求“失败”后的回调函数
            timeout	    请求超时的时间，单位为“毫秒”
            global	    是否响应全局事件，默认为true（即响应）
            async	    是否为异步请求，默认为true（即异步）
            cache	    是否进行页面缓存，true表示缓存，false表示不缓存
    -->
</head>
<script>
    $(function () {
        // 2023-06-15 18:16:53
        // CORS error 跨域错误，我不知道怎么解决。
        // SpringBoot 也允许了
        $.get({
            url: 'http://10.11.12.232:18002/messageUserRel/selectUserLatestMessages',
            headers: {
                'X-Change-Data-Source': 'hotjet',
                'X-User-Id': 'U202207192105390120'
            },
            data: {
                count: 5
            },
            success: function (response) {
                // 请求成功时的处理
                console.log(response);
            },
            error: function (xhr, status, error) {
                // 请求失败时的处理
                console.log("失败");
            }
        });
    })
</script>
<body>

</body>
</html>

index

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</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .title {
            list-style-type: none;
            overflow: hidden;
        }

        .title li {
            float: left;
            width: 100px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            color: white;
            cursor: pointer;
        }

        .title li:nth-child(1) {
            background-color: hotpink;
        }

        .title li:nth-child(2) {
            background-color: lightskyblue;
        }

        .title li:nth-child(3) {
            background-color: purple;
        }

        .content {
            width: 298px;
            border: 1px solid gray;
        }

        .content li {
            display: none;
        }

        li.current {
            display: block;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
            $().index() 
            
            当前元素相对于父元素的索引值。
            索引值是从0开始而不是从1开始的。
    -->
</head>
<script>
    $(function () {
        // $().index() 
        {
            $("#ul1 li").click(function () {
                var index = $(this).index();
                alert("当前元素的索引是：" + index);// 索引值是从0开始而不是从1开始的
            })
        }

        // 举例2：Tab选项卡
        {
            $(".title li").click(function () {
                var n = $(this).index();
                $(".content li").removeClass("current").eq(n).addClass("current");
            })
        }
    })
</script>
<body>

<ul id="ul1">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>

<hr>

<div class="wrapper">
    <ul class="title">
        <li>娱乐</li>
        <li>经济</li>
        <li>军事</li>
    </ul>
    <ul class="content">
        <li class="current">这是“娱乐”栏目<br/>这是“娱乐”栏目<br/>这是“娱乐”栏目</li>
        <li>这是“经济”栏目<br>这是“经济”栏目<br/>这是“经济”栏目</li>
        <li>这是“军事”栏目<br/>这是“军事”栏目<br/>这是“军事”栏目</li>
    </ul>
</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
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="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
    
case 1
            $("div").mouseover(function(){
                $(this).css("color", "red"); 
            }) 
            $("div").mouseout(function () { 
                $(this).css("color", "black"); 
            }) 
            
                ↓↓↓↓↓↓↓↓
            
            $("div").mouseover(function(){
                $(this).css("color", "red"); 
            }).mouseout(function () { 
                $(this).css("color", "black"); 
            }) 

case 2
            $(this).parent().css("background-color", "silver") 
            
case 3
            $(".content li")
              .removeClass("current") 
              .eq(n) 
              .addClass("current"); 
    -->
</head>
<script>
    $(function () {
    
    })
</script>
<body>

</body>
</html>

jQuery 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 lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
        jQuery对象和DOM对象是完全不一样的



        举例1：innerText
                //方法1：使用jQuery
                $("div").text("绿叶学习网") 
                 
                //方法2：使用DOM 
                var oDiv = document.getElementsByTagName("div")[0]; 
                oDiv.innerText="绿叶学习网"; 
        
        jQuery => DOM
                $()[index]
                $().get(index)    同上
                $().get()         获取第一个
    -->
</head>
<script>
    $(function () {
    
    })
</script>
<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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!--
    
            《从0到1：HTML+CSS快速上手》
                →《从0到1：CSS进阶之旅》
                    →《从0到1：JavaScript快速上手》
                        →《从0到1：jQuery快速上手》
                            →《从0到1：HTML5+CSS3修炼之道》
                                →《从0到1：HTML5 Canvas动画开发》
                                    →未完待续
                                    
            ![附录A DOM操作方法](https://img-blog.csdnimg.cn/f5ecbb8ac710424cbf2c281f3d059c89.png)
            ![附录B 常见的事件](https://img-blog.csdnimg.cn/869c57d9111d4bba9034073b7e4e0ebc.png)
            ![附录C 常见的动画](https://img-blog.csdnimg.cn/d50cb6e705a148f086eac8af03b8c926.png)
            ![附录D 过滤方法](https://img-blog.csdnimg.cn/367dbbf79d5c446e9af16abe90604184.png)
            ![附录E 查找方法](https://img-blog.csdnimg.cn/9c876880595c4ad89c3257bee62b6dd0.png)

            【日期标记】2023-06-15 18:50:42 以上同步完成
    -->
</head>
<script>
    $(function () {
    
    })
</script>
<body>

</body>
</html>