JQuery. attr (). Prop (). data () Differences and select all issues

Dom'sattribute and property

Today to talk about a small JS topic, is the DOM node attribute and property differences, this point looks very small, actually behind the Shia. If the interview is a front-end, listen to his understanding of the problem, the basic can distinguish is not a rookie. Please be careful to understand the contents below.

The page has an input entry box

This is relatively simple, there is nothing to say, two values are ' 1′. Now I'm going to change the value of the input box to 100 and then fetch it again:

Why are two values different? This is attribute and property in mischief.

Attibute

This input node has a number of attributes (attribute): ' type ', ' id ', ' Value ', ' class ' and custom 'data-explain '. The JavaScript DOM model provides two methods for GetAttribute () and setattribute () to read and write the DOM tree node property (attribute) values. Note here the GetAttribute () method has a unspoken rule: some special attributes (such as input value and checked), getattribute to the initial value, which explains the modified input box value of 100, V1 to the initial value of ' 1 ′。

Property

Javascript gets to the DOM node object, such as a, you can think of it as a basic JS object (although some browser implementations are not entirely), this object implements a lot of properties: ' Value ', ' ClassName ', as well as some of the methods and the Getattribute,setattribute,onclick mentioned above. Note that the value of this object's ' value ' property is the current value in the input box. So the value of V2 is ' 100′.

It is recommended that you use the property as much as possible, so that the attribute value is always a string, such as:

In addition, due to the differences in browser implementation details, there are also some pits, such as: After Chrome,firefox and IE8, the attribute name of the label is case insensitive, dom.setattribute (' myname ', ' xxx ') Can be taken via Dom.getattribute (' MyName '), and in XHTML document mode, setting ' TabIndex ' for any value will set the ' TabIndex ' value to 0.

For attribute and property, theimplementation of jquery is actually quite tangled, we should know the three methods of JQ related to them. attr (),. Prop () and. Data (), there are also sources behind these three.

JQuery. attr (). Prop ().data ()

Let's take a look at the explanations of the three methods:

. attr (), this method has been in existence since jq1.0, the role of official document writing is to read/write the DOM attribute value, in fact, before 1.6 is sometimes attribute, and sometimes property: Prop (), this method jq1.6 introduced, read/ Write Dom's property: Data (), introduced in jq1.2.3, to read/store arbitrary values on the JQ object corresponding to the DOM element.

First say. attr () and. Prop (), before the jq1.6 version, there is No. Prop () method, and. attr () to confuse the concept of attribute and property, resulting in the use of careless will occur when the bug, if not read the JQ source code, it is not clear. attr ( Set the attribute or property.

There are divergent opinions as to why JQ is so designed. Some people say that the JQ development team itself did not understand the difference between Chu attribute and property, some people say this is over-design, JQ that users do not need to know the difference between attribute and property, simply encapsulated together. No matter what the reason is, the design of JQ is really bad.

In May 2011, JQ introduced the new API in new version 1.6. Prop () method, but the upgrade process is very painful, 1.6 version of the 1.5.2 version in. attr () is not well-compatible with the introduction of, some people to upgrade JQ to 1.6 after the discovery of their own code hangs. The compatibility issue was resolved immediately after the JQ release of version 1.6.1.

For the addition of the. Prop () method, the JQ explanation is: first, the acquisition of some DOM object properties (such as Nodename,selectedindex) provides a more concise scenario, before and after the comparison:

No. 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 ().

Let's talk about. Data (), we know that the DOM tag inside the HTML 5 can be data-xxx, and you can think of. Data () as a way to access DOM additional information such as DATA-XXX. Of course,. Data () accesses not only strings, but also arrays and objects. From jq1.4.3 onwards,HTML5 's DATA-XXX attribute is automatically added to the JQ data object, such as the following code:

<div data-role= "page" data-last-value= "data-hidden=" true "data-options= ' {" name ":" Noahlu "} ' ></div>

The following equation is true:

$ ("div"). Data ("role") = = = "Page"; $ ("div"). Data ("lastvalue") = = = 43;$ ("div"). Data ("hidden") = = = true;$ ("div"). Data (" Options "). Name = = =" Noahlu ";

Although. Data () is very convenient to store the information, it has been a terrible past, please see:

<button id= "foo" data-key= "1.4000" >click me</button><script>typeof $ (' #foo '). Data (' key '); </ Script>

The version output ' number ' before JQuery 1.8, and the output as ' string ' after version 1.8. Before version 1.8, data would convert values into basic types, but what we want here is ' 1.4000′ is not 1.4.

Judging from the actual use of. Data (), it seems very similar to. Prop () that you can attach some custom values to the DOM object. I can only say that they are different, look at their respective method names, and then think about what the scene with what method.

Finally, in terms of performance,. Prop () >. Data () >. attr (), different versions of different browsers. The performance relationship between data () and. attr () varies, but. Prop () is always optimal.

Resources

• . Prop () vs. attr ()
• JQuery 1.6.1 Released
• JQuery 1.6 and. attr ()
• JQuery doc. Data ()
• JQuery attr () prop () data () performance
• Don ' t use the JQuery data () method. Use. attr () instead.

The above content is transferred from: http://www.noahlu.com/blog/javascript-note/jquery-attr-prop-data/

The above differences lead to frequent problems in doing a full selection and when all is not selected, so in Settings,,,,, selectedIndex tagName nodeName nodeType ownerDocument Checked or defaultSelected时应该使用prop方法，而不是用attr方法。

Query the official API is explained as follows:

the  . Prop ()  method is a convenient-to-set the value of properties-especially when setting mu Ltiple properties, using values returned by a function, or setting values on multiple elements at once. It should is used when setting  selectedindex ,   tagName ,   nodeName ,   nodeType ,   ownerdocument ,   defaultchecked , or   defaultselected . Since jQuery 1.6, these properties can no longer is set with the  . attr ()  method. They does not have corresponding attributes and is only properties.

The

. Prop () method is a convenient way to set a value, especially for multiple attributes, to use function return values, or to set values in multiple elements at once. In the settings selectedindex ,   tagName ,   nodeName ,   NodeType ,   ownerdocument ,   defaultchecked , or defaultselected should use this method. From jQuery1.6, these properties can no longer be set with the. attr () method, they are not quite attributes, only properties.

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include value the property of input elements, the property of disabled inputs and buttons, or the property of checked a CheckBox. The .prop() method should is used to set disabled and checked instead of the .attr() method. The .val() method should is used for getting and setting value.

Properties can change the dynamic platform of DOM elements, not the attribue of serialization. For example, the Value property of input, the disabled property of input and button , or the Checked property of the checkbox. You should use. Prop () instead. attr () to set disabled and checked: Val () to get or set their value values.

JQuery. attr (). Prop (). data () Differences and select all issues