Differences between attr and prop in jquery (very complete)

Source: Internet
Author: User

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 "

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.