jQuery--复制节点clone()详解

最新推荐文章于 2021-11-24 23:55:15 发布

吴声子夜歌

最新推荐文章于 2021-11-24 23:55:15 发布

阅读量4.9k

点赞数 6

分类专栏： jQuery 文章标签： jQuery 复制节点 clone()

本文链接：https://blog.csdn.net/cold___play/article/details/101927615

版权

jQuery 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了jQuery中的clone()方法，该方法用于复制DOM节点及其子节点、文本节点和属性节点。文章通过实例展示了如何使用此方法复制节点，并讨论了如何复制事件处理程序和附加数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

复制节点

节点复制也是常见的DOM操作，例如，在实现购物车时使用鼠标将商品拖拽到购物车中，商品的拖拽功能就可以使用节点的复制来实现。

在jQuery中提供了clone()方法，用于复制DOM节点（包含节点中的子节点、文本节点和属性节点），其语法格式如下：

$(sselector).clone(includeEvents, [deepEvents])

$(selector)：表示需要复制的节点元素
includeEvents（可选、布尔类型）：表示是否同时复制元素的附加数据和绑定事件，默认为false
deepEvents（可选、布尔类型）：表示是否同时复制元素中的所有子元素的附加数据和绑定事件，参数deepEvents默认与includeEvents一致。

示例1：

$("#shirtDiv").clone(false)//与clone()效果相同
$("#shirtDiv").clone(true)
$("#shirtDiv").clone(true, false)
$("#shirtDiv").clone(false, false)//与clone(false)效果相同
$("#shirtDiv").clone(true, true)//与clone(true)效果相同

示例2：

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>元素及事件的复制-jQuery</title>
	<script type="text/javascript" src="js/jquery-1.x.js">
	</script>
	<style type="text/css">
        #cloneDiv div{display:inline-block; margin:0 3px;}
	</style>
</head>
<body>
	<div id="containerDiv">
      <div id="shirtDiv"> <img src="images/shirt.jpg" width="150px" title="喷绘T恤" /> <br/>
        <span>设计喷绘T恤</span> </div>
      <div>
        <input type="button" value="普通复制" id="normalClone" />
        <input type="button" value="复制事件" id="normalEventClone" />
        <input type="button" value="复制元素及子元素" id="deepClone" />
        <input type="button" value="复制子元素及事件" id="deepEventClone" />
      </div>
      <hr/>
      <div id="cloneDiv"></div>
    </div>
	<script type="text/javascript">
	$(function (e) {
		//为shirtDiv中的span标签附加数据
		$("#shirtDiv span").data("msg", "漫步时尚广场-大卖场");
		//为shirtDiv添加点击事件，在事件中获取div中的span标签的附加数据
		$("#shirtDiv").click(function (){
			alert("shirtDiv被点击" + "附加数据：" + $(this).find("span").data("msg"));
			
		});
		//为shirtDiv中的img添加点击事件
		$("#shirtDiv img").click(function () {
			alert($(this).attr("title"));
		});
		//普通复制
		$("#normalClone").click(function () {
			//清空cloneDiv中的内容
			$("#cloneDiv").empty();
			//仅复制元素的内容，不对元素的事件处理和子元素的附加数据进行复制
			$("#cloneDiv").append($("#shirtDiv").clone(false));
		});
		//元素、事件处理、子元素的事件处理和附加数据同时复制
		$("#normalEventClone").click(function () {
			$("#cloneDiv").append($("#shirtDiv").clone(true));
		});
		//复制元素及事件处理，但不复制子元素事件处理和附加数据
		$("#deepClone").click(function () {
			$("#cloneDiv").append($("#shirtDiv").clone(true, false));
		});
		//元素、事件处理、子元素的事件处理和附加数据同时复制
		$("#deepEventClone").click(function () {
			$("#cloneDiv").append($("#shirtDiv").clone(true, true));
		});
	});
	</script>
</body>
</html>

在这里插入图片描述