189 8069 5689

如何在jQuery中使用层次选择器

如何在jQuery中使用层次选择器？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、网站空间、营销软件、网站建设、五大连池网站维护、网站推广。

jquery是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

DOM元素之间的层次关系主要包括元素的子元素、后代元素、相邻元素和兄弟元素等，我们可以通过DOM元素之间的层次关系来获取想要的元素。为了更好的学习，我们先列出一段HTML代码：


  
    id=one，class=aaa的div
    
    class=mini
  
       id=two，class=aaa的div          class=mini的div
    class=mini的div           class=bbb的div     class=mini的div     class=mini的div      ^^span元素^^   --span元素--

1、后代元素选择器

选择器：ancestor descendant
描述：在给定的祖先元素下匹配所有的后代元素。
返回值：元素集合

示例：


  $(document).ready(function(){
    $("body div").css("background","#ffbbaa");
  });

2、子元素选择器

选择器：parent > child
描述：在给定的祖先元素下匹配所有的子元素。
返回值：元素集合

示例：


  $(document).ready(function(){
    $("body > div").css("background","#ffbbaa");
    $("body > div.aaa").css("background", "#ffbbaa");
  });

3、相邻元素选择器

选择器：prev + next
描述：匹配所有紧接在 prev 元素后的 next 元素（prev和next必须是相邻的兄弟关系）。
返回值：元素集合

示例：


  $(document).ready(function(){
    //【写法1】写法1与写法2等价
    $("#one + span").css("background","#ffbbaa");
    //【写法2】
    $("#one").next("span").css("background","#ffbbaa");
    //【写法3】写法3、写法4与写法5等价
    $("#one").nextAll("span:first").css("background","#ffbbaa");
    //【写法4】
    $("#one").nextAll("span:eq(0)").css("background","#ffbbaa");
    //【写法5】
    $("#one").nextAll("span").eq(0).css("background","#ffbbaa");
  });

  • 当#one元素之后存在兄弟span元素，但span元素均与#one元素不相邻时，写法3、写法4和写法5可以查询到结果，写法1和写法2查询不到结果。

  • 当#one元素之后存在相邻的兄弟span元素时，写法1、写法2、写法3、写法4和写法5查询到的结果相同。

4、兄弟元素选择器

选择器：prev ~ siblings
描述：匹配 prev 元素之后的所有siblings兄弟元素。
返回值：元素集合

示例：


  $(document).ready(function(){
    //【写法1】写法1与写法2等价
    $("#two ~ div").css("border","1px solid #ffbbaa");
    $(".mini:eq(1) ~ div").css("border","1px solid #ffbbaa");
    //【写法2】
    $("#two").nextAll("div").css("border","1px solid #ffbbaa");
    $(".mini:eq(1)").nextAll("div").css("border","1px solid #ffbbaa");
  });

5、prev()和prevAll()

筛选方法：prev()
描述：取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
返回值：元素集合

示例：


  $(document).ready(function(){
    //【写法1】
    $("span:first").prev(".bbb").css("background", "#ffbbaa");
    //【写法2】写法2、写法3和写法4等价
    $("span:first).prevAll(".bbb:first").css("background", "#ffbbaa");
    //【写法3】
    $("span:first).prevAll(".bbb:eq(0)").css("background", "#ffbbaa");
    //【写法4】
    $("span:first).prevAll(".bbb").eq(0).css("background", "#ffbbaa");
  });

  • 当span:first元素之前存在兄弟.bbb元素，但.bbb元素均与span:first元素不相邻时，写法2、写法3和写法4可以查询到结果，写法1查询不到结果。

  • 当span:first元素之前存在相邻的兄弟.bbb元素时，写法1、写法2、写法3和写法4查询到的结果相同。

筛选方法：prevAll()
描述：查找当前元素之前所有的同辈元素。
返回值：元素集合

示例：


  $(document).ready(function(){
    $("#two").prevAll("div").css("background", "#ffbbaa");
  });

看完上述内容，你们掌握如何在jQuery中使用层次选择器的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


网站名称：如何在jQuery中使用层次选择器
当前URL：http://cdxtjz.com/article/ipiihg.html

其他资讯