jquery中prop()方法和attr()方法的区别

最新推荐文章于 2022-03-12 14:57:54 发布

转载最新推荐文章于 2022-03-12 14:57:54 发布 · 1.3k 阅读

文章标签：

#js #jquery checked #prop attr

java 专栏收录该内容

20 篇文章

订阅专栏

本文详细阐述了jQuery中attr与prop方法的区别及应用场景。attr用于操作HTML属性，而prop用于处理DOM元素的状态属性，如checked、disabled等。通过示例说明了如何正确选择使用这两个方法。

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

jquery1.6中新加了一个方法prop()，一直没用过它，官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值。

官方例举的例子感觉和attr()差不多，也不知道有什么区别，既然有了prop()这个新方法，不可能没用吧，那什么时候该用attr()，什么时候该用prop()呢？

大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = "disabled"，checked="checked"，比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。

jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。

那么，什么时候使用attr()，什么时候使用prop()？
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
项目中jquery升级的时候大家要注意这点！

以下是官方建议attr(),prop()的使用：

jQuery attr与prop的区别

sshong 发表于2013年9月23日 11:03:11 更新于2013年9月23日 12:16:01

一直很疑惑prop与attr的区别，今天特意研究了以下，备查如下。

jQuery文档里有一段很精辟的描述：

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. 
Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. 
The .prop() method should be used to set disabled and checked instead of the .attr() method. 
The .val() method should be used for getting and setting value.

prop是指动态改变一个DOM元素的状态而不改变HTML的源码，如input元素的value、disabled、checked等，通过prop来改变disabled、checked的值，用val来改变value值。

通过attr改的属性会反应到html源码里，而prop不会。如：

$('input[name="reports_mode"]').prop('testProp', 'prop');
$('input[name="reports_mode"]').attr('testAttr', 'attr');                        alert($('input[name="reports_mode"]').prop('testProp') + $('input[name="reports_mode"]').attr('testAttr'));

F12查看一下，会发现testAttr已经加到html源码里，而prop则不会，但是prop确实能取到这个属性，是不是有点$.data的赶脚，但是只能设置string、number、bool值。
attr

Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. 
The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. 
The checked attribute value does not change with the state of the checkbox, while the checked property does. 
Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:
if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )
The same is true for other dynamic attributes, such as selected and value.

换句话讲，用attr改checked实际上改的不是checkbox的状态，而是更改了defaultChecked的属性值，即仅仅是设置了初始值，而prop改checked则会更改checkbox的状态。

看jQuery源码：
attr用的是element的setAttribute、getAttribute方法，prop用的是element.***。

总之，获取、更改checked、disabled、selected用prop（不要removeProp这几个内置的属性），获取、更改value用val，其他的用attr。