jquery-5 jQuery筛选选择器

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、代码

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

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
         .div1{
             background: #ccc;
             cursor: pointer;
         }
     </style>
     <script src="jquery.js"></script>
 </head>
 <body>
     <div class='div1'>
         <h1>aaaaaaaaaaaaaaaaaaa</h1>
         <h1>aaaaaaaaaaaaaaaaaaa</h1>
         <div class="div2">
             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
         </div>
     </div>
 </body>
 <script>
 $('.div1').click(function(){
     //使用筛选来实现
     $(this).children('h1').css({'color':'#00f'});
 });
 </script>
 </html>

siblings前后所有兄弟

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
     </style>
     <script src="jquery.js"></script>
 </head>
 <body>
     <h1>cccccccccccccccccccccc</h1>
     <h1>cccccccccccccccccccccc</h1>
     <div class='div1'>
         <h1>aaaaaaaaaaaaaaaaaaa</h1>
         <h1>aaaaaaaaaaaaaaaaaaa</h1>
         <div class="div2">
             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
         </div>
     </div>
     <h1>cccccccccccccccccccccc</h1>
     <h1>cccccccccccccccccccccc</h1>
 </body>
 <script>
 $('.div1').siblings().css({'color':'#00f'});
 </script>
 </html>

prevAll前面所有兄弟

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
     </style>
     <script src="jquery.js"></script>
 </head>
 <body>
     <h1>cccccccccccccccccccccc</h1>
     <h1>cccccccccccccccccccccc</h1>
     <h1>cccccccccccccccccccccc</h1>
     <h1>cccccccccccccccccccccc</h1>
     <div class='div1'>
         <h1>aaaaaaaaaaaaaaaaaaa</h1>
         <h1>aaaaaaaaaaaaaaaaaaa</h1>
         <div class="div2">
             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
         </div>
     </div>
 </body>
 <script>
 $('.div1').prevAll().css({'color':'#00f'});
 </script>
 </html>

nextAll后面所有兄弟

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
     </style>
     <script src="jquery.js"></script>
 </head>
 <body>
     <div class='div1'>
         <h1>aaaaaaaaaaaaaaaaaaa</h1>
         <h1>aaaaaaaaaaaaaaaaaaa</h1>
         <div class="div2">
             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
         </div>
     </div>
     <h1>cccccccccccccccccccccc</h1>
     <h1>cccccccccccccccccccccc</h1>
     <h1>cccccccccccccccccccccc</h1>
     <h1>cccccccccccccccccccccc</h1>
 </body>
 <script>
 // $('.div1').children('h1').css({'color':'#00f'});
 $('.div1').nextAll().css({'color':'#00f'});
 </script>
 </html>

find后代查找

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
     </style>
     <script src="jquery.js"></script>
 </head>
 <body>
     <div class='div1'>
         <h1>aaaaaaaaaaaaaaaaaaa</h1>
         <h1>aaaaaaaaaaaaaaaaaaa</h1>
         <div class="div2">
             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
         </div>
     </div>
 </body>
 <script>
 // $('.div1').children('h1').css({'color':'#00f'});
 $('.div1').find('h1').css({'color':'#00f'});
 </script>
 </html>

next关系查找

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
     </style>
     <script src="jquery.js"></script>
 </head>
 <body>
     <div>
         <div>
             <button>打小金</button>
         </div>
     </div>

     <div>
         <div>
             <div>
                 <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
                 <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
                 <h1>bbbbbbbbbbbbbbbbbbbbbb</h1>
                 <p>bbbbbbbbbbbbbbbbbbbbbbbbbb</p>
             </div>
         </div>
     </div>

 </body>
 <script>
 $('button').click(function(){
     $(this).parent().parent().next().children().children().children().css({'color':'#00f'});
 });
 </script>
 </html>

parent、prev、children关系查找

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
     </style>
     <script src="jquery.js"></script>
 </head>
 <body>
     <div>
         <div>
             <div>
                 <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
                 <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
                 <h1>bbbbbbbbbbbbbbbbbbbbbb</h1>
                 <p>bbbbbbbbbbbbbbbbbbbbbbbbbb</p>
             </div>
         </div>
     </div>

     <div>
         <div>
             <button>打小金</button>
         </div>
     </div>
 </body>
 <script>
 $('button').click(function(){
     $(this).parent().parent().prev().prev().children().children().children().css({'color':'#00f'});
 });
 </script>
 </html>

andSelf串联上自己

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
     </style>
     <script src="jquery.js"></script>
 </head>
 <body>
     <div>
         <h1>aaaaaaaaaaaaaaaaa</h1>
         <h1>aaaaaaaaaaaaaaaaa</h1>
     </div>
     <h1>bbbbbbbbbbbbbbbbbbb</h1>
 </body>
 <script>
 $('div').next().andSelf().css({'color':'#00f'});
 </script>
 </html>

add组合串联筛选

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
     </style>
     <script src="jquery.js"></script>
 </head>
 <body>
     <h1>00001</h1>
     <h1>00002</h1>
     <hr>
     <p>00003</p>
     <p>00004</p>
 </body>
 <script>
 $('h1').add('p').css({'color':'#00f'});
 </script>
 </html>

过滤筛选

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
     </style>
     <script src="jquery.js"></script>
 </head>
 <body>
     <h1>00001</h1>
     <h1>00002</h1>
     <h1>00003</h1>
     <h1>00004</h1>
     <h1>00005</h1>
 </body>
 <script>
 // $('h1').eq(0).css({'color':'#00f'});
 // $('h1').not($('h1').eq(0)).css({'color':'#00f'});
 // $('h1').first().css({'color':'#00f'});
 // $('h1').last().css({'color':'#00f'});
 $('h1').slice(1).css({'color':'#00f'});
 </script>
 </html>

checked找到所有被选中的人

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>index</title>
     <style>
         *{
             font-family: 微软雅黑;
         }
     </style>
     <script src="jquery.js"></script>
 </head>
 <body>
     <form action="">
         <p>选择爱好:</p>
         <p>
             <label>
                 <input type="checkbox" name="" id=""> 打篮球
             </label>
         </p>
         <p>
             <label>
                 <input type="checkbox" name="" id=""> 踢足球
             </label>
         </p>
         <p>
             <label>
                 <input type="checkbox" name="" id=""> 去游泳
             </label>
         </p>
         <p>
             <label>
                 <input type="checkbox" name="" id=""> 去游泳
             </label>
         </p>
         <p>
             <label>
                 <input type="checkbox" name="" id=""> 去游泳
             </label>
         </p>
         <p>
             <label>
                 <input type="checkbox" name="" id=""> 去游泳
             </label>
         </p>
         <p>
             <label>
                 <input type="checkbox" name="" id=""> 去游泳
             </label>
         </p>
         <p>
             <label>
                 <input type="checkbox" name="" id=""> 去游泳
             </label>
         </p>
     </form>
     <p>
         <button id='all'>全选</button>
         <button id='notall'>全不选</button>
         <button id='unall'>反选</button>
         <button id='ok'>ok</button>
     </p>
     <hr>
     <div class='info'>

     </div>
 </body>
 <script>
 $('#all').click(function(){
     $(':checkbox').attr({'checked':true});
 });

 $('#notall').click(function(){
     $(':checkbox').attr({'checked':false});
 });

 $('#unall').click(function(){
     $(':checkbox').each(function(){
         this.checked=!this.checked;
     });
 });

 $('#ok').click(function(){
     $(':checked').parent().parent().appendTo('.info');
 });
 </script>
 </html>