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() 方法来复制元素,包括其事件处理器。