本文實例講述了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、兄弟元素選擇器
新聞熱點
疑難解答
圖片精選
