
jQuery筛选器之查找
筛选器 |
描述 |
$("SET").add(expr/ele/html/obj[,con]); |
把与表达式匹配的元素添加到jQuery对象中,这个函数可以用于连接分别与两个表达式匹配的元素结果集。 |
$("SET").end(); |
将匹配的元素列表变为前一次的状态 |
$("SET").contents(); |
查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容 |
$("SET").addBack(); |
添加堆栈中元素集合到当前集合,一个选择性的过滤选择器。 |
jQuery筛选器之查找示例
$("SET").add(expr/ele/html/obj[,con]);
参数 |
描述 |
expr |
一个用于匹配元素的选择器字符串 |
elements |
DOM元素 |
html |
HTML片段添加到匹配的元素 |
jQuery object |
一个jqeruy对象增加到匹配的元素 |
- expr: 用于匹配元素并添加的表达式字符串,或者用于动态生成的HTML代码,如果是一个字符串数组则返回多个元素
- context: 作为待查找的 DOM 元素集、文档或 jQuery 对象。
添加一个新元素到一组匹配的元素中,并且这个新元素能匹配给定的表达式。
HTML代码:
1
|
<p>Hello</p><span>Hello Again</span>
|
jQuery代码:
结果:
1
|
[ <p>Hello</p>, <span>Hello Again</span> ]
|
动态生成一个元素并添加至匹配的元素中
HTML代码:
jQuery代码:
1
|
$("p").add("<span>Again</span>");
|
结果:
1
|
[ <p>Hello</p>, <span>Hello Again</span> ]
|
为匹配的元素添加一个或者多个元素
HTML代码:
1
|
<p>Hello</p><p><span id="a">Hello Again</span></p>
|
jQuery代码:
1
|
$("p").add(document.getElementById("a"));
|
结果:
1
|
[ <p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span> ]
|
选取所有的p元素,查找并选取span子元素,然后再回过来选取p元素
HTML代码:
1
|
<p><span>Hello</span>,how are you?</p>
|
jQuery代码:
1
|
$("p").find("span").end();
|
结果:
1
|
[ <p><span>Hello</span> how are you?</p> ]
|
查找所有文本节点并加粗
HTML代码:
1
|
<p>Hello <a href="http://ejohn.org/">John</a>, how are you doing?</p>
|
jQuery代码:
1
|
$("p").contents().not("[nodeType=1]").wrap("<b/>");
|
结果:
1
|
<p><b>Hello</b> <a href="http://ejohn.org/">John</a>, <b>how are you doing?</b></p>
|
往一个空框架中加些内容
HTML代码:
1
|
<iframe src="/index-blank.html" width="300" height="100"></iframe>
|
jQuery代码:
1
2
|
$("iframe").contents().find("body")
.append("I'm in an iframe!");
|
参数 |
描述 |
[selector ] |
一个字符串,其中包含一个选择器表达式,匹配当前元素集合不包括在内的元素 |
.addBack()
方法导致前一组遍历堆栈中的DOM元素被添加到当前组。 在第一个例子中,堆栈包含组的结果来自.find("p")
。 在第二个例子中,.addBack()
将之前组的元素添加到堆栈中 – 在这种情况下($("div.after-addback")
– 到当前集合, 选择了两个div和其封闭的段落。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html>
<head>
<style>
p, div { margin:5px; padding:5px; }
.border { border: 2px solid red; }
.background { background:yellow; }
.left, .right { width: 45%; float: left;}
.right { margin-left:3%; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"> </script>
</head>
<body>
<div class="left">
<p><strong>Before <code>addBack()</code></strong></p>
<div class="before-addback">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
</div>
<div class="right">
<p><strong>After <code>addBack()</code></strong></p>
<div class="after-addback">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
</div>
<script>
$("div.left, div.right").find("div, div > p").addClass("border");
$("div.before-addback").find("p").addClass("background");
$("div.after-addback").find("p").addBack().addClass("background");
</script>
</body>
</html>
|