溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何在jQuery中使用層次選擇器？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。
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>看完上述內容，你們掌握如何在jQuery中使用層次選擇器的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
