JQuery attr () prop () data () usage and differences

. attr (), this method has been in existence since jq1.0, the official document writes the function is reads/writes the DOM attribute value, actually before 1.6 sometimes is attribute, sometimes is the property.
. Prop (), this method jq1.6 introduced, reads/writes the DOM's property.
. Data (), which is introduced in jq1.2.3 to read/store arbitrary values on the JQ object corresponding to the DOM element. Performance comparisons,. Prop () >. Data () >. attr (), different versions of different browsers. The performance relationship between data () and. attr () varies, but. Prop () is always optimal.
First, say attr () and prop ():
In jquery, both the attr () function and the prop () function are used to set or get the specified properties, and their parameters and usages are almost identical, but the usefulness of the two functions is different.
1. Different objects of operation
attr and prop are abbreviations for Word attribute and property respectively, and they all denote the meaning of "attributes". However, in jquery, attribute and property are two different concepts. attribute represents an HTML document node property that represents a property of a JS object, such as:
<!--here the ID, class, and data_id are all attribute of the element's document node--
<div id= "message" class= "test" data_id= "123" ></div>

<script type= "Text/javascript" >
The name, age, and URL are the property of obj.
var obj = {name: "Codeplayer", age:18, url: "http://www.365mini.com/"};
</script>

In jquery, the design goal of Prop () is to set or get the attribute (property) on the specified DOM element (referred to as the JS object, element type), and attr () is designed to set or get the attributes on the document node that corresponds to the specified DOM element ( attribute).
The <!--attr () function is for the attribute of the document node--
<div id= "message" class= "test" data_id= "123" ></div>

<script type= "Text/javascript" >
The prop () function is for the property of the DOM Element (msg) itself
var msg = document.getElementById ("message");
var $msg = $ (msg);
$msg. Prop ("* * *") and msg.*** in the basic is the same, such as $msg.prop ("TagName")/msg.tagname
</script>

In the underlying implementation of jquery, the functions of attr () and prop are implemented through JS native element objects, such as the MSG in the above code. attr () is primarily dependent on the element object's getattribute () and setattribute () two methods. Prop () is mainly based on JS native object property acquisition and the way to set.
<div id= "message" class= "test" data_id= "123" ></div>
<script type= "Text/javascript" >
var msg = document.getElementById ("message");
var $msg = $ (msg);

/* * * * * * * attr () depends on the element object's Element.getattribute (attribute) and Element.setattribute (attribute,
Value) * * * *

Equivalent to Msg.setattribute ("data_id", 145);
$msg. attr ("data_id", 145);
Equivalent to Msg.getattribute ("data_id");
var dataid = $msg. attr ("data_id"); 145

/* * * * * * * PROP () dependent on JS native Element[property] and element[property] = value; *** */

Equivalent to msg["pid"] = "pid value" or Msg.pid = "pid value"
$msg. Prop ("pid", "pid value");
Equivalent to msg["pid") or Msg.pid
var testprop = $msg. Prop ("pid"); PID Value
</script>

Also, although prop () is for the property of the DOM element, not the attribute of the element node. However, changes to some properties of DOM elements also affect the corresponding attributes on the element nodes. For example, the property's ID corresponds to the classname of the attribute id,property corresponding to the attribute class. such as: $msg. Prop ("ClassName", "Newtest") is the same as $msg.attr ("Class", "Newtest")

2. Different application versions
As I said at the beginning, attr () is the jQuery1.0 version of the function, prop () is the jQuery1.6 version of the new function. That is, only attr () can be used before 1.6, and in 1.6 and later versions, the corresponding function may be selected according to the actual need.

3. Different property value types for setting
The attr () operation is a property of the document node, so the property value set can only be a string type and, if it is not a string type, its ToString () method is also called to convert it to a string type. The prop () operation is a property of the JS object, and the property values set can be any type, including arrays and objects.

4. Other issues
Prior to jQuery1.6, only attr () was available, and the function assumed attribute setup/Get work and property settings and get work. For example: Before jquery 1.6, attr () can also set or get the property of DOM elements such as tagname, ClassName, NodeName, NodeType, and so on. Until jquery 1.6 added the prop () function and used it to assume the property's settings or get work, attr () was only responsible for setting up attribute and getting work. In addition, for properties such as "Checked", "selected", "Disabled" with form elements, and before jq1.6, attr () Gets the value returned by these properties as Boolean, or False if selected (or disabled) returns TRUE.
However, starting with 1.6, using attr () to get the return value of these properties is a string type, and if selected (or disabled) returns "Checked", "Selected", "Disabeld", otherwise (that is, the element node does not have this property) returns undefined. And in some versions, these property values represent the initial state values at the time the document was loaded, and the corresponding property values do not change even after the selected (or disabled) State of those elements is changed. Because jquery believes that: attribute "checked", "selected", "Disabled" is the value that represents the initial state of the property, checked, selected, Disabeld represents the value of the property's real-time state (a value of true or false).
So, starting with 1.6, use prop () to set or get properties such as checked, selected, disabled, and so on. For other operations that can be implemented prop (), use Prop () as much as possible. For example, SelectedIndex, TagName, NodeName, NodeType, ownerdocument should use the. Prop () method to get/set the value.
It is noteworthy that for the href attribute of the A tag, prop () differs from attr (), prop is the absolute address, and attr () takes the value in the href, such as:
<a href= "#" id= "Adom" data-name= "DOMA" ></a>
<script>
Console.log (Adom.prop ("href");//file:///c:/users/administrator/desktop/testapp/1.html#
Console.log (Adom.prop ("href"));//#
</script>

Note: In previous versions of IE9, if the property was not deleted before the DOM element was removed, using the. Prop () method sets the value of the DOM element property (except Simple type: Number, String, Boolean) to cause a memory leak. To safely set the value of the DOM object and avoid memory leaks, you can use the. Data () method.

Ii. data ()
Dom tags in HTML5 can add some data-xxx properties, which can be thought of as a way to access DOM additional information such as DATA-XXX. The content accessed by data () can be a string, an array, and an object. From jQuery1.4.3 onwards, HTML5 's DATA-XXX attribute is automatically added to the JQ data object, such as:
<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 also had a terrible past, such as:
<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.

After data () is set, attr () cannot get the value after setting, for example:
<a href= "javascript:;" id= "Adom" data-name= "DOMA" ></a>
<script>
var adom = $ ("#adom");
Adom.data ("name", "name1");
Console.log ("attr:" +adom.attr ("Data-name"));//doma
Console.log ("Data:" +adom.data ("name"));//name1
</script>

JQuery attr () prop () data () usage and differences