Introduction to the jQuery object data cache Cache principle and the difference between jQuery.data methods

There are many online tutorials on how to use jQuery.data(..) to implement data caching, but there are two commonly used by users: data([key],[value]) and jQuery.data(element,[key],[value]. ]) There are almost no articles that clearly explain the difference between the two, so I used it, studied it and shared it with everyone.

The difference between $("").data([key],[value]) and jQuery.data(element,[key],[value])
Both functions are used Storing data on elements is what we usually call data caching, and both return jQuery objects. I was really shocked when I used them both. The difference is huge. I really don’t need to know, but I was shocked when I used them. . Let’s look at the example first, and then analyze it based on the source code.

Js code:

Copy code The code is as follows:

test2

test3

test

aaaa

Now we focus on for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[ i] ){} This code; where object[0] gets the jQuery object For the first DOM element, through the for loop,
gets to traverse each corresponding DOM element in the entire jQuery object, and through callback.call(value,i,value); point the callback's this object to the value object, and pass two Parameters, i represents the index value, value represents the DOM element; callback is a method similar to function(index, elem) { }. So we get $("").each(function(index, elem){ });
Let’s look at the source code of data([key],[value])
Js code:

Copy code The code is as follows:

jQuery.fn.extend({
data: function( key, value) {
var parts, part, attr, name, l,
elem = this[0],
i = 0,
data = null;
// Gets all values
if ( key === undefined ) {
.....//Handle the case without Key, here Not what we are going to discuss
return data;
}
// Sets multiple values
if ( typeof key === "object" ) {
return this.each(function() {
jQuery.data( this, key );
});
}
parts = key.split( ".", 2 );
parts[1] = parts[1] ? "." parts[1] : "";
part = parts[1] "!";
return jQuery.access( this, function( value ) {
if ( value === undefined ) {
. . //Here is the case of getting the return value when there is no value. This is not what we are talking about.
parts[1] = value;
//If I use $("div").data("a","aaa")), this before calling each below refers to the object returned by $("div"),
this.each(function() { //Note, here we use each matching element as the context to execute a function
var self = jQuery( this );
self.triggerHandler( "setData" part, parts );
// The data stored on the element here is essentially delegated to data(element, [key], [value]).
//See the previous analysis.
//The following data(this, key, value) refers to traversing each corresponding DOM element in the entire jQuery object
//$("div"), which corresponds to a

array in the page.
jQuery.data( this, key, value );//This statement will be executed in a loop multiple times, that is, the data is saved .
//Here is the core sentence. But please see clearly above that it is in each(functipn(){}).
self.triggerHandler( "changeData" part, parts );
});
}, null, value, arguments.length > 1, null, false );
},
//Remove stored data on the element. The specific implementation is as follows:
removeData: function( key ) {
return this.each(function() {
jQuery.removeData( this, key );
});
}
});

If you don’t know much about the source code of data([key],[value]), well, I will use an example to imitate it.
Js code:

Copy code The code is as follows:

test2

test3

test

aaaa

Now for data([key],[value]) with jQuery. You already understand data(element,[key],[value]). If you still don’t understand it, go back and read it again and patiently understand it. In fact, it looks very different on the surface. But there is still a connection in essence. Now that you understand the principle, you can use it with confidence. jQuery.data(element,[key],[value]) only binds data to the parameter element node. data([key],[value])
For example, $("div").data("a","aaaa") binds data to each element that matches the div node.
As an additional note, the source code of jquery-1.7.2.js is used in the analysis in this article. Download address:
http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js

Introduction to the jQuery object data cache Cache principle and the difference between jQuery.data methods_jquery