jquery-mobile/experiments/api-viewer/docs/jQuery.data/index.html

<!DOCTYPE html>
<html lang='en'><head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div data-role="page">
        <div data-role="header">
				<h1>jQuery.data()</h1>
  				
</div>


<div data-role="content" data-theme="c" id="jQuery.data1">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">jQuery.data( element, 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 specified element.</p>
<ul class="signatures"><li class="signature" id="jQuery.data-element-key-value">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.2.3/">1.2.3</a></span>jQuery.data( element, key, value )</h4>
<p class="arguement"><strong>element</strong>The DOM element to associate with the data.</p>
<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.</p>
</li></ul>
<div class="longdesc">
<p><strong>Note:</strong> This is a low-level method; you should probably use <code><a href="/data">.data()</a></code> instead.</p>
<p>The <code>jQuery.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 set several distinct values for a single element and retrieve them later:</p>
<pre>jQuery.data(document.body, 'foo', 52);
		jQuery.data(document.body, 'bar', 'test');</pre>
</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">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
  div { color:blue; }
  span { color:red; }
  &lt;/style&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div&gt;
    The values stored were 
    &lt;span&gt;&lt;/span&gt;
    and
    &lt;span&gt;&lt;/span&gt;
  &lt;/div&gt;
&lt;script&gt;var div = $("div")[0];
    jQuery.data(div, "test", { first: 16, last: "pizza!" });
    $("span:first").text(jQuery.data(div, "test").first);
    $("span:last").text(jQuery.data(div, "test").last);&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></div>
</div>
</div>
<div data-role="content" data-theme="c" id="jQuery.data2">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">jQuery.data( element, 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 jQuery.data(element, name, value), or the full data store for the element.</p>
<ul class="signatures">
<li class="signature" id="jQuery.data-element-key">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.2.3/">1.2.3</a></span>jQuery.data( element, key )</h4>
<p class="arguement"><strong>element</strong>The DOM element to query for the data.</p>
<p class="arguement"><strong>key</strong>Name of the data stored.</p>
</li>
<li class="signature" id="jQuery.data-element">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>jQuery.data( element )</h4>
<p class="arguement"><strong>element</strong>The DOM element to query for the data.</p>
</li>
</ul>
<div class="longdesc">
<p><strong>Note:</strong> This is a low-level method; you should probably use <code><a href="/data">.data()</a></code> instead.</p>
<p>The <code>jQuery.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(jQuery.data( document.body, 'foo' );
alert(jQuery.data( document.body ));</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>jQuery.data(element)</code> 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.</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">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style&gt;
div { margin:5px; background:yellow; }
button { margin:5px; font-size:14px; }
p { margin:5px; color:blue; }
span { color:red; }
  &lt;/style&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div&gt;A div&lt;/div&gt;
&lt;button&gt;Get "blah" from the div&lt;/button&gt;
&lt;button&gt;Set "blah" to "hello"&lt;/button&gt;

&lt;button&gt;Set "blah" to 86&lt;/button&gt;
&lt;button&gt;Remove "blah" from the div&lt;/button&gt;
&lt;p&gt;The "blah" value of this div is &lt;span&gt;?&lt;/span&gt;&lt;/p&gt;
&lt;script&gt;
$("button").click(function(e) {
  var value, div = $("div")[0];

  switch ($("button").index(this)) {
    case 0 :
      value = jQuery.data(div, "blah");
      break;
    case 1 :
      jQuery.data(div, "blah", "hello");
      value = "Stored!";
      break;
    case 2 :
      jQuery.data(div, "blah", 86);
      value = "Stored!";
      break;
    case 3 :
      jQuery.removeData(div, "blah");
      value = "Removed!";
      break;
  }

  $("span").text("" + value);
});

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></div>
</div>
</div>


				</div>

</body></html>
added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com 2010-09-16 17:13:38 +00:00			`<!DOCTYPE html>`
set utf-8 2010-11-02 01:46:29 +00:00			`<html lang='en'><head>`
Added viewport meta elements to the markup of every template and removed the metaViewportContent option from code and docs. IE does not support generated viewport tags. 2011-02-18 20:00:18 +00:00			`<meta charset="utf-8">`
			`<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>`
Big update: In starting markup, pages should now be identified with the attribute data-role="page". This allows us to then add ui-page programatically, hiding all non-active pages, and apply ui-page-active to one page at a time to show it. mobile.js is updated to find pages by this attribute now, instead of ui-page class. fixes issue 32 2010-09-18 16:20:35 +00:00			`<div data-role="page">`
updated markup to use data-role attrs in place of classes for header/content/footer 2010-09-21 14:58:54 +00:00			`<div data-role="header">`
added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com 2010-09-16 17:13:38 +00:00			`<h1>jQuery.data()</h1>`

			`</div>`

updated to remove toc fieldsets in demo pages 2010-09-16 18:27:10 +00:00
switched up padding and margins on content div. Now it will get 15px padding, unless its a fullscreen page. Inset listviews have no margin now, and regular listviews have -15px margins. Also, collapsibles now have no padding. Updated HTML to remove ui-body classes for content divs, to match these changes. Fixes #161 2010-10-12 19:50:28 +00:00			`<div data-role="content" data-theme="c" id="jQuery.data1">`
added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com 2010-09-16 17:13:38 +00:00			`<h2 class="jq-clearfix roundTop section-title">`
			`<span class="name">jQuery.data( element, 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 specified element.</p>`
			`<ul class="signatures"><li class="signature" id="jQuery.data-element-key-value">`
			`<h4 class="name">`
			`<span class="versionAdded">version added: <a href="/category/version/1.2.3/">1.2.3</a></span>jQuery.data( element, key, value )</h4>`
			`<p class="arguement"><strong>element</strong>The DOM element to associate with the data.</p>`
			`<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.</p>`
			`</li></ul>`
			`<div class="longdesc">`
			`<p><strong>Note:</strong> This is a low-level method; you should probably use <code><a href="/data">.data()</a></code> instead.</p>`
			`<p>The <code>jQuery.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 set several distinct values for a single element and retrieve them later:</p>`
			`<pre>jQuery.data(document.body, 'foo', 52);`
			`jQuery.data(document.body, 'bar', 'test');</pre>`
			`</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>var div = $("div")[0];`
			`jQuery.data(div, "test", { first: 16, last: "pizza!" });`
			`$("span:first").text(jQuery.data(div, "test").first);`
			`$("span:last").text(jQuery.data(div, "test").last);</script>`
			`</body>`
			`</html></code></pre>`
			`<h4>Demo:</h4>`
			`<div class="demo code-demo"></div>`
			`</div></div>`
			`</div>`
			`</div>`
switched up padding and margins on content div. Now it will get 15px padding, unless its a fullscreen page. Inset listviews have no margin now, and regular listviews have -15px margins. Also, collapsibles now have no padding. Updated HTML to remove ui-body classes for content divs, to match these changes. Fixes #161 2010-10-12 19:50:28 +00:00			`<div data-role="content" data-theme="c" id="jQuery.data2">`
added a jQuery api viewer demo. NOTE: content is a modified version of the downloadable HTML from http://jqapi.com 2010-09-16 17:13:38 +00:00			`<h2 class="jq-clearfix roundTop section-title">`
			`<span class="name">jQuery.data( element, 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 jQuery.data(element, name, value), or the full data store for the element.</p>`
			`<ul class="signatures">`
			`<li class="signature" id="jQuery.data-element-key">`
			`<h4 class="name">`
			`<span class="versionAdded">version added: <a href="/category/version/1.2.3/">1.2.3</a></span>jQuery.data( element, key )</h4>`
			`<p class="arguement"><strong>element</strong>The DOM element to query for the data.</p>`
			`<p class="arguement"><strong>key</strong>Name of the data stored.</p>`
			`</li>`
			`<li class="signature" id="jQuery.data-element">`
			`<h4 class="name">`
			`<span class="versionAdded">version added: <a href="/category/version/1.4/">1.4</a></span>jQuery.data( element )</h4>`
			`<p class="arguement"><strong>element</strong>The DOM element to query for the data.</p>`
			`</li>`
			`</ul>`
			`<div class="longdesc">`
			`<p><strong>Note:</strong> This is a low-level method; you should probably use <code><a href="/data">.data()</a></code> instead.</p>`
			`<p>The <code>jQuery.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(jQuery.data( document.body, 'foo' );`
			`alert(jQuery.data( document.body ));</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>jQuery.data(element)</code> 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.</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, div = $("div")[0];`

			`switch ($("button").index(this)) {`
			`case 0 :`
			`value = jQuery.data(div, "blah");`
			`break;`
			`case 1 :`
			`jQuery.data(div, "blah", "hello");`
			`value = "Stored!";`
			`break;`
			`case 2 :`
			`jQuery.data(div, "blah", 86);`
			`value = "Stored!";`
			`break;`
			`case 3 :`
			`jQuery.removeData(div, "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>`