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)
源:http://webdesign.kerthis.com/jquery/jquery_manipulation