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. div+css制作表格

    html: <div class="table"> <h2 class="table-caption">花名册:</h2> ...

  2. activity 接回返回值

    activity 接回返回值 今天做订单列表显示 点击某一项显示订单详细信息,在详细activity中用户可以选择取消订单(未支付的状态下)当用户取消订单后订单列表也要改变状态,原来最初做法是所加载绑 ...

  3. Vue的学习--开始之前的思考

    1.前端后端的思考,到底前端做什么工作 有关前端后端工作的区分,曾经有个朋友告诉我:web开发过程,前端负责从将数据从数据接口提取到前端.路由转换.前端交互展示等等所有工作,后端负责处理数据库里面的数 ...

  4. 22. Spring Boot 动态数据源（多数据源自动切换）

    转自:https://blog.csdn.net/catoop/article/details/50575038

  5. Android LruCache类分析

    public class LurCache<K, V> { private final LinkedHashMap<K, V> map; private int size; / ...

  6. 【CS Round #43 A】Expected Dice

    [链接]https://csacademy.com/contest/round-43/task/expected-dice/ [题意] 大水题 [题解] 把36种可能的结果都存下来. 然后把重复出现的 ...

  7. Java 学习（17）： Java 泛型

    Java 泛型 Java 泛型(generics)是 JDK 5 中引入的一个新特性, 泛型提供了编译时类型安全检测机制,该机制允许程序员在编译时检测到非法的类型. 泛型的本质是参数化类型,也就是说将 ...

  8. 8.Swift教程翻译系列——控制流之条件

    3.条件语句 常常会须要依据不同的情况来运行不同的代码. 你可能想要在错误发生的时候运行一段额外的代码,或者当某个值变得太高或者太低的时候给他输出出来.要实现这些需求,你能够使用条件分支. Swift ...

  9. Altium Designer中Electrical Type的意思

    :之前Altium Designer设计图时发现: 它的引脚上有两个三角 双击打开引脚,打开配置: 于是从网上查了一下:http://blog.csdn.net/jbb0523/article/det ...

  10. （转）30 IMP-00019: row rejected due to ORACLE error 12899

    IMP: row rejected due IMP: ORACLE error encountered ORA: value too large , maximum: )导入日志报 IMP: 由于 O ...