ホームページ > ウェブフロントエンド > jsチュートリアル > Juqery ラーニング 4 フィルター Search_jquery

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

WBOY
リリース: 2016-05-16 18:15:06
オリジナル
954 人が閲覧しました

add(expr)

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

返回值

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()之考虑子元素而不考虑所有后代元素。

返回值

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,则查找文档内容

返回值

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的选择器语法来写。

返回值

jQuery

参数

expr (String) :用于查找的表达式

示例

从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同。

HTML 代码:

Hello, how are you?

jQuery 代码:

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

结果:

[ Hello ]

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

next([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。

返回值

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])

查找当前元素之后的所有元素。
可以用表达式过滤

返回值

jQuery

参数

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

示例

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

HTML 代码:

jQuery 代码:

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

结果:

[
,
,
]

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

parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。
你可以使用可选的表达式来筛选。

返回值

jQuery

参数

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

示例

查找每个段落的父元素

HTML 代码:

Hello

Hello

jQuery 代码:

$("p").parent()

结果:

[

Hello

Hello

]

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

HTML 代码:

Hello

Hello Again

jQuery 代码:

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

结果:

[

Hello Again

]

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

parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。

返回值

jQuery

参数

expr (String) : (可选) 用于筛选祖先元素的表达式

示例

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

HTML 代码:

Hello

Hello Again

jQuery 代码:

$("span").parents()

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

jQuery 代码:

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

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

prev([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。

返回值

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])

查找当前元素之前所有的同辈元素
可以用表达式过滤。

返回值

jQuery

参数

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

示例

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

HTML 代码:

jQuery 代码:

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

结果:

[
,
,
]

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

siblings([expr])

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

返回值

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

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

HTML コード:

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

jQuery コード:

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

結果:

[

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

]

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート