jQuery DOM 操作 (Manipulation)

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

改變元素內容 (Changing Contents)

.html() - 類似 JavaScript DOM 中的 innerHTML

// 取得匹配元素的 HTML 內容 (無參數)
.html()

// 設定匹配元素的HTML內容 (有參數)
.html(htmlString)

例如：

// HTML
<div></div>

// jQuery
$('div').html('<p>Hello World</p>'); 
// 得到的結果
[<div><p>Hello World</p></div>]

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

.text() 純文字內容

// 取得一個字串包含著所有匹配元素的純文字內容 (無參數)
.text()

// 例如 HTML
<p><em>Test1.</em>Test12.</p><p>Test3</p>
// jQuery
$('p').text();
// 得到的結果
Test1.Test2.Test3

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

插入內容 (Inserting)

相關函式有 .append(), .prepend(), .before(), .after() 等。

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

// 例如 HTML
<p>I would like to say: </p> 
// jQuery
$('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
$('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
$('p').after('<b>Hello</b>');
// 得到的結果
[<p>I would like to say: </p><b>Hello</b>]

移動元素 (Moving)

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

.append(jQuery or DOM)

// 例如 HTML
<p>I would like to say: </p><b>Hello</b>
// jQuery
$('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
$('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
$('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
$('p').after( $('b') );
// 得到的結果
[<p>I would like to say: </p><b>Hello</b>]

把自己包起來 (Inserting Around)

.wrap(html) - 各別包住匹配到的元素

// 例如 HTML
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

// jQuery
$('.inner').wrap('<div class="new"></div>');

// 得到的結果
<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapAll(html) - 一起包住所有匹配到的元素

// 例如 HTML
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

// jQuery
$('.inner').wrapAll('<div class="new" />');

// 得到的結果
<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapInner(html) - 各別包到匹配的元素裡面

// 例如 HTML
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

// jQuery
$('.inner').wrapInner('<div class="new"></div>');

// 得到的結果
<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

刪除元素 (Removing)

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

// 例如 HTML
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

// jQuery
$('.hello').empty();

// 得到的結果
<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>

.remove([selector]) - 從 DOM 中刪除所有匹配到的元素

// 例如 HTML
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

// jQuery
$('.hello').remove();

// 得到的結果
<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

// 我們也可以多帶入一個 selector 參數，來過濾匹配到的元素
// 例如這樣寫和上面會得到一樣的結果
$('div').remove('.hello');

複製元素 (Copying)

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

// 例如 HTML
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

// jQuery
$('.hello').clone().appendTo('.goodbye');

// 得到的結果
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

// 但如果沒用 .clone() 則會得到這樣的結果
<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>