返回值:jQueryadd(selector)

向匹配的元素集合中添加元素。

若一个 jQuery 对象代表了一个 DOM 元素集合，.add() 方法会生成一个新的 jQuery 对象，其中包括那些被选中的元素及传入的参数。.add() 的参数几乎可以是任何 $() 可接受的参数，包括 jQuery 选择器表达式，DOM 元素的引用，或者是一个 HTML 片断。

新生成的 jQuery 对象可以使用链式方式继续调用其它方法或者将其赋给一个变量，方便以后使用。例如：

$("p").add("div").addClass("widget");
var pdiv = $("p").add("div");

以下的用法，并不会保存新添加的元素，因为 .add() 方法创建了一个新的集合，所以并没有改变 pdiv 的原始集合： 

var pdiv = $("p");
pdiv.add("div");  // WRONG, pdiv will not change

假设有如下一个无序列表及一个段落：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
<p>a paragraph</p>

我们可以先选择列表，然后使用选择器或 DOM 元素引用作为 .add() 方法的参数，将段落添加到列表中： 

$('li').add('p').css('background-color', 'red');

或者:

$('li').add(document.getElementsByTagName('p')[0])
  .css('background-color', 'red');

其执行结果是，所有四个元素（三个 li 元素及一个 p 元素）的背景变成了红色。若使用一个 HTML 片断作为 .add() 方法的参数的话，我们可以动态的向匹配的元素集合中添加元素。例如，我们可以改变列表和新添加的段落的背景色： 

$('li').add('<p id="new">new paragraph</p>')
  .css('background-color', 'red');

在上述的代码中，尽管创建了新的段落，并且改变了它的背景色，但是新的段落并没有显示在页面上。要想在页面上显示该段落，我们需要在链式方式中使用 jQuery 的插入方法。

从 jQuery 1.4 开始，.add() 的结果会按照文档顺序返回(而不是简单的串联)。

注意: To reverse the .add() you can use .not( elements | selector ) to remove elements from the jQuery results, or .end() to return to the selection before you added.

示例:

查找所有的 div，并且添加一个边框。然后将所有的段落添加到 jQuery 对象中，并将它们的背景色变成黄色。

<!DOCTYPE html>
<html>
<head>
<style>
 div { width:60px; height:60px; margin:10px; float:left; }
 p { clear:left; font-weight:bold; font-size:16px; 
     color:blue; margin:0 10px; padding:2px; }
 </style>
<script src="jquery.min.js"></script>
</head>
<body>

<div></div>

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <p>Added this... (notice no border)</p>

<script>



$("div").css("border", "2px solid red")
        .add("p")
        .css("background", "yellow");


</script>
</body>
</html>

演示:

示例:

根据给定的表达式，向匹配的元素集合中添加一些元素。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>

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

<script>

$("p").add("span").css("background", "yellow");

</script>
</body>
</html>

演示:

示例:

动态的向匹配的元素集合中添加一些元素。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>

<p>Hello</p>

<script>

$("p").clone().add("<span>Again</span>").appendTo(document.body);

</script>
</body>
</html>

演示:

示例:

向匹配的元素集合中添加一些元素对象。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>

<p>Hello</p><span id="a">Hello Again</span>

<script>

$("p").add(document.getElementById("a")).css("background", "yellow");

</script>
</body>
</html>

演示:

示例:

以下示例展示了如何向一个已经存在的集合中添加元素。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>

<p>Hello</p><span id="a">Hello Again</span>

<script>

var collection = $("p");
// capture the new collection
collection = collection.add(document.getElementById("a"));
collection.css("background", "yellow");

</script>
</body>
</html>

演示: