uTools-Manuals/docs/jQuery/data.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.data()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/data/">数据操作</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/miscellaneous/">杂项</a> &gt; <a href="/category/miscellaneous/data-storage/">数据存储</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/data/" target="_blank">.data()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">在匹配元素上存储任意相关数据 或 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。<div class="toc">
<h4><span>Contents:</span></h4>
<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>
</div><article class="entry method" id="data1"><h2 class="section-title">
<span class="name">.data( key, value )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>在匹配元素上存储任意相关数据.</p>
<ul class="signatures">
<li class="signature" id="data-key-value">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.2.3/">1.2.3</a></span>.data( key, value )</h4>
<ul>
<li>
<div><strong>key</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>一个字符串，用户存储数据的名称。（译者注：存储的数据名）</div>
</li>
<li>
<div><strong>value</strong></div>
<div>类型: <a href="/Types/#Object">Object</a>
</div>
<div>新的数据值；它可以是任意的Javascript数据类型，包括Array 或者 Object。</div>
</li>
</ul>
</li>
<li class="signature" id="data-obj">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4.3/">1.4.3</a></span>.data( obj )</h4>
<ul><li>
<div><strong>obj</strong></div>
<div>类型: <a href="/Types/#Object">Object</a>
</div>
<div>
			  一个用于更新数据的 键/值对</div>
</li></ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p><code>.data()</code> 方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险。</p>
<p> 我们可以在一个元素上设置不同的值，之后获取这些值：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">"body"</span>).data(<span class="string">"foo"</span>, <span class="number">52</span>);</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"body"</span>).data(<span class="string">"bar"</span>, { myType: <span class="string">"test"</span>, count: <span class="number">40</span> });</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"body"</span>).data({ baz: [ <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span> ] });</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$(<span class="string">"body"</span>).data(<span class="string">"foo"</span>); <span class="comment">// 52</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"body"</span>).data(); <span class="comment">// { foo: 52, bar: { myType: "test", count: 40 }, baz: [ 1, 2, 3 ] }</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>在 jQuery 1.4.3 用<code>.data(obj)</code>设置一个元素的数据对象可以扩充元素上原先存储数据。jQuery 自身也通过<code>.data()</code>方法，使用用'events' 和 'handle'名字储存信息，并且存储任意用下划线('_')开头的数据名供内部使用。</p>
<p>在jQuery1.4.3前(从jQuery 1.4开始).data()方法完全取代所有的数据,而不是仅仅扩展原有的数据对象。如果你正在使用第三方插件，完全替代元素的数据对象也许是不可取的，因为插件也有可能设置数据。</p>
<p>由于浏览器用插件和外部代码相互作用,<code>.data()</code>方法不能在<code>&lt;object&gt;</code>（除非是Flash插件），<code>&lt;applet&gt;</code> 或 <code>&lt;embed&gt;</code>元素上使用。</p>
</div>
<h3>Additional Notes:（其他注意事项：）</h3>
<div class="longdesc"><ul>
<li>注意这个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许通过自定义属性附加数据。</li>
</ul></div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">从div元素储存然后找回一个值。</span></h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">blue;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">span</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>    The values stored were</code></div></div><div class="container"><div class="line"><code>    <span class="tag">&lt;<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>    and</code></div></div><div class="container"><div class="line"><code>    <span class="tag">&lt;<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).data(<span class="string">"test"</span>, { first: <span class="number">16</span>, last: <span class="string">"pizza!"</span> });</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"span:first"</span>).text($(<span class="string">"div"</span>).data(<span class="string">"test"</span>).first);</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"span:last"</span>).text($(<span class="string">"div"</span>).data(<span class="string">"test"</span>).last);</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article>
<article class="entry method" id="data2"><h2 class="section-title">
<span class="name">.data( key )</span><span class="returns">返回: <a href="/Types/#Object">Object</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong> 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。 通过.data(name, value)或HTML5 data-* 属性设置
			</p>
<ul class="signatures">
<li class="signature" id="data-key">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.2.3/">1.2.3</a></span>.data( key )</h4>
<ul><li>
<div><strong>key</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>存储的数据名.</div>
</li></ul>
</li>
<li class="signature" id="data">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.4/">1.4</a></span>.data()</h4>
<ul><li><div class="null-signature">这个方法不接受任何参数。</div></li></ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc-1">
<p><code>.data()</code>方法允许我们在DOM元素上附加任意类型的数据,避免了循环引用的内存泄漏风险。我们可以在一个元素上设置不同的值，并获取这些值：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>alert($(<span class="string">'body'</span>).data(<span class="string">'foo'</span>));</code></div></div><div class="container"><div class="line"><code>alert($(<span class="string">'body'</span>).data());</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>上面两行会显示先前设置在 <code>body</code>元素上设置的值。若果那个元素上没有设置任何值，那么将返回<code>undefined</code>。</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>alert( $(<span class="string">"body"</span>).data(<span class="string">"foo"</span>)); <span class="comment">//undefined</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"body"</span>).data(<span class="string">"bar"</span>, <span class="string">"foobar"</span>);</code></div></div><div class="container"><div class="line"><code>alert( $(<span class="string">"body"</span>).data(<span class="string">"bar"</span>)); <span class="comment">//foobar</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4 id="data-html5">
<a href="#data-html5">HTML5 data-* Attributes（HTML5 data-* 属性）</a>
</h4>
<p>从jQuery 1.4.3起， <a href="http://ejohn.org/blog/html-5-data-attributes/">HTML 5 data- 属性</a>
			将自动被引用到jQuery的数据对象中。嵌入式破折号处理属性（ attributes）的方式在 jQuery 1.6 中已经改变，以使之符合<a href="http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes">W3C HTML5 规范</a>.</p>
<p>举个例子, 给定下面的HTML:</p>
<div class="syntaxhighlighter xml nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">data-role</span>=<span class="value">"page"</span> <span class="attribute">data-last-value</span>=<span class="value">"43"</span> <span class="attribute">data-hidden</span>=<span class="value">"true"</span> <span class="attribute">data-options</span>=<span class="value">'{"name":"John"}'</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>下面所有的 jQuery 代码都能运行。</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).data(<span class="string">"role"</span>) === <span class="string">"page"</span>;</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).data(<span class="string">"lastValue"</span>) === <span class="number">43</span>;</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).data(<span class="string">"hidden"</span>) === <span class="literal">true</span>;</code></div></div><div class="container"><div class="line"><code>$(<span class="string">"div"</span>).data(<span class="string">"options"</span>).name === <span class="string">"John"</span>;</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>每次尝试将字符串转换为一个JavaScript值（包括布尔值（booleans），数字（numbers），对象（objects），数组（arrays）和空（null））。如果这样做不会改变值的表示，那么该值将转换为一个数字（number）。例如，“1E02”和“100.000”是等同于数字（数字值100），但将转换它们会改变他们的表示，所以他们被保留为字符串。字符串值“100”被转换为数字100。</p>
<p>如果数据(data)属性是一个对象（以“{”开始）或数组（以'['开始），可以用<code>jQuery.parseJSON</code> 将其解析成字符串；它必须遵循<a href="http://en.wikipedia.org/wiki/JSON#Data_types.2C_syntax_and_example">有效的JSON的语法</a>，<em>包括带双引号的属性名称</em>。如果该值不能解析为一个JavaScript值，它将被保留为字符串。</p>
<p>如果不想将取出的属性值直接当作字符串的话，请使用<code><a href="/attr">attr()</a></code>方法。</p>
<p>data-属性是在第一次使用这个数据属性后不再存取或改变（所有的数据值都在jQuery内部存储）。</p>
<p>调用 <code>.data()</code> 时如果不带参数，将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中，因为一旦这个新对象被提取出来，之后对元素进行的 <code>.data(obj)</code>操作，将不会再影响这个对象。另外，直接操作这个对象会比每次调用 <code>.data()</code>  来设置或获取值要快一些：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> mydata = $(<span class="string">"#mydiv"</span>).data();</code></div></div><div class="container"><div class="line"><code><span class="keyword">if</span> ( mydata.count &lt; <span class="number">9</span> ) {</code></div></div><div class="container"><div class="line"><code>    mydata.count = <span class="number">43</span>;</code></div></div><div class="container"><div class="line"><code>    mydata.status = <span class="string">"embiggened"</span>;</code></div></div><div class="container"><div class="line"><code>}</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>Additional Notes:（其他注意事项：）</h3>
<div class="longdesc"><ul>
<li>注意这个方法目前并不提供在XML文档上跨平台设置，作为Internet Explorer不允许通过自定义属性附加数据。</li>
</ul></div>
<section class="entry-examples" id="entry-examples-1"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-1-0">
<h4><span class="desc">获取存放在元素上的名为 "blah" 的数据。</span></h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
<div class="line n38">38</div>
<div class="line n39">39</div>
<div class="line n40">40</div>
<div class="line n41">41</div>
<div class="line n42">42</div>
<div class="line n43">43</div>
<div class="line n44">44</div>
<div class="line n45">45</div>
<div class="line n46">46</div>
<div class="line n47">47</div>
<div class="line n48">48</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">5</span>px;</span></span> <span class="rule"><span class="attribute">background</span>:<span class="value">yellow;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">button</span> <span class="rules">{ <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">5</span>px;</span></span> <span class="rule"><span class="attribute">font-size</span>:<span class="value"><span class="number">14</span>px;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">p</span> <span class="rules">{ <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">5</span>px;</span></span> <span class="rule"><span class="attribute">color</span>:<span class="value">blue;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">span</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">div</span>&gt;</span>A div<span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">button</span>&gt;</span>Get "blah" from the div<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">button</span>&gt;</span>Set "blah" to "hello"<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">button</span>&gt;</span>Set "blah" to 86<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">button</span>&gt;</span>Remove "blah" from the div<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">p</span>&gt;</span>The "blah" value of this div is <span class="tag">&lt;<span class="title">span</span>&gt;</span>?<span class="tag">&lt;/<span class="title">span</span>&gt;</span><span class="tag">&lt;/<span class="title">p</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"button"</span>).click(<span class="keyword">function</span>(e) {</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">var</span> value;</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="keyword">switch</span> ($(<span class="string">"button"</span>).index(<span class="keyword">this</span>)) {</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">case</span> <span class="number">0</span> :</code></div></div><div class="container"><div class="line"><code>      value = $(<span class="string">"div"</span>).data(<span class="string">"blah"</span>);</code></div></div><div class="container"><div class="line"><code>      <span class="keyword">break</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">case</span> <span class="number">1</span> :</code></div></div><div class="container"><div class="line"><code>      $(<span class="string">"div"</span>).data(<span class="string">"blah"</span>, <span class="string">"hello"</span>);</code></div></div><div class="container"><div class="line"><code>      value = <span class="string">"Stored!"</span>;</code></div></div><div class="container"><div class="line"><code>      <span class="keyword">break</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">case</span> <span class="number">2</span> :</code></div></div><div class="container"><div class="line"><code>      $(<span class="string">"div"</span>).data(<span class="string">"blah"</span>, <span class="number">86</span>);</code></div></div><div class="container"><div class="line"><code>      value = <span class="string">"Stored!"</span>;</code></div></div><div class="container"><div class="line"><code>      <span class="keyword">break</span>;</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">case</span> <span class="number">3</span> :</code></div></div><div class="container"><div class="line"><code>      $(<span class="string">"div"</span>).removeData(<span class="string">"blah"</span>);</code></div></div><div class="container"><div class="line"><code>      value = <span class="string">"Removed!"</span>;</code></div></div><div class="container"><div class="line"><code>      <span class="keyword">break</span>;</code></div></div><div class="container"><div class="line"><code>  }</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  $(<span class="string">"span"</span>).text(<span class="string">""</span> + value);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article> </div>
</article>