0%

3.3.3 串联方法

发表于 更新于 分类于 ， ，

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>

原文链接: 3.3.3 串联方法