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

2,530次阅读

Contents

1 jQuery筛选器之查找
- 1.1 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>