本文實(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>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>篩選方法：prevAll()
描述：查找當(dāng)前元素之前所有的同輩元素。
返回值：元素集合
示例：
<script type="text/javascript"> $(document).ready(function(){ $("#two").prevAll("div").css("background", "#ffbbaa"); });</script>感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.VeVB.COm/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
