mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-08 15:04:05 +08:00
274 lines
23 KiB
HTML
274 lines
23 KiB
HTML
<article class="" id="post-">
|
||
<header class="entry-header">
|
||
<h1 class="entry-title">.clone()</h1>
|
||
<div class="entry-meta">
|
||
所属分类：<span class="category"><a href="/category/manipulation/">DOM 操作</a> > <a href="/category/manipulation/copying/">复制元素</a></span>
|
||
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/clone/" target="_blank">.clone()</a></span>
|
||
</div><!-- .entry-meta -->
|
||
</header><!-- .entry-header -->
|
||
<!-- .entry-header -->
|
||
<div class="entry-content">
|
||
<article class="entry method" id="clone1"><h2 class="section-title">
|
||
<span class="name">.clone( [withDataAndEvents ] )</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="clone-withDataAndEvents">
|
||
<h4 class="name">
|
||
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>.clone( [withDataAndEvents ] )</h4>
|
||
<ul><li>
|
||
<div>
|
||
<strong>withDataAndEvents</strong> (默认: <code>false</code>)</div>
|
||
<div>类型: <a href="/Types/#Boolean">Boolean</a>
|
||
</div>
|
||
<div>
|
||
一个Boolean值，表示是否会复制元素上的事件处理函数。从jQuery 1.4开始，元素数据也会被复制。</div>
|
||
</li></ul>
|
||
</li>
|
||
<li class="signature" id="clone-withDataAndEvents-deepWithDataAndEvents">
|
||
<h4 class="name">
|
||
<span class="version-details">添加的版本: <a href="/category/version/1.5/">1.5</a></span>.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )</h4>
|
||
<ul>
|
||
<li>
|
||
<div>
|
||
<strong>withDataAndEvents</strong> (默认: <code>false</code>)</div>
|
||
<div>类型: <a href="/Types/#Boolean">Boolean</a>
|
||
</div>
|
||
<div>
|
||
一个Boolean值，表示是否会复制元素上的事件处理函数。 默认值是 <code>false</code>。<em>*对于1.5.0的默认值被不适当地设置成了<code>true</code>，将在1.5.1以上改回<code>false</code> 。</em>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
<strong>deepWithDataAndEvents</strong> (默认: <code>value of withDataAndEvents</code>)</div>
|
||
<div>类型: <a href="/Types/#Boolean">Boolean</a>
|
||
</div>
|
||
<div>
|
||
一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。默认情况下它的值相匹配的第一个参数的值（ 默认值是 <code>false</code>）
|
||
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<div class="longdesc" id="entry-longdesc">
|
||
<p><code>.clone()</code>方法<em>深度</em> 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。出于性能方面的考虑，表单元素动态的状态（例如，用户将数据输入到<code>input</code>和 <code>textarea</code>，或者 用户在<code>select</code>中已经选中某一项）不会被复制到克隆元素。克隆操作将设置
|
||
这些字段为HTML中指定的默认值。
|
||
|
||
</p>
|
||
<p>当和插入方法联合使用时，<code>.clone()</code>对于复制页面上的元素很方便。请看下面的HTML：</p>
|
||
<div class="syntaxhighlighter xml 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="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"container"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"hello"</span>></span>Hello<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"goodbye"</span>></span>Goodbye<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">div</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>像我们讨论<code><a href="/append">.append()</a></code>一样，通常我们将页面上一个元素插入到DOM里另立个地方，它会被从老地方移走（注：不是复制）。所以，给定下面的代码：</p>
|
||
<div class="syntaxhighlighter javascript 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="string">'.hello'</span>).appendTo(<span class="string">'.goodbye'</span>);</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>得到的DOM结构如下：</p>
|
||
<div class="syntaxhighlighter xml 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="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"container"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"goodbye"</span>></span></code></div></div><div class="container"><div class="line"><code> Goodbye</code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"hello"</span>></span>Hello<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">div</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>
|
||
但是我们如果需要的是复制而不是移除，我们可以像下面这样写代码：</p>
|
||
<div class="syntaxhighlighter javascript 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="string">'.hello'</span>).clone().appendTo(<span class="string">'.goodbye'</span>);</code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>结果会是：</p>
|
||
<div class="syntaxhighlighter xml 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>
|
||
<div class="line n7">7</div>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"container"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"hello"</span>></span>Hello<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"goodbye"</span>></span></code></div></div><div class="container"><div class="line"><code> Goodbye</code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"hello"</span>></span>Hello<span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">div</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<blockquote>
|
||
<p><strong>注意:</strong>当我们用<code>.clone()</code>方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容。</p>
|
||
</blockquote>
|
||
<p>通常，任何绑定绑定在原始元素上的事件处理函数都<em>不会</em> 被复制到克隆元素。可选的<code>withDataAndEvents </code>参数允许我们改变该默认行为，从而将所有绑定在原始元素上的事件处理函数复制到克隆元素上。对于jQuery 1.4，所有元素数据（ <code>.data()</code>方法返回的内容）同样被复制到新的克隆元素。 </p>
|
||
<p>
|
||
然而，元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个：</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><span class="keyword">var</span> $elem = $(<span class="string">'#elem'</span>).data( <span class="string">"arr"</span>: [ <span class="number">1</span> ] ), <span class="comment">// Original element with attached data</span></code></div></div><div class="container"><div class="line"><code> $clone = $elem.clone( <span class="literal">true</span> )</code></div></div><div class="container"><div class="line"><code> .data( <span class="string">"arr"</span>, $.extend( [], $elem.data(<span class="string">"arr"</span>) ) ); <span class="comment">// Deep copy to prevent data sharing</span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p>在jQuery 1.5，<code>withDataAndEvents</code>可以选择性增强<code>deepWithDataAndEvents</code>复制元素的事件和数据的克隆的所有子元素。</p>
|
||
<blockquote>
|
||
<p><strong>注意:</strong> 使用<code>.clone()</code>可能产生<code>id</code>属性重复的元素的副作用，<code>id</code>应该是唯一的。在可能的情况下，建议，应避免克隆有此属性或标识符的元素，使用类（class）属性代替。</p>
|
||
</blockquote>
|
||
</div>
|
||
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
|
||
<h4>Example: <span class="desc">复制所有 b 元素然后将他们插入到所有段落里面的前面。</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>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="doctype"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">b</span>></span>Hello<span class="tag"></<span class="title">b</span>></span><span class="tag"><<span class="title">p</span>></span>, how are you?<span class="tag"></<span class="title">p</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code> $(<span class="string">"b"</span>).clone().prependTo(<span class="string">"p"</span>);</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></span></code></div></div></pre>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<h4>Demo:</h4>
|
||
<div class="demo code-demo"></div>
|
||
</div>
|
||
<div class="entry-example" id="example-1">
|
||
<h4>Example: <span class="desc">当使用 <code>.clone()</code>克隆一组元素，并且这些克隆生成的元素尚未被添加到 DOM 中，那么当这些元素被插入到 DOM 中时，不能保证是按它们的原顺序被插入的。但是，可以像下面例子中提到的那样，保证顺序的正确性：</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>
|
||
</td>
|
||
<td class="code">
|
||
<pre><div class="container"><div class="line"><code><span class="doctype"><!DOCTYPE html></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">html</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">style</span>></span><span class="css"></span></code></div></div><div class="container"><div class="line"><code> <span class="id">#orig</span>, <span class="id">#copy</span>, <span class="id">#copy-correct</span> <span class="rules">{</span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">float</span>:<span class="value"> left;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">20</span>%;</span></span></code></div></div><div class="container"><div class="line"><code> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">style</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>></span><span class="javascript"></span><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">head</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"orig"</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"elem"</span>></span><span class="tag"><<span class="title">a</span>></span>1<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"elem"</span>></span><span class="tag"><<span class="title">a</span>></span>2<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"elem"</span>></span><span class="tag"><<span class="title">a</span>></span>3<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"elem"</span>></span><span class="tag"><<span class="title">a</span>></span>4<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> <span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"elem"</span>></span><span class="tag"><<span class="title">a</span>></span>5<span class="tag"></<span class="title">a</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"copy"</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"copy-correct"</span>></span><span class="tag"></<span class="title">div</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"><<span class="title">script</span>></span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="comment">// sort order is not guaranteed here and may vary with browser</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">'#copy'</span>).append($(<span class="string">'#orig .elem'</span>)</code></div></div><div class="container"><div class="line"><code> .clone()</code></div></div><div class="container"><div class="line"><code> .children(<span class="string">'a'</span>)</code></div></div><div class="container"><div class="line"><code> .prepend(<span class="string">'foo - '</span>)</code></div></div><div class="container"><div class="line"><code> .parent()</code></div></div><div class="container"><div class="line"><code> .clone());</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// correct way to approach where order is maintained</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">'#copy-correct'</span>)</code></div></div><div class="container"><div class="line"><code> .append($(<span class="string">'#orig .elem'</span>)</code></div></div><div class="container"><div class="line"><code> .clone()</code></div></div><div class="container"><div class="line"><code> .children(<span class="string">'a'</span>)</code></div></div><div class="container"><div class="line"><code> .prepend(<span class="string">'bar - '</span>)</code></div></div><div class="container"><div class="line"><code> .end());</code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">script</span>></span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">body</span>></span></code></div></div><div class="container"><div class="line"><code><span class="tag"></<span class="title">html</span>></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> |