jQuery DOM 操作 (Manipulation)

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

改變元素內容 (Changing Contents)

HTML －類似 JavaScript 中的 innerHTML

/* 取得匹配元素的HTML內容 － 無參數 */
$(selectors).html();

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

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

Text －純文字內容

/* 取得一個字串包含著所有匹配元素的純文字內容 － 無參數 */
$(selectors).text();
例子：
/* HTML */<p><em>Test1.</em>Test12.</p><p>Test3</p>/* jQuery codes */
$("p").text();
/* 得到的結果 */
Test1.Test2.Test3

/* 設定所有匹配元素的純文字內容 － 有參數
   "<"與">"會自動被轉成HTML entities */
$(selectors).text(val);

插入內容 (Inserting)

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

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

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

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

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

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

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

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

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

移動元素

如果在前面這些函式的參數中帶入「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 */<p>Test Here.</p>/* jQuery codes */
$("p").wrap("<div class='wrap'></div>"); 
/* 得到的結果 */
[<div class="wrap"><p>Test Paragraph.</p></div>]

刪除元素 (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)