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. Node.js安装+环境配置【Windows版】

    Node.js安装及环境配置之Windows篇  一.安装环境 1.本机系统:Windows 10 Pro(64位)2.Node.js:v6.9.2LTS(64位) 二.安装Node.js步骤 1.下 ...

  2. position记录

    1.  relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身)位置进行定位.可通过z-index进行层次分级.均是以父级的左上角 ...

  3. SpringCloud核心教程 | 第三篇：服务注册与发现 Eureka篇

    Spring Cloud简介 Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中涉及的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全 ...

  4. thinkphp 整合 swiftmailer 实现邮件发送

    thinkphp swiftmailer(phpmailer) 文件夹结构 图 1 swiftmailer-phpmailer 将swiftmailer整合到thinkphp中.如上图 1 我下载的版 ...

  5. SICP 习题 （2.10）解题总结: 区间除法中除于零的问题

    SICP 习题 2.10 要求我们处理区间除法运算中除于零的问题. 题中讲到一个专业程序猿Ben Bitdiddle看了Alyssa的工作后提出了除于零的问题,大家留意一下这个叫Ben的人,后面会不断 ...

  6. diff命令具体解释

    diff命令參数: diff - 找出两个文件的不同点 总览 diff [选项] 源文件 目标文件 以下是 GNU所接受的 diff 的全部选项的概要. 大多数的选项有两个同样的名字,一个是单个的跟在 ...

  7. ajax中的POST和GET传值

    ajax中的POST和GET传值 转自:http://www.cnblogs.com/jtome/archive/2008/12/04/1347864.html Ajax中我们经常用到get和post ...

  8. GO语言学习（十九）Go 错误处理

    Go 错误处理 Go 语言通过内置的错误接口提供了非常简单的错误处理机制. error类型是一个接口类型,这是它的定义: type error interface { Error() string } ...

  9. P2P平台项目建设几点注意事项

    种选择 a.资金池,接入第三方支付,财付通,宝付等,比如一起好 b.第三方资金托管,易宝支付.汇付天下等 c.银行存管,资金放在银行 资金池政策风险,不得不考虑. 每一种模式,技术实现都有变化,需要考 ...

  10. DataTable +chart控件

    //这是仿你的DataTable //-----开始--------- DataTable dataTable1 = new System.Data.DataTable(); dataTable1.C ...