jQuery 属性操作 - attr() 方法

封面图 • 2025-11-08 • jQuery

在 jQuery 中，`attr()` 方法用于**获取或设置元素的属性值**。它是一个非常常用的属性操作方法。

---

## ✅ 一、基本语法

### 1. 获取属性值
```javascript
var value = $(selector).attr(attributeName);
```
- `selector`：选择器，比如 `"#id"` 或 `"div"`
- `attributeName`：要获取的属性名，如 `"href"`、`"src"`、`"class"` 等

### 2. 设置属性值
```javascript
$(selector).attr(attributeName, value);
```
- `attributeName`：属性名
- `value`：要设置的值

### 3. 设置多个属性（对象形式）
```javascript
$(selector).attr({
    attributeName1: "value1",
    attributeName2: "value2"
});
```

---

## ✅ 二、示例说明

### 示例 1：获取属性值
```html
<img id="myImage" src="image.jpg" alt="Sample Image">
```

```javascript
var src = $("#myImage").attr("src");
console.log(src); // 输出: "image.jpg"
```

### 示例 2：设置属性值
```html
<a id="myLink" href="#">Click me</a>
```

```javascript
$("#myLink").attr("href", "https://www.example.com");
// 现在链接指向 https://www.example.com
```

### 示例 3：设置多个属性
```html
<div id="myDiv"></div>
```

```javascript
$("#myDiv").attr({
    id: "newId",
    class: "myClass",
    title: "This is a div"
});
```

---

## ✅ 三、注意事项

- `attr()` 可以获取 HTML 属性，但**不是所有属性都能用 `attr()` 获取**，例如：
  - `checked`、`selected`、`disabled` 等表单属性建议使用 `.prop()` 方法。
- 对于布尔属性（如 `checked`, `disabled`），`attr()` 返回的是字符串（如 `"checked"`），而 `.prop()` 返回的是布尔值（`true` / `false`）。

---

## ✅ 四、与 `.prop()` 的区别

| 方法 | 用途 | 特点 |
|------|------|------|
| `.attr()` | 获取/设置 HTML 属性 | 返回字符串值，适用于 HTML 属性 |
| `.prop()` | 获取/设置 DOM 属性 | 返回布尔值或原始值，适用于表单控件等 |

✅ 推荐：
- 表单属性（如 `checked`, `disabled`）使用 `.prop()`
- 其他 HTML 属性使用 `.attr()`

---

## ✅ 五、总结

| 操作 | 方法 | 示例 |
|------|------|------|
| 获取属性 | `.attr(attributeName)` | `$("#id").attr("href")` |
| 设置属性 | `.attr(attributeName, value)` | `$("#id").attr("href", "url")` |
| 设置多个属性 | `.attr({})` | `$("#id").attr({href: "url", class: "myClass"})` |

---

如果你有具体的应用场景（如修改图片路径、处理表单等），我可以提供更详细的示例！