Difference between attr () and prop () in Jquery, jqueryattr

Difference between attr () and prop () in Jquery, jqueryattr

In jQuery, both the attr () and prop () functions are used to set or obtain specified attributes. Their Parameters and usage are almost identical. However, these two functions have different functions. The differences between the two functions are described in detail below.

1. Different operation objects

Attr is the abbreviation of attribute, and prop is the abbreviation of property. All of them indicate the meaning of "attribute. However, attribute and property are two different concepts in Jquery. Attribute indicates the attributes of HTML document nodes, and property indicates the attributes of JS objects.
Let's take an example to distinguish between the attributes of HTML document nodes and those of JS objects:


 

 

2. Different Application versions

Attr () is a function available in JQuery 1.0, and prop () is a newly added function in JQuery 1.6. That is to say, before JQuery 1.6, you can only use the attr () function. After JQuery 1.6, you can select a function based on your needs.

Before JQuery 1.6, the attr () function not only sets and obtains attribute, but also sets and obtains property. Before version 1.6, attr () can set and obtain the property of DOM elements such as tagName, className, nodeName, and nodeType. Later, the prop function is available in version 1.6 and can be used to obtain and set the property. The attr () function is only used to set and obtain the attribute.
However, starting from 1.6, the return value of these attributes obtained using attr () is of the String type. If it is selected (or disabled), the return value is checked, selected, or disabled, otherwise (the element node does not have this attribute), undefined is returned. In some versions, these attribute values indicate the Initial State values when the document is loaded. Even if these elements are selected (or disabled), the corresponding attribute values will not change.

Because jQuery considers that the checked, selected, and disabled of attribute are the values that indicate the initial status of the attribute, property checked, selected, or disabled indicates the value of the real-time state of the property (the value is true or false ).

Therefore, in jQuery 1.6 and later versions, use the prop () function to set or obtain attributes such as checked, selected, and disabled. Use the prop () function whenever possible for other operations that can be implemented using prop.

3. Set different attribute values.

Because the attr () function operates on the attributes of the document node, the attribute value can only be a string type. If it is not a string type, the toString () method is also called, convert it to the string type.
The prop () function operates on the attributes of JS objects. Therefore, the set attribute values can be of any type including arrays and objects.

Summary:
For inherent attributes of HTML elements, such as id and name, use the prop () function.
Use the attr () function to customize DOM attributes of HTML elements.
The returned value is a property of true/false. We recommend that you use prop ()
The following is an example:
"Div1" class = "class1">

In the example
The DOM attributes of an element include "id and class". These attributes are
For attributes that come with the W3C standard, we can refer to some attributes that are inherent. When processing these attributes, we use the prop () function.
"Div1" class = "class1" data_id = "1">

In this example, the inherent attribute is "id, class", and then a "data_id" attribute is customized,
The element itself does not have this attribute, which is a custom DOM attribute. When processing this attribute, the attr () function is used. If the prop () function is used to obtain or set the value, undefinded is returned.

Let's look at an example of returning true and false for a property value:
"Chk1" type = "checkbox"/>
"Chk2" type = "checkbox" checked = "checked"/>

The three elements checkbox, radio, and select correspond to "checked, checked, and selected". These are also inherent attributes, so we try to use the prop () function to process them. After version 1.6, the value obtained by attr () is a string. Therefore, you can use attr () to obtain the attribute whose return value is true or false. The return value is undefinded.

Result returned by using the prop () function:
Console. log ($ ("# chk1"). prop ("checked"); // false
Console. log ($ ("# chk2"). prop ("checked"); // true

Result returned by using the attr () function:

Console. log ($ ("# chk1"). attr ("checked"); // undefined
Console. log ($ ("# chk2"). attr ("checked"); // checked

The original version of Shanghai shangxuexiang java. You are welcome to read more articles about java Technology in Shanghai shangxuexiang. For more information, see the source. For more information or support, add Wei java8733