JQuery. attr (). Prop (). Data () Detailed usage

First look at the explanations of the three methods:

attr (), this method has been in existence since jq1.0, the official document writes the function is reads/writes the DOM the attribute value, actually before 1.6 sometimes is attribute, sometimes is the property.
. Prop (), this method jq1.6 introduces, reads/writes the DOM's property.
. Data (), introduced in jq1.2.3, is used to read/store arbitrary values on the JQ object corresponding to the DOM element.
Say first. attr () and. Prop (), before the jq1.6 version, there was no. Prop () method, and. attr () confused the concept of attribute and property (it is not clear what their differences, please refer to yesterday's topic), resulting in the use of careless will appear bug, If you do not read the JQ source code, it is really not clear. attr () Set the attribute or property.

As for JQ why this design, there are divergent views. Some people say that JQ development team did not understand the difference between Chu attribute and property, some people said that this is over design, JQ that users do not need to know the difference between attribute and property, simply packaged together. Whatever the reason, the design of JQ is really bad.

In May 2011, JQ introduced a new API in the new version 1.6. Prop () method, but the upgrade process is very painful, 1.6 version contrast 1.5.2 version in the. attr () Introduction on the not well backward, some people upgrade JQ to 1.6 after the discovery of their own code hung. The following JQ release 1.6.1 version resolves compatibility issues.

For the addition of the. Prop () method, the JQ explanation is: first, provide a more concise approach to the acquisition of some Dom object property (such as Nodename,selectedindex), in contrast:

The code is as follows	Copy Code
Not at all. Prop () var Elem = $ ("#foo") [0]; if (elem) { index = Elem.selectedindex; } Use. Prop () Index = $ ("#foo"). Prop ("SelectedIndex");

Another reason is that. Prop () is more efficient than. attr ().

Here's A. Data (), we know that the DOM tag in HTML 5 can have some data-xxx properties, and you can think of. Data () as a way to access the DOM's additional information such as DATA-XXX. Of course,. Data () is not only a string, it can also contain arrays and objects. From jq1.4.3, the HTML5 data-xxx attribute is automatically added to the data object in JQ, for example, with the following code:

The code is as follows	Copy Code
<div data-role= "page" data-last-value= "data-hidden=" true "data-options= ' {" name ":" Noahlu "} ' ></div>

The following equations are set up:

The code is as follows	Copy Code
$ ("div"). Data ("role") = = "Page"; $ ("div"). Data ("lastvalue") = = 43; $ ("div"). Data ("hidden") = = true; $ ("div"). Data ("Options"). Name = = = "Noahlu";

Although the. data () is convenient for saving, it also has a history of the past, please see:

The code is as follows	Copy Code
<button id= "foo" data-key= "1.4000" >click me</button> <script> typeof $ (' #foo '). Data (' key '); </script>

Pre-jQuery 1.8 version output ' number ', 1.8 version after output as ' string '. Before version 1.8, data converts values to basic types, but what we want here is ' 1.4000′ is not 1.4.

From the actual use of. Data (), it seems like the. Prop () can attach some custom values to the DOM object. I can only say that they are different, look at their own method name, and then think about what kind of scene in the way.

Finally, in terms of performance comparisons,. Prop () >. Data () > attr (), different browser versions, data () and. attr () have a different performance relationship, but. Prop () is always optimal.