<think>我们正在处理一个关于
jQuery中如何使用
attr()方法获取和设置元素属性值的问题。根据用户提供的引用，我们可以总结如下：
1
. 引用[1]指出：
jQuery中用
attr()方法来获取和设置元素属性，
attr是
attribute（属性）的缩写。它有4个表达式（即多种使用方式）。
2
. 引用[2]详细说明了两种主要用法：
- 获取属性值：只传入一个参数（属性名），返回匹配元素集合中第一个元素的属性值。例如：`
$(selector
).attr(name
)`
- 设置属性值：传入两个参数（属性名和值），为所有匹配元素设置属性值。例如：`
$(selector
).attr(name,
value)`
3
. 引用[3]给出了具体示例：
- 获取属性值：`var diywidgetid =
$('#w_1'
).attr('diywidgetid'
);`
- 设置属性值：`
$(this).attr(key,
value);` 相当于DOM的set
Attribute
方法。
4
. 引用[4]展示了在事件处理函数中获取被点击元素的属性值，但示例中并没有直接获取属性，而是获取了复选框的状态。不过我们可以从中理解到在事件处理函数中使用
attr()的上下文。
因此，用户的问题可以分解为：
- 如何获取元素属性值？
- 如何设置元素属性值？
### 回答步骤
1
. **获取属性值**：使用`
$(selector
).attr(属性名
)`，返回匹配元素集中第一个元素的指定属性值。
2
. **设置属性值**：使用`
$(selector
).attr(属性名, 值
)`，为所有匹配元素设置属性值。
### 示例代码
#### 获取属性值
假设我们有一个图片元素，我们想获取它的`src`属性：
```html
<img id="myImage" src="image
.jpg" alt="示例图片">
```
使用
jQuery获取`src`属性：
```javascript
var src
Value =
$('#myImage'
).attr('src'
);
console
.log
(src
Value); // 输出: image
.jpg
```
#### 设置属性值
设置图片的`src`属性：
```javascript
$('#myImage'
).attr('src', 'new_image
.jpg'
);
// 现在图片的src属性变为new_image
.jpg
```
#### 在事件处理函数中获取当前元素的属性
例如，当点击一个链接时，获取它的`href`属性：
```html
<a href="https://example
.com" class="myLink">点击我</a>
```
```javascript
$('
.myLink'
).click
(function
() {
var href
Value =
$(this).attr('href'
); // 使用
$(this)获取当前被点击的链接的href
alert
(href
Value); // 弹出: https://example
.com
}
);
```
### 注意事项
- 如果要同时设置多个属性，可以传入一个对象：
```javascript
$('#myImage'
).attr({
src: 'new_image
.jpg',
alt: '新的图片'
}
);
```
- 如果获取的属性不存在，则返回`undefined`。
- 在
jQuery 1
.6之后，对于`checked`、`selected`、`disabled`等属性，建议使用`prop
()`
方法，因为它们是元素的固有属性（property）而不是HTML属性（
attribute）。例如，获取复选框是否被选中应使用`
$(checkbox
).prop
('checked'
)`。
### 相关问题
根据用户的问题，我们生成以下相关问题：
1
. jQuery中
attr()和prop
()有什么区别？
2
. 如何用
jQuery移除一个元素的属性？
3
. 如何获取一个元素的所有属性？
4
. 在
jQuery中如何操作自定义属性（
data-*）？
希望这些回答能帮助用户理解
jQuery中
attr()方法的使用。</think>###
jQuery 获取和设置元素属性值的
方法
在
jQuery 中，使用 `
$(selector
).attr()`
方法可以获取或设置元素的属性值，具体用法如下：
#### 1
. **获取属性值**
传入单个属性名参数，返回匹配元素集中**第一个元素**的指定属性值：
```javascript
// 获取第一个匹配元素的属性值
var
value =
$("selector"
).attr("属性名"
);
// 示例：获取图片的 src 属性
var imgSrc =
$("img"
).attr("src"
);
// 示例：获取自定义属性（事件处理中常用）
$("button"
).click
(function
() {
var
data =
$(this).attr("
data-custom"
); // 获取当前按钮的
data-custom 属性
}
);
```
> 根据引用[2][3]，当只传入属性名参数时，
方法返回索引为 0 的 DOM 对象的属性值 [^2][^3]。
#### 2
. **设置属性值**
传入属性名+值参数，为**所有匹配元素**设置属性：
```javascript
// 设置单个属性
$("selector"
).attr("属性名", "值"
);
// 示例：设置所有图片的 alt 属性
$("img"
).attr("alt", "图片描述"
);
// 示例：设置自定义属性
$("
.widget"
).attr("diywidgetid", "new_id"
);
```
> 根据引用[3]，这相当于 DOM 的 `set
Attribute
()`
方法 [^3]。
#### 3
. **设置多个属性**
传入对象参数可批量设置多个属性：
```javascript
// 同时设置多个属性
$("selector"
).attr({
"属性1": "值1",
"属性2": "值2"
}
);
// 示例：设置图片的多个属性
$("#banner"
).attr({
src: "new_banner
.jpg",
title: "首页横幅",
"
data-load": "async"
}
);
```
#### 4
. **注意事项**
- **属性类型**：适用于标准属性（`id`, `src`, `href` 等）和自定义属性（`
data-*`）
- **与 `
.prop
()` 区别**：
- `
attr()` 操作 HTML 属性（
attribute）
- `prop
()` 操作 DOM 属性（property），如 `checked`, `selected` 等布尔值属性
- **返回值**：获取属性时，若元素不存在则返回 `undefined`
### 完整示例
```html
<!
-- HTML
-->
<button id="btn"
data-action="save">保存</button>
<img class="dynamic
-img">
```
```javascript
// 获取属性
const action =
$("#btn"
).attr("
data-action"
); // 返回 "save"
// 设置属性
$("
.dynamic
-img"
).attr("src", "default
.png"
);
// 事件处理中获取当前元素属性
$("#btn"
).click
(function
() {
const currentBtn =
$(this).attr("id"
); // 返回 "btn"
}
);
```
### 常见应用场景
1
. 动态修改图片路径
2
. 获取/设置自定义数据属性（`
data-*`）
3
. 表单元素属性操作（结合 `
val()` 使用）
4
. 组件状态标记（如激活状态的 `
data-active`）
---
### 相关问题
1
. jQuery 中 `
attr()` 和 `prop
()`
方法有什么区别？
2
. 如何用
jQuery 安全地操作 `
data-*` 自定义属性？
3
. 当获取不存在的属性时，`
attr()` 会返回什么？
4
. 如何用
jQuery 同时修改多个元素的属性值？
5
. 为什么在事件处理函数中使用 `
$(this).attr()` 是常见做法？
> 引用说明：
> [^1]:
jQuery 的 `
attr()`
方法用于元素属性操作，是 "
attribute" 的缩写。
> [^2]: 单参数调用时返回第一个匹配元素的属性值。
> [^3]: `
attr(key,
value)` 相当于 DOM 的 `set
Attribute
()`
方法。
> [^4]: 在事件处理中通过 `
$(this)` 获取当前元素属性。
jQuery属性操作详解
本文主要介绍了使用jQuery进行属性获取和设置的方法，包括如何利用$(this).attr()获取和设置节点属性值，以及如何通过$(this).val()获取和设置表单元素的值。
扫一扫
5018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
