查找函数介绍

<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.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3.  3 <head>
  4.  4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  5  <title>05-可见性过滤选择器.html</title>
  6.  6  <!--   引入jQuery -->
  7.  7  <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
  8.  8  <script src="./script/assist.js" type="text/javascript"></script>
  9.  9  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  10. 10   <script type="text/javascript">
  11. 11       $(document).ready(function(){
  12. 12 //        <input type="button" value=" 选择 id=two 所有子元素"  id="b1"/>
  13. 13         $("#b1").click(function(){
  14. 14             $("#two").children().css("background-color","red");
  15. 15         });
  16. 16 //            <input type="button" value=" 选择 id=two 子元素title=other 元素 "  id="b2"/>
  17. 17         $("#b2").click(function(){
  18. 18             $("#two").children("[title='other']").css("background-color","red");
  19. 19         });
  20. 20 //            <input type="button" value=" 选择 id=two 下一个兄弟"  id="b3"/>
  21. 21         $("#b3").click(function(){
  22. 22             $("#two").next().css("background-color","red");
  23. 23         });
  24. 24 //            <input type="button" value=" 选择 id=two 后面的所有兄弟"  id="b4"/>
  25. 25         $("#b4").click(function(){
  26. 26             $("#two").nextAll().css("background-color","red");
  27. 27         });
  28. 28 //            <input type="button" value=" 选择 id=two 上一个兄弟"  id="b5"/>
  29. 29         $("#b5").click(function(){
  30. 30             $("#two").prev().css("background-color","red");
  31. 31         });
  32. 32 //            <input type="button" value=" 选择 id=two 前面的所有兄弟"  id="b6"/>
  33. 33         $("#b6").click(function(){
  34. 34             $("#two").prevAll().css("background-color","red");
  35. 35         });
  36. 36 //            <input type="button" value=" 选择 id=two 所有兄弟"  id="b7"/>
  37. 37         $("#b7").click(function(){
  38. 38             $("#two").siblings().css("background-color","red").show();
  39. 39         });
  40. 40 //            <input type="button" value=" 选择 id=two 父元素"  id="b8"/>
  41. 41         $("#b8").click(function(){
  42. 42             $("#two").parent().css("background-color","red");
  43. 43         });
  44. 44 //            <input type="button" value=" 选择 title=tesst的父元素body"  id="b8"/>
  45. 45         $("#b9").click(function(){
  46. 46             $("div[title='tesst']").closest("body").css("background-color","red").show();
  47. 47         });
  48. 48 });
  49. 49
  50. 50   </script>
  51. 51 </head>
  52. 52 <body>
  53. 53   <h3>可见性过滤选择器.</h3>
  54. 54   <button id="reset">手动重置页面元素</button>
  55. 55   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
  56. 56   <br/><br/>
  57. 57   <input type="button" value=" 选择 id=two 所有子元素"  id="b1"/>
  58. 58   <input type="button" value=" 选择 id=two 子元素title=other 元素 "  id="b2"/>
  59. 59   <input type="button" value=" 选择 id=two 下一个兄弟"  id="b3"/>
  60. 60   <input type="button" value=" 选择 id=two 后面的所有兄弟"  id="b4"/>
  61. 61   <input type="button" value=" 选择 id=two 上一个兄弟"  id="b5"/>
  62. 62   <input type="button" value=" 选择 id=two 前面的所有兄弟"  id="b6"/>
  63. 63   <input type="button" value=" 选择 id=two 所有兄弟"  id="b7"/>
  64. 64   <input type="button" value=" 选择 id=two 父元素"  id="b8"/>
  65. 65   <input type="button" value=" 选择 title=tesst的父元素body"  id="b9"/>
  66. 66   <br /><br />
  67. 67
  68. 68   <!--文本隐藏域-->
  69. 69  <input type="hidden" value="hidden_1">
  70. 70  <input type="hidden" value="hidden_2">
  71. 71  <input type="hidden" value="hidden_3">
  72. 72  <input type="hidden" value="hidden_4">
  73. 73
  74. 74   <div class="one" id="one" >
  75. 75  id为one,class为one的div
  76. 76       <div class="mini">class为mini</div>
  77. 77   </div>
  78. 78
  79. 79     <div class="one"  id="two" title="test" >
  80. 80      id为two,class为one,title为test的div.
  81. 81       <div class="mini"  title="other">class为mini,title为other</div>
  82. 82       <div class="mini"  title="test">class为mini,title为test</div>
  83. 83   </div>
  84. 84
  85. 85   <div class="one">
  86. 86       <div class="mini">class为mini</div>
  87. 87       <div class="mini">class为mini</div>
  88. 88       <div class="mini">class为mini</div>
  89. 89       <div class="mini"  title="tesst">class为mini,title为tesst</div>
  90. 90   </div>
  91. 91
  92. 92
  93. 93   <div style="display:none;"  class="none">style的display为"none"的div</div>
  94. 94
  95. 95   <div class="hide">class为"hide"的div</div>
  96. 96
  97. 97   <span id="mover">正在执行动画的span元素.</span>
  98. 98 </body>
  99. 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. Tensorflow 2.x入门教程

    前言 至于为什么写这个教程,首先是为了自己学习做个记录,其次是因为Tensorflow的API写的很好,但是他的教程写的太乱了,不适合新手学习.tensorflow 1 和tensorflow 2 有 ...

  2. Json：Java对象和Json文本转换工具类

    Json 是一个用于 Java 对象 和 Json 文本 相互转换的工具类. 安装 下载源码 git clone https://github.com/njdi/durian.git 编译源码 cd ...

  3. Install VMware Tools in CentOS 7 command line mode

    1.首先启动CentOS 7,在VMware中点击上方"VM",点击"Install VMware Tools..."(如已安装则显示"Reinsta ...

  4. JavaWeb-前端基础

    前端基础 前端:我们网站的页面,包括网站的样式.图片.视频等一切用户可见的内容都是前端的内容. 后端:处理网站的所有数据来源,比如我们之前从数据库中查询数据,而我们查询的数据经过处理最终会被展示到前端 ...

  5. idea教程--使用maven创建web项目

    1.单击create new project 2.运行maven项目 在pom.xml文件中添加tomcat插件然后如下图运行;

  6. Lesson A puma at large

    新概念三 Lesson 1 A puma at large 词汇: 1. spot 易混淆: recognize v. [认出], identify v. [识别sb/sth的身份] v. 看出,发现 ...

  7. LeetCode-063-不同路径 II

    不同路径 II 题目描述:一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为"Start" ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角( ...

  8. 《shader入门精要》13.2再谈运动模糊中片元着色器的世界坐标的计算

    具体在书p275页 这里为啥需要除D.w呢. 首先我们得到的NDC的坐标是已经归一化的,但是CurrenViewProjectionMatrix的作用,是把世界空间转化为尚未归一化的裁剪空间. 这里看 ...

  9. 2.9 C++STL map/multimap容器详解

    文章目录 2.9.1 引入 2.9.2 代码示例 map案列 multimap案列 2.9.3 代码运行结果 总结 2.9.1 引入 map相对于set区别,map具有键值和实值,所有元素根据键值自动 ...

  10. python 装饰器的使用

    装饰器本质上是一个Python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能,装饰器的返回值也是一个函数对象.它经常用于有切面需求的场景,比如:插入日志.性能测试.事务处理.缓存.权 ...