jQuery DOM 操作 (Manipulation)

jQuery Manipulation 主要是用來操作 DOM 元素的新增、刪除與修改等。

改變元素內容 (Changing Contents)

HTML － 類似 JavaScript 中的 innerHTML

/* 取得匹配元素的HTML內容 － 無參數 */$(selectors).html();/* 設定匹配元素的HTML內容 － 有參數 */$(selectors).html(val);例子：/* HTML */
&lt;div&gt;&lt;/div&gt;/* jQuery codes */$("div").html("<p>Hello World</p>"); /* 得到的結果 */
[&lt;div&gt;&lt;p&gt;Hello World&lt;/p&gt;&lt;/div&gt;]

若包含<script>、<link rel="stylesheet>這些外部檔案jQuery會幫你載入，而<script></script>間的程式碼jQuery則會幫你eval。

Text － 純文字內容

/* 取得一個字串包含著所有匹配元素的純文字內容 － 無參數 */$(selectors).text();例子：/* HTML */
&lt;p&gt;&lt;em&gt;Test1.&lt;/em&gt;Test12.&lt;/p&gt;&lt;p&gt;Test3&lt;/p&gt;/* jQuery codes */$("p").text();/* 得到的結果 */Test1.Test2.Test3/* 設定所有匹配元素的純文字內容 － 有參數   "<"與">"會自動被轉成HTML entities */$(selectors).text(val);

插入內容 (Inserting)

相關函式有 append、prepend、before、after等：

append(content) － 在每個匹配的元素內部最後面加入···· (內部插入)

/* HTML */
&lt;p&gt;I would like to say: &lt;/p&gt; /* jQuery codes */$("p").append("<b>Hello</b>"); /* 得到的結果 */
[&lt;p&gt;I would like to say: &lt;b&gt;Hello&lt;/b&gt;&lt;/p&gt;]

prepend(content) － 在每個匹配的元素內部最前面加入···· (內部插入)

/* HTML */
&lt;p&gt;I would like to say: &lt;/p&gt; /* jQuery codes */$("p").prepend("<b>Hello</b>"); /* 得到的結果 */
[&lt;p&gt;&lt;b&gt;Hello&lt;/b&gt;I would like to say: &lt;/p&gt;]

before(content) － 在每個匹配的元素前面加入···· (外部插入)

/* HTML */
&lt;p&gt;I would like to say: &lt;/p&gt; /* jQuery codes */$("p").before("<b>Hello</b>"); /* 得到的結果 */
[&lt;b&gt;Hello&lt;/b&gt;&lt;p&gt;I would like to say: &lt;/p&gt;]

after(content) － 在每個匹配的元素後面加入···· (外部插入)

/* HTML */
&lt;p&gt;I would like to say: &lt;/p&gt; /* jQuery codes */$("p").after("<b>Hello</b>"); /* 得到的結果 */
[&lt;p&gt;I would like to say: &lt;/p&gt;&lt;b&gt;Hello&lt;/b&gt;]

移動元素

如果在前面這些函式的參數中帶入「jQuery」或「DOM」物件則代表移動它們：

append(jQuery or DOM)

/* HTML */
<p>I would like to say: </p><b>Hello</b>/* jQuery codes */$("p").append( $("b") );/* 得到的結果 */
[<p>I would like to say: <b>Hello</b></p>]

prepend(jQuery or DOM)

/* HTML */
<p>I would like to say: </p><b>Hello</b>/* jQuery codes */$("p").prepend( $("b") );/* 得到的結果 */
[<p><b>Hello</b>I would like to say: </p>]

before(jQuery or DOM)

/* HTML */
<p>I would like to say: </p><b>Hello</b>/* jQuery codes */$("p").before( $("b") );/* 得到的結果 */
[<b>Hello</b><p>I would like to say: </p>]

after(jQuery or DOM)

/* HTML */
<b>Hello</b><p>I would like to say: </p>/* jQuery codes */$("p").after( $("b") );/* 得到的結果 */
[<p>I would like to say: </p><b>Hello</b>]

把自己包起來 (Inserting Around)

wrap(html)

/* HTML */
&lt;p&gt;Test Here.&lt;/p&gt;/* jQuery codes */$("p").wrap("<div class='wrap'></div>"); /* 得到的結果 */
[&lt;div class=&quot;wrap&quot;&gt;&lt;p&gt;Test Paragraph.&lt;/p&gt;&lt;/div&gt;]

刪除元素 (Removing)

empty() － 刪除匹配到的元素其所有子節點

/* HTML */
<p>Hello, <span>Person</span> <a href="#">and person</a></p>/* jQuery codes */$("p").empty();/* 得到的結果 */
[<p></p>]

remove([expr]) － 從 DOM 中刪除所有匹配到的元素 (但此函式不會將匹配的元素從 jQuery 物件中刪除)

/* HTML */
<p>Hello</p> how are <p>you?</p>/* jQuery codes */$("p").remove();/* 得到的結果 */
[how are]

複製元素 (Copying)

clone([true]) － 複製匹配元素的副本

/* HTML */
<b>Hello</b><p>, how are you?</p>/* jQuery codes */$("b").clone().prependTo("p");/* 得到的結果 */
[<b>Hello</b><p><b>Hello</b>, how are you?</p>]

如果想要連綁定的事件一起複製，則加個true參數－clone(true)

源：http://webdesign.kerthis.com/jquery/jquery_manipulation