jQuery-遍歷

這裏寫圖片描述

<div> 元素是 <ul> 的父元素,同時是其中所有內容的祖先。
<ul> 元素是 <li> 元素的父元素,同時是 <div> 的子元素
左邊的 <li> 元素是 <span> 的父元素,<ul> 的子元素,同時是 <div> 的後代。
<span> 元素是 <li> 的子元素,同時是 <ul> 和 <div> 的後代。

jQuery遍歷-祖先 向上遍歷DOM樹

parent()-返回被選元素的直接父元素
parents()-返回被選元素的所有祖先元素。

也可以指定參數eg: parents("ul")
$(document).ready(function(){
  $("span").parents("ul");
}); 
//返回<span>元素的所有祖先,且它是<ul>元素

parentsUntil()-返回介於兩個給定元素之間的所有祖先元素。

jQuery遍歷後代
children()-返回被選元素的所有直接子元素

也可以使用參數來指定。
$(document).ready(function(){
  $("div").children("p.1");
}); 
//返回class="1"且是<div>的直接子元素的所有<p>元素,

find()-返回被選元素的後代元素,一路向下直到最後一個後代

$(document).ready(function(){
  $("div").find("span");
}); //返回<div>後代的所有<span>元素
$(document).ready(function(){
    $("div").find("*");
});//返回<div>的所有後代

在DOM樹中水平遍歷
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

jQuery遍歷-過濾,縮小搜索的範圍
first()-返回被選元素的首個元素
filter()-返回滿足條件的元素
not()-返回不匹配條件的所有元素
last() -返回被選元素的最後一個元素
eq()-返回被選元素中帶有指定索引號的元素。
索引號從 0 開始,因此首個元素的索引號是 0 而不是 1

$(document).ready(function(){
  $("p").eq(1);
}); //選取第二個<p>元素(索引號1)
發佈了83 篇原創文章 · 獲贊 9 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章