• 为了保证你在浏览本网站时有着更好的体验,建议使用类似Chrome、Firefox之类的浏览器~~
    • 如果你喜欢本站的内容何不Ctrl+D收藏一下呢,与大家一起分享各种编程知识~
    • 本网站研究机器学习、计算机视觉、模式识别~当然不局限于此,生命在于折腾,何不年轻时多折腾一下

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

web admin 3年前 (2016-07-16) 1335次浏览 0个评论 扫描二维码

jquery-selectors-02

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 代码:

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 和其封闭的段落。

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

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

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

</body>
</html>

Deeplearn, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明前端开发利器 jQuery-筛选器之串联
喜欢 (0)
admin
关于作者:
互联网行业码农一枚/业余铲屎官/数码影音爱好者/二次元

您必须 登录 才能发表评论!