add(expr)

把與表達式匹配的元素添加到jQuery對象中。這個函數可以用於連接分別與兩個表達式匹配的元素結果集。

---

Adds more elements, matched by the given expression, to the set of matched elements.

返回值

jQuery

參數

expr (String, DOMElement, Array<DOMElement>) : 用於匹配元素並添加的表達式字符串，或者用於動態生成的HTML代碼，如果是一個字符串數組則返回多個元素

示例

添加一個新元素到一組匹配的元素中，並且這個新元素能匹配給定的表達式。

HTML 代碼:

<p>Hello</p><span>Hello Again</span>

jQuery 代碼:

$("p").add("span")

結果:

[ <p>Hello</p>, <span>Hello Again</span> ]

---

動態生成一個元素並添加至匹配的元素中

HTML 代碼:

<p>Hello</p>

jQuery 代碼:

$("p").add("<span>Again</span>")

結果:

[ <p>Hello</p>, <span>Hello Again</span> ]

---

為匹配的元素添加一個或者多個元素

HTML 代碼:

<p>Hello</p><p><span id="a">Hello Again</span></p>

jQuery 代碼:

$("p").add(document.getElementById("a"))

結果:

[ <p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span> ]

----------------------------------------------------------------------------------------------------------------

children([expr])

取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。 可以通過可選的表達式來過濾所匹配的子元素。注意：parents()將查找所有祖輩元素，而children()之考慮子元素而不考慮所有後代元素。

---

Get a set of elements containing all of the unique children of each of the matched set of elements. This set can be filtered with an optional expression that will cause only elements matching the selector to be collected. Also note: while parents() will look at all ancestors, children() will only consider immediate child elements.

返回值

jQuery

參數

expr (String) : (可選) 用以過濾子元素的表達式

示例

查找DIV中的每個子元素。

HTML 代碼:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代碼:

$("div").children()

結果:

[ <span>Hello Again</span> ]

---

在每個div中查找 .selected 的類。

HTML 代碼:

<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

jQuery 代碼:

$("div").children(".selected")

結果:

[ <p class="selected">Hello Again</p> ]

----------------------------------------------------------------------------------------------------------------

contents()

查找匹配元素內部所有的子節點（包括文本節點）。如果元素是一個iframe，則查找文檔內容

---

Find all the child nodes inside the matched elements (including text nodes), or the content document, if the element is an iframe.

返回值

jQuery

示例

查找所有文本節點並加粗

HTML 代碼:

<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>

jQuery 代碼:

$("p").contents().not("[@nodeType=1]").wrap("<b/>");

結果:

<p><b>Hello</b> <a href="http://ejohn.org/">John</a>, <b>how are you doing?</b></p>

---

往一個空框架中加些內容

HTML 代碼:

<iframe src="/index-blank.html" width="300" height="100"></iframe>

jQuery 代碼:

$("iframe").contents().find("body") .append("I'm in an iframe!");

----------------------------------------------------------------------------------------------------------------

find(expr)

搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的後代元素的好方法。 所有搜索都依靠jQuery表達式來完成。這個表達式可以使用CSS1-3的選擇器語法來寫。

---

Searches for all elements that match the specified expression. This method is a good way to find additional descendant elements with which to process. All searching is done using a jQuery expression. The expression can be written using CSS 1-3 Selector syntax.

返回值

jQuery

參數

expr (String) :用於查找的表達式

示例

從所有的段落開始，進一步搜索下面的span元素。與$("p span")相同。

HTML 代碼:

<p><span>Hello</span>, how are you?</p>

jQuery 代碼:

$("p").find("span")

結果:

[ <span>Hello</span> ]

----------------------------------------------------------------------------------------------------------------

next([expr])

取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。 這個函數只返回後面那個緊鄰的同輩元素，而不是後面所有的同輩元素（可以使用nextAll）。可以用一個可選的表達式進行篩選。

---

Get a set of elements containing the unique next siblings of each of the matched set of elements. It only returns the very next sibling for each element, not all next siblings (nor does it return the next closest sibling). You may provide an optional expression to filter the match.

返回值

jQuery

參數

expr (String) : (可選) 用於篩選的表達式

示例

找到每個段落的後面緊鄰的同輩元素。

HTML 代碼:

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代碼:

$("p").next()

結果:

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

---

找到每個段落的後面緊鄰的同輩元素中類名為selected的元素。

HTML 代碼:

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

jQuery 代碼:

$("p").next(".selected")

結果:

[ <p class="selected">Hello Again</p> ]

----------------------------------------------------------------------------------------------------------------

nextAll([expr])

查找當前元素之後的所有元素。 可以用表達式過濾

---

Find all sibling elements after the current element. Use an optional expression to filter the matched set.

返回值

jQuery

參數

expr (String) : (可選)用來過濾的表達式

示例

給第一個div之後的所有元素加個類

HTML 代碼:

<div></div><div></div><div></div><div></div>

jQuery 代碼:

$("div:first").nextAll().addClass("after");

結果:

[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]

----------------------------------------------------------------------------------------------------------------

parent([expr])

取得一個包含著所有匹配元素的唯一父元素的元素集合。 你可以使用可選的表達式來篩選。

---

Get a set of elements containing the unique parents of the matched set of elements. You may use an optional expression to filter the set of parent elements that will match.

返回值

jQuery

參數

expr (String) : (可選)用來篩選的表達式

示例

查找每個段落的父元素

HTML 代碼:

<div><p>Hello</p><p>Hello</p></div>

jQuery 代碼:

$("p").parent()

結果:

[ <div><p>Hello</p><p>Hello</p></div> </body> ]

---

查找段落的父元素中每個類名為selected的父元素。

HTML 代碼:

<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>

jQuery 代碼:

$("p").parent(".selected")

結果:

[ <div class="selected"><p>Hello Again</p></div> ]

----------------------------------------------------------------------------------------------------------------

parents([expr])

取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通過一個可選的表達式進行篩選。

---

Get a set of elements containing the unique ancestors of the matched set of elements (except for the root element). The matched elements can be filtered with an optional expression.

返回值

jQuery

參數

expr (String) : (可選) 用於篩選祖先元素的表達式

示例

找到每個span元素的所有祖先元素。

HTML 代碼:

<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>

jQuery 代碼:

$("span").parents()

找到每個span的所有是p元素的祖先元素。

jQuery 代碼:

$("span").parents("p")

----------------------------------------------------------------------------------------------------------------

prev([expr])

取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。 可以用一個可選的表達式進行篩選。只有緊鄰的同輩元素會被匹配到，而不是前面所有的同輩元素。

---

Get a set of elements containing the unique previous siblings of each of the matched set of elements. Use an optional expression to filter the matched set. Only the immediately previous sibling is returned, not all previous siblings.

返回值

jQuery

參數

expr (String) : (可選) 用於篩選前一個同輩元素的表達式

示例

找到每個段落緊鄰的前一個同輩元素。

HTML 代碼:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代碼:

$("p").prev()

結果:

[ <div><span>Hello Again</span></div> ]

---

找到每個段落緊鄰的前一個同輩元素中類名為selected的元素。

HTML 代碼:

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代碼:

$("p").prev(".selected")

結果:

[ <p class="selected">Hello Again</p> ]

----------------------------------------------------------------------------------------------------------------

prevAll([expr])

查找當前元素之前所有的同輩元素 可以用表達式過濾。

---

Find all sibling elements before the current element. Use an optional expression to filter the matched set.

返回值

jQuery

參數

expr (String) : (可選) 用於過濾的表達式

示例

給最後一個之前的所有div加上一個類

HTML 代碼:

<div></div><div></div><div></div><div></div>

jQuery 代碼:

$("div:last").prevAll().addClass("before");

結果:

[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]

----------------------------------------------------------------------------------------------------------------

siblings([expr])

取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表達式進行篩選。

---

Get a set of elements containing all of the unique siblings of each of the matched set of elements. Can be filtered with an optional expressions.

返回值

jQuery

參數

expr (String) : (可選) 用於篩選同輩元素的表達式

示例

找到每個div的所有同輩元素。

HTML 代碼:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代碼:

$("div").siblings()

結果:

[ <p>Hello</p>, <p>And Again</p> ]

---

找到每個div的所有同輩元素中帶有類名為selected的元素。

HTML 代碼:

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代碼:

$("p").siblings(".selected")

結果:

[ <p class="selected">Hello Again</p> ]
------------------------------------------------------------------------------------------------------------------------

andSelf()

加入先前所選的加入當前元素中 對於篩選或查找後的元素，要加入先前所選元素時將會很有用。

---

Add the previous selection to the current selection. Useful for traversing elements, and then adding something that was matched before the last traversion.

返回值

jQuery

示例

選取所有div以及內部的p，並加上border類

HTML 代碼:

<div><p>First Paragraph</p><p>Second Paragraph</p></div>

jQuery 代碼:

$("div").find("p").andSelf().addClass("border");

結果:

<div class="border"><p class="border">First Paragraph</p><p class="border">Second Paragraph</p></div>
------------------------------------------------------------------------------------------------------------------------

end()

回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變為前一次的狀態。 如果之前沒有破壞性操作，則返回一個空集。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作。這包括在 Traversing 中任何返回一個jQuery對象的函數--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。

---

Revert the most recent 'destructive' operation, changing the set of matched elements to its previous state (right before the destructive operation). If there was no destructive operation before, an empty set is returned. A 'destructive' operation is any operation that changes the set of matched jQuery elements, which means any Traversing function that returns a jQuery object - including 'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and slice - plus the 'clone' function (from Manipulation).

返回值

jQuery

示例

選取所有的p元素，查找並選取span子元素，然後再回過來選取p元素

HTML 代碼:

<p><span>Hello</span>,how are you?</p>

jQuery 代碼:

$("p").find("span").end()

結果:

[ <p><span>Hello</span> how are you?</p> ]