节点复制也是常见的DOM操作,例如,在实现购物车时使用鼠标将商品拖拽到购物车中,商品的拖拽功能就可以使用节点的复制来实现。
在jQuery中提供了clone()方法,用于复制DOM节点(包含节点中的子节点、文本节点和属性节点),其语法格式如下:
$(sselector).clone(includeEvents, [deepEvents]) $(selector):表示需要复制的节点元素includeEvents(可选、布尔类型):表示是否同时复制元素的附加数据和绑定事件,默认为falsedeepEvents(可选、布尔类型):表示是否同时复制元素中的所有子元素的附加数据和绑定事件,参数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>