jQuery学习之prop和attr的区别

最新推荐文章于 2022-11-16 17:30:00 发布
最新推荐文章于 2022-11-16 17:30:00 发布
阅读量152 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： jQuery javaScript 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/JACKASDFGHJKL/article/details/84455781
本文详细解释了jQuery 1.6版本中.attr()与.prop()方法的区别，包括它们在处理attributes与properties时的不同行为，特别是对于boolean属性如checked和selected的特殊处理。同时，提供了使用.prop()方法替代.attr()方法的实例，以确保代码在不同版本的jQuery中兼容并正常工作。

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

.prop()
 
1、.prop( propertyName )
获取匹配集合中第一个元素的Property的值
2、
.prop( propertyName, value )
.prop( map )
.prop( propertyName, function(index, oldPropertyValue) )
给匹配元素集合设定一个或多个属性
 
.prop()和 .attr()区别
 
下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述，以及.attr()方法和.prop()方法的首选使用
 
Attributes模块的变化是移除了attributes和properties之间模棱两可的东西，但是在jQuery社区中引起了一些混乱，因为在1.6之前的所有版本中都使用一个方法(.attr())来处理attributes和properties。但是老的.attr()方法有一些bug，很难维护。jQuery1.6.1对Attributes模块进行了更新，并且修复了几个bug。
 
elem.checked true (Boolean) Will change with checkbox state
$(elem).prop("checked") true (Boolean) Will change with checkbox state
elem.getAttribute("checked") "checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6) "checked" (String) Initial state of the checkbox; does not change
$(elem).attr("checked")(1.6.1+) "checked" (String) Will change with checkbox state
$(elem).attr("checked")(pre-1.6) true (Boolean) Changed with checkbox state
 
if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )
 
这三个都是返回Boolean值。
 
 
为了让jQuery1.6中的.attr()方法的变化被理解的清楚些，下面是一些使用.attr()的例子，虽然在jQuery之前的版本中能正常工作，但是现在必须使用.prop（）方法代替：
 
jQuery学习之prop和attr的区别
 

首先，window或document中使用.attr()方法在jQuery1.6中不能正常运行，因为window和document中不能有 attributes。它们包含properties(比如：location或readyState)，必须使用.prop()方法操作或简单地使用 javascript原生的方法。在jQuery1.6.1中，window和document中使用.attr()将被自动转成使用.prop，而不是 抛出一个错误。

其次，checked,selected和前面提到的其它boolean attributes，因为这些attributes和其相应的properties之间的特殊关系而被特殊对待。基本上，一个attribute就是以下html中你看到的：

<input type=”checkbox” checked=”checked”>  

 

boolean attributes，比如：checked，仅被设置成默认值或初始值。在一个checkbox的元素中，checked attributes在页面加载的时候就被设置，而不管checkbox元素是否被选中。

 

properties就是浏览器用来记录当前值的东西。正常情况下，properties反映它们相应的attributes(如果存在的话)。但这并不是boolean attriubutes的情况。当用户点击一个checkbox元素或选中一个select元素的一个option时，boolean properties保持最新。但相应的boolean attributes是不一样的，正如上面所述，它们仅被浏览器用来保存初始值。

 

 

$(“:checkbox”).get(0).checked = true;  

// Is the same as $(":checkbox:first").prop(“checked”, true);  

在jQuery1.6中，如果使用下面的方法设置checked：

$(“:checkbox”).attr(“checked”, true); 

将不会检查checkbox元素，因为它是需要被设置的property，但是你所有的设置都是初始值。

 

然而，曾经jQuery1.6被释放出来的时候，jQuery团队明白当浏览器仅关心页面加载时，设置一些值不是特别的有用。所以，为了保持向后兼容性 和.attr()方法的有用性，我们可以继续在jQuery1.6.1中使用.attr()方法取得和设置这些boolean attributes。

 

最普通的attributes是checked,selected,disabled和readOnly，但下面是jQuery1.6.1支持的使用.attr()动态地取得和设置boolean attributes/properties的完整列表：

 

autofocus, autoplay, async, checked, controls, defer, disabled,  

hidden, loop, multiple, open, readonly, required, scoped, selected 

 

 

还是建议使用.prop()方法来设置这些boolean attributes/properties，即使这些用例没有转换成使用.prop()方法，但是你的代码仍然可以在jQuery1.6.1中正常运行。

 

下面是一些attributes和properties的列表，正常情况下，应该使用其对应的方法(见下面的列表)来取得和设置它们。下面的是首用法，但是.attr()方法可以运行在所有的attributes情况下。

 

注意：一些DOM元素的properties也被列在下面，但是仅运行在新的.prop()方法中

 

jQuery学习之prop和attr的区别

*例如: window.location

**如果需要在(if needed over) .width()

 

.attr()和.prop()都不应该被用来取值/设值。使用.val()方法代替(即使使用.attr("value","somevalue") 可以继续运行，就像1.6之前做的那样)

 

3、首选用法的概述

 

.prop()方法应该被用来处理boolean attributes/properties以及在html(比如：window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且应该继续使用.attr()方法来进行操作。

 

上面的概述已经描述的够清楚了，我也没有必要再总结了。

参考文献：
attr 与prop 的区别
linjun的博客
05-04 443
特别是当涉及到布尔属性（如 checked、disabled）时，因为它更准确、更可靠。是两个常用的方法，用于操作 HTML 元素的属性和属性值。则更适合于处理自定义属性或 HTML5 中的新属性。它们之间的区别主要在于针对不同类型的属性操作。在大多数情况下，应该优先使用。
$('#checkbox').attr('checked'); 返回的是checked或者是undefined解决办法
qq_37171379的博客
04-11 2897
<input type='checkbox' id='cb'/> <script> //获取是否选中 var isChecked = $('#cb').attr('checked'); //设置选中 $('#cb').attr('checked',true); </script> 这样写在Jquery1.6之前完全没问题，可是当我们升级1.6到更...
jquery1.6中的.prop()和.attr()异同
别人在走，我在跑
05-17 904
最近在iteye的新闻中看到jQuery已经更新到了1.6.1。和之前版本的最大变化是增加了.prop方法。但是.prop()方法和.attr()方法，单从字面上很难区分。在汉语中properties和attributes都有表示“属性”的意思。下面根据这篇博文（javascript:mctmp(0);），简要翻译了.prop()和.attr()的用法： 1、从1.5.2升级到1.6.1 通过...
表单的checkbox选中和取消
weixin_34413357的博客
07-19 214
在网上看了不少的教程关于checkbox的，按照上面的做了，但是没有成功，于是自己下午找了一点时间来做这些方面的工作，要让复选框被选中其实很简单，就是给该元素加上checked属性，那么元素自然就会被选择上。要取消的话其实就是remove去他的这个熟悉。检测代码如下： <!DOCTYPE html><html><head><meta charset="u...
input checkbox勾选怎么点击去掉勾
Thekingyu的博客
11-23 3019
去不掉！！！！！！！！！ 于是换了个方法 就是重新替换一个 $(".xzen").delegate(".finishs","click",function(){ //$('.finishs').click(function(){ var logi=$(this).parent().prev().children().is(':checked') var fins=$(this).is(':
jQuery 实现选中和取消选中checkbox(复选框)的2种方法（attr()，prop()）
旭东怪的博客
10-17 3154
html代码： <input type='checkbox' id='checkbox1' /> 1 attr() 1.1 选中复选框 $("#checkbox1").attr("checked","checked"); $("#checkbox1").attr("checked",true); $("input[type=checkbox]").attr("checked","checked"); 1.2 取消选中复选框 $("#checkbox1").removeAttr(
jQuery学习之prop和attr的区别示例介绍
10-26
但是，为了适应jQuery 1.6中对`.attr()`和`.prop()`方法的更新，一些在之前版本中通过`.attr()`方法设置的属性需要改用`.prop()`方法来处理，特别是在处理布尔值属性时。 例如，在jQuery 1.6中，使用`.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 checkbox选中问题之prop与attr注意点分析
10-21
本文将重点分析在火狐（Firefox）浏览器下，使用jQuery的prop和attr方法来设置checkbox选中状态的不同表现和解决方法。 首先，需要了解的是，在jQuery中，attr方法是用来获取或设置HTML属性的值，而prop方法则是...
checkbox 全部选中，和取消全选
u013018357的博客
10-14 792
<input type="checkbox" class="select"/>全选 <input type="checkbox" class="checkbox" /> 羽毛球 <input type="checkbox" class="checkbox"/> 乒乓球 js代码 $(".select").change(function(){ if($(this).is(
两种设置disabled属性以及三种方法移除disabled属性
weixin_30810583的博客
03-31 3571
//两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("disabled","disabled"); //三种方法移除disabled属性 $('#areaSelect').attr("disabled",false); $('#areaSelect').removeAttr("disab...
微信小程序--checkbox-group样式修改，去掉勾选框 && 微信小程序radio的样式修改
heavenz19的博客
02-23 3058
微信小程序–checkbox-group样式修改，去掉勾选框 <checkbox-group bindchange="checkChange"> <view class="serviceSel"> <label wx:for="{{medHis}}" wx:key="{{medHis}}" class="checkbox {{item.checked?'is_checked':''}}"> <checkbox value="{{i
HTML checkbox 点击文字即 选择取消 勾选状态
玩味Orz
11-01 5087
web开发中，由于checkbox比较小用户操作起来不是很方便，为了方便用户对checkbox操作 我们可以让用户点击说明文字时即可实现 选择/勾选 checkbox 下面使用一种简单的方法实现 代码实现如下： 点击我即可选择/取消勾选状态 label:          说明文字标签必须为 label           for 指定需要联动checkbox的id
.prop（）与.attr（）
asdfgh0077的博客
12-30 773
因此， jQuery 1.6具有新的功能prop() 。 $(selector).click(function(){ //instead of: this.getAttribut
jquery如何让checkbox如何取消勾选
weixin_34247032的博客
12-11 3122
1、取消勾选 $("checkbox").attr("checked", false);2、勾选 $("checkbox").attr("checked", true); 转载于:https://www.cnblogs.com/YuyuanNo1/p/10103587.html
checkBox 选中 移除
热门推荐
caox_nazi的博客
10-16 1万+
checkBox 选中 移除 （1）使用原生JavaScript判断是否选中checkbox框  （js） &lt;input type="checkbox" id="test" class="test"&gt;同意 &lt;script&gt; // 获取checkbox元素 var box=document.getElementById("test");
通过变量值来判断操控radio选中状态；jquery的prop()方法
Leader_yuxi的博客
11-16 510
通过变量值来判断操控radio选中状态;jquery的prop()方法
使用attr()方法获取不到checkbox的checked属性解决方案
QINGZHID的博客
04-19 1361
使用attr()方法获取不到checkbox的checked属性解决方案   今天遇到一个全选/取消全选的功能，使用Jquery的attr()方法获取checked时发现一直undefined，而且选中/取消后再获取也是undefined。   然后上网找了一下相关资料，发现Jquery.attr()方法，记录的是元素的初始化属性（则在代码设置了默认值如：<input type="checkbox" checked>），后续这个checkbox的属性值更新后，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、付费专栏及课程。

余额充值