jQuery选择器之层次选择器用法实例分析

2024-05-06 15:42:17

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery选择器之层次选择器用法。分享给大家供大家参考，具体如下：

前面一篇介绍了几种基本的jQuery选择器，今天归纳一下jQuery的层次选择器。DOM元素之间的层次关系主要包括元素的子元素、后代元素、相邻元素和兄弟元素等，我们可以通过DOM元素之间的层次关系来获取想要的元素。为了更好的学习，我们先列出一段HTML代码：

<body>  <div id="one" class="aaa">    id=one，class=aaa的div    <br />    <div class="mini">class=mini</div>  </div>  <div id="two" class="aaa">    id=two，class=aaa的div    <br />    <div class="mini">class=mini的div</div>    <div class="mini">class=mini的div</div>  </div>  <div class="bbb">    class=bbb的div    <div class="mini">class=mini的div</div>    <div class="mini">class=mini的div</div>  </div>  <span>^^span元素^^</span>  <span>--span元素--</span></body>

1、后代元素选择器

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

示例：

<script type="text/javascript">  $(document).ready(function(){    $("body div").css("background","#ffbbaa");  });</script>

2、子元素选择器

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

示例：

<script type="text/javascript">  $(document).ready(function(){    $("body > div").css("background","#ffbbaa");    $("body > div.aaa").css("background", "#ffbbaa");  });</script>

3、相邻元素选择器

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

示例：

<script type="text/javascript">  $(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");  });</script>

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

4、兄弟元素选择器

上一篇：JavaScript ES2019中的8个新特性详解

下一篇：echarts实现词云自定义形状的示例代码