3.3.3 串联方法

发表于 更新于 分类于 ， ， Waline： 本文字数： 2k 阅读时长 ≈ 2 分钟

3.3.3 串联方法

前面的过滤、导航等方法都会对原有的jQuery对象进行”破坏”—通常都会减去原jQuery对象中包含的部分DOM 对象。下面的方法则能以不同方式找到被进行”破坏”操作之前的jQuery对象。

  • add(selector|elements|html|jQuery[,context]):为原来的jQuery对象添加新的DOM元素。该方法的参数既可以是任何合法的选择器,也可以是原始的HTML代码(该方法将会把HTML代码转化为DOM对象后添加到jQuery里),也可以是未经包装的DOM元素,还可以是另一个jQuery对象(该方法会将另一个jQuery中包含的DOM元素添加到原有的jQuery对象中)。如果指定了selector参数,则可以指定context参数,以只在指定context中查找匹配的DOM元素。
    • jQuery 1.9修改了该add方法,修改后的add()方法返回的jQuery对象总会按照这些DOM节点在document(文档)中的顺序来排列它们。
  • andBack():该方法通常与上一节介绍的查找方法结合使用,作用是将查找之前的结果和查找之后的结果混合在一起。
  • end():该方法通常也是和前面的过滤、查找方法结合使用,用于将jQuery对象恢复到上一次执行过滤、查找方法之前的状态。
    • end()方法的作用有点类似于”撤销“操作,在对某个jQuery 对象调用end()方法之后,该jQuery对象的状态将恢复到调用end()前执行某个方法之前的状态。

如下的代码示范了这两个方法的用法。

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
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 链接方法 </title>
</head>

<body>
    <div style="padding:20px">
        <div id="java">疯狂Java讲义</div>
        <div id="javaee">轻量级Java EE企业应用实战</div>
        <div id="ajax">疯狂前端开发讲义</div>
        <div id="xml">疯狂XML讲义</div>
        <div id="ejb">经典Java EE企业应用实战</div>
        <div id="android">疯狂Android讲义</div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 将文档中id为java的元素和HTML字符串合并成一个jQuery对象
        // 将两个元素插在<body.../>元素的前面
        $("#java").add("<p>新加的元素</p>").prependTo("body");

        // 获取id为ajax节点的下一个兄弟节点，再将id为ajax的节点与此链为一体。
        // 实际返回id为ajax的节点、以及id为ajax的下一个节点
        $("#ajax").next().addBack().css("border", "2px solid black");
        
        // 先获取ajax节点的下一个节点，再次使用end()方法重新获取之前的ajax节点
        // 实际方返回的就是$("#ajax")的结果
        $("#ajax").next().end().css("background-color", "#ffaaaa");
    </script>
</body>

</html>