jquery Gets the attr () and prop () attribute values of the method and the difference introduction _jquery

Today, when using the <select></select> pull-down menu in a project, use the Juery action to make the page load the menu defaults to the selected value of 2, my first operation is as follows:

<!--HTML section-->
<select>
<option value= "1" >1</option>
<option value= "2" > 2</option>
<option value= "3" >3</option>
</select>
/**js part **/

I am optimistic about the perfect, wood problem, but I found in the Safari browser, does not work!! A closer look at the discovery that in the Safari browser, the property is indeed set to succeed, and the value=2 is indeed the <option value= "2" selected= "selected" >2</option>. So what's the problem? Calm, not square, omnipotent Stack said as long as the attr changed into prop on the line, the groove is also good, this is what weird event. Well, we need to study it, and don't think, it's definitely going to be an official document.

1.attr (): Gets the value of the property of the first element in the matching element collection or sets one or more properties for each matching element. .attr (AttributeName) .attr (AttributeName)

.attr (AttributeName, value) .attr (AttributeName, value)
.attr (attributes)
.attr (AttributeName, function (index, attr))

2.prop (): Gets the property value of the first element in the matching set of elements or sets one or more properties for each matching element. .prop (PropertyName) .prop (PropertyName)

.prop (propertyname, value) .prop (propertyname, value)
.prop (properties)
.prop (PropertyName, function (index, oldpropertyvalue))

See the difference, yes, is the parameters of the difference, attr () passed in the AttributeName, and prop () passed PropertyName, now our problem shifted, What we need to study is the difference between AttributeName and PropertyName.

Attributes vs. Properties

Here, we can interpret attribute as "attribute", and property is understood as "attribute" to distinguish the difference between two people.
If you think of a DOM element as a normal object object, the object has some properties when it is defined, such as Select option as an object:

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

Now, we are at a glance, attribute is an attribute node, each DOM element has a corresponding attributes attribute to hold all attribute nodes, it is a container of class array. Each numeric index of the attributes stores an attribute node in the form of a name value pair (name= "value"). The property is an attribute, a property that is stored in object in the form of a name-value pair (name= "value").

Back to the beginning of the problem, according to the form specification of the selected, the property is a Boolean property, which means that if the attribute exists, even if the attribute has no corresponding value, or is set to an empty string value, or even "false", The corresponding property is still true. The selected attribute value is not changed because of the state of the check box, and the selected property is changed because of the state of the check box. Therefore, you use the. Prop () method to retrieve and change the DOM properties, such as the checked, selected, or disabled state of the element, across browsers.

Introduction to the difference between attr and prop in jquery

When should the prop be used when the Prop method is introduced into the high version of jquery? When do you use attr? What's the difference between two of them? These problems have arisen.

There are a lot of answers on the web about their two differences. Here to talk about my experience, my experience is very simple:

• For the intrinsic properties of the HTML element itself, use the prop method when dealing with it.

• For HTML elements of our own custom DOM properties, when processing, use the Attr method.

The above description may be a little vague, just for a few examples to know.

In this example, the DOM attribute of the <a> element has "href, target, and class", which are attributes of the <a> element itself, and attributes that are included in the standards of the consortium, or that can be intelligently prompted in the IDE, These are called intrinsic attributes. It is recommended that you use the Prop method when handling these properties.

In this example, the DOM attribute of the <a> element has "href, id, and action", and it is obvious that the first two are intrinsic attributes, and that the next "action" attribute is our own custom,<a> element itself does not have this attribute. This is a custom DOM property. It is recommended that you use the Attr method when handling these properties. When you use the Prop method to take values and set property values, the undefined value is returned.

Let me cite one more example:

<input id= "Chk1" type= "checkbox"/> is visible <input id= "chk2" type= "checkbox" checked= "Checked"/>

Elements, such as Checkbox,radio and select, select Attributes that correspond to "checked" and "selected", which are also intrinsic properties, and therefore need to be manipulated using the prop method to get the correct results.

$ ("#chk1"). Prop ("checked") = = False
$ ("#chk2"). Prop ("checked") = = True

If the attr method is used above, it will appear:

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