jQuery中attr()和prop()的区别与使用

淩亂°似流年 2022-02-26 10:48 251阅读 0赞

## API ##

*  [`attr()`系列][attr]
    
     *  `attr(attributeName)` 读取第一个匹配到的元素的指定属性值。
     *  `attr(attributeName, value)` 设置单个指定的属性值。
     *  `attr(attributes)` 设置多个。
     *  `attr(attributeName, func)` func为`function(index, thisAttr)`。
 *  [`prop()`系列][prop]
    
     *  `prop(propertyName)`
     *  `prop(propertyName, value)`
     *  `prop(properties)`
     *  `prop(propertyName, func)` func为`function(index, thisProp)`。

API较为简单，主要是区分使用。  
[boolean attribute及其规范取值][boolean attribute]  
[Attribute和Property的区别][Attribute_Property]

## 使用 ##

可用的三个方法(读取属性的`boolean`值)：

e.checked
    $(e).is(":checked")
    $(e).prop("checked")

不可用的方法`$(e).attr("checked")`，与复选框状态无关，只与`checked`是否在HTML标签中出现有关。  
若不出现(无论复选框状态是否选中)，返回`undefined`。  
若`checked`在HTML开始标签中出现(无论复选框是否选中)，返回`checked`。  
(只要`checked`在开始标签中出现，值为何已经不重要了)。

## HTML & test ##

<!doctype html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<title>attr prop test</title>
    	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    	<script>
    		$(showMsg);
    		function showMsg() {
    			$("input").change(function () {
    				var inputTest = $(this);
    				$("p").html(`
    					this.checked    = <b> ${this.checked} </b> <br>
    					is(":checked")  = <b> ${inputTest.is(":checked")} </b> <br>
    					prop("checked") = <b> ${inputTest.prop("checked")} </b><br>
    					attr("checked") = <b> ${inputTest.attr("checked")} </b><br>
    					`);
    			}).change();
    		}
    	</script>
    	<style>
    		b {color: red}
    	</style>
    </head>
    <body style="text-align:center">
    	<input id="checkTest" type="checkbox" checked="checked">
    	
    	
    	<label for="checkTest">test</label>
    
    	
    
    	<p></p>
    </body>
    </html>

测试结果：  
`<input>`标签中出现`checked`属性(无论字符串值为何)：  
![在这里插入图片描述][20190329161708793.png]  
![在这里插入图片描述][20190329161732957.png]  
删除`<input>`元素的`checked`属性：  
![在这里插入图片描述][20190329161811969.png]  
![在这里插入图片描述][20190329161827182.png]

## `attr()`和`prop()`的区别 ##

`Note: Attribute values are strings with the exception of a few attributes such as value and tabindex.`  
注意：`attribute`的值是字符串(有些例外，如`value`和`tabindex`)。

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. 
    To retrieve and change DOM properties such as the checked, selected, or disabled 
    state of form elements, use the .prop() method.

从jQuery1.6开始，对那些一开始没有设置值的`attribute`，使用`attr()`方法会返回`undefined`。  
为了查询和改变`DOM properties`(如`checked, selected, disabled`等表单元素)的状态，应该使用`prop()`方法。

`Attributes vs. 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.

在特定情况下`attribute`和`property`的不同之处会很重要。  
在jQuery1.6之前，当用`attr()`查询一些`attrbute`时，也会查到一些`property`的值，这可能导致行为不一致。  
从jQuery1.6开始，`prop()`提供显式的、用于专门查询`property`值的方法。而`attr()`查询`attribute`。

For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected 
    should 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.

比如 `selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, defaultSelected`等应该用`prop()`方法检索和修改。  
在jQuery1.6之前，这些`properties`也可以使用`attr()`方法检索，不过这些并不在`attribute`范围内。  
这些都没有相应的`attribute`，他们只是`properties`。  
**感觉：`attribute`可以有多种多样类型|格式的值，而`property`只是一种“是否”的属性值，boolean类型**

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 e:

关于`boolean propertie`，考虑用HTML定义好的一个DOM元素：  
`<input type="checkbox" checked="checked">`,假定其JS变量名为`e`。

`e.checked` \- `true` (布尔值)将随复选框状态而变化  
`$(e).prop("checked")` \- `true` (布尔值)将随复选框状态而变化  
`e.getAttribute("checked")` \- `checked` (字符串)复选框的初始状态，不会改变。  
`$(e).attr("checked") (1.6)` \- `checked` (字符串)复选框的初始状态，不会改变。  
`$(e).attr("checked") (1.61+)` \- `checked` (字符串)将随复选框状态而变化。  
`$(e).attr("checked") (pre-1.6)` \- `true` (布尔值)已更改为复选框状态。

**为保险，用`prop()`访问值为`boolean`类型的`property`**

According to the W3C forms specification, the checked attribute is a boolean attribute, 
    which means the corresponding property is true if the attribute is present at all—even if, 
    for example, the attribute has no value or is set to empty string value or even "false". 
    This is true of all boolean attributes.

根据W3C规范，该`checked attribute`是一个`boolean attribute`，  
这意味着只要设置了这个`attribute`，他的`property`值就是`true`，即使设置的值为`"false"`或空串`""`。  
所有`boolean attribute`都是如此。

**只要显式的设置了`boolean attribute`的值，其`properrty`值就为`true`。设置了就是`true`。**

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.

不过，关于`checked attribute`需要记住的最重要的一点是：他并不对应`checked properrty`。  
实际上，`checked attribute`对应的是`defaultChecked property`**(即默认|初始的选中状态)**。  
并且`checkced attribute`只应该用于设置复选框的初始值。  
复选框的状态改变，**并不会**改变`checked attribute`，而`checked property`会改变。  
因此，**检查复选框是否选中**的跨浏览器兼容的正确方法是使用以下的`properrty`：

if (e.checkced)
    if ($(e).prop("checked"))
    if ($(e).is(":checked"))

其他的`dynamic attribute`也是如此，比如说`selected`和`value`。

Additional Notes:
    In Internet Explorer prior to version 9, using .prop() to set a DOM element property 
    to anything other than a simple primitive value (number, string, or boolean) can cause memory leaks 
    if the property is not removed (using .removeProp()) before the DOM element is removed from the document. 
    To safely set values on DOM objects without memory leaks, use .data().

补充说明：  
在IE9之前的版本中，如果还没有使用`removeProp()`移除`property`，  
就用`prop()`去设置一个DOM元素的值为非简单原始值(`number, string, bolean`)的类型，会导致内存泄漏。  
为了安全地设置DOM对象而不导致内存泄漏，推荐使用`data()`。

## 附：官方文档 ##

The .attr() method gets the attribute value for only the first element in the matched set.
    To get the value for each element individually, use a looping construct such as jQuery's .each() or .map() method.
    
    Using jQuery's .attr() method to get the value of an element's attribute has two main benefits:
    
    Convenience: It can be called directly on a jQuery object and chained to other jQuery methods.
    Cross-browser consistency: The values of some attributes are reported inconsistently across browsers, 
    and even across versions of a single browser.
    The .attr() method reduces such inconsistencies.
    Note: Attribute values are strings with the exception of a few attributes such as value and tabindex.
    
    As of jQuery 1.6
    the .attr() method returns undefined for attributes that have not been set.
    To retrieve and change DOM properties such as the checked
    selected, or disabled state of form elements, use the .prop() method.
    
    Attributes vs.
    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 defaultSelected should 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
    
    According to the W3C forms specification, the checked attribute is a boolean attribute, 
    which means the corresponding property is true if the attribute is present at all—even if, 
    for example, the attribute has no value or is set to empty string value or even "false".
    This is true of all boolean attributes.
    
    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.
    
    Additional Notes:
    In Internet Explorer prior to version 9, using .prop() to set a DOM element property to anything other 
    than a simple primitive value (number, string, or boolean) can cause memory leaks 
    if the property is not removed (using .removeProp()) before the DOM element is removed from the document.
    To safely set values on DOM objects without memory leaks, use .data().

[attr]: https://api.jquery.com/attr/
[prop]: https://api.jquery.com/prop/
[boolean attribute]: https://blog.csdn.net/wuyujin1997/article/details/88891143/
[Attribute_Property]: https://blog.csdn.net/wuyujin1997/article/details/88894394/
[20190329161708793.png]: /images/20220226/751c969f1b9c4a5e85a16243900c6c3d.png
[20190329161732957.png]: /images/20220226/f26a1b8cfdbe46b1912d591c0a2a530a.png
[20190329161811969.png]: /images/20220226/8412fc0219614cccb78f06b29192fb64.png
[20190329161827182.png]: /images/20220226/8d0798a73b83424d91c0aa120a625908.png