JQuery. attr () vs.. Prop ()

Property vs. Attribute

Before we begin formally comparing the two jquery methods of Prop () and attr (), it is necessary to understand the meaning of the property and the attribute two words first. In Chinese, they are all the meanings of attributes, what is the difference? That's what I understand (I've seen some XAML-related explanations in the book "Understanding WPF", and I think this is also true):

Property - attribute, field, which is understood at the object-oriented level, when we abstract an object in reality with code, then its properties are represented by property. What we're going to look at here is a DOM element, such as the input checkbox, which is a check box in the real world, so JavaScript describes it with a lot of attributes, the ID represents its unique identity, the type represents its category, checked indicates its state, and so on. , we call these property.

Attribute- features, more I call it attributes. This is to stand at the level of compilation to understand it, we know that HTML is a markup language, what it means is that a tag will eventually be compiled into a DOM object by the compiler

<input type= "checkbox" id= "Chk1" class= "SampleClass" >

will be compiled into a DOM Element, and here's the type,id we call attribute, and you'll find that the attributename here and the PropertyName mentioned above have some names, yes, they're used to initialize some properties of the DOM object, Assuming that the object being compiled is Elem, then Elem.type is Checkbox,elem.id is chk1, all in my opinion, attribute is actually to the compiler to see. Attribute names are not necessarily related to the property one by one, such as attribute Class <–> property classname, which is not our concern, as long as the compiler knows the corresponding relationship in the line. Of course, the so-called characteristics, certainly can also define some unique properties, such as in the label I can customize some attribute

<input type= "checkbox" id= "Chk1" customizedattr= "my Attribute" >

After understanding the difference between the two words, in my opinion, in the ideal state, basically can be done with prop (), in addition to the need to get some custom attribute that would have to let attr () mountain. Manipulating DOM element Property and attribute

As a property of an object, by convention we can of course pass object. PropertyName Way to Get/set:

var Provalue = object. Propertyname;object. propertyname = Newprovalue;

Or

var pValue = object["PropertyName"];object["propertyname"] = newvalue;

The return value can be an Object type, returning undefined if the specified property name does not exist,

Similarly, Newprovalue can also be an Object.

As an attribute of an object, all the attributes that have been compiled by the compiler are stored under a property called attributes , and the type of this property is NamedNodeMap, as shown in.

JavaScript provides two methods for Set/get:

var attrValue = Object.getattribute ("AttributeName"); Object.setattribute ("AttributeName", Newattrvalue);

The return value and Newattrvalue are all just string types, returning null if the specified attribute name does not exist.

JQuery. attr ()

If you understand the difference between the property and the attribute and the attribute method of the native operation Dom element of JavaScript, then this. attr () is not difficult to understand, jquery is to wrap the native JavaScript method , which improves cross-browser compatibility and ease of use, using the method or reference. attr () API. Of course, personal advice, in the. Prop () can be done in places without. attr (), the situation that can be thought of at the moment:

• JQuery Version < 1.6

• Need to set/get custom attributes

JQuery. Prop ()

According to John Resig's blog, preference is preferred. Prop (), using the method reference. Prop () API, for the main reason two points:

• More reasonable and simpler

• Performance slightly better than. attr ()

Test

<div><input type= "checkbox" id= "Chk1" regval= "Test" datatt= "Datatest" myvalue= "Mytestvalue" ><label For= "Chk1" >MONDAY</LABEL></DIV> 

$ (document). Ready (function () {$ ("Input[type=checkbox]"). Click (function (index) {var Domelem = This;var $Elem = $ (this);  $ ("#resultContainer"). Append ("<pre>domelem[\" class\ "]" + domelem["class"]  + "</pre>"), $ ("#resultContainer"). Append ("<pre>domelem[\" classname\ "]"                                              + domelem["ClassName"] + "</pre>"), $ ("#resultContainer"). Append ("<pre>domelem.class                                          "+ Domelem.class +" </pre> "); $ (" #resultContainer "). Append (" <pre>domelem.classname "+ Domelem.classname +" </pre> "); $ (" #resultContainer "). Append (" <pre>domelem . getattribute (\ "Class\") "+ Domelem.getattribute (" class ") +" </pre> "); $ (" #resultContai Ner "). Append (" <pre>domelem.getattribute (\ "classname\") "+ Domelem.getattribute (" ClassName " ) + "</pre>"); $ ("#resultContainer "). Append (" <pre> $Elem. attr (\ "Class\") "+ $Elem. attr (" class ") +" &lt ;/pre> "); $ (" #resultContainer "). Append (" <pre> $Elem. attr (\ "classname\") "+ $Ele                                        M.attr ("className") + "</pre>"), $ ("#resultContainer"). Append ("<pre> $Elem. Prop (\" Class\ ") "+ $Elem. Prop (" class ") +" </pre> "), $ (" #resultContainer "). Append (" <pre> $Elem. Prop (\ "Classnam E\ ")" + $Elem. Prop ("ClassName") + "</pre>"), $ ("#resultContainer"). Append ("<pr e>*********************************************************************************************************                                           </pre> "), $ (" #resultContainer "). Append (" <pre>domelem[\ "myvalue\"]                                              "+ domelem[" myvalue "] +" </pre> "); $ (" #resultContainer "). Append (" <pre>domelem.myvalue "+ domelem.myValue + "</pre>"); $ ("#resultContainer"). Append ("<pre>domelem.getattribute (\" Myvalue\ ") "+ Domelem.getattribute (" myvalue ") +" </pre> "), $ (" #resultContainer "). Append (" <pre> $Elem. attr (\ " Myvalue\ ")" + $Elem. attr ("myvalue") + "</pre>"); $ ("#resultContainer"). Append ("<pre> $Elem. Prop (\" myvalue\ ")" + $Elem. Prop ("myvalue") + "</pre>"); $ ( "#resultContainer"). Append ("<pre>*********************************************************************** </pre> "), $ (" #resultContainer "). Append (" <pre>domelem[\ ") Checked\ "]" + domelem["checked"] + "</pre>"); $ ("#resultContainer"). Append ("<pre>domelem.checked" + domelem.checked + "</pre>"); $ ("#result Container "). Append (" <pre>domelem.getattribute (\ "checked\")" + Domelem.getattribute ("checked") + "</pre>"), $ ("#resultContainer"). Append ("<pr E> $Elem. attr (\ "checked\") "+ $Elem. attr (" checked ") +" </pre> "); $ (" #result Container "). Append (" <pre> $Elem. Prop (\ "checked\") "+ $Elem. Prop (" checked ") + "</pre>"); $ ("#resultContainer"). Append ("<pre>***************************************************** </pre> ") var Inputelem = $ (" input[type=text] ") [0];                                           var $inputElem = $ (Inputelem); $ ("#resultContainer"). Append ("<pre>inputelem[\" value\ "]                                              "+ inputelem[" value "] +" </pre> "); $ (" #resultContainer "). Append (" <pre>inputelem.value "+ Inputelem.value +" </pre> "); $ (" #resultContainer "). Append (" <pre>inputelem.                       GetAttribute (\ "Value\")       "+ Inputelem.getattribute (" value ") +" </pre> "), $ (" #resultContainer "). Append (" <pre> $inputElem. attr (\ "V Alue\ ")" + $inputElem. attr ("value") + "</pre>"); $ ("#resultContainer"). Append ("<pre> $inputElem. Prop (\" value\ ")" + $inputElem. Prop ("value") + "</pre&gt ;");});});

Results:

Summary

The. attr () and. Prop () Two jquery methods are actually Elem.getattribute ()/elemsetasttribute () and elem for JavaScript native methods. propertyname|elem["PropertyName") packaging to support better compatibility and ease of use. For how to choose, in the version of JQuery 1.6+, manipulate the properties of the DOM element with prop (), manipulate the attribute with attr (), if the attributes and attributes overlap, take precedence over prop (), for example: Id,type,classname, etc. for those dynamic properties, Use Prop (), for example: The Checked property of the input checkbox, the selected property of the input select, the Value property of input text (this is also recommended by the. Val () method); For those custom attributes, Use attr ().

Reference

• http://ejohn.org/blog/jquery-16-and-attr/

• Http://www.cnblogs.com/dolphinX/p/3348582.html

• Http://wenzhixin.net.cn/2013/05/24/jquery_attr_prop

• http://www.jianshu.com/p/880815b62726

• Http://www.cnblogs.com/zhangxiaolei521/p/5150976.html

• Http://stackoverflow.com/questions/5874652/prop-vs-attr

JQuery. attr () vs.. Prop ()