.add()
.add( selector )
描述：创建一个jQuery对象，把元素添加到匹配元素的集合里。
- selector类型：Selector一个代表选择器表达式的字符串，用来寻找附加的元素，以添加到匹配的元素集合里。
- elements类型：Element一个或更多的要添加到匹配的元素集合中的元素。
- html类型：htmlString一段要添加到匹配的元素集合中的HTML片段。
- selection类型：jQuery一个要添加到匹配的元素集合中的已有的jQuery对象。
给定一个代表DOM元素集合的jQuery对象，.add()方法从那些元素以及传给这个方法的元素的并集中构造了一个新的jQuery对象。传给.add()的参数可以是任何$()可接受的参数，包括jQuery选择器表达式、DOM元素的引用，以及一个HTML片段。
不要以为只要把元素传递给$.add()方法，这个方法就能把元素追加到已有的集合中。当所有的元素都是同一个document的成员时，.add()方法会根据document中的次序，理顺产生的集合中的元素；也就是说，根据每个元素在文档中出现的顺序排序。如果集合由来自不同的document的元素构成，或者有一些元素不在任何document中，排序方式还没有作定义。要想给已明确定义次序的元素创建一个jQuery对象，省掉排序的花销，请使用$(array_of_DOM_elements)符号。
更新过的元素集合可用于后面的（连缀的）方法，或者分配给它一个变量以供后面使用。举个例子：
$( "p" ).add( "div" ).addClass( "widget" ); var pdiv = $( "p" ).add( "div" );
下面的代码不会保存刚添加的元素，因为.add()方法创建了一个新集合，并在pdiv中留下还没变过的原始集合。
var pdiv = $( "p" ); pdiv.add( "div" ); // WRONG, pdiv will not change
设想有一个网页，带有一个简单的<li>列表，还有一个<p>段落文本跟着它：
<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" );
Or:
$( "li" ).add( document.getElementsByTagName( "p" )[ 0 ] ) .css( "background-color", "red" );
这个调用的结果是红色的背景在所有四个元素后面。使用一个HTML片段作为.add()方法的参数（根据第三版），我们可以快速创建额外的元素，并把那些元素添加到匹配的元素集合中。比如说：我们想要改变列表项目以及刚刚创建的段落文本的背景色：
$( "li" ).add( "<p id='new'>new paragraph</p>" ) .css( "background-color", "red" );
虽然已经创建了这个新的文本段落，而且改变了它的背景色，但是它依然没有出现在网页上。要想把它放到网页上，我们可以给连缀添加一个插入方法。
自从jQuery 1.4版，.add()方法的结果总是会按document的顺序返回（而不仅仅是一个简单的合并）。
注意：提示：要想颠倒.add()方法，你可以使用.not( elements | selector )方法，以从jQuery结果中删除元素，或者用.end()方法，的返回你添加之前的选择集。
示例
找到所有的div，给它加边框。然后把所有的段落文本添加到jQuery对象中，把它们的背景色设置成黄色。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>add demo</title>
<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="https://code.jquery.com/jquery-1.10.2.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 lang="en"> <head> <meta charset="utf-8"> <title>add demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p>Hello</p> <span>Hello Again</span> <script> $( "p" ).add( "span" ).css( "background", "yellow" ); </script> </body> </html>
演示结果
向匹配的元素集合中添加更多的快速创建的元素。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>add demo</title> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p>Hello</p> <script> $( "p" ).clone().add( "<span>Again</span>" ).appendTo( document.body ); </script> </body> </html>
演示结果
向匹配的元素集合中添加一个或更多的元素。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>add demo</title> <script src="https://code.jquery.com/jquery-1.10.2.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 lang="en"> <head> <meta charset="utf-8"> <title>add demo</title> <script src="https://code.jquery.com/jquery-1.10.2.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>
演示结果