jQuery DOM 操作

jQuery DOM 操作jQuery 提供強大的 DOM 操作功能，讓你能夠輕鬆地取得、設定、新增、刪除和修改 HTML 元素與內容。

取得與設定內容html() - HTML 內容html() 方法用於取得或設定元素的 HTML 內容（包含 HTML 標籤）：

// 取得 HTML 內容

var content = $('#box').html();

// 設定 HTML 內容

$('#box').html('新內容');

// 使用函式設定（可取得舊值和索引）

$('.item').html(function (index, oldHtml) {

return '項目 ' + (index + 1) + '';

});

text() - 純文字內容text() 方法用於取得或設定元素的純文字內容（會自動跳脫 HTML 標籤）：

// 取得純文字內容

var text = $('#box').text();

// 設定純文字內容（HTML 標籤會被跳脫）

$('#box').text('這會顯示為純文字');

// 使用函式設定

$('.item').text(function (index, oldText) {

return '項目 ' + (index + 1);

});

val() - 表單值val() 方法用於取得或設定表單元素的值：

// 取得 input 值

var username = $('#username').val();

// 設定 input 值

$('#username').val('John');

// 取得 select 的選取值

var selected = $('#country').val();

// 設定 select 的選取值

$('#country').val('tw');

// 取得多選 select 的所有選取值（返回陣列）

var selections = $('#multi-select').val();

// 設定多選 select 的選取值

$('#multi-select').val(['option1', 'option2']);

// 取得已勾選的 radio 值

var gender = $('input[name="gender"]:checked').val();

插入內容內部插入在元素內部新增內容：

// append() - 在元素內部的最後面加入

$('#list').append('

新項目

');

// prepend() - 在元素內部的最前面加入

$('#list').prepend('

第一個項目

');

// appendTo() - 將內容加到目標元素內部的最後面

$('

新項目

').appendTo('#list');

// prependTo() - 將內容加到目標元素內部的最前面

$('

第一個項目

').prependTo('#list');

append() / prepend() vs appendTo() / prependTo() 的差異在於呼叫方向：

// 這兩行效果相同

$('#list').append('

項目

');

$('

項目

').appendTo('#list');

外部插入在元素外部（兄弟位置）新增內容：

// after() - 在元素後面加入

$('#item').after('

');

// before() - 在元素前面加入

$('#item').before('

');

// insertAfter() - 將內容插入到目標元素後面

$('

').insertAfter('#item');

// insertBefore() - 將內容插入到目標元素前面

$('

').insertBefore('#item');

插入內容的各種形式這些方法可以接受多種形式的內容：

// HTML 字串

$('#box').append('

段落

');

// DOM 元素

var p = document.createElement('p');

$('#box').append(p);

// jQuery 物件

$('#box').append($('.template').clone());

// 函式（返回內容）

$('#box').append(function (index, html) {

return '

動態內容 ' + index + '

';

});

包裹元素wrap() - 外層包裹在每個匹配元素的外層加上包裹元素：

// 將每個 p 元素用 div 包起來

$('p').wrap('

');

// 結果：

//

//

wrapAll() - 整體包裹將所有匹配元素一起用一個元素包起來：

// 將所有 p 元素一起用一個 div 包起來

$('p').wrapAll('

');

// 結果：

//

wrapInner() - 內層包裹在每個匹配元素的內容外層加上包裹元素：

// 將每個 p 元素的內容用 span 包起來

$('p').wrapInner('');

// 原本：

段落

// 結果：

段落

unwrap() - 移除包裹移除匹配元素的父元素：

// 移除 p 元素的父層 div

$('p').unwrap();

// 可以指定條件，只移除符合條件的父元素

$('p').unwrap('.wrapper');

移除元素remove() - 完全移除移除匹配的元素（包含元素上綁定的事件和資料）：

// 移除所有 .error 元素

$('.error').remove();

// 可以加上選擇器過濾

$('p').remove('.warning'); // 只移除有 .warning class 的 p

detach() - 暫時移除移除元素但保留元素上綁定的事件和資料，方便之後重新插入：

// 暫時移除元素

var $item = $('#item').detach();

// ... 做一些事情 ...

// 重新插入（事件和資料都還在）

$('#container').append($item);

empty() - 清空內容清空元素內的所有內容，但保留元素本身：

// 清空 #box 內的所有內容

$('#box').empty();

remove() vs detach() vs empty() 比較方法移除元素保留事件/資料用途remove()是否永久刪除detach()是是暫時移除，稍後重用empty()否（只清內容）-清空內容複製元素clone() - 複製複製匹配的元素：

// 複製元素

var $copy = $('#item').clone();

// 將複製的元素插入到某處

$copy.appendTo('#container');

// 鏈式寫法

$('#item').clone().appendTo('#container');

預設情況下，clone() 不會複製元素上的事件和資料。若要一併複製：

// 複製元素，包含事件和資料

var $copy = $('#item').clone(true);

// 第二個參數可以指定是否深層複製子元素的事件和資料

var $copy = $('#item').clone(true, true);

替換元素replaceWith() - 替換元素用新內容替換匹配的元素：

// 將 .old 元素替換為新內容

$('.old').replaceWith('

');

// 使用函式

$('.item').replaceWith(function (index) {

return '

';

});

replaceAll() - 替換所有功能同 replaceWith()，但呼叫方向相反：

// 用新內容替換所有 .old 元素

$('

').replaceAll('.old');

建立新元素使用 $() 可以建立新的 HTML 元素：

// 建立新元素

var $newDiv = $('