怎么使用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()的核心用法和实用技巧。