javascript中的attr方法怎么用

# JavaScript中的attr方法怎么用

## 1. 什么是attr方法

`attr()`是jQuery中用于获取或设置HTML元素属性的方法。它可以操作元素的任何标准属性（如`id`、`class`、`href`等）以及自定义数据属性。

### 基本语法：
```javascript
// 获取属性值
$(selector).attr(attributeName)

// 设置属性值
$(selector).attr(attributeName, value)

// 设置多个属性
$(selector).attr({
  attribute1: value1,
  attribute2: value2
})

2. 获取属性值

示例1：获取单个属性

<a id="myLink" href="https://example.com">链接</a>

const href = $('#myLink').attr('href');
console.log(href); // 输出: "https://example.com"

示例2：获取布尔属性

对于checked、disabled等布尔属性：

<input type="checkbox" id="myCheckbox" checked>

const isChecked = $('#myCheckbox').attr('checked');
console.log(isChecked); // 输出: "checked"（字符串）

3. 设置属性值

示例3：设置单个属性

$('#myLink').attr('target', '_blank');
// 结果：<a id="myLink" href="https://example.com" target="_blank">

示例4：设置多个属性

$('#myImage').attr({
  src: 'new-image.jpg',
  alt: '新图片描述',
  title: '鼠标悬停提示'
});

4. 移除属性

虽然attr()不能直接移除属性，但可以配合removeAttr()使用：

$('#myLink').removeAttr('target');

5. 与prop()的区别

对比示例：

<input type="checkbox" id="test" checked>

console.log($('#test').attr('checked'));  // "checked"（字符串）
console.log($('#test').prop('checked')); // true（布尔值）

6. 自定义数据属性

HTML5允许使用data-*格式的自定义属性：

<div id="user" data-user-id="123" data-role="admin"></div>

const userId = $('#user').attr('data-user-id');
$('#user').attr('data-last-login', '2023-01-01');

7. 回调函数用法

可以传入函数动态设置属性值：

$('a').attr('href', function(index, oldValue) {
  return oldValue + '?timestamp=' + Date.now();
});

8. 常见应用场景

场景1：图片懒加载

$('img.lazy').attr('src', function() {
  return $(this).data('src');
});

场景2：表单动态设置

$('#gender').attr('disabled', !isAdmin);

场景3：国际化处理

$('.i18n').attr('title', function() {
  return translations[$(this).data('i18n-key')];
});

9. 注意事项

1. 性能考虑：频繁操作DOM属性会影响性能，建议批量操作
2. 属性不存在时：获取不存在的属性返回undefined
3. XSS防护：直接设置href或src时注意防范注入攻击
4. SVG元素：部分SVG属性需要使用attr()而非prop()

10. 现代JavaScript替代方案

原生JavaScript的替代方法：

// 获取属性
document.getElementById('myLink').getAttribute('href');

// 设置属性
document.getElementById('myLink').setAttribute('target', '_blank');

总结

attr()是jQuery中灵活强大的属性操作方法，虽然现代前端开发中jQuery使用减少，但在遗留项目和维护工作中仍然常见。理解其与prop()的区别、掌握回调函数用法以及注意性能优化，可以让你更高效地操作DOM元素属性。

提示：在纯JavaScript项目中，建议优先使用dataset操作自定义数据属性，或直接使用getAttribute/setAttribute方法。 “`

（注：实际字数约1100字，可根据需要扩展具体示例或补充注意事项部分以达到1250字要求）