如何在jQuery中使用層次選擇器

如何在jQuery中使用層次選擇器？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、網(wǎng)站空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、五大連池網(wǎng)站維護(hù)、網(wǎng)站推廣。

jquery是什么

jquery是一個(gè)簡(jiǎn)潔而快速的JavaScript庫(kù)，它具有獨(dú)特的鏈?zhǔn)秸Z(yǔ)法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對(duì)CSS選擇器進(jìn)行擴(kuò)展、擁有便捷的插件擴(kuò)展機(jī)制和豐富的插件，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫(kù)，能夠用于簡(jiǎn)化事件處理、HTML文檔遍歷、Ajax交互和動(dòng)畫，以便快速開發(fā)網(wǎng)站。

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(){
    //【寫法1】寫法1與寫法2等價(jià)
    $("#one + span").css("background","#ffbbaa");
    //【寫法2】
    $("#one").next("span").css("background","#ffbbaa");
    //【寫法3】寫法3、寫法4與寫法5等價(jià)
    $("#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>

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

4、兄弟元素選擇器

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

示例：

<script type="text/javascript">
  $(document).ready(function(){
    //【寫法1】寫法1與寫法2等價(jià)
    $("#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");
  });
</script>

5、prev()和prevAll()

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

示例：

<script type="text/javascript">
  $(document).ready(function(){
    //【寫法1】
    $("span:first").prev(".bbb").css("background", "#ffbbaa");
    //【寫法2】寫法2、寫法3和寫法4等價(jià)
    $("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");
  });
</script>

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

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

示例：

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

看完上述內(nèi)容，你們掌握如何在jQuery中使用層次選擇器的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站標(biāo)題：如何在jQuery中使用層次選擇器
文章網(wǎng)址：http://muchs.cn/article46/ipiihg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、企業(yè)網(wǎng)站制作、外貿(mào)建站、網(wǎng)站營(yíng)銷、網(wǎng)站制作、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容