Introduction to jQuery's method for obtaining attr () and prop () attribute values, jqueryattr

Introduction to jQuery's method for obtaining attr () and prop () attribute values, jqueryattr

When you use the <select> </select> drop-down menu in the project today, use the juery operation to set the default value of 2 after the page is loaded. The first operation is as follows:

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

I am optimistic about perfection, but I found that Safari does not work at all !! Check carefully and find that in Safari, the property is indeed set successfully, the value = 2 is indeed <option value = "2" selected = "selected"> 2 </option>. What is the problem? Cool, don't do it. The omnipotent stack says that you only need to change attr to prop. It's a strange thing to do. Well, we need to study it. You don't have to think about it. It must be an official document.

1. attr ():Obtain the attribute value of the first element in the matched element set or set one or more attributes of each matching element. •. Attr (attributeName) •. attr (attributeName)

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

2. prop ():Obtain the property value of the first element in the matching element set or set one or more attributes of each matching element. •. Prop (propertyName) •. prop (propertyName)

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

Are there any differences? Yes, there are differences between parameters. attr () is passed in attributeName, and prop () is passed in propertyName. Now our problem has shifted, we need to study the difference between attributeName and propertyName.

Attributes vs. Properties

Here, we can regard attribute as "feature" and property as "attribute" to distinguish the differences between the two.
If the DOM element is treated as a common Object, this Object has some properties when it is defined. For example, the select option is treated as an Object:

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

Now, we can see at a glance that attribute is a feature node. Each DOM element has a corresponding attributes attribute to store all attribute nodes. It is a class array container. Each digital index of attributes stores an attribute node in the form of a name-value Pair (name = "value. Property is an attribute that is stored in the Object as a name-value Pair (name = "value.

Back to the problem at the beginning, according to W3C form specification, the selected property is a Boolean attribute, which means that if this attribute exists, even if this feature does not have a corresponding value, is set to a null string value, or even "false", the corresponding property is still true. The selected attribute value does not change because of the status of the check box, and the selected attribute (property) changes because of the status of the check box. Therefore, use the. prop () method to retrieve and change DOM attributes compatible with different browsers, such as the checked, selected, or disabled status of an element.

Differences between attr and prop in jquery

When should I use prop after the prop method is introduced in the advanced version of jquery? When to use attr? What is the difference between them? These problems occur.

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

• Use the prop method for processing inherent attributes of HTML elements.

• The attr method is used for processing custom DOM attributes of HTML elements.

The above description may be a bit vague. Let's take a few examples.

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

In this example, the DOM attributes of <a> elements include "href, target, and class". These attributes are the attributes that <a> elements themselves carry, these attributes are included in W3C standards, or attributes that can be intelligently displayed in IDE. These attributes are inherent attributes. When processing these attributes, we recommend that you use the prop method.

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

In this example, the DOM attributes of <a> elements include "href, id, and action". Obviously, the first two attributes are inherent, the next "action" attribute is customized by ourselves. <a> the element itself does not have this attribute. This is the custom DOM attribute. We recommend that you use the attr method when processing these attributes. When the prop method is used to set values and attribute values, the undefined value is returned.

Another example:

<Input id = "chk1" type = "checkbox"/> visible <input id = "chk2" type = "checkbox" checked = "checked"/> visible

Elements such as checkbox, radio, and select correspond to "checked" and "selected". These are also inherent attributes. Therefore, you must use the prop method to obtain the correct results.

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

If the attr method is used above, the following error occurs:

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