jquery attr和prop区别

最新推荐文章于 2022-06-13 09:48:50 发布
最新推荐文章于 2022-06-13 09:48:50 发布
阅读量901 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wangjun5159/article/details/52180996
本文探讨了在jQuery中attr与prop的区别，包括它们各自的适用场景及如何正确使用这两个方法来操作DOM元素的属性和状态。

问题再现

使用jquery选中checkbox时，只有鼠标点击后，才起作用，之后就不起作用，$(“#mycheckbox”).attr(“checked”,true)
后来搜到很多说明，说是jquery版本的缘故，要用prop，这个理由很笼统，我还是没懂attr和prop之间的区别。看了很多帖子后，总结出以下原因。

代码

<div id="mydiv" class="myclass" customattr="mycustomattr">div内容</div>

<script type="text/javascript">
var tempvar = document.getElementById("mydiv");
console.log(tempvar);
</script>

attr和prop不同

表达意义不同

attr是attribute缩写，对应html网页中的属性。

如div中的id、class、customattr就是attribute，反应到js的变量就是attributes属性
这里写图片描述

prop是property的缩写，对应js对象的属性。

accesskey、align、attributes、dir、className等都是property
这里写图片描述

共享数据互相影响；独立数据互不影响

attr和prop既有共享数据，也有独立数据，操作独立数据时，互不影响；操作共享数据时，会有影响。
共享数据：比如，id、class在attribute中存在，也在property存在，不过class在property中叫className
独立数据：customattr只属于attribute，不属于property，即使property定义了一个customattr，两者也不互相影响
这里写图片描述

jquery 1.6之前用attr；之后分开使用；

attr和prop使用版本不同，jquery1.6之前只有attr，jquery1.6之后才有prop。
attr的源代码是，obj.setAttribute(attrname,attrvalue),参数值都是string，直接反映到html dom上
prop的源码是, obj[property]=value，参数值可以使object，修改的内存值

boolean类型属性使用prop

对于selected、checked、disabled等boolean类型属性，使用prop。自jquery1.6后，attr只用于获取boolean类型属性的初始值，并且不受当前值影响。
这里写图片描述

总结

  • 内建的共同属性，用attr、prop都可以，他们会互相影响。比如，id、class、name
  • boolean类型的属性用prop，attr用来获取初始值
  • 独立的属性，使用各自的方法；attr创建的属性就用attr，prop创建的属性就用prop
attr 与prop 的区别
linjun的博客
05-04 459
特别是当涉及到布尔属性（如 checked、disabled）时，因为它更准确、更可靠。是两个常用的方法，用于操作 HTML 元素的属性和属性值。则更适合于处理自定义属性或 HTML5 中的新属性。它们之间的区别主要在于针对不同类型的属性操作。在大多数情况下，应该优先使用。
attr()和prop()的区别
qq_42988963的博客
09-11 813
1、在jQuery中attr()和prop()两种方法都可以获取和操作元素的节点属性和属性。attr操作元素的节点属性，prop操作元素的属性，但是两者在使用时也存在差别。 2、attr()方法操作节点属性，attr()可以传入字符串也可以传入对象。 - 传入一个字符串参数时表示获取元素对应的属性，例如：("div").attr("class");表示获取("div").attr("clas...
jQuery的attr与prop
weixin_33877092的博客
10-01 177
jQuery1.6中新添加了一个prop方法，看起来和用起来都和attr方法一样，这两个方法有什么区别呢？这要从HTMl 的attribute与property区别说起，attr与prop正是这两个东西的缩写。 attribute与property attribute和property都可以翻译为属性，为了以示区别，通常把这两个单词翻译为属性与特性。 &lt;div id="test"&...
JS中attr 和 prop 的区别
weixin_49199038的博客
11-06 4977
attr : 设置或返回被选元素的属性值. prop : 获取在匹配的元素集中的第一个元素的属性值。 attr 和 prop 的本质 attr 是 attribute 的缩写,prop 是 property 的缩写，都有属性的意思，只不过 attr 是操作 html 文档节点属性，prop 是操作 js 对象属性. attr 在 js 中使用的是 setAttribute 和 getAttribute 而 prop 直接使用原生 js 的 element[value] 和 element[value]=ke
JS中attr和prop区别
热门推荐
csdnluolei
01-09 1万+
一、attr和prop区别 attr 是从页面搜索获得元素值，所以页面必须明确定义元素才能获取值，相对来说较慢。  prop是从属性对象中取值，属性对象中有多少属性，就能获取多少值，不需要在页面中显示定义。  二、attr和prop怎么选择？ 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr...
js中attr和prop的区别
张不帅
09-09 424
HTML元素本身带有的固有属性，处理时用prop方法，快速，准确 自定义的DOM属性，处理时使用attr方法
jquery中attr和prop的区别分析
10-24
在jQuery中，`attr` 和 `prop` 是两个用于获取和设置HTML元素属性的方法，但它们之间存在着重要的差异。理解这两个方法的区别对于高效且准确地操作DOM至关重要。 首先，`attr` 方法主要用于处理HTML元素的自定义...
jquery中prop()方法和attr()方法的区别浅析
10-26
在jQuery中，`attr()`和`prop()`方法都是用来处理元素的属性（attributes）和特性（properties），但它们之间存在一些关键的区别。了解这些差异对于编写高效、无误的JavaScript代码至关重要。 首先，属性...
Jquery中attr与prop的区别详解
10-19
在jQuery中，`attr`和`prop`是两个用于获取和设置HTML元素属性的方法，但它们之间存在着重要的区别。在高版本的jQuery中，引入`prop`方法是为了更精确地处理元素的特性，特别是那些与JavaScript行为密切相关的属性。...
jquery中attr、prop、data区别与用法分析
10-16
jQuery作为前端开发中非常重要的JavaScript库，其提供的attr、prop和data方法分别用于操作HTML元素的属性，理解它们的区别与用法对于前端开发人员来说非常重要。本文将结合实例详细分析这三个方法的差异、功能、使用...
jquery中关于attr和prop的区别！
Java&Develop的博客
06-13 5842
昨天这两个方法搞混了,被公司大佬说了下，虽然没说什么，但还是挺尴尬的。重点是大佬说你可以用attr方法，我特么第一句话就是怎么用呢。原谅我使用vue之后太依赖框架的东西了，以至于以前jquery玩的也挺溜的我，慢慢淡忘了 jquery。罪过罪过呢！jquery还是一款很优秀的函数库，哎 不说了 继续码代码了。 $().attr() 允许我们往元素上加上自定义属性 我们也可以用attr 获取提前定义好的在上面的 自定义属性值 当然 也可以获取到 元素 自带的一些属性 那么 attr 是获取和设置 属性的
attr 和 prop 的区别
丨小毛子的博客
07-05 616
关于attr() 和 prop() 的区别 在我们用jQuery来写代码的项目中，会经常用到要给元素设置属性的时候，而通常我们也是用attr()和prop()方法;但是attr()和prop()是有区别。 1、对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。 prop()函数的结果: 1.如果有相应的属性，返回指定属性值。 2.如果没有相应的属性，返回值是空字符串。 例如： <a href="https://www.runoob.com" target="_self" cla
prop和attr的区别
wxqwxq123444的博客
06-09 3179
prop和attr的选择
attr与prop区别
aaaa7410的博客
11-04 442
在jQuery中，attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。 但不得不说的是，这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。 1、操作对象不同 很明显，attr和prop分别是单词attribute和property的缩写，并且它们均表示"属性"的意思。 不过，在jQuery中，attribute和prop...
说说jQuery中attr() 和 prop() 方法的区别
qq_37555524的博客
09-20 227
一直都在用 jQuery 1.8.3的版本，没有尝试过 jQuery 1.9.0 的版本。 于是，开始调试代码，在 1.9.0 的版本中： <input type="checkbox" /> <...
jquery中attr和prop的区别
吴彦祖山东分组
05-31 620
jquery中prop和attr的区别 prop : prop只能对html标签本身的属性可以进行获取值或者赋值 // prop eg: <input type="text" id="note" name="myname" age=20 /> <script> $('#note').prop('name'); // 成功输出：myname $('#not...
Attr和Prop的区别
qq_45044074的博客
04-12 205
通用属性操作Attr //自定义属性所有属性都可以添加到标签上，自定义的也可以 //$('div').attr('name')//只获取调用的第一个元素上面的属性 //$('div').attr({name:'rbq',age:'18'})//添加属性 特性 Prop 使用Prop自定义的不能添加到标签上但是在dom对象上 已存在的可以设置在标签上 但不能删除 删除...
jQuery中attr和prop区别
weixin_39499845的博客
04-28 573
一、attr和prop区别 attr 是从页面搜索获得元素值，所以页面必须明确定义元素才能获取值，相对来说较慢。 prop是从属性对象中取值，属性对象中有多少属性，就能获取多少值，不需要在页面中显示定义。 二、attr和prop怎么选择？ 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 三、例...
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、付费专栏及课程。

余额充值