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= ...
随机推荐
- IDEA使用JDBC链接MySql（java编程）
1.在Maven的pom.xml文件中引入MySql的驱动 <dependency> <groupId>mysql</groupId> <artifactId ...
- 编写资源yaml文件、压力机配置hosts
资源文件 Deployment/StatefulSet/DaemonSet.Service.Ingress等 参考:https://www.cnblogs.com/uncleyong/p/155710 ...
- 零售BI解决方案_新零售时代转型升级思路全都在这里
新零售是什么意思?新零售即企业以互联网为依托,通过运用大数据.人工智能等先进技术手段,对商品的生产.流通与销售过程进行升级改造,进而重塑业态结构与生态圈,并对线上服务.线下体验以及现代物流进行深度融合 ...
- ContOS 7安装Docker使用及部署MySQL和Nginx
此文章采取狂神说Java https://space.bilibili.com/95256449 Docker学习网址: Docker官网:https://www.docker.com/ Docker ...
- QT：Unknown module(s) 与MaintenanceTool.exe更新、添加组件
https://www.cnblogs.com/lisongzzx/p/13861430.html 原因1:新安装的Qt Creator中并没下载下来相关组件 解决方法: 1.在Qt安装目录下找到Ma ...
- pyinstaller打包exe文件，运行时一闪而过
pyinstaller打包exe文件出现命令窗口一闪而过 原因:exe运行过程中出错了,解决这些错误就可以了 解决方法: 通过 cd path >> xxx.exe 在命令行中运行exe文 ...
- 在vue项目中MD5加密的使用方法
1:安装 npm install --save js-md5 2.引入及使用 方法一:在需要的项目文件中引入 import md5 from 'js-md5'; 使用例子:md5('hello wor ...
- （转载）《Three easy pieces 》虚拟化部分整体介绍
转载自知乎:https://zhuanlan.zhihu.com/p/37917910 一个程序在运行的时候发生了什么呢? 其实只是一些非常简单的事情:运行指令.处理器从内存中取出指令,译码然后执行. ...
- c/c++ 日常积累
基类是抽象类,有(纯)虚函数,子类必须要把所有的都实现啊啊啊!!!!包括子类的析构,你写一个~xx类 = default;也好啊啊啊啊啊啊啊,不然报错!!!!啊啊啊啊啊 流下了悔恨的泪水!!!... ...
- 从零开始Pytorch-YOLOv3【笔记】（一）配置文件解读
前言 这是github上的一个项目YOLO_v3_tutorial_from_scratch,它还有相应的blog对其详细的解读.机器之心翻译了他的tutorial:从零开始PyTorch项目:YOL ...