jQuery中设置属性attr()的使用

jQuery的attr()方法用于获取或设置HTML元素的属性值。它是处理HTML元素属性的核心方法之一，广泛用于动态修改DOM元素的属性。

基本用法

1. 获取属性值

// 获取元素的class属性值
var className = $("#myElement").attr("class");

// 获取元素的href属性值
var href = $("a").attr("href");

2. 设置属性值

// 设置元素的class属性
$("#myElement").attr("class", "new-class");

// 设置元素的href属性
$("a").attr("href", "https://example.com");

3. 设置多个属性

$("#myElement").attr({
  "class": "new-class",
  "href": "https://example.com",
  "title": "Example Link"
});

实际应用示例

示例1：动态修改图片路径

<img id="myImage" src="default.jpg" alt="Default Image">

<script>
  // 修改图片路径
  $("#myImage").attr("src", "new-image.jpg");
  
  // 获取当前图片路径
  var currentSrc = $("#myImage").attr("src");
  console.log("Current image source:", currentSrc); // 输出: new-image.jpg
</script>

示例2：动态创建链接

<div id="linksContainer"></div>

<script>
  // 创建一个新链接并添加到容器中
  var newLink = $("<a>").attr({
    "href": "https://www.example.com",
    "target": "_blank",
    "title": "Example Website"
  }).text("Visit Example");
  
  $("#linksContainer").append(newLink);
  
  // 也可以使用链式写法
  $("<a>", {
    href: "https://www.example.com",
    target: "_blank",
    title: "Example Website"
  }).text("Visit Example").appendTo("#linksContainer");
</script>

示例3：表单元素属性操作

<input type="text" id="username" placeholder="Enter your name">

<script>
  // 获取输入框的placeholder
  var placeholder = $("#username").attr("placeholder");
  console.log("Placeholder:", placeholder); // 输出: Enter your name
  
  // 修改输入框的placeholder
  $("#username").attr("placeholder", "Enter your full name");
  
  // 添加disabled属性
  $("#username").attr("disabled", true);
  
  // 移除disabled属性
  $("#username").removeAttr("disabled");
</script>

示例4：处理按钮状态

<button id="myButton" class="btn">Click Me</button>

<script>
  // 获取按钮的class
  console.log("Button class:", $("#myButton").attr("class")); // 输出: btn
  
  // 修改按钮样式
  $("#myButton").attr("class", "btn btn-primary");
  
  // 禁用按钮
  $("#myButton").attr("disabled", true);
  
  // 启用按钮
  $("#myButton").removeAttr("disabled");
</script>

常见误区与注意事项

❌ 错误：使用attr()设置class

// 不推荐（可能会覆盖已有class）
$("#myElement").attr("class", "new-class");

// 推荐使用addClass()方法
$("#myElement").addClass("new-class");

❌ 错误：使用attr()获取表单值

// 不推荐（应该使用val()）
var value = $("#myInput").attr("value");

// 推荐使用val()方法
var value = $("#myInput").val();

✅ 正确：使用attr()处理自定义数据属性

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

<script>
  // 获取自定义数据属性
  var userId = $("#dataElement").attr("data-user-id"); // "123"
  var role = $("#dataElement").attr("data-role"); // "admin"
  
  // 设置自定义数据属性
  $("#dataElement").attr("data-status", "active");
</script>

attr() vs prop()

在jQuery中，attr()用于HTML属性，而prop()用于DOM属性。对于表单元素的checked、selected、disabled等状态，应该使用prop()：

// 正确：使用prop()设置checked状态
$("#myCheckbox").prop("checked", true);

// 错误：使用attr()设置checked状态
$("#myCheckbox").attr("checked", true); // 这不会生效

总结