ATTR () and prop () in jquery ()

You should be familiar with the ATTR () method. However, in jquery1.6 and later versions, a new method prop () is introduced, which has similar functions, this creates a lot of confusion.

In English, attribute and property are generally translated as "attributes". It is difficult to understand them by splitting them into two concepts. Here, for the sake of differentiation, I will translate attribute into "attribute" and property into "feature" (you may think it is more appropriate to turn over and don't bother with this problem. Of course, if you have a better translation method, please add ).

1. Why should I introduce the prop () method?

Jquery author john resig has a detailed explanation of this issue in his blog. To put it simply, there are two reasons:

1) For more convenient access to Dom features (properties ). For example, for versions earlier than 1.6, you may need to do this:

 
VaRELEM = $ ("# foo") [0];If(ELEM) {Index=ELEM. selectedindex ;}
 

The same is true for accessing other features such as nodename and defaultvalue. However, the prop () method is simple:

 
Index = $ ("# foo"). Prop ("selectedindex ");
 

2) because the ATTR () method must call the prop () method during implementation, it is faster to directly use prop.

2. What is the difference between properties and attributes?

Most of the attributes of a DOM object have their corresponding attributes, and their names are basically the same (there are also exceptions, such as the property name corresponding to the attribute "class "), these properties are also in the same state or value as their corresponding attribute. However, some Boolean attributes (such as checked, selected, and disabled) are special. attribute only retains the initial value (default value), and property is the latest status or value. For example, if a checkbox is selected by default, when you remove it from the page, the property of checked has changed from true to false, while the attribute of checked still maintains the initial value of "checked. It can be seen that attribute and property are not the same thing at all, but the "General" ATTR method seems to blur the difference to some extent.

3. What is the difference between ATTR () and prop?

When prop is used, the returned value is a standard attribute, true/false, for example, $ ('# checkbox '). prop ('Disabled '), does not return "disabled" or "", only true/false. Of course, this is also true when assigning values.Use ATTR. If Disabled = 'Disabled ', the value is true. If no value is selected, the value is undefined.In this way, all operations are unified, both in terms of syntax and semantics.

The. Prop () method should be used to process Boolean attributes/properties and properties that do not exist in HTML (such as window. Location. All other attributes can and should continue to use the. ATTR () method for operations.

For specific examples, refer to the official API documentation. 

4. What attributes should I use the prop () method?

To put it simplyOnly adding attribute names without adding attribute values takes effect, or the prop () method is required if only true/false attributes exist. For example:Selectedindex,Tagname,Nodename,Nodetype,Ownerdocument,Defaultchecked, AndDefaultselected. The official distinction is as follows:

 

Attribute/Property	. ATTR ()	. Prop ()
Accesskey	Bytes
Align	Bytes
Async	Bytes	Bytes
Autofocus	Bytes	Bytes
Checked	Bytes	Bytes
Class	Bytes
Contenteditable	Bytes
Draggable	Bytes
Href	Bytes
ID	Bytes
Label	Bytes
Location (I. e. Window. Location)	Bytes	Bytes
Multiple	Bytes	Bytes
Readonly	Bytes	Bytes
REL	Bytes
Selected	Bytes	Bytes
SRC	Bytes
Tabindex	Bytes
Title	Bytes
Type	Bytes
Width (if needed over. Width ())	Bytes

5. Examples.

For example, consider<Input type = "checkbox" Checked = "checked"/>And assume it is named by a javascript variable.ELEM:

ELEM. Checked	true (Boolean) changes the status of the check box
$ (ELEM). Prop ("checked")	true (Boolean) changes the status of the check box
ELEM. getattribute ("checked")	"checked" (string) does not change the initial status of the check box.
$ (ELEM). ATTR ("checked") (1.6)	"checked" (string) does not change the initial status of the check box.
$ (ELEM). ATTR ("checked") (1.6.1 +)	"checked" (string) changes the status of the check box
$ (ELEM). ATTR ("checked") (pre-1.6)	true (Boolean) changes the status of the check box

According to W3C form specificationsCheckedAttribute isBoolean attributeThis means that as long as this attribute exists, even if it has no value or an empty string, the property corresponding to this attribute isTrue. We recommend that you use a browser-compatible method to determine whether the checked attribute of the checkbox element is "true:

• If (ELEM. Checked)
• If ($ (ELEM). Prop ("checked "))
• If ($ (ELEM). Is (": checked "))

If you use jquery 1.6,CodeIf ($ (ELEM). ATTR ("checked ")), You will getAttribute)It does not change whether the check box is selected or selected. It is only used to store the initial values of default or selected attributes. To maintain backward compatibility,. ATTR ()The method starts from jquery 1.6.1 + and will update the property attribute in addition to the returned property value. Therefore, the Boolean attribute does not need to pass. Prop ()To change its value. We recommend that you use one of the above methods to obtain the checked value.