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>