Description: Store arbitrary data associated with the specified element.
Arguments
jQuery.data( element, key, value )
version added: 1.2.3
element
The DOM element to associate with the data.
key
A string naming the piece of data to set.
value
Data
The new data value.
Note: This is a low-level method; you should probably use
.data() instead.
The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can set several distinct values for a single element and retrieve them later:
jQuery.data(document.body, 'foo', 52); jQuery.data(document.body, 'bar', 'test');
Example
Store then retrieve a value from the div element.Example - Full source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("div").data("test", { first: 16, last: "pizza!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
});
</script>
<style>
div { color:blue; }
span { color:red; }
</style>
</head>
<body>
<div>
The values stored were
<span></span>
and
<span></span>
</div>
</body>
</html>
Description: Returns value at named data store for the element, as set by jQuery.data(element, name, value), or the full data store for the element.
Arguments
jQuery.data( element, key )
version added: 1.2.3
element
The DOM element to query for the data.
key
Name of the data stored.
jQuery.data( element )
version added: 1.4
element
The DOM element to query for the data.
Note: This is a low-level method; you should probably use .data() instead.
The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can retrieve several distinct values for a single element one at a time, or as a set:
alert(jQuery.data( document.body, 'foo' )); alert(jQuery.data( document.body ));
The above lines alert the data values that were set on the body element. If nothing was set on that element, an empty string is returned.
Calling jQuery.data(element) retrieves all of the element's associated values as a JavaScript object. Note that jQuery itself uses this method to store data for internal use, such as event handlers, so do not assume that it contains only data that your own code has stored.
Example
Get the data named "blah" stored at for an element. $("button").click(function(e) {
var value;
switch ($("button").index(this)) {
case 0 :
value = $("div").data("blah");
break;
case 1 :
$("div").data("blah", "hello");
value = "Stored!";
break;
case 2 :
$("div").data("blah", 86);
value = "Stored!";
break;
case 3 :
$("div").removeData("blah");
value = "Removed!";
break;
}
$("span").text("" + value);
});
Example - Full source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function(e) {
var value;
switch ($("button").index(this)) {
case 0 :
value = $("div").data("blah");
break;
case 1 :
$("div").data("blah", "hello");
value = "Stored!";
break;
case 2 :
$("div").data("blah", 86);
value = "Stored!";
break;
case 3 :
$("div").removeData("blah");
value = "Removed!";
break;
}
$("span").text("" + value);
});
});
</script>
<style>
div { margin:5px; background:yellow; }
button { margin:5px; font-size:14px; }
p { margin:5px; color:blue; }
span { color:red; }
</style>
</head>
<body>
<div>A div</div>
<button>Get "blah" from the div</button>
<button>Set "blah" to "hello"</button>
<button>Set "blah" to 86</button>
<button>Remove "blah" from the div</button>
<p>The "blah" value of this div is <span>?</span></p>
</body>
</html>
Was this information helpful?
