Juqery ラーニング 4 フィルター Search_jquery

add(expr)

把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

---

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

返回值

jQuery

参数

expr (String, DOMElement, Array) : 用于匹配元素并添加的表达式字符串，或者用于动态生成的HTML代码，如果是一个字符串数组则返回多个元素

示例

添加一个新元素到一组匹配的元素中，并且这个新元素能匹配给定的表达式。

HTML 代码:

Hello

Hello Again

jQuery 代码:

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

结果:

[

Hello

, Hello Again ]

---

动态生成一个元素并添加至匹配的元素中

HTML 代码:

Hello

jQuery 代码:

$("p").add("Again")

结果:

[

Hello

, Hello Again ]

---

为匹配的元素添加一个或者多个元素

HTML 代码:

Hello

Hello Again

jQuery 代码:

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

结果:

[

Hello

,

Hello Again

, Hello Again ]

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

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 代码:

Hello

Hello Again

And Again

jQuery 代码:

$("div").children()

结果:

[ Hello Again ]

---

在每个div中查找 .selected 的类。

HTML 代码:

Hello

Hello Again

And Again

jQuery 代码:

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

结果:

[

Hello Again

]

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

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 代码:

Hello John, how are you doing?

jQuery 代码:

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

结果:

Hello John, how are you doing?

---

往一个空框架中加些内容

HTML 代码:

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 代码:

Hello, how are you?

jQuery 代码:

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

结果:

[ Hello ]

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

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 代码:

Hello

Hello Again

And Again

jQuery 代码:

$("p").next()

结果:

[

Hello Again

,

And Again

]

---

找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

HTML 代码:

Hello

Hello Again

And Again

jQuery 代码:

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

结果:

[

Hello Again

]

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

nextAll([expr])

查找当前元素之后的所有元素。

可以用表达式过滤

---

Find all sibling elements after the current element.

Use an optional expression to filter the matched set.

返回值

jQuery

参数

expr (String) : (可选)用来过滤的表达式

示例

给第一个div之后的所有元素加个类

HTML 代码:

jQuery 代码:

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

结果:

[

,

,

]

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

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 代码:

Hello

Hello

jQuery 代码:

$("p").parent()

结果:

[

Hello

Hello

]

---

查找段落的父元素中每个类名为selected的父元素。

HTML 代码:

Hello

Hello Again

jQuery 代码:

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

结果:

[

Hello Again

]

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

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 代码:

Hello

Hello Again

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 代码:

Hello

Hello Again

And Again

jQuery 代码:

$("p").prev()

结果:

[

Hello Again

]

---

找到每个段落紧邻的前一个同辈元素中类名为selected的元素。

HTML 代码:

Hello

Hello Again

And Again

jQuery 代码:

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

结果:

[

Hello Again

]

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

prevAll([expr])

查找当前元素之前所有的同辈元素

可以用表达式过滤。

---

Find all sibling elements before the current element.

Use an optional expression to filter the matched set.

返回值

jQuery

参数

expr (String) : (可选) 用于过滤的表达式

示例

给最后一个之前的所有div加上一个类

HTML 代码:

jQuery 代码:

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

结果:

[

,

,

]

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

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 代码:

Hello

Hello Again

And Again

jQuery 代码:

$("div").siblings()

结果:

[

Hello

,

And Again

]

---

各 div のすべての兄弟要素の中から選択されたクラス名を持つ要素を検索します。

HTML コード:

こんにちは

またこんにちは

またまた

jQuery コード:

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

結果:

[

こんにちは

]

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

andSelf()

前に選択した要素を現在の要素に追加します

以前に選択した要素をフィルタリングまたは検索された要素に追加する場合に便利です。

---

前の選択内容を現在の選択内容に追加します。

要素をトラバースし、最後のトラバージョンの前に一致したものを追加する場合に便利です。

戻り値

jQuery

例

すべての div と内部 p を選択し、ボーダー クラスを追加します

HTML コード:

最初の段落

2 番目の段落

jQuery コード:

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

結果:

最初の段落

2 番目の段落

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

終了()

最後の「破壊的」操作に戻ります。つまり、一致する要素リストを前の状態に変更します。

以前に破壊的な操作がない場合は、空のセットを返します。いわゆる「破壊的」とは、一致した jQuery 要素を変更する操作を指します。これには、jQuery オブジェクトを返す Traversing の関数 (「add」、「andSelf」、「children」、「filter」、「find」、「map」、「next」、「nextAll」、「not」、「parent」) が含まれます。 '、'parents'、'prev'、'prevAll'、'siblings'、および 'slice' - 操作の 'clone' に加えて。

---

最新の「破壊的」操作を元に戻し、一致した要素のセットを以前の状態 (破壊的操作の直前) に変更します。

以前に破壊的な操作がなかった場合、空のセットが返されます。「破壊的な」操作とは、一致した jQuery 要素のセットを変更する操作です。これは、「add」を含む、jQuery オブジェクトを返す任意のトラバース関数を意味します。 'andSelf'、'children'、'filter'、'find'、'map'、'next'、'nextAll'、'not'、'parent'、'parents'、'prev'、'prevAll'、'siblings ' とスライス - 'クローン' 関数 (操作から) を加えます。

戻り値

jQuery

例

すべての p 要素を選択し、span サブ要素を見つけて選択し、戻って p 要素を選択します

HTML コード:

こんにちは、お元気ですか?

jQuery コード:

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

結果:

[

こんにちはお元気ですか?

]