uTools-Manuals/docs/jQuery/removeData.html

93 lines
9.7 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">.removeData()</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/removeData/" target="_blank">.removeData()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="removeData1"><h2 class="section-title">
<span class="name">.removeData( [name ] )</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="removeData-name">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.2.3/">1.2.3</a></span>.removeData( [name ] )</h4>
<ul><li>
<div><strong>name</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>要移除的存储数据名.</div>
</li></ul>
</li>
<li class="signature" id="removeData-list">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.7/">1.7</a></span>.removeData( [list ] )</h4>
<ul><li>
<div><strong>list</strong></div>
<div>类型: <a href="/Types/#Array,String">Array,String</a>
</div>
<div>一个数组或空间分隔的字符串命名要删除的数据块。</div>
</li></ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>
<code>.removeData()</code>方法允许我们移除用<code>.data()</code>绑定的值。当带name参数调用的时候<code>.removeData()</code>将删除那个特有的值当不带任何参数的时候所有的值将被移除。从jQuery的内部<code>.data()</code> 缓存不影响任何在文档中的HTML5的<code>data-</code>属性,使用<code>.removeAttr()</code>可以移除这些属性。</p>
<p>当使用<code>.removeData("name")</code>如果没有这个属性名字是在内部数据缓存jQuery将试图在元素上找到一个 <code>data-</code>的属性。为了避免重复查询 <code>data-</code> 属性,将这个名称设置为无论是<code>null</code><code>undefined</code>的值(例如 <code>.data("name", undefined)</code>),而不是使用<code>.removeData()</code></p>
<p><strong>从jQuery 1.7开始</strong>, 当所谓的键数组或一个空间分隔键的字符串,<code>.removeData()</code>删除在该数组或字符串的每一个键值。</p>
<p><strong>至于jQuery 1.4.3</strong>,调用的<code>.removeData()</code>将导致属性值被删除恢复到DOM中的名称相同的数据属性的值而不是设置<code>undefined</code></p>
</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">Set a data store for 2 names then remove one of them.</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>
</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">2</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>value1 before creation: <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">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span>value1 after creation: <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">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span>value1 after removal: <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">div</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">div</span>&gt;</span>value2 after removal: <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">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> </code></div></div><div class="container"><div class="line"><code> $(<span class="string">"span:eq(0)"</span>).text(<span class="string">""</span> + $(<span class="string">"div"</span>).data(<span class="string">"test1"</span>));</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).data(<span class="string">"test1"</span>, <span class="string">"VALUE-1"</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).data(<span class="string">"test2"</span>, <span class="string">"VALUE-2"</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"span:eq(1)"</span>).text(<span class="string">""</span> + $(<span class="string">"div"</span>).data(<span class="string">"test1"</span>));</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).removeData(<span class="string">"test1"</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"span:eq(2)"</span>).text(<span class="string">""</span> + $(<span class="string">"div"</span>).data(<span class="string">"test1"</span>));</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"span:eq(3)"</span>).text(<span class="string">""</span> + $(<span class="string">"div"</span>).data(<span class="string">"test2"</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">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>