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必須是相鄰的兄弟關(guān)系）。
返回值：元素集合

示例：

  $(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可以查詢到結(jié)果，寫法1和寫法2查詢不到結(jié)果。

• 當#one元素之后存在相鄰的兄弟span元素時，寫法1、寫法2、寫法3、寫法4和寫法5查詢到的結(jié)果相同。

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可以查詢到結(jié)果，寫法1查詢不到結(jié)果。

• 當span:first元素之前存在相鄰的兄弟.bbb元素時，寫法1、寫法2、寫法3和寫法4查詢到的結(jié)果相同。

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

示例：

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

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

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。