.add()
.add( selector ) 返回： jQuery
描述： 添加元素到匹配的元素集合。
-
version added: 1.0.add( selector )
selector一個用于匹配元素的選擇器字符串。
-
version added: 1.0.add( elements )
elements一個或多個元素添加到匹配的元素。
-
version added: 1.0.add( html )
htmlHTML片段添加到匹配的元素。
-
version added: 1.4.add( selector, context )
selector一個用于匹配元素的選擇器字符串。
context對指定的范圍內(nèi)添加一些根元素。
鑒于一個jQuery對象，表示一個DOM元素的集合，.add()方法通過這些元素組合傳遞到方法構(gòu)造一個新的jQuery對象。.add()的參數(shù)可以幾乎接受任何的$()，包括一個jQuery選擇器表達式，DOM元素，或HTML片段引用。
考慮一個面頁中簡單的列表和它之后的段落：
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> <p>a paragraph</p>
我們可以選擇列表項，然后通過使用一個選擇器或引用的DOM元素本身作為.add()方法的參數(shù)：
$('li').add('p').css('background-color', 'red');
或者:
$('li').add(document.getElementsByTagName('p')[0])
.css('background-color', 'red');
該調(diào)用的結(jié)果是四個元素的紅色背景。使用片一個HTML段作為 .add()方法的參數(shù)（如在第三個版本），我們可以在運行中創(chuàng)建額外的元素，添加這些元素到匹配的元素集合中。比方說，例如，我們要隨著新創(chuàng)建的段落改變列表項的背景：
$('li').add('<p id="new">new paragraph</p>')
.css('background-color', 'red');
雖然已經(jīng)建立新的段落，其背景顏色改變，它仍然沒有出現(xiàn)在頁面上。放置在頁面上，我們可以添加的方法之一插入到鏈。
在jQuery 1.4結(jié)果從.add()將總是返回文檔順序（而不是一個簡單的串聯(lián)）。
Examples:
Example: Finds all divs and makes a border. Then adds all paragraphs to the jQuery object to set their backgrounds yellow.
<!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="http://code.jquery.com/jquery-latest.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>Demo:
Example: Adds more elements, matched by the given expression, to the set of matched elements.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p>Hello</p><span>Hello Again</span>
<script>$("p").add("span").css("background", "yellow");</script>
</body>
</html>Demo:
Example: Adds more elements, created on the fly, to the set of matched elements.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<p>Hello</p>
<script>$("p").clone().add("<span>Again</span>").appendTo(document.body);</script>
</body>
</html>Demo:
Example: Adds one or more Elements to the set of matched elements.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.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>Demo:
Example: Demonstrates how to add (or push) elements to an existing collection
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.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>