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>
 
 
 
 

jquery-5 jQuery筛选选择器的更多相关文章

  1. jquery 子元素筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  2. jQuery的筛选选择器

    基本筛选选择器 很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素.筛选选择器很多都不是CSS的规范,而是jQu ...

  3. Jquery | 基础 | 慕课网 | 基本筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  4. jQuery选择器之表单对象属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  5. jQuery选择器之属性筛选选择器

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型 ...

  6. jquery 表单对象属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  7. jquery 属性筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  8. jquery 内容筛选选择器

    基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤,jQuery也提供了一组内容筛选选择器,当然其规则也会体现在它所包含的子元素或者文本内容上 注意事项: :contains与:has都 ...

  9. 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件

    jQuery简介 宗旨:Write less, do more. 内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器 版本:1.x 2.x 3.x # 可以使用3.x最新版 是第三方的类库:使 ...

随机推荐

  1. String类型转Long类型需要注意的问题

    转自:https://blog.csdn.net/m819177045/article/details/52669785/

  2. 71.sscanf数据挖掘

    数据挖掘 sscanf(str, "%d %s %s %d %d %s %s %s", &ph[i].id, ph[i].name, ph[i].sex, &ph[ ...

  3. Codeforces Round #195 (Div. 2) 少部分题解

    太困了于是没做...第二天看题蘑菇题居多就只切了简单的两个... A:直接输出... int main() { //FIN; //FOUT; int x,y; cin>>x>> ...

  4. 用两个栈实现队列与用两个队列实现栈（Python实现）

    用两个栈实现队列: class QueueWithTwoStacks(object): def __init__(self): self._stack1 = [] self._stack2 = [] ...

  5. redirect_uri 参数错误

    http://www.cnblogs.com/zitjubiz/p/5935712.html http://blog.csdn.net/u014033756/article/details/52038 ...

  6. OSX: 逻辑卷管理系统Core Storage(1)

    Mac高大上嘛? Mac由于贵就高大上了?Mac由于没有这个哪个就不高大上了?本文没有结论,仅仅是回归技术本源,是不是高大上还要大家自己评说. 大多数Mac用户可能并不在乎苹果的OS X操作系统缺少一 ...

  7. POJ1308——Is It A Tree?

    Is It A Tree? Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 22631   Accepted: 7756 De ...

  8. Java – Reading a Large File Efficiently--转

    原文地址:http://www.baeldung.com/java-read-lines-large-file 1. Overview This tutorial will show how to r ...

  9. Redis原理（二）

    运维 快照使用子进程是通过一个子进程完成, 它会比较的浪费资源的操作. 1.遍历整个内存,会增加系统负担. 2.io操作,降低redis性能. 一般都是主备,备用的进行持久化. Redis 4.0混合 ...

  10. Css 显示删除条目效果

    样式设置