DOM（選擇器，屬性，篩選，文檔處理）
選擇器（基本，層級，簡單，內容，可見性，屬性，子元素，表單及表單對象屬性）
基本
#id
根據給定的ID匹配一個元素。返回值為Element
id(String)用于搜索的，通過元素的 id 屬性中給定的值
示例 查找ID為"myDiv"的元素。
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
代碼:$("#myDiv");
結果:<div id="myDiv">id="myDiv"</div>
element
根據給定的元素名匹配所有元素。返回值為Array<Element>
element (String) : 一個用于搜索的元素。指向DOM的標簽名。
示例 查找一個 DIV 元素。
<div>DIV1</div><div>DIV2</div><span>SPAN</span>
代碼:$("div");
結果:<div>DIV1</div><div>DIV2</div>
.class
根據給定的類匹配元素。返回值Array<Element>
class (String) : 一個用以搜索的類。一個元素可以有多個類，只要有一個符合就能被匹配到。
示例 查找所有類是"myClass"的元素.
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
代碼:$(".myClass");
結果:<div class="myClass">div class="myClass"</div><span class="myClass">span class="myClass"</span>
*
匹配所有元素，多用于結合上下文來搜索。返回值Array<Element>
示例 找到每一個元素
<div>DIV</div><span>SPAN</span><p>P</p>
代碼:$("*")
結果:<div>DIV</div><span>SPAN</span><p>P</p>
selector1,selectorN
將每一個選擇器匹配到的元素合并后一起返回。你可以指定任意多個選擇器，并將匹配到的元素合并到一個結果內。返回值Array<Element>
參數
selector1 (Selector) : 一個有效的選擇器
selector2 (Selector) : 另一個有效的選擇器
selectorN (Selector) : (可選) 任意多個有效選擇器
示例 找到匹配任意一個類的元素。
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
代碼:$("div,span,p.myClass")
結果:<div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span>
層級
ancestor descendant
在給定的祖先元素下匹配所有的后代元素。返回值Array<Element>
ancestor(Selector):任何有效選擇器
descendant(Selector):用以匹配元素的選擇器，并且它是第一個選擇器的后代元素
示例 找到表單中所有的 input 元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset>
</form>
<input name="none" />
代碼:$("form input")
結果: <input name="name" />, <input name="newsletter" />
parent>child
在給定的父元素下匹配所有的子元素。返回值Array<Element>
parent (Selector) : 任何有效選擇器
child (Selector) : 用以匹配元素的選擇器，并且它是第一個選擇器的子元素
示例 匹配表單中所有的子級input元素。
代碼:$("form > input")
結果:<input name="name" />
prev+next
匹配所有緊接在prev元素后的next元素
返回值Array<Element>
prev (Selector) : 任何有效選擇器
next (Selector) :一個有效選擇器并且緊接著第一個選擇器
示例 匹配所有跟在 label 后面的 input 元素
代碼:$("label + input")
結果:<input name="name" />, <input name="newsletter" />
prev~siblings
匹配prev元素之后的所有siblings元素 返回值Array<Element>
prev (Selector) : 任何有效選擇器
siblings (Selector) : 一個選擇器，并且它作為第一個選擇器的同輩
示例 找到所有與表單同輩的 input 元素
代碼:$("form ~ input")
結果:<input name="none" />
簡單
<table>
<tr><td>Header 1</td></tr><tr><td>Value 1</td></tr><tr><td>Value 2</td></tr>
</table>
:first：匹配找到的第一個元素
代碼:$("tr:first") 結果:<tr><td>Header 1</td></tr>
:last：匹配找到的最后一個元素
代碼:$("tr:last") 結果:<tr><td>Value 2</td></tr>
:not(selector)：去除所有與給定選擇器匹配的元素
<input name="apple" />
<input name="flower" checked="checked" />
代碼:$("input:not(:checked)") 結果:<input name="apple" />
:even：匹配所有索引值為偶數的元素，從0開始計數
代碼:$("tr:even") 結果:<tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr>
:odd：配所有索引值為奇數的元素，從 0 開始計數
代碼:$("tr:odd") 結果:<tr><td>Value 1</td></tr>
:eq(index)：匹配一個給定索引值的元素
代碼:$("tr:eq(1)") 結果:<tr><td>Value 1</td></tr>
:gt(index)：匹配所有大于給定索引值的元素
代碼:$("tr:gt(0)") 結果:<tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr>
:lt(index)：匹配所有小于給定索引值的元素
代碼:$("tr:lt(2)") 結果:<tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr>
:header：匹配如 h1, h2, h3之類的標題元素
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
代碼:$(":header").css("background", "#EEE");
結果:<h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2>
:animated：匹配所有沒有在執行動畫效果中的元素
<button id="run">Run</button><div></div>
代碼:
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+20" }, 1000);
});
內容
:contains(text)：匹配包含給定文本的元素
text (String) : 一個用以查找的字符串
示例 查找所有包含 "John" 的 div 元素
<div>John Resig</div><div>George Martin</div><div>Malcom John Sinclair</div><div>J. Ohn
代碼:$("div:contains('John')")
結果:<div>John Resig</div>, <div>Malcom John Sinclair</div>
:empty：匹配所有不包含子元素或者文本的空元素
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
代碼:$("td:empty")
結果:<td></td>, <td></td>
:has(selector)：匹配含有選擇器所匹配的元素的元素
selector (Selector) : 一個用于篩選的選擇器
示例 給所有包含p元素的div元素添加一個 text 類
<div><p>Hello</p></div><div>Hello again!</div>
代碼:$("div:has(p)").addClass("test");
結果: <div class="test"><p>Hello</p></div>
:parent：匹配含有子元素或者文本的元素
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
代碼:$("td:parent")
結果: <td>Value 1</td>, <td>Value 1</td>
可見性
:hidden：匹配所有的不可見元素，input 元素的 type 屬性為 "hidden" 的話也會被匹配到
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
代碼:$("tr:hidden")
結果:<tr style="display:none"><td>Value 1</td></tr>
:visible：匹配所有的可見元素
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
代碼:$("tr:visible")
結果: <tr><td>Value 2</td></tr>
屬性
[attribute]：匹配包含給定屬性的元素
<div><p>Hello!</p></div>
<div id="test2"></div>
代碼:$("div[id]")
結果:<div id="test2"></div>
[attribute=value]：匹配給定的屬性是某個特定值的元素
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
代碼:$("input[name='newsletter']").attr("checked", true);
結果:<input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" />
[attribute!=value]：匹配給定的屬性是不包含某個特定值的元素
[attribute^=value]：匹配給定的屬性是以某些值開始的元素
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
代碼:$("input[name^='news']")
結果:<input name="newsletter" />, <input name="newsboy" />
[attribute$=value]：匹配給定的屬性是以某些值結尾的元素
[attribut*=value]：匹配給定的屬性是以包含某些值的元素
[selector1][selector2][selectorN]：復合屬性選擇器，需要同時滿足多個條件時使用
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
代碼:$("input[id][name$='man']")
結果: <input id="letterman" name="new-letterman" />
子元素
:nth-child(index/even/odd/equation)
匹配其父元素下的第N個子或奇偶元素
區別：':eq(index)' 只匹配一個元素，而這個將為每一個父元素匹配子元素。:nth-child從1開始的，而:eq()是從0算起的！
可以使用::nth-child(even)，:nth-child(odd)，:nth-child(3n)，:nth-child(2)，:nth-child(3n+1)，:nth-child(3n+2)
index (Number) : 要匹配元素的序號，從1開始
示例 在每個ul查找第2個li
<ul><li>John</li> <li>Karl</li> <li>Brandon</li></ul>
<ul><li>Glen</li> <li>Tane</li> <li>Ralph</li></ul>
代碼:$("ul li:nth-child(2)")
結果: <li>Karl</li>, <li>Tane</li>
:first-child：匹配第一個子元素，':first' 只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素
代碼:$("ul li:first-child")
結果: <li>John</li>, <li>Glen</li>
:last-child：匹配最后一個子元素，':last'只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素
:only-child：如果某個元素是父元素中唯一的子元素，那將會被匹配，如果父元素中含有其他元素，那將不會被匹配。
<ul><li>John</li> <li>Karl</li> <li>Brandon</li></ul>
<ul><li>Glen</li>
代碼:$("ul li:only-child")
結果: <li>Glen</li>
表單
:input：匹配所有 input, textarea, select 和 button 元素
:text：匹配所有的單行文本框
:password,:radio,:checkbox,:submit,:image：,:reset：,:button：,:file：,:hidden：
表單對象屬性
:enabled：匹配所有可用元素
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
代碼:$("input:enabled") 結果: <input name="id" />
:disabled：匹配所有不可用元素
:checked：匹配所有選中的復選框元素
:selected：匹配所有選中的選項元素
屬性（屬性，類，HTML代碼，文本，值）
屬性
attr(name)：取得第一個匹配元素的屬性值。如果元素沒有相應屬性，則返回undefined。name為屬性名稱。
<img src="test.jpg"/>
代碼:$("img").attr("src");
結果:test.jpg
attr(properties)
將一個“名/值”形式的對象設置為所有匹配元素的屬性。這是一種在所有匹配元素中批量設置很多屬性的最佳方式。
注意，如果你要設置對象的class屬性，你必須使用'className' 作為屬性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).
<img/>
代碼:$("img").attr({ src: "test.jpg", alt: "Test Image" });
結果:<img src= "test.jpg" alt:="Test Image" />
attr(key,value)：為所有匹配的元素設置一個屬性值
<img/><img/>
代碼:$("img").attr("src","test.jpg");
結果:<img src= "test.jpg" /><img src= "test.jpg" />
attr(key,fn)：為所有匹配的元素設置一個計算的屬性值。
<img src="test.jpg"/>
代碼:$("img").attr("title", function() { return this.src });
結果:<img src="test.jpg" title="test.jpg" />
removeAttr(name)：從每一個匹配的元素中刪除一個屬性
<img src="test.jpg"/>
代碼:$("img").removeAttr("src");
結果:<img />
類
addClass(class)：為每個匹配的元素添加指定的類名
<p>Hello</p>
代碼:$("p").addClass("selected"); 結果:<p class="selected">Hello</p>
removeClass(class)：從所有匹配的元素中刪除全部或者指定的類
<p class="selected first">Hello</p>
代碼:$("p").removeClass("selected"); 結果:<p>Hello</p>
toggleClass(class)：如果存在（不存在）就刪除（添加）一個類
<p>Hello</p><p class="selected">Hello Again</p>
代碼:$("p").toggleClass("selected");
結果: <p class="selected">Hello</p>, <p>Hello Again</p>
Html代碼
html()：取得第一個匹配元素的html內容。這個函數不能用于XML文檔。但可以用于XHTML文檔
<div><p>Hello</p></div>
代碼:$("div").html(); 結果:Hello
html(val)：設置每一個匹配元素的html內容。這個函數不能用于XML文檔。但可以用于XHTML文檔
<div></div>
代碼:$("div").html("<p>Hello Again</p>");
結果:<div><p>Hello Again</p></div>
文本
text()：取得所有匹配元素的內容。由所有匹配元素包含的文本內容組合起來的文本。這個方法對HTML和XML文檔都有效。
<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
代碼:$("p").text();
結果:Test Paragraph.Paraparagraph
text(val)：設置所有匹配元素的文本內容與html()類似, 但將編碼 HTML(將 "<" 和 ">" 替換成相應的HTML實體).
<p>Test Paragraph.</p>
代碼:$("p").text("<b>Some</b> new text.");
結果: <p><b>Some</b> new text.</p>
值
val()：獲得第一個匹配元素的當前值
在1.2中,可以返回任意元素的值了。包括select。如果多選，將返回一個數組，其包含所選的值。
<p></p><br/>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
代碼:$("p").append("<b>Single:</b> "+$("#single").val()+"<b>Multiple:</b>"+$("#multiple").val().join(","));
結果:<p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>
<input type="text" value="some text"/>
代碼:$("input").val(); 結果:some text
val(val)：設置每一個匹配元素的值。在1.2這也可以為select元件賦值
<input type="text"/>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
代碼:
$("input").val("hello world!");
$("#single").val("Single2");
篩選（過濾，查找，串聯）
過濾
eq(index)：獲取第N個元素這個元素的位置是從0算起。
<p> This is just a test.</p><p> So is this</p>
代碼:$("p").eq(1) 結果: <p> So is this</p>
hasClass(expr)：檢查當前的元素是否含有某個特定的類，如果有，則返回true。這其實就是 is("." + class)。
<div class="protected"></div><div></div>
代碼:
$("div").click(function(){
if ($(this).hasClass("protected"))
$(this).animate({ left: -10 })
});
filter(expr)：篩選出與指定表達式匹配的元素集合。這個方法用于縮小匹配的范圍。用逗號分隔多個表達式
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
代碼:$("p").filter(".selected") 結果:<p class="selected">And Again</p>
代碼:$("p").filter(".selected, :first") 結果:<p>Hello</p>, <p class="selected">And Again</p>
filter(fn)：篩選出與指定函數返回值匹配的元素集合，函數內部將對每個對象計算一次(正如 '$.each').如果調用的函數返回false則這個元素被刪除，否則就會保留。
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
代碼:
$("p").filter(function(index) {
return $("ol", this).length == 0;
});
結果:<p>How are you?</p>
is(expr)：用一個表達式來檢查當前選擇的元素集合，如果其中至少有一個元素符合這個給定的表達式就返回true。
如果沒有元素符合，或者表達式無效，都返回'false'. 'filter' 內部實際也是在調用這個函數，所以，filter()函數原有的規則在這里也適用。
<form><input type="checkbox" /></form>
代碼:$("input[type='checkbox']").parent().is("form")
結果:true
map(callback)：將一組元素轉換成其他數組（不論是否是元素數組）你可以用這個函數來建立一個列表，不論是值、屬性還是CSS樣式，或者其他特別形式。這都可以用'$.map()'來方便的建立。
<p><b>Values: </b></p>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://ejohn.org/"/>
</form>
代碼:
$("p").append( $("input").map(function(){
return $(this).val();
}).get().join(", ") );
結果:<p>John, password, http://ejohn.org/</p>
not(expr)：刪除與指定表達式匹配的元素
<p>Hello</p><p id="selected">Hello Again</p>
代碼:$("p").not( $("#selected")[0] )
結果: <p>Hello</p>
slice(start,end)：選取一個匹配的子集 與原來的slice方法類似
<p>Hello</p><p>cruel</p><p>World</p>
代碼:$("p").slice(0, 1).wrapInner("<b></b>"); 結果:<p><b>Hello</b></p>
代碼:$("p").slice(0, 2).wrapInner("<b></b>"); 結果:<p><b>Hello</b></p>,<p><b>cruel</b></p>
代碼:$("p").slice(1, 2).wrapInner("<b></b>"); 結果:<p><b>cruel</b></p>
代碼:$("p").slice(1).wrapInner("<b></b>"); 結果:<p><b>cruel</b></p>, <p><b>World</b></p>
代碼:$("p").slice(-1).wrapInner("<b></b>"); 結果:<p><b>World</b></p>
查找
add(expr)：把與表達式匹配的元素添加到jQuery對象中。這個函數可以用于連接分別與兩個表達式匹配的元素結果集。
<p>Hello</p><span>Hello Again</span>
代碼:$("p").add("span") 結果:<p>Hello</p>, <span>Hello Again</span>
<p>Hello</p>
代碼:$("p").add("<span>Again</span>") 結果:<p>Hello</p>, <span>Hello Again</span>
<p>Hello</p><p><span id="a">Hello Again</span></p>
代碼:$("p").add(document.getElementById("a"))
結果:<p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span>
children(expr)：取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。可以通過可選的表達式來過濾所匹配的子元素。注意：parents()將查找所有祖輩元素，而children()之考慮子元素而不考慮所有后代元素。
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
代碼:$("div").children() 結果:<span>Hello Again</span>
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
代碼:$("div").children(".selected")
結果: <p class="selected">Hello Again</p>
contents()：查找匹配元素內部所有的子節點（包括文本節點）。如果元素是一個iframe，則查找文檔內容
<p>Hello <a >John</a>, how are you doing?</p>
代碼:$("p").contents().not("[@nodeType=1]").wrap("<b/>");
結果:<p><b>Hello</b><a >John</a>, <b>how are you doing?</b></p>
<iframe src="/index-blank.html" width="300" height="100"></iframe>
代碼:$("iframe").contents().find("body").append("I'm in an iframe!");
find(expr)：搜索所有與指定表達式匹配的元素。這個函數是找出正在處理的元素的后代元素的好方法。所有搜索都依靠jQuery表達式來完成。這個表達式可以使用CSS1-3的選擇器語法來寫
<p><span>Hello</span>, how are you?</p>
代碼:$("p").find("span")
結果: <span>Hello</span>
next(expr)：取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。只返回后面那個緊鄰的同輩元素，而不是后面所有的同輩元素。
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
代碼:$("p").next()
結果:<p>Hello Again</p>,<div><span>And Again</span></div>
<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
代碼:$("p").next(".selected")
結果:<p class="selected">Hello Again</p>
nextAll(expr)：查找當前元素之后的所有元素。
<div></div><div></div><div></div><div></div>
代碼:$("div:first").nextAll().addClass("after");
結果:<div class="after"></div>, <div class="after"></div>, <div class="after"></div>
parent(expr)：取得一個包含著所有匹配元素的唯一父元素的元素集合。
parents(expr)：取得一個包含著所有匹配元素的祖先元素的元素集合（不包含根元素）。
prev(expr)：取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。
prevAll(expr)：查找當前元素之前所有的同輩元素
siblings(expr)：取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合。
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
代碼:$("div").siblings() 結果:<p>Hello</p>, <p>And Again</p>
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
代碼:$("p").siblings(".selected") 結果:<p class="selected">Hello Again</p>
串聯
andSelf()：加入先前所選的加入當前元素中，對于篩選或查找后的元素，要加入先前所選元素時將會很有用。
<div><p>First Paragraph</p><p>Second Paragraph</p></div>
代碼:$("div").find("p").andSelf().addClass("border");
結果:<div class="border"><p class="border">First Paragraph</p><p class="border">Second Paragraph</p></div>
end()：回到最近的一個"破壞性"操作之前。即，將匹配的元素列表變為前一次的狀態。
如果之前沒有破壞性操作，則返回一個空集。所謂的"破壞性"就是指任何改變所匹配的jQuery元素的操作。這包括在 Traversing 中任何返回一個jQuery對象的函數--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent', 'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。
<p><span>Hello</span>,how are you?</p>
代碼:$("p").find("span").end()
結果:<p><span>Hello</span> how are you?</p>
文檔處理（內部和外部插入，包裹，替換，刪除，復制）
內部和外部插入
append(content)：向每個匹配的元素內部追加內容。相當與appendChild方法。
<p>I would like to say: </p>
代碼:$("p").append("<b>Hello</b>");
結果:<p>I would like to say: <b>Hello</b></p>
appendTo(content)：把所有匹配的元素追加到另一個、指定的元素元素集合中。
<p>I would like to say: </p><div id="foo"></div>
代碼:$("p").appendTo("#foo");
結果:<div id="foo"><p>I would like to say: </p></div>
prepend(content)：向每個匹配的元素內部前置內容。
<p>I would like to say: </p>
代碼:$("p").prepend("<b>Hello</b>"); 結果:<p><b>Hello</b>I would like to say: </p>
<p>I would like to say: </p><b>Hello</b>
代碼:$("p").prepend( $("b") ); 結果:<p><b>Hello</b>I would like to say: </p>
prependTo(content)：把所有匹配的元素前置到另一個、指定的元素元素集合中
<p>I would like to say: </p><div id="foo"></div>
代碼:$("p").prependTo("#foo"); 結果:<div id="foo"><p>I would like to say: </p></div>
after(content)：在每個匹配的元素之后插入內容
<p>I would like to say: </p>
代碼:$("p").after("<b>Hello</b>"); 結果:<p>I would like to say: </p><b>Hello</b>
before(content)：在每個匹配的元素之前插入內容
insertAfter(content)：把所有匹配的元素插入到另一個、指定的元素元素集合的后面。
<p>I would like to say: </p><div id="foo">Hello</div>
代碼:$("p").insertAfter("#foo");
結果:<div id="foo">Hello</div><p>I would like to say: </p>
insertBefore(content)：把所有匹配的元素插入到另一個、指定的元素元素集合的前面。
<div id="foo">Hello</div><p>I would like to say: </p>
代碼:$("p").insertBefore("#foo");
結果:<p>I would like to say: </p><div id="foo">Hello</div>
包裹
wrap(html)：把所有匹配的元素用其他元素的結構化標記包裹起來。
<p>Test Paragraph.</p>
代碼:$("p").wrap("<div class='wrap'></div>");
結果:<div class="wrap"><p>Test Paragraph.</p></div>
wrap(elem)：把所有匹配的元素用其他元素的結構化標記包裝起來。
<p>Test Paragraph.</p><div id="content"></div>
代碼:$("p").wrap(document.getElementById('content'));
結果:<div id="content"><p>Test Paragraph.</p></div><div id="content"></div>
wrapAll(html)：將所有匹配的元素用單個元素包裹起來
<p>Hello</p><p>cruel</p><p>World</p>
代碼:$("p").wrapAll("<div></div>");
結果:<div><p>Hello</p><p>cruel</p><p>World</p></div>
wrapAll(elem)：將所有匹配的元素用單個元素包裹起來
<p>Hello</p><p>cruel</p><p>World</p>
代碼:$("p").wrapAll(document.createElement("div"));
結果:<div><p>Hello</p><p>cruel</p><p>World</p></div>
wrapInner(html)：將每一個匹配的元素的子內容(包括文本節點)用一個HTML結構包裹起來
<p>Hello</p><p>cruel</p><p>World</p>
代碼:$("p").wrapInner("<b></b>");
結果:<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
wrapInner(elem)：將每一個匹配的元素的子內容(包括文本節點)用DOM元素包裹起來
<p>Hello</p><p>cruel</p><p>World</p>
代碼:$("p").wrapInner(document.createElement("b"));
結果:<p><b>Hello</b></p><p><b>cruel</b></p><p><b>World</b></p>
替換
replaceWidth(content)：將所有匹配的元素替換成指定的HTML或DOM元素
<p>Hello</p><p>cruel</p><p>World</p>
代碼:$("p").replaceWith("<b>Paragraph. </b>");
結果:<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
replaceAll(selector)：用匹配的元素替換掉所有 selector匹配到的元素
<p>Hello</p><p>cruel</p><p>World</p>
代碼:$("<b>Paragraph. </b>").replaceAll("p");
結果:<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
刪除
empty()：刪除匹配的元素集合中所有的子節點
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
代碼:$("p").empty();
結果:<p></p>
remove(expr)：從DOM中刪除所有匹配的元素
<p>Hello</p> how are <p>you?</p>
代碼:$("p").remove(); 結果:how are
<p class="hello">Hello</p> how are <p>you?</p>
代碼:$("p").remove(".hello");
結果:how are <p>you?</p>
復制
clone()：克隆匹配的DOM元素并且選中這些克隆的副本
<b>Hello</b><p>, how are you?</p>
代碼:$("b").clone().prependTo("p");
結果:<b>Hello</b><p><b>Hello</b>, how are you?</p>
clone(true)：元素以及其所有的事件處理并且選中這些克隆的副本
<button>Clone Me!</button>
代碼:
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
-- 
學海無涯