jQuery--筛选【查找函数】
查找函数介绍
<A>
<B>
<C></C>
<D></D>
<E></E>
<F></F>
</B>
</A>
- B.children([...]) 获得所有的子元素。CDEF
- A.find(D) 从指定区域查询指定的元素。D
- D.next() 获得D下一个兄弟。E
- D.nextAll() 获取D后面的所有兄弟。EF
- E.prev() 获取E的上一个兄弟。D
- E.prevAll() E前面的所有兄弟。CD
- E.siblings() E的所有兄弟。CDF
- E.parent() E的父元素。B
- E.closest(A) 向上获得指定的父元素，如果获得返回一个对象，如果没有，返回0
- C.nextUntil(E) 获得后面的所有兄弟直到指定条件位置。DE
- E.prevUntil(D) 获得前面的所有兄弟直到指定条件的位置。DE
- E.parents() 获得所有父元素。AB
closest与parents的主要区别：
- 前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；
- 前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；
- 前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。
代码实例
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=" 选择 id=two 所有子元素" id="b1"/>
13 $("#b1").click(function(){
14 $("#two").children().css("background-color","red");
15 });
16 // <input type="button" value=" 选择 id=two 子元素title=other 元素 " id="b2"/>
17 $("#b2").click(function(){
18 $("#two").children("[title='other']").css("background-color","red");
19 });
20 // <input type="button" value=" 选择 id=two 下一个兄弟" id="b3"/>
21 $("#b3").click(function(){
22 $("#two").next().css("background-color","red");
23 });
24 // <input type="button" value=" 选择 id=two 后面的所有兄弟" id="b4"/>
25 $("#b4").click(function(){
26 $("#two").nextAll().css("background-color","red");
27 });
28 // <input type="button" value=" 选择 id=two 上一个兄弟" id="b5"/>
29 $("#b5").click(function(){
30 $("#two").prev().css("background-color","red");
31 });
32 // <input type="button" value=" 选择 id=two 前面的所有兄弟" id="b6"/>
33 $("#b6").click(function(){
34 $("#two").prevAll().css("background-color","red");
35 });
36 // <input type="button" value=" 选择 id=two 所有兄弟" id="b7"/>
37 $("#b7").click(function(){
38 $("#two").siblings().css("background-color","red").show();
39 });
40 // <input type="button" value=" 选择 id=two 父元素" id="b8"/>
41 $("#b8").click(function(){
42 $("#two").parent().css("background-color","red");
43 });
44 // <input type="button" value=" 选择 title=tesst的父元素body" id="b8"/>
45 $("#b9").click(function(){
46 $("div[title='tesst']").closest("body").css("background-color","red").show();
47 });
48 });
49
50 </script>
51 </head>
52 <body>
53 <h3>可见性过滤选择器.</h3>
54 <button id="reset">手动重置页面元素</button>
55 <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
56 <br/><br/>
57 <input type="button" value=" 选择 id=two 所有子元素" id="b1"/>
58 <input type="button" value=" 选择 id=two 子元素title=other 元素 " id="b2"/>
59 <input type="button" value=" 选择 id=two 下一个兄弟" id="b3"/>
60 <input type="button" value=" 选择 id=two 后面的所有兄弟" id="b4"/>
61 <input type="button" value=" 选择 id=two 上一个兄弟" id="b5"/>
62 <input type="button" value=" 选择 id=two 前面的所有兄弟" id="b6"/>
63 <input type="button" value=" 选择 id=two 所有兄弟" id="b7"/>
64 <input type="button" value=" 选择 id=two 父元素" id="b8"/>
65 <input type="button" value=" 选择 title=tesst的父元素body" id="b9"/>
66 <br /><br />
67
68 <!--文本隐藏域-->
69 <input type="hidden" value="hidden_1">
70 <input type="hidden" value="hidden_2">
71 <input type="hidden" value="hidden_3">
72 <input type="hidden" value="hidden_4">
73
74 <div class="one" id="one" >
75 id为one,class为one的div
76 <div class="mini">class为mini</div>
77 </div>
78
79 <div class="one" id="two" title="test" >
80 id为two,class为one,title为test的div.
81 <div class="mini" title="other">class为mini,title为other</div>
82 <div class="mini" title="test">class为mini,title为test</div>
83 </div>
84
85 <div class="one">
86 <div class="mini">class为mini</div>
87 <div class="mini">class为mini</div>
88 <div class="mini">class为mini</div>
89 <div class="mini" title="tesst">class为mini,title为tesst</div>
90 </div>
91
92
93 <div style="display:none;" class="none">style的display为"none"的div</div>
94
95 <div class="hide">class为"hide"的div</div>
96
97 <span id="mover">正在执行动画的span元素.</span>
98 </body>
99 </html>
jQuery--筛选【查找函数】的更多相关文章
- jquery筛选元素函数
jquery筛选元素函数 1.过滤匹配第二个p元素: $("button").click(function(){ $("p").eq(1).css(" ...
- jQuery的查找
children([expr])概述 :取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合.可以通过可选的表达式来过滤所匹配的子元素.注意:parents()将查找所有祖辈元素,而child ...
- Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数
JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 ...
- 第一百七十五节，jQuery，工具函数
jQuery,工具函数 学习要点: 1.字符串操作 2.数组和对象操作 3.测试操作 4.URL 操作 5.浏览器检测 6.其他操作 工具函数是指直接依附于 jQuery 对象,针对 jQuery 对 ...
- JQuery中查找父元素，子元素,追加元素，插入元素和删除元素 及其他常用方法
Jquery之所以强大,和其在获取对象时使用与css选择器兼容的语法有很大关系.而且它还兼容了CSS3的选择器,而且多出了不少. 所以jQuery的选择器也就变得很多很强大.就最基本的有以下四个: $ ...
- jQuery1.11源码分析(9)-----初始化jQuery对象的函数和关联节点获取函数
这篇也没什么好说的,初始化jQuery对象的函数要处理多种情况,已经被寒冬吐槽烂了.关联节点获取函数主要基于两个工具函数dir和sibling,前者基于指定的方向遍历,后者则遍历兄弟节点(真的不能合并 ...
- Javascript - Jquery - 筛选
筛选(JQuery Selector) JQuery是一个JavaScript库,它极大地简化了JavaScript编程.整个JQuery库的方法都在$这个工厂函数里,我们只需要使用$函数,而$函数会 ...
- jQuery 筛选器1
jQuery 筛选器1 筛选器1: 在选择器选择的基础上在选择一次 // 当前点击的标签$(this) $(this) // .next() 获取当标签的下一个标签 $(this).next(); / ...
- [总结]jQuery之常用函数方法参考手册
w3school参考地址:http://www.w3school.com.cn/jquery/index.asp runoob参考地址:http://www.runoob.com/jquery/jqu ...
- jQuery筛选器及对DOM修改（学习笔记）
1.jQuery筛选器 注意:请先在管理Nuget程序包中查找jQuery包,并安装.也可以在jQuery官网下载. 实现: <!DOCTYPE html> <html xmlns= ...
随机推荐
- 分布式缓存NCache使用
NCache作为缓存优点币Redis有优势,但是收费的所以选用的不多吧.下面简单实操一下: 首先官网下载组件NCache Download Center (alachisoft.com),这里选择企业 ...
- BI系统：发挥大数据的价值
大数据是指大数据集,这些数据集经过计算分析以揭示与数据的某个方面相关的模式和趋势.首先,还是要重新审视大数据的定义.行业里对大数据的定义有很多,有广义的定义,也有狭义的定义. 大数据的分析与挖掘,把 ...
- 企业如何建立一体化数据分析平台？还是得说说那几家BI工具
近年来,BI工具和报表工具犹如一股春风,吹遍了大江南北,成为了众多企业的发展利器,受到了企业决策者的拥戴.同时,在企业信息化需求日益旺盛的市场里也孕育了不少BI工具与报表工具厂商.商业智能的应用在国外 ...
- WPF 开发，优化 AvalonEdit 显示单行超长文本的性能。
路遥工具箱内置了一个名为"JSON 格式化"的功能.通过该功能可以将 JSON 字符串进行美化和简化(设置缩进和取消缩进). 该功能上线后收到很多客户的反馈:大部分经由网络传输的J ...
- Codeforces Round #750 (Div. 2) E. Pchelyonok and Segments
传送门 题目大意: 给一个序列,可以在这个序列中从左至右选若干个段,第i段的长度为i,对于任意的段i,段内元素和S[i]<S[i+1],求在该序列中最多可以选出几段. 思路:设dp[i][j]为 ...
- Python：glob
学习自: (1)Python标准库glob模块_lianghe77的博客-CSDN博客_glob库 (2)Python:glob与os.listdir_鳄鱼的博客-CSDN博客 (3)python文件 ...
- broken pipe 报错分析和解决办法
参考资料: 1.博客1:https://blog.csdn.net/qq_37535749/article/details/113781338 2.博客2:https://blog.csdn.net/ ...
- httpHelper 从URL获取值
/// <summary> /// 从URL获取值(字符串) /// </summary> public static string GetValueFromUrl(strin ...
- python hex转flaot
在使用树莓派 modbus-tk 读取寄存器值后,得到的4byte值存为了元组,想将该数据转化为float,习惯了c的用法,转到python时,数据转换这一块一头雾水,经过多次尝试最终实现.记录一下: ...
- 小程序授权登录并 laravel7(laravel8) token 应用
参考博客: https://blog.csdn.net/qq_42839386/article/details/118279530 1:composer 下载 composer require fir ...