当前位置： 首页 > news >正文

jquery-5 jQuery筛选选择器

news 来源：原创 2024/5/17 8:47:40

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、代码

选择器和筛选的区别（这里用选择器不好实现）

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10         .div1{
11             background: #ccc;
12             cursor: pointer;
13         }
14     </style>
15     <script src="jquery.js"></script>
16 </head>
17 <body>
18     <div class='div1'>
19         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
20         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
21         <div class="div2">
22             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
23             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
24         </div>
25     </div>
26 </body>
27 <script>
28 $('.div1').click(function(){
29     //使用筛选来实现
30     $(this).children('h1').css({'color':'#00f'});
31 });
32 </script>
33 </html>

siblings前后所有兄弟

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <h1>cccccccccccccccccccccc</h1>
15     <h1>cccccccccccccccccccccc</h1>
16     <div class='div1'>
17         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
18         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
19         <div class="div2">
20             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
21             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
22         </div>
23     </div>
24     <h1>cccccccccccccccccccccc</h1>
25     <h1>cccccccccccccccccccccc</h1>
26 </body>
27 <script>
28 $('.div1').siblings().css({'color':'#00f'});
29 </script>
30 </html>

prevAll前面所有兄弟

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <h1>cccccccccccccccccccccc</h1>
15     <h1>cccccccccccccccccccccc</h1>
16     <h1>cccccccccccccccccccccc</h1>
17     <h1>cccccccccccccccccccccc</h1>
18     <div class='div1'>
19         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
20         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
21         <div class="div2">
22             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
23             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
24         </div>
25     </div>
26 </body>
27 <script>
28 $('.div1').prevAll().css({'color':'#00f'});
29 </script>
30 </html>

nextAll后面所有兄弟

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div class='div1'>
15         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
16         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
17         <div class="div2">
18             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
19             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
20         </div>
21     </div>
22     <h1>cccccccccccccccccccccc</h1>
23     <h1>cccccccccccccccccccccc</h1>
24     <h1>cccccccccccccccccccccc</h1>
25     <h1>cccccccccccccccccccccc</h1>
26 </body>
27 <script>
28 // $('.div1').children('h1').css({'color':'#00f'});
29 $('.div1').nextAll().css({'color':'#00f'});
30 </script>
31 </html>

find后代查找

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div class='div1'>
15         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
16         <h1>aaaaaaaaaaaaaaaaaaa</h1>    
17         <div class="div2">
18             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
19             <h1>bbbbbbbbbbbbbbbbbbbbb</h1>
20         </div>
21     </div>
22 </body>
23 <script>
24 // $('.div1').children('h1').css({'color':'#00f'});
25 $('.div1').find('h1').css({'color':'#00f'});
26 </script>
27 </html>

next关系查找

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div>
15         <div>
16             <button>打小金</button>
17         </div>
18     </div>
19 
20     <div>
21         <div>
22             <div>
23                 <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
24                 <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
25                 <h1>bbbbbbbbbbbbbbbbbbbbbb</h1>
26                 <p>bbbbbbbbbbbbbbbbbbbbbbbbbb</p>
27             </div>
28         </div>
29     </div>
30 
31 </body>
32 <script>
33 $('button').click(function(){
34     $(this).parent().parent().next().children().children().children().css({'color':'#00f'});
35 });
36 </script>
37 </html>

parent、prev、children关系查找

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div>
15         <div>
16             <div>
17                 <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
18                 <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
19                 <h1>bbbbbbbbbbbbbbbbbbbbbb</h1>
20                 <p>bbbbbbbbbbbbbbbbbbbbbbbbbb</p>
21             </div>
22         </div>
23     </div>
24 
25     <div>
26         <div>
27             <button>打小金</button>
28         </div>
29     </div>
30 </body>
31 <script>
32 $('button').click(function(){
33     $(this).parent().parent().prev().prev().children().children().children().css({'color':'#00f'});
34 });
35 </script>
36 </html>

andSelf串联上自己

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <div>
15         <h1>aaaaaaaaaaaaaaaaa</h1>
16         <h1>aaaaaaaaaaaaaaaaa</h1>
17     </div>
18     <h1>bbbbbbbbbbbbbbbbbbb</h1>
19 </body>
20 <script>
21 $('div').next().andSelf().css({'color':'#00f'});
22 </script>
23 </html>

add组合串联筛选

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <h1>00001</h1>
15     <h1>00002</h1>
16     <hr>
17     <p>00003</p>
18     <p>00004</p>
19 </body>
20 <script>
21 $('h1').add('p').css({'color':'#00f'});
22 </script>
23 </html>

过滤筛选

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <h1>00001</h1>
15     <h1>00002</h1>
16     <h1>00003</h1>
17     <h1>00004</h1>
18     <h1>00005</h1>
19 </body>
20 <script>
21 // $('h1').eq(0).css({'color':'#00f'});
22 // $('h1').not($('h1').eq(0)).css({'color':'#00f'});
23 // $('h1').first().css({'color':'#00f'});
24 // $('h1').last().css({'color':'#00f'});
25 $('h1').slice(1).css({'color':'#00f'});
26 </script>
27 </html>

checked找到所有被选中的人

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;
 9         }
10     </style>
11     <script src="jquery.js"></script>
12 </head>
13 <body>
14     <form action="">
15         <p>选择爱好:</p>
16         <p>
17             <label>
18                 <input type="checkbox" name="" id=""> 打篮球
19             </label>
20         </p>
21         <p>
22             <label>
23                 <input type="checkbox" name="" id=""> 踢足球
24             </label>
25         </p>
26         <p>
27             <label>
28                 <input type="checkbox" name="" id=""> 去游泳
29             </label>
30         </p>
31         <p>
32             <label>
33                 <input type="checkbox" name="" id=""> 去游泳
34             </label>
35         </p>
36         <p>
37             <label>
38                 <input type="checkbox" name="" id=""> 去游泳
39             </label>
40         </p>
41         <p>
42             <label>
43                 <input type="checkbox" name="" id=""> 去游泳
44             </label>
45         </p>
46         <p>
47             <label>
48                 <input type="checkbox" name="" id=""> 去游泳
49             </label>
50         </p>
51         <p>
52             <label>
53                 <input type="checkbox" name="" id=""> 去游泳
54             </label>
55         </p>
56     </form>
57     <p>
58         <button id='all'>全选</button>
59         <button id='notall'>全不选</button>
60         <button id='unall'>反选</button>
61         <button id='ok'>ok</button>
62     </p>
63     <hr>
64     <div class='info'>
65             
66     </div>
67 </body>
68 <script>
69 $('#all').click(function(){
70     $(':checkbox').attr({'checked':true});
71 });
72 
73 $('#notall').click(function(){
74     $(':checkbox').attr({'checked':false});
75 });
76 
77 $('#unall').click(function(){
78     $(':checkbox').each(function(){
79         this.checked=!this.checked;
80     });
81 });
82 
83 $('#ok').click(function(){
84     $(':checked').parent().parent().appendTo('.info');
85 });
86 </script>
87 </html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
 
 
 

转载于:https://www.cnblogs.com/Renyi-Fan/p/9215640.html

相关文章：

  • kettle学习笔记（九）——子转换、集群与变量
  • Django初始配置及大概扫阅
  • [转载]Delphi 版 everything、光速搜索代码
  • OO第四次博客作业
  • CentOS7网卡重启错误，配置IP方案
  • 真·面试题
  • 英语基础语法-时态(谓语动词的变化-一般时态/进行时态)
  • 安装mysql时出现应用程序无法正常启动（0xc000007b）、初始化失败以及密码忘记怎样重置？...
  • Java多线程(六) —— 线程并发库之并发容器
  • NEO VM原理及其实现(转载)
  • ES6的函数
  • review02
  • 5.2.12.读写接口实践
  • JAVA进程CPU使用率使用过高故障排查
  • 基础面试题
  • 【Linux系统编程】快速查找errno错误码信息
  • 【许晓笛】 EOS 智能合约案例解析(3)
  • C++类的相互关联
  • IOS评论框不贴底（ios12新bug）
  • js递归,无限分级树形折叠菜单
  • JS实现简单的MVC模式开发小游戏
  • Less 日常用法
  • Selenium实战教程系列（二）---元素定位
  • UMLCHINA 首席专家潘加宇鼎力推荐
  • ⭐ Unity 开发bug —— 打包后shader失效或者bug (我这里用Shader做两张图片的合并发现了问题)
  • Vue官网教程学习过程中值得记录的一些事情
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 基于 Babel 的 npm 包最小化设置
  • 如何解决微信端直接跳WAP端
  • 推荐一个React的管理后台框架
  • 学习使用ExpressJS 4.0中的新Router
  • Spring Batch JSON 支持
  • 如何在招聘中考核.NET架构师
  • ​力扣解法汇总946-验证栈序列
  • #我与Java虚拟机的故事#连载02：“小蓝”陪伴的日日夜夜
  • （02）vite环境变量配置
  • （1/2）敏捷实践指南 Agile Practice Guide （[美] Project Management institute 著）
  • (办公)springboot配置aop处理请求.
  • (层次遍历)104. 二叉树的最大深度
  • （附源码）ssm考试题库管理系统 毕业设计 069043
  • （一）Linux+Windows下安装ffmpeg
  • （一）UDP基本编程步骤
  • ..回顾17，展望18
  • .aanva
  • .NET Core WebAPI中封装Swagger配置
  • .Net 转战 Android 4.4 日常笔记（4）--按钮事件和国际化
  • .net利用SQLBulkCopy进行数据库之间的大批量数据传递
  • .Net通用分页类(存储过程分页版,可以选择页码的显示样式,且有中英选择)
  • .net下的富文本编辑器FCKeditor的配置方法
  • .NET与 java通用的3DES加密解密方法
  • .net中应用SQL缓存（实例使用）
  • @JsonSerialize注解的使用
  • @property @synthesize @dynamic 及相关属性作用探究
  • @selector(..)警告提示
  • [Android开源]EasySharedPreferences：优雅的进行SharedPreferences数据存储操作