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. POJ Fence Repair(优先队列）

    Fence Repair Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 51346   Accepted: 16857 De ...

  2. JS 实现图片模态框，幻灯片，跑马灯功能

    网站中常用的幻灯片和模态框,使用 HTML.JavaScript 与 CSS 来创建 Lightbox,类似相册预览功能.可以运用到视频网站,商城,相册上去 参考了菜鸟教程,有兴趣自己去看 HTML/ ...

  3. android通用JSON解析

    ackage cn.com.pcgroup.<a href="http://lib.csdn.net/base/15" class="replace_word&qu ...

  4. libiconv 支持的编码

    libiconv 支持的编码 php 中的 iconv() 函数常用来作编码转换用.作一些不同编码的动态数据的转换时常遇到一些未知编码的数据,这时 iconv() 支持那些编码转换就很重要. 刚开始, ...

  5. web前端背景介绍

    Internet:是一个全球性的计算机互联网络,中文名称“因特网”.“国际互联网”.“网际网”等等: Internet提供的服务:http.ftp.Telnet.email.www.bbs等等: 基本 ...

  6. 关于laravel框架分页报错的问题

    因为laravel框架有自己的分页封装,所以与其他框架相比laravel框架的分页的实现要方便的多 只要分别在php脚本与视图中使用 $data=DB::table('index_pic')-> ...

  7. 小贝_redis web管理界面工具安装

    RedisWEB管理界面工具安装 一.概述 二.文件下载 三.安装过程 一.概述 1.因为redis是基于C/S的方式开发.也就是说,仅仅要满足于redis的client通信要求的,都能够作为redi ...

  8. amazeui学习笔记--css（HTML元素1）--按钮Button

    amazeui学习笔记--css(HTML元素1)--按钮Button 一.总结 1.button的基本使用:a.am-btn 在要应用按钮样式的元素上添加 .am-btn,b.颜色 再设置相应的颜色 ...

  9. QWaitCondition 的正确使用方法（通过 mutex 把有严格时序要求的代码保护起来，同时把 wakeAll() 也用同一个 mutex 保护起来）

    简单用法 QWaitCondition 用于多线程的同步,一个线程调用QWaitCondition::wait() 阻塞等待,直到另一个线程调用QWaitCondition::wake() 唤醒才继续 ...

  10. Asp.NETCore让FromServices回来

    起因 这两天,我忽然有点怀念 Asp.NET MVC 5 之前的时代,原因是我看到项目里面有这么一段代码(其实不止一段,几乎每个 Controller 都是) [Route("home&qu ...