2019-04-21 11:50:48 +08:00

325 lines
27 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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-* AttributesHTML5 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>