小码哥的IT人生

首页 > JS > jQuery

jQuery 文档操作 - clone() 方法 概述

jQuery 2022-06-01 15:24:08小码哥的IT人生shichen

jQuery 文档操作 - clone() 方法

实例

克隆并追加一个 p 元素:

$("button").click(function(){
  $("body").append($("p").clone());
});

完整实例:

<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.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>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

定义和用法

clone() 方法生成被选元素的副本,包含子节点、文本和属性。

语法

$(selector).clone(includeEvents)
参数 描述
includeEvents

可选。布尔值。规定是否复制元素的所有事件处理。

默认地,副本中不包含事件处理器。

亲自试一试 - 实例

完整实例【复制一个元素,包括事件处理器】:

<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p:first").clone(true));
  });
  $("p").click(function(){
    $(this).animate({fontSize:"+=1px"});
  });
});
</script>
</head>
<body>
<p>点击本段落可以增加文本的大小。事件处理器同样被复制到新的段落。</p>
<button>复制每个 p 元素,然后追加到 body 元素</button>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

使用 clone() 方法来复制元素,包括其事件处理器。

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024