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

最新推荐文章于 2021-08-04 21:40:20 发布
原创 最新推荐文章于 2021-08-04 21:40:20 发布 · 388 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery

本文深入解析了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信息形成映射
jquery中attr、prop、data区别与用法分析
10-16
jQuery作为前端开发中非常重要的JavaScript库，其提供的attr、prop和data方法分别用于操作HTML元素的属性，理解它们的区别与用法对于前端开发人员来说非常重要。本文将结合实例详细分析这三个方法的差异、功能、使用...
jquery中attr和prop的区别分析
10-24
在jQuery中，`attr` 和 `prop` 是两个用于获取和设置HTML元素属性的方法，但它们之间存在着重要的差异。理解这两个方法的区别对于高效且准确地操作DOM至关重要。 首先，`attr` 方法主要用于处理HTML元素的自定义...
Jquery prop()、data()与attr()区别
J.Jian博客
02-26 534
目前在学些过程中遇到关于JQuery的几个基础知识，这里做记录相当于笔记加深自己的记忆与理解！JQuery的prop()、data()与attr()的区别1、JQuery版本的差异（1）prop()：此方法jquery1.6引入，读/写DOM的property。（2）data()：此方法在jquery1.2.3引入，作用是把任意的数据读取/存储到DOM元素对应的jquery对象上。（3）attr(...
jQuery attr() prop() data()用法及区别
didi8969的博客
06-23 171
jQuery attr() prop() data()用法及区别 .attr()，此方法从jq1.0开始一直存在，官方文档写的作用是读/写DOM的attribute值，其实1.6之前有时候是attribute，有时候又是property。.prop()，此方法jq1...
attr(),prop(),data()三者之间的差别
glsanguo的博客
07-06 330
1.attr()，prop()会直接操作dom节点的属性，通过审查元素可以直观的看到，data()则将属性保存在内存中，审查元素不能看到。 2.参数的书写格式。attr(),prop()需要写完整的属性名，不能修改；data()必须是属性名去掉data再以驼峰方式命名。 3.返回值。 attr(),返回String，prop()返回jQuery； data(),不传参数...
attr()，prop()，和data()的区别
爱学习的fatpig的博客
03-08 373
    在面试时遇到了attr()，prop()，和data()的区别这个问题，给胡说八道了一通，感觉很惭愧，特查找了相关资料，做了一些总结。1、使用方式不同对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。<a href="http://www.baidu.com" target="_self" cla...
jquery中prop，attr，data的区别
qq_38836082的博客
08-08 214
$(function(){ $('#div1').attr('name','one'); console.log($('#div1').attr('name'));//one $('#div1').prop('name','one'); console.log($('#div1').attr('name'));//one $('#div1').data('...
Jquery中attr与prop的区别详解
10-19
在jQuery中，`attr`和`prop`是两个用于获取和设置HTML元素属性的方法，但它们之间存在着重要的区别。在高版本的jQuery中，引入`prop`方法是为了更精确地处理元素的特性，特别是那些与JavaScript行为密切相关的属性。...
jQuery中attr()和prop()在修改checked属性时的区别
10-25
在jQuery中，`attr()`和`prop()`方法都是用来处理元素属性的，但它们之间存在重要的区别，尤其是在处理特定属性如`checked`时。`attr()`主要用于获取或设置HTML元素的attribute，而`prop()`则是用于操作元素的特性...
jquery 的 data 和 attr
weijia_kmy的博客
04-30 539
曾以为attr和data效果是一样的，只是attr需要多写一点代码量。后来在开发中发现他们并不相同。先写两个div体验一下: <div id="test1">test1</div> <div id="test2">test2</div> <script> // 赋值 $("#test1").a
jquery的prop()方法
xufeiayang的博客
12-02 1800
prop()函数用于设置或返回当前jQuery对象所匹配的元素的属性值。 该函数属于jQuery对象(实例)。如果需要删除DOM元素的属性，请使用removeProp()函数。 语法 jQuery 1.6 新增该函数。prop()函数有以下两种用法： 用法一： jQueryObject.prop( propertyName [, value ] ) 设置或返回指定属
jQuery手记 —— jQuery 中 .attr() .prop() .data() 的区别
qq_32614411的博客
07-24 189
未完待续
jquery的data、attr、expando
weixin_30800987的博客
04-03 216
今天无意中遇到 data和 attr的问题 场景是这样 需要给一个标签赋值，data-skin 同事用data赋值 $("#div").data("skin",2131); // 标签上并没有出现 data-href的属性 $("#div").attr("data-skin",2131); // 如果用attr就是 ok的 花了时间弄了下他们的区别 da...
jQuery的data(),prop(),attr()获取属性
qq_43574741的博客
08-04 197
定义参考 <a href="https://www.baidu.com" class="aaa" id="content" data-Age="18" myAge='99'>手握日月摘星辰</div> console.log("attr:"); console.log($('a').attr("href")); console.log($('a').attr("id")); console.log($('a').attr("myAge")); console.log($
jquery:prop()
golden_wheat
12-06 242
用jquery改变除了css以外的属性： jQuery prop() 方法 定义和用法 prop() 方法设置或返回被选元素的属性和值。 当该方法用于返回属性值时，则返回第一个匹配元素的值。 当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。 注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 tagName、nodeName、de
jquery：jquery.data与attr的区别
胡世林的博客
08-12 639
个人觉得，data方法试用的是在jq开辟出来的缓存上，而attr方法是作用在视图上，比如下面的代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bo
.attr(),.prop()和.data()的区别
simon_wong
12-14 1156
Jquery 中 .attr()  .prop() .data()的区别 .attr()和.prop()的区别        .attr()和.prop()都是用来设置或者获取指定函数的，参数和用法已几乎相同，用处却又很大的不同   1.     操作对象不同 a)      在原生JS中attrbute表示HTML文档节点属性，property表示JS对象的属性 b)      在j
jq:prop()、attr()、data()异同
stone10086的博客
10-31 445
attr()方法: 1、JS中getAttribute()和setAttribute()方法的集成体，用法最为常规，通过attr()方法获得的属性，在HTML页面检查元素中都可以看到该属性； 2、attr()的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)； 3、设置的属性值只能是字符串类型； 4、attr()返回的是字符串。prop()方法： 1、比
JQuery 中 prop() 的使用
qq_38836118的博客
01-08 875
查看attr() 和 prop() 的值 Check me $(document).ready(function(){ $("button").click(function(){ $("#p1").html("attr()："+ $("input").attr("checked")+""    + "prop() : " + $("input").prop("chec
jquery attr 和 prop方法的区别
最新发布
07-16
<think>我们正在讨论jQuery中attr()和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()`可以用于HTML和DOM属性，而`prop()`主要用于DOM属性。 - 引用[4]指出：在jQuery中，attribute和property是两个不同的概念。 因此，总结如下： - 当操作的是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、付费专栏及课程。

余额充值