jquery如何改變元素對象的值

# jQuery如何改變元素對象的值

## 前言
在Web開發中，動態修改頁面元素是常見的需求。jQuery作為曾經最流行的JavaScript庫，提供了簡潔高效的API來操作DOM元素。本文將詳細介紹如何使用jQuery修改元素的值，涵蓋文本內容、HTML內容、表單值以及屬性等常見場景。

## 一、修改元素文本內容

### 1. text() 方法
最基本的文本修改方法，會過濾HTML標簽：

```javascript
// 獲取文本內容
let content = $('#element').text();

// 設置文本內容
$('#element').text('新的文本內容');

2. 鏈式調用

jQuery支持鏈式調用：

$('#element')
  .text('Hello World')
  .addClass('active');

二、修改HTML內容

1. html() 方法

允許包含HTML標簽，適合需要渲染標記的場景：

// 獲取HTML內容
let htmlContent = $('#container').html();

// 設置HTML內容
$('#container').html('<strong>加粗文本</strong>');

2. 安全注意事項

直接使用html()插入用戶輸入可能導致XSS攻擊，應先進行轉義處理。

三、表單元素的值操作

1. val() 方法

專用于表單元素的值操作：

// 獲取值
let username = $('#username').val();

// 設置值
$('#username').val('admin');

// 多選框/單選框
$('input[type="checkbox"]').val(['opt1', 'opt2']);

2. 特殊表單元素

• 下拉框(select)：$('#select').val('option2')
• 文本域(textarea)：與input相同

四、元素屬性操作

1. attr() 方法

操作元素的標準屬性：

// 獲取屬性
let src = $('#image').attr('src');

// 設置屬性
$('#image').attr({
  src: 'new.jpg',
  alt: '新圖片'
});

2. prop() 方法

更適合布爾屬性（如checked, disabled）：

$('#checkbox').prop('checked', true);

3. data() 方法

操作data-*自定義屬性：

// 設置data屬性
$('#element').data('key', 'value');

// 獲取data屬性
let value = $('#element').data('key');

五、樣式操作

1. css() 方法

直接修改內聯樣式：

// 單個樣式
$('#box').css('color', 'red');

// 多個樣式
$('#box').css({
  'background-color': '#eee',
  'padding': '10px'
});

2. 類名操作

// 添加類
$('#element').addClass('active');

// 移除類
$('#element').removeClass('inactive');

// 切換類
$('#element').toggleClass('highlight');

六、高級操作技巧

1. 回調函數

支持動態計算新值：

$('p').text(function(index, oldText) {
  return oldText + ' (已修改)';
});

2. 批量操作

jQuery天然支持批量操作：

// 修改所有匹配元素
$('.item').text('統一內容');

3. 鏈式操作組合

$('#form')
  .find('input')
  .val('')
  .end()
  .addClass('cleared');

七、性能優化建議

1. 緩存jQuery對象：重復使用選擇結果

   let $element = $('#element');
   $element.text('內容1');
   $element.addClass('active');
   

2. 批量DOM操作：減少回流次數

   let html = '';
   for(let i=0; i<100; i++){
    html += `<div>${i}</div>`;
   }
   $('#container').html(html);
   

3. 事件委托：對動態元素更高效

   $('#staticParent').on('click', '.dynamicItem', function(){
    $(this).text('已點擊');
   });
   

八、總結

jQuery提供了豐富的方法來修改元素值，核心要點包括： - 文本內容使用text() - HTML內容使用html() - 表單值使用val() - 屬性操作使用attr()/prop() - 樣式操作使用css()和類方法

隨著現代前端框架的興起，雖然jQuery的使用逐漸減少，但在傳統項目維護和快速原型開發中，這些知識仍然非常有價值。理解這些基礎操作也有助于更好地掌握現代DOM操作方式。

注意：本文示例基于jQuery 3.x版本，部分方法在早期版本中可能有差異。 “`