jQuery attr() 方法（超详细）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代 Web 开发中，jQuery 作为简化 DOM 操作的利器，始终占据重要地位。其中，attr() 方法是开发者高频使用的工具之一。它允许我们获取或设置 HTML 元素的属性值，例如 id、src 或自定义属性。无论是表单验证、动态内容加载，还是交互效果实现，attr() 方法都能提供高效解决方案。本文将从基础概念出发，结合实例与常见场景，深入讲解这一方法的核心用法及注意事项，帮助开发者快速掌握其实战技巧。

基础用法：获取与设置属性值

什么是 HTML 属性？

HTML 元素的属性是描述其特征的附加信息，例如 <img src="image.jpg" alt="描述文字" width="200"> 中的 src、alt 和 width。这些属性定义了元素的行为或内容。在 jQuery 中，attr() 方法通过选择器定位元素后，即可对属性进行操作。

基本语法

// 获取属性值  
var value = $(selector).attr("属性名");  

// 设置属性值  
$(selector).attr("属性名", "新值");  

// 批量设置多个属性  
$(selector).attr({  
  attr1: "value1",  
  attr2: "value2"  
});  

示例 1：获取元素的 id 和 title 属性

<div id="myDiv" title="这是一个测试 div">内容</div>  

<script>  
  // 获取 id 属性  
  console.log($("#myDiv").attr("id")); // 输出 "myDiv"  

  // 获取 title 属性  
  console.log($("#myDiv").attr("title")); // 输出 "这是一个测试 div"  
</script>  

示例 2：动态修改 src 属性加载图片

<img id="dynamicImage" src="default.jpg" alt="默认图片">  

<button onclick="changeImage()">更换图片</button>  

<script>  
  function changeImage() {  
    $("#dynamicImage").attr("src", "new-image.jpg");  
  }  
</script>  

attr() 与 prop() 的区别：一个关键误区

概念对比

• attr()：操作元素的原始 HTML 属性。即使属性值被修改，它仍会保留原始定义值。
• prop()：获取或设置元素的当前状态或属性值，反映 JavaScript 对象的实时状态。

形象比喻

可以将 attr() 比作物品的“标签”——例如，一个按钮的 disabled 属性在 HTML 中定义为 disabled="disabled"，此时 attr() 会返回该原始值。而 prop() 更像“实时状态”——当用户通过代码动态启用按钮时，prop("disabled") 会返回 false，而 attr() 仍会返回原始定义的 disabled。

示例：disabled 属性的对比

<button id="myButton" disabled>点击我</button>  

<script>  
  // 初始状态  
  console.log($("#myButton").attr("disabled")); // 输出 "disabled"  
  console.log($("#myButton").prop("disabled")); // 输出 true  

  // 动态启用按钮  
  $("#myButton").prop("disabled", false);  

  // 现在的属性值对比  
  console.log($("#myButton").attr("disabled")); // 仍输出 "disabled"（原始值未变）  
  console.log($("#myButton").prop("disabled")); // 输出 false（状态已改变）  
</script>  

结论：

• 使用 attr() 操作静态定义的属性（如 title、src、自定义属性）。
• 使用 prop() 控制动态状态（如 checked、disabled、selected）。

动态操作场景：实战案例

案例 1：表单元素的 required 属性控制

在表单验证中，开发者常需要根据用户输入动态启用或禁用必填字段：

<form>  
  <input type="text" id="username" required>  
  <input type="checkbox" id="optOut"> 不需要验证用户名  
</form>  

<script>  
  $("#optOut").on("change", function() {  
    if ($(this).is(":checked")) {  
      // 移除 required 属性  
      $("#username").removeAttr("required");  
    } else {  
      // 重新添加 required 属性  
      $("#username").attr("required", "required");  
    }  
  });  
</script>  

案例 2：自定义数据属性（Data Attributes）

HTML5 引入了 data-* 属性，允许开发者存储与元素关联的私有数据：

<div id="user" data-name="Alice" data-email="alice@example.com">用户信息</div>  

<script>  
  // 获取数据属性  
  var name = $("#user").attr("data-name"); // Alice  
  var email = $("#user").data("email"); // example.com（注意：`.data()` 的特殊用法）  

  // 修改数据属性  
  $("#user").attr("data-email", "new-email@example.com");  
</script>  

注意：data-* 属性的获取也可通过 jQuery 的 .data() 方法，但 .attr() 更直观地操作原始值。

常见问题与解决方案

问题 1：属性名大小写不一致

HTML 属性名不区分大小写，但 jQuery 的 attr() 方法会原样返回值。例如：

// HTML 中写为 <div data-NAME="value">  
console.log($("#myDiv").attr("data-name")); // 输出 "value"（自动忽略大小写）  

问题 2：批量操作多个属性

若需同时设置多个属性，可使用对象形式传递参数：

$("#myButton").attr({  
  class: "btn btn-primary",  
  title: "新按钮标题",  
  disabled: "disabled" // 注意：字符串值需用双引号  
});  

问题 3：获取不存在的属性

若元素未定义目标属性，attr() 会返回 undefined。可通过条件判断避免错误：

var href = $("#link").attr("href");  
if (href) {  
  console.log("链接地址：" + href);  
} else {  
  console.log("该元素没有 href 属性");  
}  

进阶技巧：结合其他 jQuery 方法

技巧 1：动态生成元素并设置属性

// 创建新 <img> 元素并设置属性  
$("<img>")  
  .attr({  
    src: "icon.png",  
    alt: "图标",  
    width: 32  
  })  
  .appendTo("body");  

技巧 2：遍历元素集合操作属性

// 为所有图片元素添加 loading 图标  
$("img").each(function() {  
  $(this).attr("src", "loading.gif");  
});  

技巧 3：与 CSS 结合实现效果

// 根据属性值动态设置样式  
$("#myDiv").css("background-color", function() {  
  return $(this).attr("data-color") || "#fff";  
});  

最佳实践与性能优化

实践 1：优先使用原生 API（必要时）

对于简单操作，直接使用原生 JavaScript 可能更高效：

// jQuery 写法  
$("#myInput").attr("value", "新值");  

// 原生写法（更直接）  
document.getElementById("myInput").value = "新值";  

实践 2：避免频繁操作 DOM

批量操作属性时，尽量减少 DOM 访问次数：

var $elements = $(".items");  
$elements  
  .attr("class", "active")  
  .css("color", "red"); // 链式调用更高效  

实践 3：处理布尔型属性

对于无值属性（如 hidden），设置时需传递有效值：

// 正确写法  
$("#element").attr("hidden", "hidden");  

// 错误写法（可能导致无效值）  
$("#element").attr("hidden", true); // 可能输出 "true" 而非隐藏元素  

实战案例：动态表单验证器

需求：根据用户选择切换必填字段

<form>  
  <select id="paymentMethod">  
    <option value="credit">信用卡</option>  
    <option value="paypal">PayPal</option>  
  </select>  

  <!-- PayPal 需要邮箱 -->  
  <input type="email" id="email" placeholder="邮箱地址">  
</form>  

<script>  
  $("#paymentMethod").on("change", function() {  
    var selected = $(this).val();  

    if (selected === "paypal") {  
      // 启用邮箱字段并标记为必填  
      $("#email")  
        .attr("required", "required")  
        .prop("disabled", false);  
    } else {  
      // 移除必填并禁用字段  
      $("#email")  
        .removeAttr("required")  
        .prop("disabled", true);  
    }  
  });  
</script>  

结论

jQuery 的 attr() 方法是 DOM 操作中的基础工具，但其灵活性与潜在的“陷阱”并存。通过理解它与 prop() 的区别、结合动态场景的实践案例，开发者可以更高效地实现交互功能。无论是表单验证、元素状态控制，还是数据属性管理，掌握 attr() 的核心逻辑与最佳实践，将显著提升代码的健壮性与可维护性。

在 Web 开发中，属性操作是构建交互体验的重要环节。希望本文的解析与示例能帮助你快速上手 attr() 方法，并在实际项目中游刃有余地应用这一工具。