天天看點

jQuery擷取父級元素、同級元素、子元素、過濾

[size=medium][b]父級元素:[/b][/size]

1.parent() 方法傳回被選元素的直接父元素。

2.parents() 方法傳回被選元素的所有祖先元素,它一路向上直到文檔的根元素 (<html>)。

3.parentsUntil() 方法傳回介于兩個給定元素之間的所有祖先元素。

4.closest()

closest會首先檢查目前元素是否比對,如果比對則直接傳回元素本身。如果不比對則向上查找父元素,一層一層往上,直到找到比對選擇器的元素。如果什麼都沒找到則傳回一個空的jQuery對象。

closest和parents的主要差別是:1,前者從目前元素開始比對尋找,後者從父元素開始比對尋找;2,前者逐級向上查找,直到發現比對的元素後 就停止了,後者一直向上查找直到根元素,然後把這些元素放進一個臨時集合中,再用給定的選擇器表達式去過濾;3,前者傳回0或1個元素,後者可能包含0 個,1個,或者多個元素。

closest對于處理事件委派非常有用。

[size=medium][b]同級元素:[/b][/size]

1.siblings() 方法傳回被選元素的所有同胞元素。

傳回 <h2> 的所有同胞元素

$("h2").siblings("p");
           

傳回屬于 <h2> 的同胞元素的所有 <p> 元素

2.next() 方法傳回被選元素的下一個同胞元素。

3.nextAll() 方法傳回被選元素的所有跟随的同胞元素。

4.nextUntil() 方法傳回介于兩個給定參數之間的所有跟随的同胞元素。

$("h2").nextUntil("h6");
           

傳回介于 <h2> 與 <h6> 元素之間的所有同胞元素

5.prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似,隻不過方向相反而已

[size=medium][b]子元素:[/b][/size]

1.children() 方法傳回被選元素的所有直接子元素。

也可以使用可選參數來過濾對子元素的搜尋。

$("div").children("p.select");
           

傳回類名為 "select" 的所有 <p> 元素,并且它們是 <div> 的直接子元素

2.find() 方法傳回被選元素的後代元素,一路向下直到最後一個後代。

[size=medium][b]過濾:[/b][/size]

1.first() 方法傳回被選元素的首個元素。

2.last() 方法傳回被選元素的最後一個元素。

3.eq() 方法傳回被選元素中帶有指定索引号的元素。

4.filter() 方法允許您規定一個标準。不比對這個标準的元素會被從集合中删除,比對的元素會被傳回。

傳回帶有類名 "intro" 的所有 <p> 元素

5.not() 方法傳回不比對标準的所有元素。