jQuery 的 clone() 方法用于复制（克隆）DOM 元素，可选择是否复制元素的事件绑定和子元素的事件，是动态生成重复元素、保留元素状态的核心方法，下面结合参数说明和示例详细讲解。
该方法用于创建匹配元素的副本（包括元素本身、属性、子内容），副本可重新插入 DOM 中，与原元素独立。
语法：
$(目标元素).clone(是否复制事件, 是否深度复制事件)参数：
Even：是否复制元素本身的事件绑定（如 click、hover 等）；
deepEven：是否复制元素的子元素 / 后代元素的事件绑定（若省略，默认与第一个参数值一致）。
存在如下 HTML 代码：
<div class="container container_src">
<div class="inner inner_row1">
<label class="clickMe">Click Me</label>
</div>
<div class="inner inner_row2">Goodbye</div>
</div>效果如下：
<div class="container container_dest"></div>
<script>
$(function(){
$(".inner_row1").click(function(){
// 输出日志
log.info('点击了【Click Me】父容器');
});
$(".clickMe").click(function(event){
// 阻止冒泡到父级容器
event.stopPropagation();
log.info('点击了【Click Me】元素');
});
$(".inner_row2").click(function(){
// 输出日志
log.info('点击了【Goodbye】');
});
});
</script>运行如下 jQuery 代码：
$('.container_dest').append(
'<p>clone() 不复制事件</p>',
$('.container_src .inner').clone()
);效果如下：
<div class="container container_src">
<div class="inner inner_row1">
<label class="clickMe">Click Me</label>
</div>
<div class="inner inner_row2">Goodbye</div>
</div>
<div class="container container_dest">
<p>clone() 不复制事件</p>
<div class="inner inner_row1">
<label class="clickMe">Click Me</label>
</div>
<div class="inner inner_row2">Goodbye</div>
</div>此时，我们点击复制后的元素，没有触发任何事件。运行效果如下图：
存在如下 HTML 代码：
<div class="container container_src">
<div class="inner inner_row1">
<label class="clickMe">Click Me</label>
</div>
<div class="inner inner_row2">Goodbye</div>
</div>
<div class="container container_dest"></div>
<script>
$(function(){
$(".inner_row1").click(function(){
// 输出日志
log.info('点击了【Click Me】父容器');
});
$(".clickMe").click(function(event){
// 阻止冒泡到父级容器
event.stopPropagation();
log.info('点击了【Click Me】元素');
});
$(".inner_row2").click(function(){
// 输出日志
log.info('点击了【Goodbye】');
});
});
</script>运行如下 jQuery 代码：
$('.container_dest').append(
'<p>clone(true) 复制事件</p>',
$('.container_src .inner').clone(true)
);效果如下：
<div class="container container_src">
<div class="inner inner_row1">
<label class="clickMe">Click Me</label>
</div>
<div class="inner inner_row2">Goodbye</div>
</div>
<div class="container container_dest">
<p>clone(true) 复制事件</p>
<div class="inner inner_row1">
<label class="clickMe">Click Me</label>
</div>
<div class="inner inner_row2">Goodbye</div>
</div>此时，我们点击复制后的元素，将会触发事件。运行效果如下图：
下面通过表格对 clone() 的参数进行对比：
| 参数写法 | 是否复制自身事件 | 是否复制子元素事件 | 适用场景 |
|---|---|---|---|
clone() | ❌ 否 | ❌ 否 | 仅复用元素结构，无需事件 |
clone(true) | ✅ 是 | ✅ 是 | 完全复用元素（结构 + 所有事件） |
clone(true, false) | ✅ 是 | ❌ 否 | 仅保留自身事件，子元素事件重置 |
注意：
（1）独立 DOM 节点：克隆后的元素与原元素无关联，修改副本不会影响原元素。
（2）重复 ID 处理：若原元素有 id 属性，克隆后需手动修改副本的 id（避免页面 ID 重复）。
（3）表单值保留：克隆表单元素（如 input、select）时，会保留当前的输入值 / 选中状态。
（4）jQuery 版本兼容：jQuery 1.5+ 支持 deepEven 参数，低版本仅支持单个 Even 参数。
下面示例通过“点击自己动手试一试”可以尝试各种方法的效果：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 引入 loglevel 库，方便在 DOM 中打印日志 -->
<script src="https://www.hxstrive.com/preview_code/libs/custom_loglevel.js"></script>
<style>
button { background: #EEE !important; border: 1px solid #ccc !important;
min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; }
h3 { font-size: 18px; }
.container { border: 1px solid blue; padding: 10px; margin: 10px 0; }
.inner { border: 1px solid red; padding: 10px; margin: 5px; }
.clickMe { background: rgb(125, 248, 125); padding: 2px 30px; }
</style>
</head>
<body>
<div class="app">
<h3>复制</h3>
<div class="container container_src">
<div class="inner inner_row1">
<label class="clickMe">Click Me</label>
</div>
<div class="inner inner_row2">Goodbye</div>
</div>
<div class="container container_dest"></div>
</div>
<div>
<!-- clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。 -->
<button type="button" onclick="
$('.container_dest').append(
'<p>clone() 不复制事件</p>',
$('.container_src .inner').clone()
);
">clone()</button>
<button type="button" onclick="
$('.container_dest').append(
'<p>clone(true) 复制事件</p>',
$('.container_src .inner').clone(true)
);
">clone(true)</button>
<button type="button" onclick="
$('.container_dest').append(
'<p>clone(true) 深度复制事件</p>',
$('.container_src .inner').clone(true, false)
);
">clone(true, false)</button>
</div>
<script>
$(function(){
$(".inner_row1").click(function(){
// 输出日志
log.info('点击了【Click Me】父容器');
});
$(".clickMe").click(function(event){
// 阻止冒泡到父级容器
event.stopPropagation();
log.info('点击了【Click Me】元素');
});
$(".inner_row2").click(function(){
// 输出日志
log.info('点击了【Goodbye】');
});
});
</script>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098