jquery attr（实战总结）

jQuery attr 的基础用法与核心概念

在前端开发中，我们经常需要动态地修改 HTML 元素的属性。比如，给一个按钮添加 disabled 属性，或者修改图片的 src 路径。这些操作在原生 JavaScript 中虽然可以实现，但写起来略显繁琐。而 jQuery 提供了一个非常简洁高效的 API —— attr() 方法，它专门用来读取或设置元素的属性值。

jquery attr 的设计初衷就是让开发者不再为繁琐的 DOM 操作分心。你可以把它想象成一个“万能钥匙”，打开 HTML 元素的属性之门。无论你想获取还是修改某个属性，只需要一句代码就能搞定。

举个例子，假设我们有一个按钮：

<button id="submit-btn" class="btn" disabled>提交</button>

如果我们想通过 jQuery 检查这个按钮是否被禁用，可以用：

// 读取 disabled 属性的值
var isDisabled = $('#submit-btn').attr('disabled');

// 输出结果：true（如果存在该属性，返回其值；否则返回 undefined）
console.log(isDisabled);

这里的 attr('disabled') 就是获取属性值的标准写法。注意，如果属性不存在，attr() 返回 undefined，这有助于我们在逻辑判断中做安全处理。

获取与设置属性值的完整操作

jquery attr 最强大的地方在于它既能“读”也能“写”。我们可以用同一个方法完成属性的获取和设置，这大大减少了代码量。

读取属性值

当只传入一个参数时，attr() 会作为“读取器”使用，返回指定属性的值。

// 获取图片的 src 属性
var imgSrc = $('#avatar').attr('src');

// 输出：https://example.com/avatar.jpg
console.log(imgSrc);

这个操作非常直观。只要你知道元素的 ID 或选择器，就能快速拿到它的属性值。

设置属性值

当传入两个参数时，attr() 就变成了“设置器”。第一个参数是属性名，第二个参数是你要设置的新值。

// 设置按钮的 disabled 属性为 true
$('#submit-btn').attr('disabled', true);

// 设置图片的 src 为新的地址
$('#avatar').attr('src', 'https://new-image.com/photo.jpg');

// 设置链接的 href 属性
$('#download-link').attr('href', '/download/file.pdf');

注意：设置属性时，如果值是布尔类型（如 true / false），jQuery 会自动转换成对应的字符串。例如，disabled="true" 会被写入 HTML，而 disabled="false" 也会被正确渲染。

一次性设置多个属性

更高效的是，attr() 还支持传入一个对象，一次性设置多个属性。

// 一次性设置多个属性
$('#myImage').attr({
  src: 'https://example.com/new-pic.jpg',
  alt: '新图片',
  title: '点击查看详情',
  width: '300',
  height: '200'
});

这种方式特别适合在动态生成 HTML 元素时使用，代码更清晰，可维护性更强。

常见使用场景与实际案例

动态切换按钮状态

在用户提交表单后，我们常常需要禁用提交按钮，防止重复提交。这时候 jquery attr 就派上用场了。

// 提交按钮点击事件
$('#submit-btn').on('click', function() {
  // 禁用按钮，避免重复提交
  $(this).attr('disabled', true);
  
  // 模拟异步请求
  setTimeout(function() {
    // 请求完成后重新启用按钮
    $('#submit-btn').attr('disabled', false);
  }, 3000);
});

这个例子中，attr('disabled', true) 是禁用按钮的关键操作。而 false 则恢复可用状态。整个过程流畅自然，无需手动操作 DOM 的 class 或 style。

图片懒加载实现

在网页中，大量图片如果一开始就加载会严重影响性能。我们可以使用 jquery attr 实现懒加载功能：先用一个占位图，滚动到可视区域时再替换真实图片。

// 给所有需要懒加载的图片添加 data-src 属性
$('.lazy-img').each(function() {
  var $img = $(this);
  var realSrc = $img.data('src'); // 从 data-src 中获取真实地址
  $img.attr('src', realSrc); // 真正赋值
});

这里我们用 data-src 作为存储真实路径的自定义属性，通过 data() 获取，再用 attr() 设置到 src 上。这是一种非常标准的懒加载模式。

动态生成链接与锚点

有时我们需要根据用户操作动态生成带有特定参数的链接。比如分享按钮点击后，生成带当前页面 URL 的分享链接。

// 获取当前页面地址
var currentUrl = window.location.href;

// 生成微博分享链接
$('#weibo-share').attr('href', 'https://weibo.com/share?text=我正在看' + encodeURIComponent(currentUrl));

这个例子展示了如何结合 window.location.href 和 attr()，动态构建可点击的分享链接，提升用户体验。

属性与特性（property）的区别与注意事项

在深入使用 jquery attr 之前，必须理解一个关键概念：属性（attribute） 和 特性（property） 的区别。

简单来说：

  • 属性 是写在 HTML 中的，比如 <input disabled> 里的 disabled
  • 特性 是 DOM 对象运行时的属性，比如 inputElement.disabled 是一个布尔值

虽然在大多数情况下 attr() 和 prop() 表现一致，但当处理布尔属性时，它们的行为会有所不同。

例子对比

// HTML: <input type="checkbox" id="agree" checked>

// 使用 attr() 获取 checked 属性
var isCheckedAttr = $('#agree').attr('checked');

// 输出：true（因为 HTML 中有 checked 属性）
console.log(isCheckedAttr);

// 使用 prop() 获取 checked 特性
var isCheckedProp = $('#agree').prop('checked');

// 输出：true（DOM 状态为选中）
console.log(isCheckedProp);

但当动态移除 checked 属性时：

// 移除 HTML 中的 checked 属性
$('#agree').removeAttr('checked');

// 此时 attr() 返回 undefined
console.log($('#agree').attr('checked')); // undefined

// 但 prop() 仍然返回 true，因为它反映的是 DOM 实际状态
console.log($('#agree').prop('checked')); // true

何时使用 attr()？

  • 读取或设置 HTML 中的原始属性（如 src、href、title）
  • 处理自定义属性（如 data-*）
  • 需要保留 HTML 属性的原始值

何时使用 prop()？

  • 操作布尔属性（如 checked、disabled、selected）
  • 获取 DOM 的运行时状态

💡 小贴士：对于 disabled、checked 等布尔属性，推荐使用 prop()，因为它的行为更符合“状态”而非“属性”。

方法 适用场景 示例
attr() 获取/设置 HTML 属性 img.attr('src', 'new.jpg')
prop() 获取/设置 DOM 特性 checkbox.prop('checked', true)

高级技巧与最佳实践

判断属性是否存在

jquery attr 本身不直接提供“是否存在”的判断方法，但我们可以通过返回值来判断：

var hasTitle = $('#myDiv').attr('title') !== undefined;

if (hasTitle) {
  console.log('该元素有 title 属性');
} else {
  console.log('没有 title 属性');
}

更简洁的方式是使用 hasAttr() 方法（需要 jQuery 1.6+）：

if ($('#myDiv').attr('title')) {
  // 属性存在且有值
}

注意：attr() 返回 undefined 表示属性不存在，返回空字符串表示属性存在但为空。

批量操作多个元素

jquery attr 支持链式操作，可以轻松对一组元素进行统一属性设置。

// 给所有 class 为 'btn' 的按钮添加 data-action 属性
$('.btn').attr('data-action', 'submit');

// 给所有图片设置 alt 文本
$('img').attr('alt', '图片内容');

这种写法简洁高效，尤其适合表单批量处理、导航栏动态配置等场景。

避免常见错误

  1. 误用 attr() 处理布尔状态
    用 attr('disabled', true) 设置禁用状态，虽然能工作，但不推荐。应使用 prop('disabled', true)。

  2. 忘记处理属性不存在的情况
    在读取属性前，先判断是否存在，避免 undefined 导致错误。

  3. 混淆 attr() 与 prop()
    记住：attr() 是“属性”，prop() 是“特性”，在布尔属性上要特别注意。

总结与建议

jquery attr 是 jQuery 中最基础也最实用的方法之一。它让操作 HTML 属性变得简单、直观、高效。无论是读取图片路径、修改链接地址，还是动态控制按钮状态，jquery attr 都能轻松应对。

但也要注意，它并非万能。在处理布尔属性（如 checked、disabled）时，应优先考虑 prop()，以获得更准确的状态反馈。

对于初学者来说，掌握 attr() 是理解 jQuery 操作 DOM 的第一步。建议从简单的属性读取开始，逐步尝试设置、批量操作和与事件结合的实战应用。

最后，如果你正在维护一个老项目，或者团队中有人使用 jQuery，熟练掌握 jquery attr 将让你在日常开发中如虎添翼。它不是什么高级技巧，却是每一个前端开发者都应具备的基本功。