jQuery Obtaining attr of and prop of Attribute Value Method and Difference Introduction

Use in your project today < select > < /select > When pulling down the menu, use juery operation, so that the default value selected by the menu after loading the page is 2. I started the operation as follows:

<!--html Part -->
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
/**js Part **/
$("select").attr("selected","selected"); 

Zha 1 is optimistic about perfection and wood problems, but I found that in Safari browser, it doesn't work at all! ! After careful examination, it is found that in Safari browser, the attribute is indeed set successfully, that is, the one item with value=2 is indeed < option value="2" selected="selected" > 2 < /option > . So what's the problem? Calm down, don't be square. The omnipotent stack said that it is only necessary to change attr into prop. It is really good to lie in the trough. What a strange event is this? Well, we need to study it. Don't think about it, it must be necessary to sacrifice official documents.

1. attr (): Gets the value of the attribute of the first element in the set of matched elements or sets one or more attributes for every one matched element. attr (attributeName) attr (attributeName)

•.attr( attributeName, value ) •.attr( attributeName, value )
•.attr( attributes )
•.attr( attributeName, function(index, attr) )

2. prop (): Gets the attribute (property) value of the first element in the matching element set or sets one or more attributes for each matching element. prop (propertyName) prop (propertyName)

•.prop( propertyName, value ) •.prop( propertyName, value )
•.prop( properties )
•.prop( propertyName, function(index, oldPropertyValue) )

Do you see the difference? Yes, the parameters are different. attr () passes in attributeName, while prop () passes in propertyName. Now our problem has shifted. What we need to study is the difference between attributeName and propertyName.

Attributes vs. Properties

Here, we can understand attribute as "characteristic" and property as "attribute" to distinguish the difference between them.
If you think of an DOM element as an ordinary Object object, this object has a number of attributes (property) when it is defined, such as option of select as an object:

var option = {
selected:false , 
disabled:false , 
attributes:[],
...
} 

Now, we see that attribute is a feature node, and each DOM element has a corresponding attributes attribute to hold all attribute nodes, which is a container for a class array. Each numeric index of attributes holds an attribute node as a name-value pair (name= "value"), whereas property is an attribute that is stored in Object as a name-value pair (name= "value").

Returning to the problem starting with 1, according to the form specification of W3C, the selected attribute (property) is a Boolean attribute, which means that if this attribute (attribute) exists, the corresponding attribute (property) is still true even if it has no corresponding value, is set to an empty string value, or is even "false". The selected attribute (attribute) value does not change due to the state of the check box, while the selected attribute (property) changes due to the state of the check box. Therefore, for cross-browser compatible retrieval and change of DOM attributes, such as the checked, selected, or disabled state of an element, use the. prop () method.

Introduction of the difference between attr and prop in jquery

When should I use prop after the introduction of the prop method in the higher version of jquery? When to use attr? What's the difference between them? These problems arise.

There are many answers on the Internet about the differences between them. Here is my experience. My experience is very simple:

For the inherent attributes of HTML elements, the prop method is used when processing them.

For the HTML element, we use the attr method when processing the DOM attribute.

The above description may be a little vague, just give a few examples.

<a href="http://www.baidu.com" target="_self" class="btn"> Baidu </a> 

In this example < a > The DOM attributes of the element are "href, target, and class." These attributes are < a > The attributes of elements themselves, which are also included in W3C standard, or the attributes that can be intelligently prompted in IDE, are called inherent attributes. When dealing with these properties, the prop method is recommended.

<a href="#" id="link1" action="delete"> Delete </a> 

In this example < a > The DOM attributes of elements are "href, id and action". Obviously, the first two attributes are inherent attributes, while the last one "action" attribute is customized by ourselves. < a > The element itself does not have this attribute. This is the custom DOM attribute. When dealing with these properties, the attr method is recommended. The undefined value is returned when you use the prop method to take and set a property value.

Give another example:

<input id="chk1" type="checkbox" /> Visible or not <input id="chk2" type="checkbox" checked="checked" /> Visible or not 

For elements like checkbox, radio, and select, the selected attributes correspond to "checked" and "selected", which are also inherent attributes, so you need to use prop method to get correct results.

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

If the attr method is used above, the following appears:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"