jQuery 文档操作 - clone() 方法

最新推荐文章于 2023-06-16 20:53:39 发布

生活中的思索

最新推荐文章于 2023-06-16 20:53:39 发布

阅读量1.2k

点赞数

文章标签： jquery clone 文档表单数据

本文链接：https://blog.csdn.net/qq_35864642/article/details/77942483

版权

clone( [withDataAndEvents ] ):创建一组匹配元素的深层副本
withDataAndEvents :一个布尔值，指示是否应复制克隆元素的所有子代的事件处理程序和数据。默认情况下，它的值与第一个参数的值匹配（默认值为false）。

clone（）方法执行匹配元素集的深层拷贝，这意味着它会复制匹配的元素以及其所有后代元素和文本节点。

注意：出于性能原因，某些表单元素（例如，输入到文本区域的用户数据和对选择进行的用户选择）的动态状态不会复制到克隆元素。当克隆输入元素时，元素的动态状态（例如，键入文本输入的用户数据和对复选框进行的用户选择）保留在克隆的元素中。

当与其中一种插入方法结合使用时，.clone（）是一种方便的方法来复制页面上的元素。

注意：使用.clone（）方法时，您可以修改克隆的元素或其内容，然后再将其重新插入到文档中。

通常，绑定到原始元素的任何事件处理程序都不会复制到克隆中。可选的withDataAndEvents参数允许我们更改此行为，而是将所有事件处理程序的副本绑定到元素的新副本。从jQuery 1.4开始，所有元素数据（由.data（）方法附加）也被复制到新的副本。

但是，元素数据中的对象和数组不会被复制，并将继续在克隆元素和原始元素之间共享。

从jQuery 1.5开始，withDataAndEvents可以通过deepWithDataAndEvents任意增强，以复制克隆元素的所有子代的事件和数据。

注意：使用.clone（）具有生成具有重复id属性的元素的副作用，它们应该是唯一的。在可能的情况下，建议您避免使用此属性克隆元素，或使用类属性作为标识符。

实例：
克隆所有b个元素（并选择克隆），并将其添加到所有段落

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clone demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<b>Hello</b><p>, how are you?</p>

<script>
$( "b" ).clone().prependTo( "p" );
</script>

</body>
</html>

实例：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").clone());
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>复制每个 p 元素，然后追加到 body 元素</button>
</body>
</html>

生活中的思索

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 文档操作 - clone() 方法

clone( [withDataAndEvents ] ):创建一组匹配元素的深层副本 withDataAndEvents :一个布尔值，指示是否应复制克隆元素的所有子代的事件处理程序和数据。默认情况下，它的值与第一个参数的值匹配（默认值为false）。clone（）方法执行匹配元素集的深层拷贝，这意味着它会复制匹配的元素以及其所有后代元素和文本节点。注意：出于性能原因，某些表单元素（例如，输入到
复制链接

扫一扫