Difference in jQuery attr () and the prop () of

Premise
in jQuery, we want to get the properties of a label element, you can use attr () method or prop () method, then both what difference does it?

jQuery attr () method and a prop () method
　　attr () method sets or returns the property value of the selected element.
　　prop () method sets or returns the property value and the selected element.
　　Note: By definition alone, then, the role of the two methods are the same. And usage is similar, as shown below.

A role: Returns the value of the attribute of the selected element. The syntax is as follows:

$(selector).attr(attribute)
$(selector).prop(property)

Effect of two: the properties and values ​​of the selected element. The syntax is as follows:

$(selector).attr(attribute,value)
$(selector).prop(property,value)

Action 3: setting a plurality of attributes and values. The syntax is as follows:

$ (Selector) .attr ({attribute: value, attribute: value ...}) // writing object key of 
$ (selector) .prop ({property : value, property: value, ...}) // writing object, key-value pairs

Action 4: Use functions properties and values. The syntax is as follows :( seldom used)

// The second parameter: function that returns a predetermined attribute value to set. 
/ * This function includes two parameters: 
* index - index location search elements in a set. 
* Oldvalue / currentvalue - retrieve the current property values of the selected element. 
* / 
$ (Selector) .attr (attribute, function (index, oldValue)) 
$ (Selector) .prop (Property, function (index, CurrentValue))

We will find:

　　Use two methods are exactly the same, but there are differences method name. One is attr, is a prop.
　　The spelling is attr attribute. The spelling is prop property. They are two different words, although the property has a meaning, but the meaning is not necessarily the same.

Property and attribute the difference

　　property n property, property, property;. property; ownership
　　attribute n property;. trait
　　shows that the two are very confusing, because the translation in Chinese are particularly close. But in fact, they are two different things, belong to different categories.

They get to the bottom of the Chinese meaning we attribute can be understood as "characteristic" and the property understood as "property."
Obviously, one property, one characteristic. Certainly not the same.

If you Baidu "Properties" keyword, you will find that English is directly attribute corresponding property. Baidu and detailed interpretation of the meaning of "property" is: refers to something inherent essential nature. .
Now, we know:

　　property attributes. It is innate, not acquired given. For example, some objects in the definition has a number of properties.
　　attribute characteristics. Does not have, acquired given. For example, after creating some objects, custom attributes given.

It is mapped to the js:

　　property is the property of the DOM, is the JavaScript object;
　　attribute is a characteristic (property) in the HTML tag, which can only be a string value;

It is mapped to the jQuery:

　　For the inherent properties of the HTML element itself with, or the W3C standard Lane with these attributes, more intuitive argument is that the editor which can be smart tips out of some properties, such as: src, href, value, class , name , id and so on. When processing using prop () method.
　　HTML DOM element attribute for our custom, that in itself is not an element of this attribute, such as: data- *. When processing using attr () method.

attr () method returns the value and the prop () method

• $(eleStr).attr()

<IMG the src = "/ smile.jpg" /> 
<Button> class attribute value of the image acquired </ Button> 
$ ( "Button"). the Click ( function () { 
    the console.log ($ ( "IMG"). attr ( "class")); // if the attribute exists, return the property value; if the attribute does not exist, undefined is returned 
    the console.log ($ ( "IMG") prop ( "class"));. // if the property exists , return the property value; if the attribute does not exist, null is returned ( "") 
});

• $(eleStr).prop()

 

<INPUT type = "CheckBox"> 
<Button> Get box selected </ Button> 
$ ( "Button"). the Click ( function () { 
    the console.log ($ ( "INPUT"). prop ( "the checked ")); // if the attribute value is present, return true; if the attribute value is not present, false is returned. 
    the console.log ($ (" INPUT the checked "))") attr (. "; // exists if the attribute value returns the checked; if the attribute value does not exist, the return undefined. 
  });

Conclusion

If you want to find out the root of the difference between the two, you can refer to the following blog post, the analysis of special place.

JS difference in attribute and property of