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= ...
随机推荐
- strtok()出现segment fault的错误
在写一个简易的 shell 时,需要将命令行的命令通过空格分割成一个个字符串参数,这里我使用了 strtok() 函数,然后遇到了 segment fault 的错误. 出现问题的代码如下: 终于寻找 ...
- [MethodImpl(MethodImplOptions.Synchronized)]与lock机制
[MethodImpl(MethodImplOptions.Synchronized)]与lock机制 在进行.NET开发时,经常会遇见如何保持线程同步的情况.在众多的线程同步的可选方式中,加锁无疑是 ...
- 图解CPU缓存一致性问题
产生背景 CPU的读取速度比内存的快,一个快一个慢,就会有矛盾,就会有人想要解决这个矛盾,所以就提出多级缓存来解决,如下图所示. L1级缓存:分为数据域和程序域. L2级缓存:二级缓存. L3级缓存 ...
- 哈工大 信息安全 实验 Snort与单台防火墙联动实验
XX大学XX学院 <网络攻击与防御> 实验报告 实验报告撰写要求 实验操作是教学过程中理论联系实际的重要环节,而实验报告的撰写又是知识系统化的吸收和升华过程,因此,实验报告应该体现完整性. ...
- 反射、静态代理、动态代理（jdk、cglib）
一.反射 反射在之前的文章中详细的解释过了,简单概括就是:可以动态的获取到一个类内部的所有的信息,动态的去创建对象和使用对象以及可以操作对象的属性和方法. 二.代理 首先解释一下代理:使用一个代理对象 ...
- Qt：QFile、QIODevice
QFile 0.说明 QFile是读写文件的类,这里的文件包括文本文件.二进制文件.资源文件. 通常情况下,文件读写使用QFile.QTextStream.QDataStream就够了. file n ...
- 大学英语四级之听力Key Words
Key Words关键词 所谓关键词,指的是短文中能够标志着正确答案的词,也就是说,关键词后面往往是正确答案 听力中的关键词可为宏观和微观两方面,一般出现在如下10种位置. 一.宏观方向(主旨大意) ...
- tp5 多文件上传
路由: Route::post('imgs','task/task/uploads'); 控制器代码: // 多文件上传 public function uploads() { //接受参数 $dat ...
- php 23种设计模式 - 命令模式
命令模式 将一个请求封装为一个对象,从而使用户可用不同的请求对客户进行参数化.对请求排队或记录请求日志,以及支持撤销的操作. 命令模式以松散耦合主题为基础,发送消息.命令和请求,或通过一组处理程序发送 ...
- 《前端运维》一、Linux基础--05Shell运算符
今天我们来学习下Shell运算符,Shell跟其他的编程语言一样,也支持多种运算符,包括: 算数运算符 关系运算符 布尔运算符 字符串运算符 文件测试运算符 那下面,我们就一一来学习一下这些运算符. ...