查找函数介绍

<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的主要区别：

  1. 　　前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；
  2. 　　前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；
  3. 　　前者返回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--筛选【查找函数】的更多相关文章

  1. jquery筛选元素函数

    jquery筛选元素函数 1.过滤匹配第二个p元素: $("button").click(function(){ $("p").eq(1).css(" ...

  2. jQuery的查找

    children([expr])概述 :取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合.可以通过可选的表达式来过滤所匹配的子元素.注意:parents()将查找所有祖辈元素,而child ...

  3. Jq_Ajax 操作函数跟JQuery 遍历函数跟JQuery数据操作函数

    JQuery文档操作方法 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数                             ...

  4. 第一百七十五节，jQuery，工具函数

    jQuery,工具函数 学习要点: 1.字符串操作 2.数组和对象操作 3.测试操作 4.URL 操作 5.浏览器检测 6.其他操作 工具函数是指直接依附于 jQuery 对象,针对 jQuery 对 ...

  5. JQuery中查找父元素，子元素,追加元素，插入元素和删除元素 及其他常用方法

    Jquery之所以强大,和其在获取对象时使用与css选择器兼容的语法有很大关系.而且它还兼容了CSS3的选择器,而且多出了不少. 所以jQuery的选择器也就变得很多很强大.就最基本的有以下四个: $ ...

  6. jQuery1.11源码分析(9)-----初始化jQuery对象的函数和关联节点获取函数

    这篇也没什么好说的,初始化jQuery对象的函数要处理多种情况,已经被寒冬吐槽烂了.关联节点获取函数主要基于两个工具函数dir和sibling,前者基于指定的方向遍历,后者则遍历兄弟节点(真的不能合并 ...

  7. Javascript - Jquery - 筛选

    筛选(JQuery Selector) JQuery是一个JavaScript库,它极大地简化了JavaScript编程.整个JQuery库的方法都在$这个工厂函数里,我们只需要使用$函数,而$函数会 ...

  8. jQuery 筛选器1

    jQuery 筛选器1 筛选器1: 在选择器选择的基础上在选择一次 // 当前点击的标签$(this) $(this) // .next() 获取当标签的下一个标签 $(this).next(); / ...

  9. [总结]jQuery之常用函数方法参考手册

    w3school参考地址:http://www.w3school.com.cn/jquery/index.asp runoob参考地址:http://www.runoob.com/jquery/jqu ...

  10. jQuery筛选器及对DOM修改（学习笔记）

    1.jQuery筛选器 注意:请先在管理Nuget程序包中查找jQuery包,并安装.也可以在jQuery官网下载. 实现: <!DOCTYPE html> <html xmlns= ...

随机推荐

  1. 三行Python代码,让你的数据处理脚本快别人4倍

    Python是一门非常适合处理数据和自动化完成重复性工作的编程语言,我们在用数据训练机器学习模型之前,通常都需要对数据进行预处理,而Python就非常适合完成这项工作,比如需要重新调整几十万张图像的尺 ...

  2. 【C#基础概念】命名规范

    1. 引言 本文是一套面向C# programmer 和C# developer 进行开发所应遵循的开发规范. 按照此规范来开发C#程序可带来以下益处: ·         代码的编写保持一致性, · ...

  3. C#?和??运算符以及合并条件表达式

    最近项目中,常常碰到这个?和??这两个操作符,之前说得不够详细,趁着周末补全来,希望能够给大家带来帮助. (一)?操作符 我们知道值类型是不肯能为空的,它总是包含值的本身,不会为NULL,这估计也是值 ...

  4. 『无为则无心』Python日志 — 66、将日志信息保存到文件中

    目录 1.把日志信息保存到文件中 2.拓展 (1)观察代码 (2)提出问题 (3)问题说明 1.把日志信息保存到文件中 代码如下所示: """ logging模块是Pyt ...

  5. bower install 报错fatal: unable to access 'https://github.com/angular/bower-angular-touch.git/'类错误解决方法

    bower install时出现很多unable to access 'https://github.com/angular/bower-angular-touch.git/'类似的错误, 方法一:( ...

  6. python面试_总结04_字符串练习题

    完成下列列表相关的编程题,先运行下列的test函数,在完成每道题之后,都可以通过调用test函数检测所写函数对错 def test(got, expected): if got == expected ...

  7. webpack--性能优化之打包构建速度和代码调试优化

    前言 本文来总结写webpack 在性能方面常见的优化方案. 正文 本文分别总结开发环境和生产环境中在打包构建速度和代码调试功能方面的优化方案,如下: 1.开发环境性能优化 (1)优化打包构建速度 a ...

  8. 基于FastAPI和Docker的机器学习模型部署快速上手

    针对前文所述 机器学习模型部署摘要 中docker+fastapi部署机器学习的一个完整示例 outline fastapi简单示例 基于文件内容检测的机器学习&fastapi 在docker ...

  9. 基于idea做java程序的本地k8s调试-skaffold（二）

    上一篇讲完了java代码发到本机minikube中run,这篇来讲讲minkube中进行debug(idea下) 话说,上篇是把pigx基础infra微服务都发到了minikube中,这些微服务是ru ...

  10. TypeScript 2.0开启空值的严格检查

    摘要:在编程过程成空指针是最常见的bug之一,但是在TypeScript中我们无法使用具体的类型来表示特定的变量不能为空!幸运的是,TypeScript 2.0 解决了这个问题. 本文分享自华为云社区 ...