juqery 学习之四筛选查找_jquery

php中文网

发布： 2016-05-16 18:15:06

原创

1020人浏览过

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

jQuery 代码:

$("p").parent()

结果:

[

hello

juqery 学习之四 筛选查找_jquery

add(expr)

返回值

参数

示例

children([expr])

返回值

参数

示例

contents()

返回值

示例

find(expr)

返回值

参数

示例

next([expr])

返回值

参数

示例

nextAll([expr])

返回值

参数

示例

parent([expr])

返回值

参数

示例

juqery 学习之四筛选查找_jquery