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

复制节点

节点复制也是常见的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="data: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>

jQuery--复制节点clone()详解相关推荐

jquery遍历多个li_21个jQuery遍历节点方法详解
本篇教程介绍了21个jQuery遍历节点方法详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 1.children()方法:$('div').children( ...
jQuery的deferred对象详解
阮一峰大神的关于jQuery的deferred对象详解 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...
logback节点配置详解
logback节点配置详解一:根节点 <configuration></configuration> 属性 : debug : 默认为false ,设置为true时,将打印出 ...
jQuery.extend 函数使用详解
jQuery.extend 函数使用详解一.总结一句话总结: jquery $.extend的作用就是:用于将一个或多个对象的内容合并到目标对象:$.extend( target [, objec ...
jQuery Validate验证框架详解
2019独角兽企业重金招聘Python工程师标准>>> 一.导入js库 <script type="text/javascript" src="& ...
jQuery 表单验证插件，jQuery Validation Engine用法详解
jQuery 表单验证插件,jQuery Validation Engine用法详解功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...
atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
atitit.jQuery Validate验证框架详解与ati Validate 设计新特性 1. AtiValidate的目标1 2. 默的认校验规则1 2.1. 使用方式 1.metadata用 ...
最全的jquery datatables api 使用详解
https://www.cnblogs.com/amoniyibeizi/p/4548111.html 最全的jquery datatables api 使用详解学习可参考:http://www.g ...
【转】4.1触碰jQuery：AJAX异步详解
传送门:异步编程系列目录-- 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 X ...

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

复制节点

jQuery--复制节点clone()详解相关推荐

最新文章

热门文章