jQuery选择器

jQuery

jQuery选择器

1. 基础选择器

image-20230308232307201

2. 层级选择器

image-20230308232317142

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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
</head>

<body>
    <div>一个div</div>
    <div class="nav">一个nav类</div>
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
    <script>
        // $("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号 
        $(function () {
            console.log($(".nav"));
            console.log($("ul li"));//获取ul所有的li
        })
    </script>
</body>

</html>

3. 筛选选择器

3.1 介绍

image-20230308232356780

3.2 筛选选择

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">

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

<body>
    <ul>
        <li>我是ul</li>
        <li>我是ul</li>
        <li>我是ul</li>
        <li>我是ul</li>
    </ul>
    <ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>
    <script>
        $(function () {
            // 第一个元素
            $("ul li:first").css("color", "red");
            // 最后一个元素
            $("ul li:last").css("color", "red");
            // 根据索引选择元素，下标从0开始
            $("ul li:eq(2)").css("color", "blue");
            // 索引为奇数的元素
            $("ol li:odd").css("color", "skyblue");
            // 索引为偶数的元素
            $("ol li:even").css("color", "pink");
        })
    </script>
</body>

</html>

4. 节点选择器

4.1 介绍

image-20230308232735429

4.2 代码案例

4.21 父子孙

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">

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

<body>
    <div class="grandfather">
        爷爷
        <div class="dad">
            父亲
            <div class="son">儿子</div>
        </div>
    </div>
    <div class="nav">
        nav
        <p>p1</p>
        <div>
            div
            <p>p2</p>
        </div>
    </div>
    <script>
        $(function () {
            // 父亲 parent()，返回最近一级的父级元素
            console.log($('.son').parent());
            $('.son').parent().css('color','blue');

            // (1) 儿子 children('p')，相当于子代选择器ul>li,最近一级的子级
            $('.nav').children('p').css('background','brown');
            
            // (2) 可以选择里面所有的孩子，包括儿子和孙子 find()，类似于后代选择器
            $('.nav').find('p').css('background','green');
        })
    </script>
</body>

</html>

4.22 兄弟与第n个

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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
</head>

<body>
    <ol>
        <li>我是ol的li1</li>
        <li class="item">我是ol的li1</li>
        <li>我是ol的li1</li>
        <li>我是ol的li1</li>
    </ol>
    <ul>
        <li>我是ul的li1</li>
        <li class="item">我是ul的li1</li>
        <li>我是ul的li1</li>
        <li>我是ul的li1</li>
    </ul>
    <div class="current">current</div>
    <div>none</div>
    <script>
        $(function () {

            // 1.兄弟元素

            // 除了自己以外的兄弟元素 siblings() 
            $('ol .item').siblings('li').css('color', 'red')

            // 除了自己以外的以下兄弟元素 nextAll()
            $('ol .item').nextAll('li').css('background', 'blue')

            // 除了自己以外的以上兄弟元素 prevAll()
            $('ol .item').prevAll('li').css('background', 'green')

            // 2.第n个元素

            // (1)选择器
            $('ul li:eq(2)').css('color', 'red')
            // (2)选择器方法
            $('ul li').eq(0).css('color', 'red')

            // 3.判断是否有每个类名
            console.log($('ul li').eq(1).hasClass('item'));


        })
    </script>
</body>

</html>

4.3 下拉菜单案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            margin: 50px
        }

        ul {
            list-style: none;
        }

        ul li {
            float: left;
            text-align: center;

        }

        ul li a {
            display: block;
            width: 100px;
            padding: 10px 0;
            text-decoration: none;
            color: black;
        }

        ul li ul {
            display: none;
        }

        ul li ul li {
            float: none;
            width: 100px;
            padding: 10px 0;
            border: 1px solid rgb(244, 99, 3);
            box-sizing: border-box;
        }

        ul li ul li:hover {
            background-color: rgb(244, 99, 3);
            color: white;
        }

        ul li a:hover {
            color: white;
            background-color: grey;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="">微博</a>
            <ul>
                <li>text</li>
                <li>text</li>
                <li>text</li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul>
                <li>text</li>
                <li>text</li>
                <li>text</li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul>
                <li>text</li>
                <li>text</li>
                <li>text</li>
            </ul>
        </li>
        <li>
            <a href="">微博</a>
            <ul>
                <li>text</li>
                <li>text</li>
                <li>text</li>
            </ul>
        </li>
    </ul>
    <script>
        // 原生js
        // var ul = document.querySelector('.nav')
        // var list = ul.children
        // for (var i = 0; i < list.length; i++) {
        //     list[i].onmouseover = function () {
        //         this.children[1].style.display = 'block'
        //     }
        //     list[i].onmouseout = function () {
        //         this.children[1].style.display = 'none'
        //     }
        // }

        // jQuery
        $(function () {
            // 鼠标经过
            $('.nav li').mouseover(function () {
                // $(this) jquery当前元素 this不要加引号
                $(this).children('ul').show()
            })

            // 鼠标离开
            $('.nav li').mouseout(function () {
                // $(this) jquery当前元素 this不要加引号
                $(this).children('ul').hide()
            })
        })
    </script>
</body>

</html>

5. 知识铺垫

5.1 介绍

image-20230308233221217

5.2 排他思想案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">

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

<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
        // 原生js
        // var btns=document.querySelectorAll('button');
        // for(var i=0;i<btns.length;i++){
        //     btns[i].addEventListener('click',function(e){
        //         for(var j=0;j<btns.length;j++){
        //             btns[j].style.background=''
        //         }
        //         e.target.style.background='red'
        //         this.style.background='red'
        //     })
        // }

        // jquery
        $(function () {
            // 隐士迭代，给所有的按钮添加点击事件
            $('button').click(function () {
                $(this).css('color','red');
                $(this).siblings().css('color','');
            });
        })
        // jQuery 里面的排他思想
        // // 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
        // $(this).css(“color”,”red”);
        // $(this).siblings(). css(“color”,””);
    </script>
</body>

</html>

5.3 左右tab精品展示

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        a {
            color: black;
            text-decoration: none;
        }

        .container {
            width: 250px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
        }

        .left,
        .right {
            float: left;
        }

        .left li {
            background: url('./images/lili.jpg') repeat-x;
        }

        .left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }

        .left li a:hover {
            background-image: url('./images/abg(1).gif');
        }

        .right {    
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }

        .right>div{
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul class="left">
            <li><a href="">模块1</a></li>
            <li><a href="">模块2</a></li>
            <li><a href="">模块3</a></li>
            <li><a href="">模块4</a></li>
            <li><a href="">模块5</a></li>
            <li><a href="">模块6</a></li>
            <li><a href="">模块7</a></li>
            <li><a href="">模块8</a></li>
            <li><a href="">模块9</a></li>
        </ul>
        <div class="right">
            <div style="display: block;">
                <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
            </div>
        </div>
    </div>

    <script>
        // 原生js
        // var lis = document.querySelector('.left').children;
        // var divs = document.querySelector('.right').children;
        // for (var i = 0; i < lis.length; i++) {
        //     lis[i].setAttribute('index', i);
        //     lis[i].addEventListener('mouseover', function () {
        //         var index = this.getAttribute('index')
        //         for (var j = 0; j < lis.length; j++) {
        //             divs[j].style.display = 'none';
        //         }
        //         divs[index].style.display = 'block'
        //     })
        // }

        // jQuery
        $(function () {
            // 1.鼠标点击li
            $('.left li').mouseover(function () {      
                // 2.得到当前小li的索引号
                var index = $(this).index()
                // 3.让右边对应小li的索引号盒子显示
                // $('.right div').eq(index).show()
                // 4.其余兄弟元素隐藏
                // $('.right div').eq(index).siblings().hide()
                //链式编程
                $('.right div').eq(index).show().siblings().hide();

            })
        })
        // 思路分析:
        // 1.核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
        // 2.需要得到当前小li 的索引号，就可以显示对应索引号的图片
        // 3.jQuery 得到当前元素索引号 $(this).index()
        // 4.中间对应的图片，可以通过  eq(index) 方法去选择
        // 5.显示元素 show()   隐藏元素 hide()

        // jQuery 里面的排他思想
        // // 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
        // $(this).css(“color”,”red”);
        // $(this).siblings(). css(“color”,””);
    </script>
</body>

</html>

5.4 隐式迭代

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">

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

<body>
    <div>第个1div</div>
    <div>第个2div</div>
    <div>第个3div</div>
    <div>第个4div</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 原生js
        // var box = document.querySelectorAll('div');
        // for (var i = 0; i < box.length; i++) {
        //     box[i].style.background = 'purple'
        // }

        // jQuery
        $(function () {
            // 1.获取4个div元素
            $('div')
            console.log($('div'));

            // 2.给四个div元素设置背景色为紫色
            // jQuery 设置样式
            // $('div').css('属性', '值')  
            $('div').css('background', 'blue')

            // 3.隐式迭代
            // 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
            // 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
            $('ul>li').css('color','red');  // 页面中所有的div全部隐藏，不用循环操作
        });

    </script>
</body>

</html>

5.5 链式编程案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">

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

<body>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <button>button</button>
    <script>
        $(function () {
            // 隐式迭代
            $('button').click(function () {
                // 排他思想
                // $(this).css('background', 'red');
                // $(this).siblings().css('background', '');\

                // 链式编程  链式编程是为了节省代码量，看起来更优雅。
                // $(this).css('background', 'red').siblings().css('background', '');
                
                // 自己不变，操作兄弟元素
                // $(this).css('background', '').siblings().css('background', 'green');
                
                // 对兄弟的父级元素操作
                $(this).css('background', '').siblings().css('background', 'green').parent().css('background', 'black');

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

</html>

6. 样式操作

6.1 操作 css 方法

image-20230308233700684

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div>1232</div>
    <script>
        // 操作样式CSS
        $(function () {
            // jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。
            // 常用以下三种形式 : 

            // 1.参数只写属性名，则是返回属性值
            var strColor = $('div').css('background');
            console.log(strColor);

            // 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
            $('div').css('color', 'red');

            // 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
            $('div').css({ "color": "white", "font-size": "20px" });

            // 	注意：css() 多用于样式少时操作，多了则不太方便。
        })
    </script>
</body>

</html>

6.2 设置类样式方法

image-20230308233926665

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            transition: all 1s;
            margin: 200px auto;
        }

        .current {
            background-color: rgb(87, 2, 2);
            transform: rotateZ(360deg);
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        $(function () {
            // 作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
            // 常用的三种设置类样式方法：

            // 1.添加类
            $("div").addClass("current");//这个addClass相当于追加类名 不影响以前的类名

            // 2.删除类
            $("div").removeClass("current");

            // 3.切换类
            $("div").click(function () {
                $(this).toggleClass("current");
            })
        })
    </script>
</body>

</html>

6.3 tab栏案例

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 500px;
            height: 400px;
            margin: 100px auto;
        }

        ul {
            list-style: none;
            display: flex;
            justify-content: space-around;
            border: 1px solid gray;
            border-bottom: none;
            box-sizing: border-box;
        }

        ul li {
            text-align: center;
            padding: 20px 0;
            width: 100px;
            border-right: 1px solid gray;
            box-sizing: border-box;
            cursor: pointer;
        }

        .current{
            background-color: brown;
            color: white;
        }

        ul li:last-child {
            border-right: none;
        }

        .tab_content {
            width: 100%;
            height: 100%;
        }

        .tab_content>div {
            width: 100%;
            height: 100%;
            display: none;
            text-align: center;
            line-height: 400px;
            border: 1px solid gray;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul class="tab_list">
            <li class="current">模块1</li>
            <li>模块2</li>
            <li>模块3</li>
            <li>模块4</li>
            <li>模块5</li>
        </ul>
        <div class="tab_content">
            <div style="display: block;">模块1</div>
            <div>模块2</div>
            <div>模块3</div>
            <div>模块4</div>
            <div>模块5</div>
        </div>
    </div>
    <script>
        // 原生js
        // var tab_list=document.querySelector('.tab_list').children
        // var tab_content=document.querySelector('.tab_content').children
        // for(var i=0;i<tab_list.length;i++){
        //     tab_list[i].setAttribute('index',i)
        //     tab_list[i].addEventListener('click',function(){
        //         for(var j=0;j<tab_list.length;j++){
        //             tab_list[j].className=''
        //         }
        //         this.className='current'
        //         var index=this.getAttribute('index')
        //         for(var j=0;j<tab_content.length;j++){
        //             tab_content[j].style.display='none'
        //         }
        //         tab_content[index].style.display='block'
        //     })
        // }

        // jQuery
        $(function () {
            // 隐式迭代
            $('.tab_list li').click(function () {
                
                // 1.链式编程 点击上部的li，当前li 添加current类，其余兄弟移除类
                $(this).addClass('current').siblings().removeClass('current')

                // 2.点击的同时，得到当前li 的索引号
                var index=$(this).index()

                // 3.让下部里面相应索引号的item显示，其余的item隐藏
                $('.tab_content>div').eq(index).show().siblings().hide()
            })
        })
    </script>
</body>

</html>

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~