jquery-5 jQuery筛选选择器

一、总结

一句话总结：选择器加动态添加方法可以不用想方法名，这个简单方便。

1、筛选选择器有哪三种？

过滤查找串联

1.过滤

eq();
first();
last();
not();
slice();

2.查找

children();
find();
next();
nextAll();
parent();
prev();
prevAll();
siblings();

3.串联

add();
andSelf();

2、筛选选择器中的查找有哪几种？

子代后代邻接兄弟父亲之前

children();
find();
next();
nextAll();
parent();
prev();
prevAll();
siblings();

3、筛选选择器中的过滤选择器有哪五种？

索引第一个最后一个非片段

eq();
first();
last();
not();
slice();

4、筛选选择器串联有哪两种？

增加和增加自己

add();
andSelf();

5、选择器和筛选的区别是什么？

使用this的时候选择器不好用，筛选比较好用

28 $('.div1').click(function(){
29     //使用筛选来实现
30     $(this).children('h1').css({'color':'#00f'});
31 });

6、jquery可以链式操作么？

可以

33 $('button').click(function(){
34     $(this).parent().parent().next().children().children().children().css({'color':'#00f'});
35 });

7、多选框反选怎么实现？

非checked属性

77 $('#unall').click(function(){
78     $(':checkbox').each(function(){
79         this.checked=!this.checked;
80     });
81 });

8、多选框全选怎么实现？

attr，checked属性

69 $('#all').click(function(){
70     $(':checkbox').attr({'checked':true});
71 });

二、jQuery筛选选择器

1、相关知识

筛选:

1.过滤

eq();
first();
last();
not();
slice();

2.查找

children();
find();
next();
nextAll();
parent();
prev();
prevAll();
siblings();

3.串联

add();
andSelf();

2、代码

选择器和筛选的区别（这里用选择器不好实现）

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10         .div1{
11             background: #ccc;
12             cursor: pointer;
13         }
14     </style>
15     <script src="jquery.js"></script>
16 </head>
17 <body>
18     <div class='div1'>
19         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
20         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
21         <div class="div2">
22             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
23             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
24         </div>
25     </div>
26 </body>
27 <script>
28 $('.div1').click(function(){
29     //使用筛选来实现
30     $(this).children('h1').css({'color':'#00f'});
31 });
32 </script>
33 </html>

siblings前后所有兄弟

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <h1>cccccccccccccccccccccc</h1>
15     <h1>cccccccccccccccccccccc</h1>
16     <div class='div1'>
17         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
18         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
19         <div class="div2">
20             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
21             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
22         </div>
23     </div>
24     <h1>cccccccccccccccccccccc</h1>
25     <h1>cccccccccccccccccccccc</h1>
26 </body>
27 <script>
28 $('.div1').siblings().css({'color':'#00f'});
29 </script>
30 </html>

prevAll前面所有兄弟

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <h1>cccccccccccccccccccccc</h1>
15     <h1>cccccccccccccccccccccc</h1>
16     <h1>cccccccccccccccccccccc</h1>
17     <h1>cccccccccccccccccccccc</h1>
18     <div class='div1'>
19         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
20         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
21         <div class="div2">
22             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
23             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
24         </div>
25     </div>
26 </body>
27 <script>
28 $('.div1').prevAll().css({'color':'#00f'});
29 </script>
30 </html>

nextAll后面所有兄弟

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div class='div1'>
15         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
16         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
17         <div class="div2">
18             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
19             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
20         </div>
21     </div>
22     <h1>cccccccccccccccccccccc</h1>
23     <h1>cccccccccccccccccccccc</h1>
24     <h1>cccccccccccccccccccccc</h1>
25     <h1>cccccccccccccccccccccc</h1>
26 </body>
27 <script>
28 // $('.div1').children('h1').css({'color':'#00f'});
29 $('.div1').nextAll().css({'color':'#00f'});
30 </script>
31 </html>

find后代查找

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div class='div1'>
15         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
16         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
17         <div class="div2">
18             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
19             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
20         </div>
21     </div>
22 </body>
23 <script>
24 // $('.div1').children('h1').css({'color':'#00f'});
25 $('.div1').find('h1').css({'color':'#00f'});
26 </script>
27 </html>

next关系查找

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div>
15         <div>
16             <button>打小金</button>
17         </div>
18     </div>
19 
20     <div>
21         <div>
22             <div>
23                 <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
24                 <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
25                 <h1>bbbbbbbbbbbbbbbbbbbbbb</h1>
26                 <p>bbbbbbbbbbbbbbbbbbbbbbbbbb</p>
27             </div>
28         </div>
29     </div>
30 
31 </body>
32 <script>
33 $('button').click(function(){
34     $(this).parent().parent().next().children().children().children().css({'color':'#00f'});
35 });
36 </script>
37 </html>

parent、prev、children关系查找

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div>
15         <div>
16             <div>
17                 <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
18                 <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
19                 <h1>bbbbbbbbbbbbbbbbbbbbbb</h1>
20                 <p>bbbbbbbbbbbbbbbbbbbbbbbbbb</p>
21             </div>
22         </div>
23     </div>
24 
25     <div>
26         <div>
27             <button>打小金</button>
28         </div>
29     </div>
30 </body>
31 <script>
32 $('button').click(function(){
33     $(this).parent().parent().prev().prev().children().children().children().css({'color':'#00f'});
34 });
35 </script>
36 </html>

andSelf串联上自己

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div>
15         <h1>aaaaaaaaaaaaaaaaa</h1>
16         <h1>aaaaaaaaaaaaaaaaa</h1>
17     </div>
18     <h1>bbbbbbbbbbbbbbbbbbb</h1>
19 </body>
20 <script>
21 $('div').next().andSelf().css({'color':'#00f'});
22 </script>
23 </html>

add组合串联筛选

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <h1>00001</h1>
15     <h1>00002</h1>
16     <hr>
17     <p>00003</p>
18     <p>00004</p>
19 </body>
20 <script>
21 $('h1').add('p').css({'color':'#00f'});
22 </script>
23 </html>

过滤筛选

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <h1>00001</h1>
15     <h1>00002</h1>
16     <h1>00003</h1>
17     <h1>00004</h1>
18     <h1>00005</h1>
19 </body>
20 <script>
21 // $('h1').eq(0).css({'color':'#00f'});
22 // $('h1').not($('h1').eq(0)).css({'color':'#00f'});
23 // $('h1').first().css({'color':'#00f'});
24 // $('h1').last().css({'color':'#00f'});
25 $('h1').slice(1).css({'color':'#00f'});
26 </script>
27 </html>

checked找到所有被选中的人

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <form action="">
15         <p>选择爱好:</p>
16         <p>
17             <label>
18                 <input type="checkbox" name="" id=""> 打篮球
19             </label>
20         </p>
21         <p>
22             <label>
23                 <input type="checkbox" name="" id=""> 踢足球
24             </label>
25         </p>
26         <p>
27             <label>
28                 <input type="checkbox" name="" id=""> 去游泳
29             </label>
30         </p>
31         <p>
32             <label>
33                 <input type="checkbox" name="" id=""> 去游泳
34             </label>
35         </p>
36         <p>
37             <label>
38                 <input type="checkbox" name="" id=""> 去游泳
39             </label>
40         </p>
41         <p>
42             <label>
43                 <input type="checkbox" name="" id=""> 去游泳
44             </label>
45         </p>
46         <p>
47             <label>
48                 <input type="checkbox" name="" id=""> 去游泳
49             </label>
50         </p>
51         <p>
52             <label>
53                 <input type="checkbox" name="" id=""> 去游泳
54             </label>
55         </p>
56     </form>
57     <p>
58         <button id='all'>全选</button>
59         <button id='notall'>全不选</button>
60         <button id='unall'>反选</button>
61         <button id='ok'>ok</button>
62     </p>
63     <hr>
64     <div class='info'>
65             
66     </div>
67 </body>
68 <script>
69 $('#all').click(function(){
70     $(':checkbox').attr({'checked':true});
71 });
72 
73 $('#notall').click(function(){
74     $(':checkbox').attr({'checked':false});
75 });
76 
77 $('#unall').click(function(){
78     $(':checkbox').each(function(){
79         this.checked=!this.checked;
80     });
81 });
82 
83 $('#ok').click(function(){
84     $(':checked').parent().parent().appendTo('.info');
85 });
86 </script>
87 </html>