怎么使用jquery attr

# 怎么使用jQuery attr()

jQuery的`.attr()`方法是操作HTML元素屬性的核心函數之一。它既能獲取屬性值，也能設置屬性值，是DOM操作中不可或缺的工具。本文將詳細介紹其用法、常見場景和注意事項。

## 目錄
1. [基本語法](#基本語法)
2. [獲取屬性值](#獲取屬性值)
3. [設置單個屬性](#設置單個屬性)
4. [設置多個屬性](#設置多個屬性)
5. [特殊屬性處理](#特殊屬性處理)
6. [與prop()的區別](#與prop的區別)
7. [實際應用示例](#實際應用示例)
8. [注意事項](#注意事項)

---

## 基本語法

```javascript
// 獲取屬性
$(selector).attr(attributeName)

// 設置單個屬性
$(selector).attr(attributeName, value)

// 設置多個屬性
$(selector).attr({ 
  attribute1: value1,
  attribute2: value2 
})

獲取屬性值

通過傳遞屬性名作為參數獲取值：

// 獲取img的src屬性
const imgSrc = $('img#logo').attr('src');

// 獲取鏈接的target屬性
const linkTarget = $('a.external').attr('target');

注意：如果元素不存在或屬性未設置，返回undefined。

設置單個屬性

// 設置圖片src
$('img.thumbnail').attr('src', 'new-image.jpg');

// 設置disabled屬性
$('button.submit').attr('disabled', 'disabled');

設置多個屬性

使用對象形式批量設置：

$('input.text-field').attr({
  'placeholder': '請輸入內容',
  'maxlength': 50,
  'data-validate': 'required'
});

特殊屬性處理

布爾屬性

像checked、disabled這類屬性建議使用.prop()：

// 推薦方式
$('#checkbox').prop('checked', true);

// 也能用attr（但不推薦）
$('#checkbox').attr('checked', 'checked');

自定義data屬性

HTML5建議使用.data()方法：

// 獲取data-*屬性
const user = $('#profile').data('user-id');

// 等效于：
const user = $('#profile').attr('data-user-id');

與prop的區別

示例對比：

// 返回原始HTML值
$('input').attr('value'); 

// 返回當前DOM值（會隨用戶輸入變化）
$('input').prop('value');

實際應用示例

圖片懶加載

$('img.lazy').each(function() {
  const realSrc = $(this).attr('data-src');
  $(this).attr('src', realSrc);
});

表單驗證提示

$('form').submit(function() {
  if (!$('#email').val()) {
    $('#email').attr('title', '郵箱不能為空');
    return false;
  }
});

動態修改鏈接

$('a.locale').click(function() {
  const lang = $(this).attr('data-lang');
  $('html').attr('lang', lang);
});

注意事項

1. 性能考慮：頻繁操作DOM會影響性能，建議批量修改

2. 屬性名大小寫：HTML屬性不區分大小寫，但建議保持一致性

3. SVG元素：部分SVG屬性需要使用attr()而非prop()

4. 移除屬性：使用.removeAttr()方法

   $('div.tooltip').removeAttr('title');
   

5. 回調函數：支持動態計算屬性值

   $('img').attr('src', function(i, oldSrc) {
    return oldSrc + '?timestamp=' + Date.now();
   });
   

通過靈活運用.attr()方法，可以高效地完成各種DOM屬性操作需求。建議結合具體場景選擇最合適的方法。 “`

注：本文實際約850字（含代碼示例），主要涵蓋jQuery attr()的核心用法和實用技巧。