jQuery--筛选【过滤函数】
之前选择器可以完成的功能，筛选也提供了相同的函数
筛选函数介绍
- eq(index|-index) 类似:eq()index:正数，从头开始获得指定所有的元素，从0算起，0表示第一个-index:负数，从尾开始获得指定索引的元素，1算起，-1表示最后一个
- is() 判断
- hasClass() 判断class是否是指定的类
- filter() 筛选出与制定表达式匹配的元素集合
- not() 将指定的内容删除
- has() 子元素是否有
- slice(start,end) 截取jquery对象数组中的元素，[2,4]得到2,3，左闭右开
- map() jquery对象拆分成jquery对象数组
代码实例
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>05-可见性过滤选择器.html</title>
6 <!-- 引入jQuery -->
7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
8 <script src="./script/assist.js" type="text/javascript"></script>
9 <link rel="stylesheet" type="text/css" href="./css/style.css" />
10 <script type="text/javascript">
11 $(document).ready(function(){
12 // <input type="button" value=" 选择索引值等于3的元素" id="b1"/>
13 $("#b1").click(function(){
14 $("div").eq(3).css("background-color","red");
15 });
16 // <input type="button" value=" 选择第一个div元素" id="b2"/>
17 $("#b2").click(function(){
18 $("div").first().css("background-color","red");
19 });
20 // <input type="button" value=" 选择最后一个div元素" id="b3"/>
21 $("#b3").click(function(){
22 //两种方法都可以
23 // $("div").last().css("background-color","red").show();
24 $("div").eq(-1).css("background-color","red").show();
25 });
26 // <input type="button" value=" id=one div样式是否是one" id="b4"/>
27 $("#b4").click(function(){
28 // $("div #one").is(".one") 中间加空格代表的是div内部的id为one的元素
29 alert($("div#one").is(".one"));
30 });
31 // <input type="button" value=" 选择class为none的所有div" id="b5"/>
32 $("#b5").click(function(){
33 $("div").filter(".none").css("background-color","red").show();
34 });
35 // <input type="button" value=" 样式为hide div 下一个兄弟是否是span" id="b6"/>
36 $("#b6").click(function(){
37 alert($("div.hide").next().is("span"));
38 });
39 // <input type="button" value=" 选择所有div中含有div的" id="b7"/>
40 $("#b7").click(function(){
41 $("div").has("div").css("background-color","red");
42 });
43 // <input type="button" value=" 选择样式为one div 子元素中没有title属性的div" id="b8"/>
44 $("#b8").click(function(){
45 // $("div.one").not("[title]").css("background-color","red");
46 $("div.one").children("div").not("[title]").css("background-color","red");
47 });
48 // <input type="button" value=" 选择所以号为3,4的div" id="b9"/>
49 $("#b9").click(function(){
50 //左闭右开
51 $("div").slice(3,5).css("background-color","red");
52 });
53 });
54
55 </script>
56 </head>
57 <body>
58 <h3>可见性过滤选择器.</h3>
59 <button id="reset">手动重置页面元素</button>
60 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
61 <br/><br/>
62 <input type="button" value=" 选择索引值等于3的元素" id="b1"/>
63 <input type="button" value=" 选择第一个div元素" id="b2"/>
64 <input type="button" value=" 选择最后一个div元素" id="b3"/>
65 <input type="button" value=" id=one div样式是否是one" id="b4"/>
66 <input type="button" value=" 选择class为none的所有div" id="b5"/>
67 <input type="button" value=" 样式为hide div 下一个兄弟是否是span" id="b6"/>
68 <input type="button" value=" 选择所有div中含有div的" id="b7"/>
69 <input type="button" value=" 选择样式为one div 子元素中没有title属性的div" id="b8"/>
70 <input type="button" value=" 选择所以号为3,4的div" id="b9"/>
71 <br /><br />
72
73 <!--文本隐藏域-->
74 <input type="hidden" value="hidden_1">
75 <input type="hidden" value="hidden_2">
76 <input type="hidden" value="hidden_3">
77 <input type="hidden" value="hidden_4">
78
79 <div class="one" id="one" >
80 id为one,class为one的div
81 <div class="mini">class为mini</div>
82 </div>
83
84 <div class="one" id="two" title="test" >
85 id为two,class为one,title为test的div.
86 <div class="mini" title="other">class为mini,title为other</div>
87 <div class="mini" title="test">class为mini,title为test</div>
88 </div>
89
90 <div class="one">
91 <div class="mini">class为mini</div>
92 <div class="mini">class为mini</div>
93 <div class="mini">class为mini</div>
94 <div class="mini" title="tesst">class为mini,title为tesst</div>
95 </div>
96
97
98 <div style="display:none;" class="none">style的display为"none"的div</div>
99
100 <div class="hide">class为"hide"的div</div>
101
102 <span id="mover">正在执行动画的span元素.</span>
103 </body>
104 </html>
jQuery--筛选【过滤函数】的更多相关文章
- jquery筛选元素函数
jquery筛选元素函数 1.过滤匹配第二个p元素: $("button").click(function(){ $("p").eq(1).css(" ...
- jQuery Filterizr 筛选过滤
Filterizr 是一款功能强大的筛选过滤插件,它提供了多重筛选过滤方式,配合了css3的动画效果. 在线实例 默认 回调函数 使用方法 <div class="sucaihuo&q ...
- 深入学习jQuery元素过滤
× 目录 [1]索引过滤 [2]内容过滤 前面的话 过滤是jQuery扩展的一个重要的内容.jQuery选择器中的一个重要部分就是过滤选择器.除了过滤选择器,还有专门的元素过滤的方法.本文将详细介绍j ...
- Javascript - Jquery - 筛选
筛选(JQuery Selector) JQuery是一个JavaScript库,它极大地简化了JavaScript编程.整个JQuery库的方法都在$这个工厂函数里,我们只需要使用$函数,而$函数会 ...
- 第一百六十五节，jQuery，过滤选择器
jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (h ...
- jQuery1.11源码分析(9)-----初始化jQuery对象的函数和关联节点获取函数
这篇也没什么好说的,初始化jQuery对象的函数要处理多种情况,已经被寒冬吐槽烂了.关联节点获取函数主要基于两个工具函数dir和sibling,前者基于指定的方向遍历,后者则遍历兄弟节点(真的不能合并 ...
- Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数
JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 ...
- [总结]jQuery之常用函数方法参考手册
w3school参考地址:http://www.w3school.com.cn/jquery/index.asp runoob参考地址:http://www.runoob.com/jquery/jqu ...
- jQuery筛选总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 第一百七十五节，jQuery，工具函数
jQuery,工具函数 学习要点: 1.字符串操作 2.数组和对象操作 3.测试操作 4.URL 操作 5.浏览器检测 6.其他操作 工具函数是指直接依附于 jQuery 对象,针对 jQuery 对 ...
随机推荐
- Java线程池进阶
线程池是日常开发中常用的技术,使用也非常简单,不过想使用好线程池也不是件容易的事,开发者需要不断探索底层的实现原理,才能在不同的场景中选择合适的策略,最大程度发挥线程池的作用以及避免踩坑. 一.线程池 ...
- WEB服务蜜罐部署实验
实验目的 了解WEB蜜罐的基本原理,掌握Trap Server的使用. 实验原理 Trap Server是一款WEB服务器蜜罐软件,它可以模拟很多不同的服务器,例如Apache. HTTP Serve ...
- WPF中TreeView控件数据绑定和后台动态添加数据（一）
数据绑定: 更新内容:补充在MVVM模式上的TreeView控件数据绑定的代码. xaml代码: <TreeView Name="syntaxTree" ItemsSourc ...
- Hive数子IP与字符串IP之间的转换
字符串IP:247.164.62.58 对应的 数字IP:4154736186 数子IP=>字符串IP select concat_ws('.',conv(substr(hex(41547 ...
- 2020ICPC上海站 C. Sum of Log
题目大意: 给定T组X,Y,对于每组X,Y,求上面式子 的值,其中 当x为真时等于1,其他情况等于0. 其中. 思路: 对X,Y一起进行数位DP,我们把每一位枚举数字的上限以及数字之前是否有前导 ...
- selenium+python自动化102-登录页面滑动解锁(ActionChains)
前言 登录页面会遇到滑动解锁,滑动解锁的目的就是为了防止别人用代码登录(也就是为了防止你自动化登录),有些滑动解锁是需要去拼图这种会难一点. 有些直接拖到最最右侧就可以了,本篇讲下使用 seleniu ...
- cpolar——安全的内网穿透工具
什么是cpolar? cpolar是一种安全的内网穿透云服务,它将内网下的本地服务器通过安全隧道暴露至公网,使得公网用户可以正常访问内网服务. 它能用在哪些场景? 微信公众号开发,实时断点调试微信消息 ...
- JZ-006-旋转数组的最小数字
旋转数组的最小数字 题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. NOTE:给出的所有元素都大于0,若数组 ...
- mysql5.7开启二进制日制中间遇害到的坑
centos7下经过多次试验最终开启进这制日志成功. 最终用以下这个方法在mysql5.7下开启日志成功 下面这两个参数注意是下划线不是"-" log_bin=mysql-bin ...
- python检查是否有缺失值(有用)以及list,array合并
df.isnull().any() 用来判断某列是否有缺失值 df.isnull().all() 用来判断某列是否全部为空值