前端开发利器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

expr: 用于匹配元素并添加的表达式字符串，或者用于动态生成的 HTML 代码，如果是一个字符串数组则返回多个元素
context: 作为待查找的 DOM 元素集、文档或 jQuery 对象。

添加一个新元素到一组匹配的元素中，并且这个新元素能匹配给定的表达式。

HTML 代码:

1	<p>Hello</p><span>Hello Again</span>

jQuery 代码:

1	$("p").add("span");

结果:

1	[ <p>Hello</p>, <span>Hello Again</span> ]

动态生成一个元素并添加至匹配的元素中

HTML 代码:

1	<p>Hello</p>

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

$("SET").end();

选取所有的 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> ]

$("SET").contents();

查找所有文本节点并加粗

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!");

$("SET").addBack();

参数	描述
`[selector ]`	一个字符串，其中包含一个选择器表达式，匹配当前元素集合不包括在内的元素

.addBack()方法导致前一组遍历堆栈中的 DOM 元素被添加到当前组。在第一个例子中，堆栈包含组的结果来自.find("p")。在第二个例子中，.addBack()将之前组的元素添加到堆栈中 – 在这种情况下（$("div.after-addback") – 到当前集合，选择了两个 div 和其封闭的段落。

<!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");

// First Example
$("div.before-addback").find("p").addClass("background");

// Second Example
$("div.after-addback").find("p").addBack().addClass("background");
</script>

</body>
</html>