attr()和prop()的区别

最新推荐文章于 2025-04-09 09:41:33 发布
最新推荐文章于 2025-04-09 09:41:33 发布
阅读量294 收藏
点赞数
分类专栏： 前端 JavaScript
本文介绍如何使用jQuery的.prop()方法来检索和更改DOM元素的状态属性，例如checked、selected或disabled等，并对比了与.attr()方法的区别。

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

精华：

To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method. 

根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()


本文来源：http://blog.youkuaiyun.com/qq_27093465/article/details/50350216


做个记录怕忘了。。。。

attr 与prop 的区别
linjun的博客
05-04 443
特别是当涉及到布尔属性（如 checked、disabled）时，因为它更准确、更可靠。是两个常用的方法，用于操作 HTML 元素的属性和属性值。则更适合于处理自定义属性或 HTML5 中的新属性。它们之间的区别主要在于针对不同类型的属性操作。在大多数情况下，应该优先使用。
JS中attr和prop属性的区别以及优先选择示例介绍
12-08
在JavaScript的jQuery库中，`attr`和`prop`都是用于获取或设置元素属性的方法，但它们之间存在一些重要的区别。这些方法的使用场景不同，理解它们的差异对于编写高效且正确的JavaScript代码至关重要。 首先，`attr`...
JS中attr和prop区别
热门推荐
csdnluolei
01-09 1万+
一、attr和prop区别 attr 是从页面搜索获得元素值，所以页面必须明确定义元素才能获取值，相对来说较慢。  prop是从属性对象中取值，属性对象中有多少属性，就能获取多少值，不需要在页面中显示定义。  二、attr和prop怎么选择？ 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr...
attr和prop区别
peijiajing的博客
09-10 170
像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。 <input id="chke1" type="checkbox" />记住密码 <input id="chke2" type="checkbox" checked="checked" />记住...
prop和attr异同
m0_67418845的博客
04-09 293
prop()可以动态获取标签的状态，attr()不能动态获取标签的状态（例：input未设置checked时，不论input是否被选中，attr()获取checked属性，均是返回undefined，若设置均返回checked；prop()和attr()给dom设置属性时，如果有多个可匹配的dom，全部都被设置上属性；prop()获取未设置的固有属性，返回空值，attr()获取未设置的属性，返回undefined。prop()和attr()取dom时，如果有多个可匹配的dom，只取第一个。
prop和attr的区别
wxqwxq123444的博客
06-09 3172
prop和attr的选择
attr 和 prop 的区别介绍：
lidou1882751的博客
02-10 209
暂无
jquery中attr和prop区别
前端队长Daotin
12-18 293
相同点： 都是jq中的自定义属性的方法。 区别： prop：attr 方法针对单选框和复选框的是否选中问题操作复杂 （ 元素.attr(“checked”) 选中返回值为 checked，未选中返回值为 undefined，不是直接显示 true 或者 false 那么简单） 示例： 元素.prop("checked"); // 获取这个元素是否选中 （可以直接显示true或false），更...
jquery中关于attr和prop的区别！
Java&Develop的博客
06-13 5786
昨天这两个方法搞混了,被公司大佬说了下，虽然没说什么，但还是挺尴尬的。重点是大佬说你可以用attr方法，我特么第一句话就是怎么用呢。原谅我使用vue之后太依赖框架的东西了，以至于以前jquery玩的也挺溜的我，慢慢淡忘了 jquery。罪过罪过呢！jquery还是一款很优秀的函数库，哎 不说了 继续码代码了。 $().attr() 允许我们往元素上加上自定义属性 我们也可以用attr 获取提前定义好的在上面的 自定义属性值 当然 也可以获取到 元素 自带的一些属性 那么 attr 是获取和设置 属性的
jquery attr和prop区别
wangjun5159的专栏
08-11 896
问题再现使用jquery选中checkbox时，只有鼠标点击后，才起作用，之后就不起作用，$(“#mycheckbox”).attr(“checked”,true) 后来搜到很多说明，说是jquery版本的缘故，要用prop，这个理由很笼统，我还是没懂attr和prop之间的区别。看了很多帖子后，总结出以下原因。代码<div id="mydiv" class="myclass" customatt
JS中attr 和 prop 的区别
weixin_49199038的博客
11-06 4956
attr : 设置或返回被选元素的属性值. prop : 获取在匹配的元素集中的第一个元素的属性值。 attr 和 prop 的本质 attr 是 attribute 的缩写,prop 是 property 的缩写，都有属性的意思，只不过 attr 是操作 html 文档节点属性，prop 是操作 js 对象属性. attr 在 js 中使用的是 setAttribute 和 getAttribute 而 prop 直接使用原生 js 的 element[value] 和 element[value]=ke
jquery中attr和prop的区别分析
10-24
总结来说，`attr` 和 `prop` 的主要区别在于： 1. `attr` 用于处理自定义属性和非固有属性，而`prop` 用于处理固有属性。 2. 固有属性（如`checked`、`selected`）使用`prop`可以获取或设置正确的布尔值，而`attr`则...
jquery中attr、prop、data区别与用法分析
10-16
jQuery作为前端开发中非常重要的JavaScript库，其提供的attr、prop和data方法分别用于操作HTML元素的属性，理解它们的区别与用法对于前端开发人员来说非常重要。本文将结合实例详细分析这三个方法的差异、功能、使用...
软件需求工程大作业(python spider)
08-08
资源下载链接为： https://pan.quark.cn/s/de4c4975d458 软件需求工程大作业(python spider)（最新、最全版本！打开链接下载即可用！）
VMD算法参数优化技巧：手动调整惩罚因子与包络熵的关系及其应用
08-08
内容概要：本文详细探讨了VMD（变分模态分解）算法中参数优化的具体方法，特别是惩罚因子α和模态数K的调整。文中通过实际案例展示了如何利用Python代码手动调整这两个关键参数，并通过计算包络熵评估优化效果。作者还分享了一些实用的经验法则和技术，如网格搜索、半自动策略以及肉眼验证等，帮助读者更好地理解和掌握VMD参数优化的实际操作。 适合人群：从事信号处理、机械故障诊断等相关领域的工程师和技术人员，尤其是那些需要对复杂信号进行有效分解和分析的专业人士。 使用场景及目标：适用于需要对振动信号或其他复杂信号进行精确分解的应用场合，旨在提高模态分解的质量，确保每个模态分量尽可能纯净，从而为后续的数据分析和故障诊断提供可靠的基础。 阅读建议：读者可以通过本文提供的具体实例和代码片段，结合自己的实际应用场景，尝试不同的参数配置，逐步积累经验和直觉，最终达到熟练掌握VMD参数优化的目的。同时，注意参数之间的相互影响，避免过度追求数学指标而忽视物理意义。
电力电子领域15KW充电模块电路设计解析及其功能应用
08-08
内容概要：本文深入探讨了15KW充电模块的电路设计及其功能应用。首先，文章详细介绍了充电模块的主电路构成，包括从交流电到直流电的转换过程，涉及整流、滤波电路，以及利用IGBT进行功率调节的关键步骤。接着，阐述了多种保护机制如过流、过压、欠压保护的具体实现方法，确保充电模块的安全性和稳定性。此外，还解释了充电模块的性能参数，如输出功率、电压范围、效率等，并讨论了模块间的通信方式（如CAN通信）和散热设计，强调了这些因素对于模块正常运作的重要性。 适合人群：从事电力电子、新能源汽车充电设施设计与维护的技术人员，以及对充电模块感兴趣的电子工程爱好者。 使用场景及目标：帮助技术人员更好地理解和优化充电模块的设计，提高其工作效率和产品质量；同时激发电子工程爱好者的兴趣，促进他们对该领域的进一步探索。 其他说明：文章不仅提供了详细的理论分析和技术细节，还结合实际应用场景进行了生动形象的比喻和解释，使复杂的电路概念变得通俗易懂。
基于SpringBoot+Vue的社区便民服务平台设计与实现【附万字论文+PPT+包部署+录制讲解视频】.zip
08-08
标题基于SpringBoot+Vue的社区便民服务平台研究AI更换标题第1章引言介绍社区便民服务平台的研究背景、意义，以及基于SpringBoot+Vue技术的研究现状和创新点。1.1研究背景与意义分析社区便民服务的重要性，以及SpringBoot+Vue技术在平台建设中的优势。1.2国内外研究现状概述国内外在社区便民服务平台方面的发展现状。1.3研究方法与创新点阐述本文采用的研究方法和在SpringBoot+Vue技术应用上的创新之处。第2章相关理论介绍SpringBoot和Vue的相关理论基础，以及它们在社区便民服务平台中的应用。2.1SpringBoot技术概述解释SpringBoot的基本概念、特点及其在便民服务平台中的应用价值。2.2Vue技术概述阐述Vue的核心思想、技术特性及其在前端界面开发中的优势。2.3SpringBoot与Vue的整合应用探讨SpringBoot与Vue如何有效整合，以提升社区便民服务平台的性能。第3章平台需求分析与设计分析社区便民服务平台的需求，并基于SpringBoot+Vue技术进行平台设计。3.1需求分析明确平台需满足的功能需求和性能需求。3.2架构设计设计平台的整体架构，包括前后端分离、模块化设计等思想。3.3数据库设计根据平台需求设计合理的数据库结构，包括数据表、字段等。第4章平台实现与关键技术详细阐述基于SpringBoot+Vue的社区便民服务平台的实现过程及关键技术。4.1后端服务实现使用SpringBoot实现后端服务，包括用户管理、服务管理等核心功能。4.2前端界面实现采用Vue技术实现前端界面，提供友好的用户交互体验。4.3前后端交互技术探讨前后端数据交互的方式，如RESTful API、WebSocket等。第5章平台测试与优化对实现的社区便民服务平台进行全面测试，并针对问题进行优化。5.1测试环境与工具介绍测试
示波器FPGA设计方案：高性能、高可靠性的详细设计文档与代码资源
08-08
内容概要：本文介绍了示波器FPGA设计方案及其详细设计文档和代码资源。首先阐述了FPGA在现代电子技术中的重要性和应用背景，特别是在高性能模拟电路和嵌入式系统领域的广泛应用。接着明确了设计目标，即开发一款高性能、高可靠性、低成本的示波器FPGA芯片，并从模块化设计角度出发，详细解释了各个功能模块（如时钟管理、逻辑处理、存储器等）的设计原理和技术细节。最后提供了丰富的设计文档和代码资源，涵盖原理图、布局布线图、模块设计文档以及优化报告等，为开发者提供了宝贵的参考资料。 适用人群：从事FPGA设计、嵌入式系统开发的技术人员，尤其是对示波器FPGA设计感兴趣的工程师。 使用场景及目标：①用于理解和掌握示波器FPGA的设计方法和技术要点；②作为实际项目开发中的参考资料，帮助提升设计质量和开发效率。 其他说明：文中强调了FPGA设计资料的稀缺性，并呼吁更多人关注这一领域的发展，分享更多的设计经验和资源。
MySQL安装与配置.ppt
最新发布
08-08
数据库mysql安装教程，详细安装过程。学习安装从0开始
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、付费专栏及课程。

余额充值