jquery-5 jQuery篩選選擇器

時間 2020-06-15

標籤 jquery 篩選選擇器欄目 JQuery 简体版

原文原文鏈接

jquery-5 jQuery篩選選擇器

1、總結

一句話總結：選擇器加動態添加方法能夠不用想方法名，這個簡單方便。

一、篩選選擇器有哪三種？

過濾查找串聯css

1.過濾

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

html

2.查找

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

jquery

3.串聯

add();
andSelf();app

二、篩選選擇器中的查找有哪幾種？

子代後代鄰接兄弟父親以前this

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

三、篩選選擇器中的過濾選擇器有哪五種？

索引第一個最後一個非片斷code

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

四、篩選選擇器串聯有哪兩種？

增長和增長本身htm

add();
andSelf();blog

五、選擇器和篩選的區別是什麼？

使用this的時候選擇器很差用，篩選比較好用

28 $('.div1').click(function(){ 29 //使用篩選來實現 30  $(this).children('h1').css({'color':'#00f'}); 31 });

六、jquery能夠鏈式操做麼？

能夠

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

七、多選框反選怎麼實現？

非checked屬性

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

八、多選框全選怎麼實現？

attr，checked屬性

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

2、jQuery篩選選擇器

一、相關知識

篩選:

1.過濾

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

2.查找

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

3.串聯

add();
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  .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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。