JQuery. data () stores data, and jquery. data stores

JQuery. data () stores data, and jquery. data stores
Implementation of jQuery. data ()

JQuery. data () is used to append data to a common object or DOM Element.
The implementation method is analyzed in three parts:
1. append data with name and value. Three parameters are input. The first parameter is the object for which data is to be appended, and the second parameter is the data name, the third parameter is the data value. Of course, if you only get the value, you can also do not input the third parameter.
2. append data with another object. Two parameters are input. The first parameter is the data object to be appended (called "obj "), the second parameter is also an object (we call it "another"). The key-value pairs contained in "another" will be copied to the data cache of "obj" (we call it "cache ").
3. attaching data to DOM elements; DOM Element is also an Object, but there is a problem with the garbage collection of objects directly attached to DOM elements by IE6 and IE7; therefore, we store the data in the global cache (we call it "globalCache"), that is, "globalCache" contains the "cache" of multiple DOM elements ", add an attribute to the DOM Element to store the uid corresponding to the "cache.

Append data with name and value as the object

When jQuery. data () is used to append data to a common object, it essentially attaches a "cache" to the object and uses a special attribute name.
The "cache" for storing data is also an object. The data We append to "obj" is actually a "cache" attribute. The "cache" is an attribute of "obj". In jQuery 1.6, the attribute name is "jQuery16" and a random number is added (as mentioned below "jQuery16018518865841457738 ").

We can use the following code to test the functions of jQuery. data:

<script type="text/javascript" src="jquery.js"></script>  <script>  obj = {};  $.data(obj, 'name', 'value');  document.write("$.data(obj, 'name') = " + $.data(obj, 'name') + '<br />');  for (var key in obj) {      document.write("obj." + key + '.name = ' + obj[key].name);  }  </script>

The result is as follows:

$.data(obj, 'name') = value  obj.jQuery16018518865841457738.name = value  

In this Code, we first attach an attribute (name: "name", value: "value") to "obj", and then use $. data (obj, 'name') to obtain the attached data. To gain a deeper understanding of the implementation mechanism, we have used a loop to obtain the "obj" attribute. In fact, we have extracted the "cache" object attached to "obj.
As you can see, jQuery. data () is actually appended to an object named "jQuery16018518865841457738" (this name is random), that is, "cache. The attribute appended to the object using jquery. data () is actually the "cache" attribute.

Append data with another object

In addition to assigning values by providing names and values, we can also directly pass in another object ("another") as a parameter. In this case, the attribute names and attribute values of "another" are considered as multiple key-value pairs, and the extracted "name" and "value" are copied to the cache of the target object.
The function test code is as follows:

<script type="text/javascript" src="jquery.js"></script>  <script>  obj = {};  $.data(obj, {name1: 'value1', name2: 'value2'});  document.write("$.data(obj, 'name1') = " + $.data(obj, 'name1')  + '<br />' );  document.write("$.data(obj, 'name2') = " + $.data(obj, 'name2') + '<br />');  for (var key in obj) {      document.write("obj." + key + '.name1 = ' + obj[key].name1 + '<br />');      document.write("obj." + key + '.name2 = ' + obj[key].name2);  }  </script>  

The result is as follows:

$.data(obj, 'name1') = value1  $.data(obj, 'name2') = value2  obj.jQuery1600233050178663064.name1 = value1  obj.jQuery1600233050178663064.name2 = value2  

In the above test code, we first pass in an "another" object with two key-value pairs, and then use . Data (obj, 'name1') and . Data (obj, 'name2') obtains additional data. Similarly, to gain an in-depth understanding of the mechanism, we retrieve the hidden "cache" object by traversing "obj, the "name1" and "name2" attributes of the "cache" object are obtained.

As you can see, jQuery. data () actually attaches an object named "obj. jQuery1600233050178663064" to "obj", that is, "cache. Key-value pairs passed in using jquery. data () are copied to the "cache.

Append data to DOM Element

DOM Element is also an Object, so the previous method can also assign values to DOM elements; however, considering the garbage collection problem in IE6 and IE7 (the object references attached to DOM Element cannot be effectively recycled), jQuery uses a different method to append data from common objects.

The test code is as follows:

<div id="div_test" />  <script type="text/javascript" src="data.js"></script>  <script>  window.onload = function() {      div = document.getElementById('div_test');      $.data(div, 'name', 'value');      document.write($.data(div, 'name'));  }  </script>  

The result is as follows:

value

In the test code, first pass document. the getElementById method obtains a DOM Element (you can also use the jQuery selector) and attaches an attribute to this DOM Element, then the additional attributes are extracted from the DOM Element and output.