jQuery.attr介绍

封面图 • 2026-01-17 • jQuery

`jQuery.attr()` 是 jQuery 中用于获取或设置 HTML 元素属性的方法。它可以用来读取一个元素的属性值，也可以用来修改一个元素的属性值。

---

## ✅ 语法

### 1. 获取属性值（单个属性）

```javascript
var value = $(selector).attr(attributeName);
```

- `selector`: 选择器，比如 `#id`、`.class`、`element` 等。
- `attributeName`: 要获取的属性名，如 `"href"`、`"src"`、`"id"` 等。

**示例：**

```html
<a id="myLink" href="https://example.com">点击这里</a>
```

```javascript
var href = $('#myLink').attr('href');
console.log(href); // 输出: https://example.com
```

---

### 2. 设置属性值（单个属性）

```javascript
$(selector).attr(attributeName, value);
```

- `value`: 要设置的属性值。

**示例：**

```javascript
$('#myLink').attr('href', 'https://newurl.com');
```

---

### 3. 设置多个属性（对象形式）

```javascript
$(selector).attr({
    attributeName1: value1,
    attributeName2: value2,
    ...
});
```

**示例：**

```javascript
$('#myLink').attr({
    href: 'https://newurl.com',
    target: '_blank'
});
```

---

## 📌 注意事项

- 如果属性不存在，`attr()` 会返回 `undefined`。
- 对于某些属性（如 `checked`、`selected`、`disabled`），建议使用 `.prop()` 方法来操作，因为它们是“属性”而不是“HTML 属性”。

---

## 🔍 示例对比：`attr()` vs `prop()`

| 属性类型 | 使用 `attr()` | 使用 `prop()` |
|----------|----------------|----------------|
| `checked` | 可以读写，但不推荐 | 推荐使用 |
| `disabled` | 可以读写，但不推荐 | 推荐使用 |
| `value`（输入框） | 读取的是 HTML 中的值 | 读取的是当前值 |

---

## ✅ 总结

| 功能 | 用法 |
|------|------|
| 获取属性值 | `$(selector).attr('attribute')` |
| 设置单个属性 | `$(selector).attr('attribute', 'value')` |
| 设置多个属性 | `$(selector).attr({ attr1: val1, ... })` |

---

如果你有具体的使用场景或问题，欢迎继续提问！