查找函数介绍

<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. Nginx中关于虚拟主机的一点冷门知识

    一些闲聊 坐标深圳南山. 前两天公司晚上9点过,通知第二天要48小时核酸才能进办公楼.看到消息,已经是9点半多了,走到公司附近的核酸点,是10点过.然后发现那个点人好少,走近了才发现核酸点已经下班了, ...

  2. CSRF靶场练习

    实验目的 了解CSRF跨站伪造请求实验 实验原理 CSRF的原理 CSRF(Cross-site Request Forgery)是指跨站点请求伪造,也就是跨站漏洞攻击,通常用来指 WEB 网站的这一 ...

  3. BI数据可视化工具怎么选？用这款就够了！

    任何一项产品的选择都需要谨慎而全面,BI数据可视化工具的选择就更不用说了.作为企业的IT部门,如果没有良好的BI工具支持,IT部门将会十分容易陷入困境.那么面对多元化的BI工具市场,IT部门该如何选择 ...

  4. AtCoder Beginner Contest 242 题解

    目录 C - 1111gal password D - ABC Transform E - (∀x∀) F - Black and White Rooks G - Range Pairing Quer ...

  5. k8s全方位监控-prometheus部署

    1.k8s 监控资源对象 2. prometheus简单介绍. https://github.com/prometheus •多维数据模型:由度量名称和键值对标识的时间序列数据•PromSQL:一种灵 ...

  6. 通过媒体查询来实现 WPF 响应式设计

    WPF 客户端经常需要运行在各种不同大小屏幕下,为了显示友好,所以开发的时候都需要考虑响应式设计. 布局往往通过指定比例,而不直接指定准确的大小来实现响应式布局(如 Width="3*&qu ...

  7. SQL从零到迅速精通【触发器】

    essay from:http://www.cnblogs.com/hoojo/archive/2011/07/20/2111316.html 触发器就类似一个小账本,记录了你在数据库做了哪些操作,可 ...

  8. 微信小程序下滑时能实现加载更多数据

    wxml代码: <view class="scroll"> <!-- 绑订页面上拉触底事件的处理函数onReachBottom事件 --> <scro ...

  9. JVM学习总结（一）

    JVM--Java虚拟机 1.类加载器 JVM虚拟机的类加载器有三个 bootstrapClassLoader 引导类加载器 是有C语言编写,在JVM虚拟机启动时 加载到内存中负责加载rt.jar夹包 ...

  10. Redis 使用规范

    Redis 使用规范围绕如下几个纬度展开: 键值对使用规范: 命令使用规范: 数据保存规范: 运维规范. 键值对使用规范 有两点需要注意: 好的 key 命名,才能提供可读性强.可维护性高的 key, ...