1、.add()
描述：添加元素到匹配的元素集合。
.add( selector )
-
selector
類型: [Selector]：一個(gè)字符串表示的選擇器表達(dá)式，找到更多的元素添加到匹配的元素集合。
.add( elements )
-
elements
類型: [Elements]：一個(gè)或多個(gè)元素添加到匹配的元素集合。
.add(html)
-
html
類型: [HTML]：HTML片段添加到匹配的元素集合。
.add(jQuery object)
-
jQuery object
類型: [jQuery object]：一個(gè)現(xiàn)有的jQuery對(duì)象添加到匹配的元素集合。
.add(selector,context)
-
selector
類型: [Selector]：一個(gè)字符串表示的選擇器表達(dá)式，找到更多的元素添加到匹配的元素集合。 -
context
類型: [Element]： 指定選擇器查找元素所在的上下文; 類似$(selector, context)方法的context（上下文)參數(shù)。
鑒于一個(gè)jQuery對(duì)象，表示一個(gè)DOM元素的集合，.add()方法通過傳遞這些元素組合到該方法構(gòu)造一個(gè)新的jQuery對(duì)象。.add()的參數(shù)可以幾乎接受任何的$()，包括一個(gè)jQuery選擇器表達(dá)式，DOM元素，或HTML片段引用。
不要假設(shè)此方法會(huì)按照傳遞給.add()方法的參數(shù)的順序添加到已經(jīng)存在的集合中。如果所有元素都屬于同一個(gè)文檔，.add()方法所返回的集合將會(huì)按照元素在文檔中出現(xiàn)的位置進(jìn)行排序；也就是說，按照每個(gè)元素在文檔中出現(xiàn)的順序。如果集合中包含不同文檔或不屬于任何文檔的元素，最后的排序方式未定義（undefined）。為了創(chuàng)建一個(gè)包含已定義順序順序的jQuery對(duì)象，請(qǐng)使用$(array_of_DOM_elements)。
他更新的元素集合，可以使用以下面的鏈?zhǔn)秸{(diào)用，或分配給一個(gè)變量供以后使用。例如：
$("p").add("div").addClass("widget");
var pdiv = $("p").add("div");
下面將不會(huì)保存添加的元素，因?yàn)樵?code>.add()方法創(chuàng)建一個(gè)新集合，并保持原集合PDIV不變：
var pdiv = $("p");
pdiv.add("div"); // WRONG, pdiv will not change
考慮一個(gè)面頁中簡(jiǎn)單的列表和它之后的段落：
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<p>a paragraph</p>
我們可以選擇列表，然后通過使用一個(gè)選擇器或引用的DOM元素本身作為.add()方法的參數(shù)，將段落添加到列表中：
$('li').add('p').css('background-color', 'red');
或者:
$('li').add(document.getElementsByTagName('p')[0])
.css('background-color', 'red');
該調(diào)用的結(jié)果是四個(gè)元素的紅色背景。使用片一個(gè)HTML段作為 .add()方法的參數(shù)（如在第三個(gè)版本），我們可以在動(dòng)態(tài)的創(chuàng)建額外的元素，添加這些元素到匹配的元素集合中。例如，我們可以改變新創(chuàng)建的段落和列表項(xiàng)的背景：
$('li').add('<p id="new">new paragraph</p>')
.css('background-color', 'red');
雖然已經(jīng)創(chuàng)建新的段落，并且改變其背景顏色，但是它仍然沒有出現(xiàn)在頁面上。要想在頁面上顯示該段落，我們需要在鏈?zhǔn)椒绞街惺褂?jQuery 的插入方法。
在jQuery 1.4結(jié)果從.add()將總是返回文檔順序（而不是一個(gè)簡(jiǎn)單的串聯(lián)）。
注意: 要使用.add()相反的方法， 您可以使用.not( elements | selector )從jQuery返回中移除元素， 或使用.end()返回到添加之前的選擇（集合）。
例子:
Example: 查找所有的 div，并且添加一個(gè)邊框。然后將所有的段落添加到 jQuery 對(duì)象中，并將它們的背景色變成黃色。
<!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="https://code.jquery.com/jquery-latest.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>
Demo:
Example: 根據(jù)給定的表達(dá)式，向匹配的元素集合中添加一些元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p><span>Hello Again</span>
<script>$("p").add("span").css("background", "yellow");</script>
</body>
</html>
Demo:
Example: 動(dòng)態(tài)的向匹配的元素集合中添加一些元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<script>$("p").clone().add("<span>Again</span>").appendTo(document.body);</script>
</body>
</html>
Demo:
Example: 向匹配的元素集合中添加一些元素對(duì)象。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.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>
Demo:
Example: 以下示例展示了如何向一個(gè)已經(jīng)存在的集合中添加元素。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-latest.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>
Demo:
