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,context
- expr: 用于匹配元素并添加的表达式字符串,或者用于动态生成的HTML代码,如果是一个字符串数组则返回多个元素
- context: 作为待查找的 DOM 元素集、文档或 jQuery 对象。
添加一个新元素到一组匹配的元素中,并且这个新元素能匹配给定的表达式。
HTML代码:
<span class="line">1</span> |
<span class="line"><span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span><span class="tag"><<span class="name">span</span>></span>Hello Again<span class="tag"></<span class="name">span</span>></span></span> |
jQuery代码:
<span class="line">1</span> |
<span class="line">$(<span class="string">"p"</span>).add(<span class="string">"span"</span>);</span> |
结果:
<span class="line">1</span> |
<span class="line">[ <span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span>, <span class="tag"><<span class="name">span</span>></span>Hello Again<span class="tag"></<span class="name">span</span>></span> ]</span> |
动态生成一个元素并添加至匹配的元素中
HTML代码:
<span class="line">1</span> |
<span class="line"><span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span></span> |
jQuery代码:
<span class="line">1</span> |
<span class="line">$(<span class="string">"p"</span>).add(<span class="string">"<span>Again</span>"</span>);</span> |
结果:
<span class="line">1</span> |
<span class="line">[ <span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span>, <span class="tag"><<span class="name">span</span>></span>Hello Again<span class="tag"></<span class="name">span</span>></span> ]</span> |
为匹配的元素添加一个或者多个元素
HTML代码:
<span class="line">1</span> |
<span class="line"><span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span><span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">span</span> <span class="attr">id</span>=<span class="string">"a"</span>></span>Hello Again<span class="tag"></<span class="name">span</span>></span><span class="tag"></<span class="name">p</span>></span></span> |
jQuery代码:
<span class="line">1</span> |
<span class="line">$(<span class="string">"p"</span>).add(<span class="built_in">document</span>.getElementById(<span class="string">"a"</span>));</span> |
结果:
<span class="line">1</span> |
<span class="line">[ <span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span>, <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">span</span> <span class="attr">id</span>=<span class="string">"a"</span>></span>Hello Again<span class="tag"></<span class="name">span</span>></span><span class="tag"></<span class="name">p</span>></span>, <span class="tag"><<span class="name">span</span> <span class="attr">id</span>=<span class="string">"a"</span>></span>Hello Again<span class="tag"></<span class="name">span</span>></span> ]</span> |
$("SET").end();
选取所有的p元素,查找并选取span子元素,然后再回过来选取p元素
HTML代码:
<span class="line">1</span> |
<span class="line"><span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">span</span>></span>Hello<span class="tag"></<span class="name">span</span>></span>,how are you?<span class="tag"></<span class="name">p</span>></span></span> |
jQuery代码:
<span class="line">1</span> |
<span class="line">$(<span class="string">"p"</span>).find(<span class="string">"span"</span>).end();</span> |
结果:
<span class="line">1</span> |
<span class="line">[ <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">span</span>></span>Hello<span class="tag"></<span class="name">span</span>></span> how are you?<span class="tag"></<span class="name">p</span>></span> ]</span> |
$("SET").contents();
查找所有文本节点并加粗
HTML代码:
<span class="line">1</span> |
<span class="line"><span class="tag"><<span class="name">p</span>></span>Hello <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://ejohn.org/"</span>></span>John<span class="tag"></<span class="name">a</span>></span>, how are you doing?<span class="tag"></<span class="name">p</span>></span></span> |
jQuery代码:
<span class="line">1</span> |
<span class="line">$(<span class="string">"p"</span>).contents().not(<span class="string">"[nodeType=1]"</span>).wrap(<span class="string">"<b/>"</span>);</span> |
结果:
<span class="line">1</span> |
<span class="line"><span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">b</span>></span>Hello<span class="tag"></<span class="name">b</span>></span> <span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://ejohn.org/"</span>></span>John<span class="tag"></<span class="name">a</span>></span>, <span class="tag"><<span class="name">b</span>></span>how are you doing?<span class="tag"></<span class="name">b</span>></span><span class="tag"></<span class="name">p</span>></span></span> |
往一个空框架中加些内容
HTML代码:
<span class="line">1</span> |
<span class="line"><span class="tag"><<span class="name">iframe</span> <span class="attr">src</span>=<span class="string">"/index-blank.html"</span> <span class="attr">width</span>=<span class="string">"300"</span> <span class="attr">height</span>=<span class="string">"100"</span>></span><span class="tag"></<span class="name">iframe</span>></span></span> |
jQuery代码:
<span class="line">1</span>
2
|
<span class="line">$(<span class="string">"iframe"</span>).contents().find(<span class="string">"body"</span>)</span> <span class="line"> .append(<span class="string">"I'm in an iframe!"</span>);</span> |
$("SET").addBack();
参数 | 描述 |
---|---|
[selector ] |
一个字符串,其中包含一个选择器表达式,匹配当前元素集合不包括在内的元素 |
.addBack()
方法导致前一组遍历堆栈中的DOM元素被添加到当前组。 在第一个例子中,堆栈包含组的结果来自.find("p")
。 在第二个例子中,.addBack()
将之前组的元素添加到堆栈中 – 在这种情况下($("div.after-addback")
– 到当前集合, 选择了两个div和其封闭的段落。
<span class="line">1</span> 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 |
<span class="line"><span class="meta"><!DOCTYPE html></span></span> <span class="line"><span class="tag"><<span class="name">html</span>></span></span> <span class="line"><span class="tag"><<span class="name">head</span>></span></span> <span class="line"> <span class="tag"><<span class="name">style</span>></span> <span class="line">p, div { margin:5px; padding:5px; }</span> <span class="line">.border { border: 2px solid red; }</span> <span class="line">.background { background:yellow; }</span> <span class="line">.left, .right { width: 45%; float: left;}</span> <span class="line">.right { margin-left:3%; }</span> <span class="tag"></<span class="name">style</span>></span></span> <span class="line"> <span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"http://code.jquery.com/jquery-latest.js"</span>></span> <span class="tag"></<span class="name">script</span>></span></span> <span class="line"><span class="tag"></<span class="name">head</span>></span></span> <span class="line"><span class="tag"><<span class="name">body</span>></span></span> <span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"left"</span>></span></span> <span class="line"> <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">strong</span>></span>Before <span class="tag"><<span class="name">code</span>></span>addBack()<span class="tag"></<span class="name">code</span>></span><span class="tag"></<span class="name">strong</span>></span><span class="tag"></<span class="name">p</span>></span></span> <span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"before-addback"</span>></span></span> <span class="line"> <span class="tag"><<span class="name">p</span>></span>First Paragraph<span class="tag"></<span class="name">p</span>></span></span> <span class="line"> <span class="tag"><<span class="name">p</span>></span>Second Paragraph<span class="tag"></<span class="name">p</span>></span></span> <span class="line"> <span class="tag"></<span class="name">div</span>></span></span> <span class="line"><span class="tag"></<span class="name">div</span>></span></span> <span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"right"</span>></span></span> <span class="line"> <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">strong</span>></span>After <span class="tag"><<span class="name">code</span>></span>addBack()<span class="tag"></<span class="name">code</span>></span><span class="tag"></<span class="name">strong</span>></span><span class="tag"></<span class="name">p</span>></span></span> <span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"after-addback"</span>></span></span> <span class="line"> <span class="tag"><<span class="name">p</span>></span>First Paragraph<span class="tag"></<span class="name">p</span>></span></span> <span class="line"> <span class="tag"><<span class="name">p</span>></span>Second Paragraph<span class="tag"></<span class="name">p</span>></span></span> <span class="line"> <span class="tag"></<span class="name">div</span>></span></span> <span class="line"><span class="tag"></<span class="name">div</span>></span></span> <span class="line"><span class="tag"><<span class="name">script</span>></span> <span class="line">$(<span class="string">"div.left, div.right"</span>).find(<span class="string">"div, div > p"</span>).addClass(<span class="string">"border"</span>);</span> <span class="line"><span class="comment">// First Example</span></span> <span class="line">$(<span class="string">"div.before-addback"</span>).find(<span class="string">"p"</span>).addClass(<span class="string">"background"</span>);</span> <span class="line"><span class="comment">// Second Example</span></span> <span class="line">$(<span class="string">"div.after-addback"</span>).find(<span class="string">"p"</span>).addBack().addClass(<span class="string">"background"</span>);</span> <span class="tag"></<span class="name">script</span>></span></span> <span class="line"><span class="tag"></<span class="name">body</span>></span></span> <span class="line"><span class="tag"></<span class="name">html</span>></span></span> |