jQuery選擇器——層次選擇器

changuncle發表於2017-07-30
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、兄弟元素選擇器

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

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

5、prev()和prevAll()

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

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

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

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

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

相關文章