mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-18 23:10:24 +00:00
183 lines
No EOL
6.7 KiB
HTML
183 lines
No EOL
6.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
|
||
<div class="ui-page">
|
||
<div class="ui-header">
|
||
<h1>.data()</h1>
|
||
|
||
</div>
|
||
|
||
<fieldset class="toc">
|
||
<legend>Contents:</legend>
|
||
<ul class="toc-list">
|
||
<li>
|
||
<a href="#data1">data( key, value ) </a><ul>
|
||
<li>.data( key, value )
|
||
</li>
|
||
<li>.data( obj )
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#data2">data( key ) </a><ul>
|
||
<li>.data( key )
|
||
</li>
|
||
<li>.data()
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</fieldset>
|
||
<div class="entry method" id="data1">
|
||
<h2 class="jq-clearfix roundTop section-title">
|
||
<span class="name">.data( key, value )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#jQuery">jQuery</a></span>
|
||
</h2>
|
||
<div class=" entry-details">
|
||
<p class="desc"><strong>Description: </strong>Store arbitrary data associated with the matched elements.</p>
|
||
<ul class="signatures">
|
||
<li class="signature" id="data-key-value">
|
||
<h4 class="name">
|
||
<span class="versionAdded">version added: <a href="/category/version/1.2.3/">1.2.3</a></span>.data( key, value )</h4>
|
||
<p class="arguement"><strong>key</strong>A string naming the piece of data to set.</p>
|
||
<p class="arguement"><strong>value</strong>The new data value; it can be any Javascript type including Array or Object.</p>
|
||
</li>
|
||
<li class="signature" id="data-obj">
|
||
<h4 class="name">
|
||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.data( obj )</h4>
|
||
<p class="arguement"><strong>obj</strong>An object of key-value pairs of data to set.</p>
|
||
</li>
|
||
</ul>
|
||
<div class="longdesc">
|
||
<p>The <code>.data()</code> 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.</p>
|
||
<p> We can set several distinct values for a single element and retrieve them later:</p>
|
||
<pre>
|
||
$('body').data('foo', 52);
|
||
$('body').data('bar', { myType: 'test', count: 40 });
|
||
|
||
$('body').data('foo'); // 52
|
||
$('body').data(); // {foo: 52, bar: { myType: 'test', count: 40 }}
|
||
</pre>
|
||
<p>Setting an element's data object with <code>.data(obj)</code> replaces all data previously stored with that element. If you are using third-party plugins it may not be advisable to completely replace the element's data object, since plugins may have also set data. Until jQuery 1.4.2, jQuery itself used the <code>.data()</code> method to save information about events that have been bound to the element, using a data item named 'events'.</p>
|
||
<pre>
|
||
$('body').data('foo', 52);
|
||
$('body').data({one: 1, two: 2});
|
||
|
||
$('body').data('foo'); // undefined
|
||
$('body').data(); // {one: 1, two: 2}
|
||
</pre>
|
||
<p>Due to the way browsers interact with plugins and external code, the <code>.data()</code> method cannot be used on <code><object></code>, <code><applet></code> or <code><embed></code> elements.</p>
|
||
</div>
|
||
<h3>Example:</h3>
|
||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||
<h4><span class="desc">Store then retrieve a value from the div element.</span></h4>
|
||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<style>
|
||
div { color:blue; }
|
||
span { color:red; }
|
||
</style>
|
||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||
</head>
|
||
<body>
|
||
<div>
|
||
The values stored were
|
||
<span></span>
|
||
and
|
||
<span></span>
|
||
</div>
|
||
<script>
|
||
$("div").data("test", { first: 16, last: "pizza!" });
|
||
$("span:first").text($("div").data("test").first);
|
||
$("span:last").text($("div").data("test").last);
|
||
</script>
|
||
</body>
|
||
</html></code></pre>
|
||
<h4>Demo:</h4>
|
||
<div class="demo code-demo"></div>
|
||
</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="ui-content ui-body ui-body-c" id="data2">
|
||
<h2 class="jq-clearfix roundTop section-title">
|
||
<span class="name">.data( key )</span> <span class="returns">Returns: <a class="return" href="http://docs.jquery.com/Types#Object">Object</a></span>
|
||
</h2>
|
||
<div class=" entry-details">
|
||
<p class="desc"><strong>Description: </strong>Returns value at named data store for the element, as set by data(name, value).</p>
|
||
<ul class="signatures">
|
||
<li class="signature" id="data-key">
|
||
<h4 class="name">
|
||
<span class="versionAdded">version added: <a href="/category/version/1.2.3/">1.2.3</a></span>.data( key )</h4>
|
||
<p class="arguement"><strong>key</strong>Name of the data stored.</p>
|
||
</li>
|
||
<li class="signature" id="data"><h4 class="name">
|
||
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>.data()</h4></li>
|
||
</ul>
|
||
<div class="longdesc">
|
||
<p>The <code>.data()</code> 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:</p>
|
||
<pre>
|
||
alert($('body').data('foo'));
|
||
alert($('body').data());
|
||
</pre>
|
||
<p>The above lines alert the data values that were set on the <code>body</code> element. If nothing was set on that element, an empty string is returned:</p>
|
||
<p>Calling <code>.data()</code> with no parameters retrieves all of the values as a JavaScript object. This object can be safely cached in a variable as long as a new object is not set with <code>.data(obj)</code>.</p>
|
||
</div>
|
||
<h3>Example:</h3>
|
||
<div id="entry-examples" class="entry-examples"><div id="example-0">
|
||
<h4><span class="desc">Get the data named "blah" stored at for an element.</span></h4>
|
||
<pre><code class="example demo-code"><!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<style>
|
||
div { margin:5px; background:yellow; }
|
||
button { margin:5px; font-size:14px; }
|
||
p { margin:5px; color:blue; }
|
||
span { color:red; }
|
||
</style>
|
||
<script src="http://code.jquery.com/jquery-latest.js"></script>
|
||
</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>
|
||
<script>
|
||
$("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>
|
||
</body>
|
||
</html></code></pre>
|
||
<h4>Demo:</h4>
|
||
<div class="demo code-demo"></div>
|
||
</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</body></html> |