5-1 DOM拷贝clone()
本节编程练习不计算学习进度，请电脑登录imooc.com操作

DOM拷贝clone()

克隆节点是DOM的常见操作，jQuery提供一个clone方法，专门用于处理dom的克隆

.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

clone方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了

例如：

HTML部分
<div></div>

JavaScript部分
$("div").on('click', function() {//执行操作})

//clone处理一
$("div").clone()   //只克隆了结构，事件丢失

//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

使用上就是这样简单，使用克隆的我们需要额外知道的细节：

任务

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title></title>
  7.     <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  8.     <style>
  9.     .left,
  10.     .right {
  11.         width: 300px;
  12.         height: 120px;
  13.     }
  14.  
  15.     .left div,
  16.     .right div {
  17.         width: 100px;
  18.         height: 90px;
  19.         padding: 5px;
  20.         margin: 5px;
  21.         float: left;
  22.         border: 1px solid #ccc;
  23.         background: #bbffaa;
  24.     }
  25.     </style>
  26. </head>
  27.  
  28. <body>
  29.     <h2>通过clone克隆元素</h2>
  30.     <div class="left">
  31.         <div class="aaron1">点击,clone浅拷贝</div>
  32.         <div class="aaron2">点击,clone深拷贝,可以继续触发创建</div>
  33.     </div>
  34.     <script type="text/javascript">
  35.         //只克隆节点
  36.     	//不克隆事件
  37. 	    $(".aaron1").on('click', function() {
  38. 	        $(".left").append( $(this).clone().css('color','red') )
  39. 	    })
  40.     </script>
  41.  
  42.     <script type="text/javascript">
  43.     	//克隆节点
  44.     	//克隆事件
  45. 	    $(".aaron2").on('click', function() {
  46.             console.log(1)
  47. 	        $(".left").append( $(this).clone(true).css('color','blue') )
  48. 	    })
  49.     </script>
  50. </body>
  51.  
  52. </html>
  53.  
下一节