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. 43.c++指针类型转换

    数据类型转换(static_cast) //数据类型转换 printf("%d\n", static_cast<int>(10.2)); 指针类型转换(reinterp ...

  2. 洛谷 P1724 东风早谷苗

    洛谷 P1724 东风早谷苗 题目描述 在幻想乡,东风谷早苗是以高达控闻名的高中生宅巫女.某一天,早苗终于入手了最新款的钢达姆模型.作为最新的钢达姆,当然有了与以往不同的功能了,那就是它能够自动行走, ...

  3. pycharm快捷键、经常使用设置、配置管理

    http://blog.csdn.net/pipisorry/article/details/39909057 本博客一直在同步更新中! 内容包括:pycharm学习技巧 Learning tips. ...

  4. 用PHP 去掉所有html标签里的部分属性

    用PHP 去掉所有html标签里的部分属性 http://zhidao.baidu.com/question/418471924.html 用PHP 去掉所有html标签里的部分属性 tppabs & ...

  5. Android学习笔记之网络接口（Http接口，Apache接口，Android接口）

    目前Android平台有三种网络接口可以使用,他们分别是:Java.NET.*(标准Java接口),org.apache(Apache接口),和android.Net.*(android网络接口). ...

  6. 1.2 Use Cases中 Event Sourcing官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Event Sourcing 事件采集 Event sourcing is a st ...

  7. 1.1 Introduction中 Consumers官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Consumers 消费者(Consumers) Consumers label t ...

  8. nuxt使用QRCode.js 生成二维码

    QRCode.js 是一个用于生成二维码图片的插件, 官方文档 . 我是在nuxt.js(vue官方的服务端渲染方式)项目里使用的QRCode.js: 第一步:看官方文档: 第二步:下载QRCode. ...

  9. 【例题 7-6 UVA - 140】Bandwidth

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 暴力做就好. O(8!*26^2) [代码] /* 1.Shoud it use long long ? 2.Have you ev ...

  10. Android Material风格的应用(四)--FloatActionButton

    添加 FloatActionButton和SnackBar Android Material风格的应用(一)--AppBar TabLayoutAndroid Material风格的应用(二)--Re ...