快捷導(dǎo)航

jQuery選擇器之層次選擇器用法實(shí)例分析

更新時(shí)間：2019年02月19日 11:41:05 作者：changuncle

這篇文章主要介紹了jQuery選擇器之層次選擇器用法,結(jié)合實(shí)例形式分析了jQuery后代元素選擇器、子元素選擇器、相鄰元素選擇器、兄弟元素選擇器等相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery選擇器之層次選擇器用法。分享給大家供大家參考，具體如下：

前面一篇介紹了幾種基本的jQuery選擇器，今天歸納一下jQuery的層次選擇器。DOM元素之間的層次關(guān)系主要包括元素的子元素、后代元素、相鄰元素和兄弟元素等，我們可以通過(guò)DOM元素之間的層次關(guān)系來(lái)獲取想要的元素。為了更好的學(xué)習(xí)，我們先列出一段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必須是相鄰的兄弟關(guān)系）。
返回值：元素集合

示例：

<script type="text/javascript">
  $(document).ready(function(){
    //【寫(xiě)法1】寫(xiě)法1與寫(xiě)法2等價(jià)
    $("#one + span").css("background","#ffbbaa");
    //【寫(xiě)法2】
    $("#one").next("span").css("background","#ffbbaa");
    //【寫(xiě)法3】寫(xiě)法3、寫(xiě)法4與寫(xiě)法5等價(jià)
    $("#one").nextAll("span:first").css("background","#ffbbaa");
    //【寫(xiě)法4】
    $("#one").nextAll("span:eq(0)").css("background","#ffbbaa");
    //【寫(xiě)法5】
    $("#one").nextAll("span").eq(0).css("background","#ffbbaa");
  });
</script>

當(dāng)#one元素之后存在兄弟span元素，但span元素均與#one元素不相鄰時(shí)，寫(xiě)法3、寫(xiě)法4和寫(xiě)法5可以查詢到結(jié)果，寫(xiě)法1和寫(xiě)法2查詢不到結(jié)果。
當(dāng)#one元素之后存在相鄰的兄弟span元素時(shí)，寫(xiě)法1、寫(xiě)法2、寫(xiě)法3、寫(xiě)法4和寫(xiě)法5查詢到的結(jié)果相同。

4、兄弟元素選擇器

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

示例：

<script type="text/javascript">
  $(document).ready(function(){
    //【寫(xiě)法1】寫(xiě)法1與寫(xiě)法2等價(jià)
    $("#two ~ div").css("border","1px solid #ffbbaa");
    $(".mini:eq(1) ~ div").css("border","1px solid #ffbbaa");
    //【寫(xiě)法2】
    $("#two").nextAll("div").css("border","1px solid #ffbbaa");
    $(".mini:eq(1)").nextAll("div").css("border","1px solid #ffbbaa");
  });
</script>

5、prev()和prevAll()

篩選方法：prev()
描述：取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的前一個(gè)同輩元素的元素集合。
返回值：元素集合

示例：

<script type="text/javascript">
  $(document).ready(function(){
    //【寫(xiě)法1】
    $("span:first").prev(".bbb").css("background", "#ffbbaa");
    //【寫(xiě)法2】寫(xiě)法2、寫(xiě)法3和寫(xiě)法4等價(jià)
    $("span:first).prevAll(".bbb:first").css("background", "#ffbbaa");
    //【寫(xiě)法3】
    $("span:first).prevAll(".bbb:eq(0)").css("background", "#ffbbaa");
    //【寫(xiě)法4】
    $("span:first).prevAll(".bbb").eq(0).css("background", "#ffbbaa");
  });
</script>

當(dāng)span:first元素之前存在兄弟.bbb元素，但.bbb元素均與span:first元素不相鄰時(shí)，寫(xiě)法2、寫(xiě)法3和寫(xiě)法4可以查詢到結(jié)果，寫(xiě)法1查詢不到結(jié)果。
當(dāng)span:first元素之前存在相鄰的兄弟.bbb元素時(shí)，寫(xiě)法1、寫(xiě)法2、寫(xiě)法3和寫(xiě)法4查詢到的結(jié)果相同。

篩選方法：prevAll()
描述：查找當(dāng)前元素之前所有的同輩元素。
返回值：元素集合

示例：

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

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript獲取onclick、onchange等事件值的代碼
這里主要是用到了getAttributeNode()這個(gè)方法，它獲取的是屬性節(jié)點(diǎn)，忽略屬性和事件的差別，具體示例如下，感興趣的朋友可以參考下哈希望對(duì)大家有所幫助
2013-07-07
使用jquery實(shí)現(xiàn)select添加實(shí)現(xiàn)后臺(tái)權(quán)限添加的效果
使用jquery實(shí)現(xiàn)select添加實(shí)現(xiàn)后臺(tái)權(quán)限添加的效果，需要的朋友可以參考下。
2011-05-05
基于jQuery實(shí)現(xiàn)收縮展開(kāi)功能
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)收縮展開(kāi)功能的相關(guān)資料,需要的朋友可以參考下
2016-03-03
JQuery中模擬image的ajaxPrefilter與ajaxTransport處理
這篇文章主要介紹了JQuery中模擬image的ajaxPrefilter與ajaxTransport處理,本文直接給出模擬實(shí)現(xiàn)代碼,代碼中包含詳細(xì)注釋,需要的朋友可以參考下
2015-06-06
jQuery實(shí)現(xiàn)三級(jí)菜單的代碼
上周新接手一個(gè)網(wǎng)站建設(shè)的活兒，其中有需要要jquery代碼實(shí)現(xiàn)三級(jí)菜單的需求，其實(shí)說(shuō)難也不難，下面小編把代碼分享給大家，供大家參考
2016-05-05
這篇文章主要介紹了jQuery鏈?zhǔn)褂梅椒?，以及用哪些方法尅控制jQuery鏈，非常的詳細(xì),需要的朋友可以參考下
2015-01-01