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= ...
随机推荐
- 日常问题记录 E138: Can't write viminfo file /root/.viminfo!
问题是因为磁盘不足导致 看磁盘占用情况 排查:du --max-depth=1 -h 这个命令可以查看当前目录下哪个目录占用最大,然后再进一步看
- windows清理用户痕迹
1.日志管理器的基本使用 在这里创建自定义视图是非常重要的 在设置自定义视图不必设置的事件日志选项太多,可以按日志也可以按源进行设置,根据自己的情况来做决定 在cmd下可以使用wevtutil cl ...
- 【C# .Net GC】强制垃圾回收 和System GC
属性 GC.MaxGeneration:获取系统当前支持的最大代数. 方法 GC.GetTotalMemory(bool forceFullCollection) 方法 true表示该方法先做垃圾收 ...
- .NET 5+ 中已过时的功能
从 .NET 5 开始,一些新标记为已过时的 API 使用 ObsoleteAttribute 上的两个新属性. ObsoleteAttribute.DiagnosticId 属性指示编译器使用自定义 ...
- python+pytest(3)-接口测试一般流程及方法
首先我们要明确,通常所接口测试其实就属于功能测试,主要校验接口是否实现预定的功能,虽然有些情况下可能还需要对接口进行性能测试.安全性测试. 在学习接口自动化测试之前,我们先来了解手工接口测试怎样进行. ...
- el-dialog设置为点击弹窗以外的区域不自动关闭弹窗
两种方法:单个设置或者全局设置 第一种:(单个设置) 在el-dialog标签中添加:close-on-click-modal="false"即可 <el-dialog ti ...
- 开发并发布依赖包，作为工具包供别人npm install
1.初识包及 npm 包的概念: nodejs 中的第三方模块叫包 不同于 nodejs 中的内置模块与自定义模块,包是由第三方个人或团队开发出来的,免费供所有人使用 nodejs 中的包都是免费开源 ...
- 你真的懂TSP吗
整数规划-模型 2022年2月26日 TSP问题 有一个邮递员,他每天负责向100个客户的家门口送一份报纸,他希望走最短的总路程来完成配送任务,这是TSP问题最原始的场景.用理论描述就是:找一个路径 ...
- 如何用three.js(webgl)搭建3D粮仓、3D仓库、3D物联网设备监控-第十二课
序: 最近因为疫情,居家办公,索性翻翻之前的项目案例,总结总结. 这次疫情,深圳停摆,群众也挺恐慌的,封闭前一天,超市被抢购一空,虽然官方媒体一再强调,材米油盐蔬菜肉类管够,但是任然挡不住群众们的抢购 ...
- 理解HMM算法
长这样: 理解的前提: (1)状态:生成观测值的变量(上图中的"吃"和"睡"). (2)观测值:状态乘上输出概率对应的输出(上图中的橙色节点). (3)输出概率 ...