jquery的attr和prop区别

attr和prop在jquery官网上的介绍几乎是一模一样的：

.attr()

Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

.prop()

Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.

区别在于在jquery中attribute和property是两个不同的概念。

 

官方文档Attributes和Properties区别

The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr()method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr()retrieves attributes.

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelectedshould be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

Concerning boolean attributes, consider a DOM element defined by the HTML markup <input type="checkbox" checked="checked" />, and assume it is in a JavaScript variable named elem:

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

 

取值：

prop是符合w3c规范的，对于boolean属性，不管属性值是什么，只要属性存在，则prop必然返回true，哪怕属性值存的是false或空字符串。

attr是不符合w3c规范的，就是将元素原本的属性值取出，对于任何属性都是如此（jquery1.6.1以上版本才行）。

 

设值：

attr在用于设置checked="checked"时，有可能会出现，元素的属性加上去了，但选中的勾选效果没出来，prop则不存在这种情况。

所以在设置有关联页面效果的属性时，一定要使用prop，不要使用attr。

 

attr设置checked不显示效果的原因

checked的attribute和checked的property无关，checked的property对应的是defaultChecked，控制元素显示状态的是defaultChecked，所以只有设置checked的property才能改变显示状态。

 

官方文档解释：

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()，此方法从jquery1.0开始一直存在，官方文档写的作用是读/写dom的attribute值，其实1.6之前有时候是attribute，有时候又是property。现在一般用来设置不影响dom的自定义属性，属性值只能为json字符串或字符串。
.prop()，此方法jquery1.6引入，读/写DOM的property。现在一般用来，设置影响dom的原生属性，属性值为dom规定允许的值。
.data()，此方法在jquery1.2.3引入，作用是把任意的值（包括函数、json对象）读取/存储到dom元素对应的jquery对象上（dom元素上是看不到的）。