举例说明attr()的使用场景

attr() 在前端开发中主要用于获取或设置 HTML 元素的属性值。以下是一些常见的应用场景：

1. 获取属性值:

• 读取 data- 属性：* attr() 非常适合处理自定义的 data-* 属性，这些属性常用于存储与元素相关的数据。

// 获取 data-id 属性的值
let itemId = $('#myElement').attr('data-id');

// 获取 data-price 属性的值并转换为数字
let itemPrice = parseFloat($('#myElement').attr('data-price'));

• 读取 href, src, title 等标准属性： 虽然可以用 prop() 获取这些属性，但 attr() 也能做到。

let linkUrl = $('#myLink').attr('href');
let imageUrl = $('#myImage').attr('src');
let tooltipText = $('#myButton').attr('title');

• 处理 SVG 元素： attr() 对于操作 SVG 元素的属性非常重要，例如获取或设置 SVG 元素的路径、填充颜色等。

// 获取 SVG 圆的半径
let radius = $('#myCircle').attr('r');

// 设置 SVG 路径
$('#myPath').attr('d', 'M150 0 L75 200 L225 200 Z');

2. 设置属性值:

• 动态添加或修改属性： 可以使用 attr() 动态地给元素添加新属性或修改现有属性的值。

// 添加 data-active 属性
$('#myElement').attr('data-active', 'true');

// 修改 src 属性
$('#myImage').attr('src', 'new_image.jpg');

// 设置多个属性
$('#myElement').attr({
  'data-id': '123',
  'data-name': 'example'
});

• 控制元素行为： 通过设置 disabled, readonly, checked 等属性，可以控制表单元素的行为。

// 禁用按钮
$('#myButton').attr('disabled', 'disabled');

// 设置输入框为只读
$('#myInput').attr('readonly', 'readonly');

// 选中复选框
$('#myCheckbox').attr('checked', 'checked');

• 操作 CSS 类： 虽然建议使用 addClass() 和 removeClass() 来管理 CSS 类，但 attr() 也可以操作 class 属性。

// 添加 class
$('#myElement').attr('class', 'active'); // 注意：这会覆盖原有的 class

attr() vs prop():

虽然 attr() 和 prop() 都可以操作属性，但它们之间存在区别:

• attr() 获取和设置的是 HTML 元素的初始属性值，也就是在 HTML 源代码中定义的值。
• prop() 获取和设置的是 JavaScript 中对应的属性值，它反映的是元素的当前状态。

对于像 checked, selected, disabled 等布尔类型的属性，建议使用 prop()，因为它能更准确地反映元素的当前状态。 对于其他属性，例如自定义的 data-* 属性或需要访问 HTML 源码中定义的属性值时，则应该使用 attr()。

总结:

attr() 是一个功能强大的方法，可以灵活地操作 HTML 元素的属性，在前端开发中有着广泛的应用场景。 理解 attr() 和 prop() 的区别，并根据实际情况选择合适的方法，可以避免一些潜在的问题。