jQuery中,data()、prop()、attr() 三者区别

本文深入解析了jQuery中attr(), prop()和data()三种属性操作方法的区别与应用。详细阐述了它们如何读写元素属性、特性及自定义数据,以及在DOM操作中的作用。通过对比,帮助读者理解何时使用哪种方法更为合适。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先来介绍下三个属性
  • .attr();基于setAttbute和getAttbute,读写元素自定义属性。(注:像class、chacked、selected、disablad这种属性推荐用prop)
    • 可以操作任何属性,设置属性值会映射到dom行间样式
  • .prop();用于读写元素的特性属性。(注:()里面填属性值,第二个参数可修改属性,如.prop(‘checked’,true);)
    • 只可以操作特性,设置特性值会映射到dom行间样式
  • .data()
    • 可以往jQuery对象中存取信息,会与dom信息形成映射(即给某个元素设置data属性后,就可以通过这个元素获取到这个属性)
    • 可以获取到dom元素行间样式上以data-开头的数据
    • 设置的数据会与dom信息形成映射,但是不会映射到dom的行间样式上(即信息会形成映射,但不会操作dom)
    • 如果设置特性,如class,只会形成一个为data属性的class,并不会改变dom元素的class
    • clone()也会克隆到data的属性值
data()、prop()、attr() 三者区别
  • prop()是读取元素的特性(原来的 dom.特性 不可使用),映射到行间样式
  • attr()读取元素属性(包括特性),映射到行间样式
  • data()读取自定义属性
    • 读取元素上以data-开头的属性
    • 读取自定义的data属性
    • 不会映射到行间,但与dom信息形成映射
<think>我们正在讨论jQueryattr()prop()方法的区别。根据提供的引用材料,我们可以总结如下: 1. **历史背景**: - `attr()` 方法从jQuery 1.0开始就存在。 - `prop()` 方法是在jQuery 1.6版本中新增的。 2. **基本概念**: - `attr()` 主要用于操作HTML元素的**属性(attributes)**,这些属性是在HTML标签中定义的,例如:`<input type="checkbox" id="test" checked="checked">`中的`type`、`id`、`checked`都是属性。 - `prop()` 主要用于操作DOM元素的**属性(properties)**,这些属性是DOM对象在JavaScript中拥有的属性。 3. **区别**: - 在jQuery 1.6之前,`attr()`方法既用来获取属性(attributes)也用来获取属性(properties)。但在1.6版本之后,为了更清晰地区分,引入了`prop()`方法专门处理DOM属性(properties)。 - 对于某些属性(如`checked`, `selected`, `disabled`等),在jQuery 1.6之后,建议使用`prop()`方法,因为这些属性在DOM元素中表现为布尔值属性(boolean properties),而使用`attr()`可能会得到字符串(例如`"checked"`)或`undefined`,而`prop()`会返回布尔值(`true`或`false`)。 4. **使用建议**: - 对于HTML标签中存在的属性(如`id`, `class`, `style`, `src`等),使用`attr()`。 - 对于DOM元素的布尔值属性(如`checked`, `selected`, `disabled`等),使用`prop()`。 - 对于自定义的HTML属性(非标准属性),使用`attr()`,因为`prop()`可能无法访问。 5. **示例**: - 获取复选框的选中状态: ```javascript // 使用attr()在1.6之前可以,1.6之后不推荐 var isChecked1 = $(':checkbox').attr('checked'); // 返回"checked"或undefined // 使用prop()推荐 var isChecked2 = $(':checkbox').prop('checked'); // 返回true或false ``` - 设置复选框的选中状态: ```javascript // 使用attr() $(':checkbox').attr('checked', true); // 设置checked属性为字符串"checked" // 使用prop() $(':checkbox').prop('checked', true); // 设置DOM的checked属性为布尔值true ``` 6. **引用材料中的关键点**: - 引用[1]指出:在1.6及以后版本,可以根据需要选择使用`attr()`或`prop()`。 - 引用[2]指出:对于`window``document`对象,以及像`checked`这样的属性,应该使用`prop()`代替`attr()`。 - 引用[3]指出:`attr()`可以用于HTMLDOM属性,而`prop()`主要用于DOM属性。 - 引用[4]指出:在jQuery中,attributeproperty是两个不同的概念。 因此,总结如下: - 当操作的是HTML标签上定义的属性(attributes)时,使用`attr()`。 - 当操作的是DOM元素的属性(properties,尤其是布尔值属性)时,使用`prop()`。 这样可以避免在jQuery 1.6及以后版本中出现不一致的行为。 §§相关问题§§ 1. 在jQuery中,如何获取一个复选框的选中状态? 2. 为什么在jQuery 1.6之后,对于`checked`属性推荐使用`prop()`方法? 3. 如何用jQuery设置一个单选按钮(radio)为选中状态? 4. `attr()``prop()`在性能上有什么区别吗? 5. 自定义属性(如`data-*`)应该用`attr()`还是`prop()`访问?</think>### jQuery 中 `attr()` 与 `prop()` 方法的区别详解 在 jQuery 中,`attr()` `prop()` 都用于操作元素属性,但存在关键差异: #### 1. **核心概念区分** - **`attr()`** 操作 **HTML 属性**(定义在 HTML 标签中的属性) 例如:`<input type="checkbox" checked="checked">` 中的 `checked` 属性 返回值为 **字符串**(如 `"checked"` 或 `undefined`) - **`prop()`** 操作 **DOM 属性**(JavaScript 对象的内存属性) 例如:DOM 元素的 `checked` 属性(布尔值) 返回值为 **布尔值**(`true`/`false`)或 **原生数据类型** #### 2. **关键差异对比** | 特性 | `attr()` | `prop()` | |------|----------|----------| | **操作对象** | HTML 标签属性 | DOM 对象属性 | | **返回值类型** | 字符串 | 布尔值/原生类型 | | **适用版本** | jQuery 1.0+ | jQuery 1.6+ | | **动态更新** | ❌ 不随状态变化 | ✅ 实时反映状态 | | **布尔属性** | 返回字符串(如 `"checked"`) | 返回布尔值(`true`/`false`) | #### 3. **典型场景示例** ```javascript // 复选框示例 const $checkbox = $(":checkbox"); // 获取选中状态 $checkbox.attr("checked"); // 返回 "checked" (字符串) $checkbox.prop("checked"); // 返回 true (布尔值) // 设置选中状态 $checkbox.attr("checked", "checked"); // 添加 HTML 属性 $checkbox.prop("checked", true); // 修改 DOM 属性 // 禁用按钮 $("button").attr("disabled", "disabled"); // HTML 方式 $("button").prop("disabled", true); // DOM 方式 ``` #### 4. **使用原则** 1. **布尔属性优先用 `prop()`** `checked`, `selected`, `disabled`, `readonly` 等属性: ```javascript // ✅ 正确做法 if ($(":radio").prop("checked")) { ... } // ❌ 避免 if ($(":radio").attr("checked") === "checked") { ... } ``` 2. **标准 HTML 属性用 `attr()`** `id`, `class`, `src`, `href`, `title` 等: ```javascript // 获取图片路径 const src = $("img").attr("src"); // 添加 CSS 类 $("div").attr("class", "active"); ``` 3. **自定义属性用 `attr()`** `data-*` 等自定义属性: ```javascript // 设置 data-id $("li").attr("data-id", 1001); ``` #### 5. **性能与兼容性** - **性能**:`prop()` 直接操作 DOM 属性,通常比 `attr()` 更快 - **兼容性**: - jQuery 1.5 及之前:只支持 `attr()` - jQuery 1.6+:推荐布尔属性用 `prop()` - **特殊对象**:`window` `document` 的属性操作必须用 `prop()`: ```javascript // 获取视口宽度 $(window).prop("innerWidth"); // 获取文档标题 $(document).prop("title"); ``` #### 6. **为什么需要区分?** HTML 属性与 DOM 属性可能不同步: ```html <input type="checkbox" checked> <!-- 初始状态 --> ``` ```javascript $("input")[0].checked = false; // 通过 JS 修改状态 // 此时: attr("checked") // 仍返回 "checked" (HTML未变) prop("checked") // 返回 false (DOM状态更新) ``` > 总结:**操作布尔属性(`checked`/`selected`/`disabled`)或需要实时状态时用 `prop()`;操作标准 HTML 属性或自定义属性时用 `attr()`**。这是 jQuery 官方推荐的最佳实践[^1][^2][^3][^4]。 --- ### 相关问题 1. 如何用 jQuery 正确获取复选框的选中状态? 2. `data()` 方法与 `attr("data-*")` 有什么区别? 3. 为什么修改 `disabled` 属性时推荐用 `prop()`? 4. 在动态生成的元素上,`attr()` `prop()` 哪个更可靠? 5. 如何用原生 JavaScript 实现类似 `prop()` 的功能?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值