jQuery | clone() 示例

简介

.clone() 方法可以用于复制一个 jQuery 对象。复制的对象包含原对象的所有子元素、文本和属性，但不包括事件监听和数据缓存。

语法

$(selector).clone([withDataAndEvents], [deepWithDataAndEvents])

• withDataAndEvents：可选，布尔值，指定是否同时复制元素上的数据和事件处理程序。默认为 false。
• deepWithDataAndEvents：可选，布尔值，指定是否同时复制元素上的所有子节点的数据和事件处理程序。默认为 false。

示例

HTML：

<div id="original">
  <h2>Title</h2>
  <p>Content</p>
</div>

JavaScript：

// 复制元素并添加到文档中
var $copy = $('#original').clone().appendTo('body');

// 修改复制品的内容
$copy.find('h2').text('Modified Title');

这段代码首先使用 .clone() 方法复制了 #original 元素，并将复制品添加到了文档中。然后，使用 .find() 方法找到复制品中的 h2 元素，并修改了其文本。

最终，在文档中会有两个相同的元素，其中一个元素的标题被修改了。

注意事项

• 如果要复制元素及其事件处理程序，需要将 withDataAndEvents 参数设置为 true。
• 如果要复制所有子节点及其事件处理程序，需要将 deepWithDataAndEvents 参数设置为 true。
• 注意在复制后处理事件处理程序可能会影响源元素的事件处理程序，因为它们共享相同的事件处理程序。