前端开发利器jQuery-筛选器之串联

2,049次阅读
没有评论

前端开发利器jQuery-筛选器之串联

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
  1. expr: 用于匹配元素并添加的表达式字符串，或者用于动态生成的HTML代码，如果是一个字符串数组则返回多个元素
  2. 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>
发表于：web
2016-07-16
# web
复制链接
赏
admin
版权声明：本站原创文章，由admin2016-07-16发表，共计2626字。
转载提示：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。
prettify 代码高亮插件使用
Xpath相关语法
前端开发利器jQuery-筛选器之过滤
前端开发利器jQuery-筛选器之串联
评论（没有评论）