Differences between attr and prop in jquery (very complete)

There are a lot of answers on the internet about their two differences.

For the intrinsic properties of the HTML element itself, the prop method is used when processing.

For our own custom DOM attributes for HTML elements, the attr method is used when processing.

Compared to the Attr,prop is 1.6.1 new, both from the Chinese meaning of understanding, are to get/set properties of the method (attributes and properties). Only the. attr () method used in window or document does not work well before jQuery1.6 because attributes is not available in window and document. Prop was born.

Before looking at the online comparison between the two articles, but also lists a table to distinguish what labels under the use of prop, what labels under the use of attr, forgive me is lazy people, the most afraid to back things, so only their own to think of ways.

Since we want to know the difference between them, it is best to look at their source code, not to be frightened by the length of the code, we only look at the key words:

attr Method Code (jquery version 1.8.3)

The code is as follows

Copy Code

Attr:function (elem, name, value, pass) { var ret, hooks, notxml, Ntype = Elem.nodetype; Don ' t get/set attributes on text, comment and attribute nodes if (!elem | | ntype = = 3 | | ntype = 8 | | ntype = = 2) { Return } if (pass && jquery.isfunction (jquery.fn[name)) { Return JQuery (Elem) [name] (value); } Fallback to prop when attributes are not supported if (typeof Elem.getattribute = = "undefined") { Return Jquery.prop (elem, name, value); } Notxml = ntype!== 1 | | !jquery.isxmldoc (Elem); All attributes are lowercase Grab necessary Hook if one is defined if (notxml) { Name = Name.tolowercase (); Hooks = jquery.attrhooks[Name] | | (Rboolean.test (name) boolhook:nodehook); } if (value!== undefined) { if (value = = null) { Jquery.removeattr (elem, name); Return else if (hooks && "set" in hooks && notxml && (ret = Hooks.set (elem, value, name))!== Undefi Ned) { return ret; } else { Elem.setattribute (name, Value + ""); return value; } else if (hooks && ' get ' in hooks && notxml && (ret = Hooks.get (elem, name))!== null) { return ret; } else { ret = Elem.getattribute (name); Non-existent attributes return NULL, we normalize to undefined return ret = = null? Undefined: Ret } }

Prop Method Code (jquery version 1.8.3)

The code is as follows

Copy Code

Prop:function (elem, name, value) { var ret, hooks, notxml, Ntype = Elem.nodetype; Don ' t get/set properties on text, comment and attribute nodes if (!elem | | ntype = = 3 | | ntype = 8 | | ntype = = 2) { Return } Notxml = ntype!== 1 | | !jquery.isxmldoc (Elem); if (notxml) { Fix name and attach hooks Name = jquery.propfix[Name] | | Name Hooks = jquery.prophooks[name]; } if (value!== undefined) { if (hooks && "set" in hooks && (ret = Hooks.set (elem, value, name))!== undefined) { return ret; } else { Return (elem[name] = value); } } else { if (hooks && ' get ' in hooks && (ret = Hooks.get (elem, name))!== null) { return ret; } else { return elem[name]; } } }

In the Attr method, the two most critical lines of code, Elem.setattribute (name, Value + ""), and ret = Elem.getattribute (name), are clearly seen, using the DOM API The property element node of the SetAttribute and GetAttribute method operations.
And in the prop method, the two most critical lines of code, return (elem[name] = value) and return elem[name], you can understand that document.getElementById (EL) [Name] = value, which is a property that translates into a JS object.

just give me a few examples to know .

The code is as follows	Copy Code
<a href= "http://www.111cn.net" target= "_self" class= "BTN" > Baidu </a>

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.

The code is as follows	Copy Code
<a href= "#" id= "Link1" action= "delete" > Delete </a>

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:

The code is as follows	Copy Code
<input id= "Chk1" type= "checkbox"/> is visible <input id= "Chk2" type= "checkbox" checked= "Checked"/> is visible

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.

code is as follows	copy code
$ ("#chk1"). Prop ("checked") = = False $ ("#chk2"). Prop ("checked") = = True If the attr method is used above, it appears: $ ("#chk1"). attr (" Checked ") = = undefined $ (" #chk2 "). attr (" checked ") = =" Checked "