思洋互动网站建设学前班

内容复制
有时需要将DIV中的内容复制出来进行其他操作。在后面的章节中会多次用到这个功能。jQuery进行内容复制使用clone()函数，它将匹配的所有元素复制出来并返回它们。

该函数克隆匹配的DOM元素（及其事件）并且选中这些克隆的副本。其语法形式如下：

1. clone()  
   • clone(true) 

注：设置为true以便复制元素的所有事件处理。

HTML代码和CSS样式参考光盘内容。下面直接看一下JavaScript功能实现：

1. 1<script type="text/javascript"> 
   • 2   $(function(){  
     • 3       $("#update").click(function(){  
       • 4           $("#clonetxt").text($("#div1").children().clone().text());              //复制div1中的子元素，并将其文本填入clonetxt  
         • 5       });  
           • 6   });  
             • 7</script> 

上面的代码实现了单击按钮后将DIV中的复制出来并将其文本内容显示到文本区域内，效果如图3.21所示。

下面将前面的替换函数和这里介绍的复制函数组合起来使用。这个示例所要达到的目的是首先复制出DIV原有内容，然后在复制出来的对象上进行文本替换，再用复制出来的对象替换原有DIV中的内容。实现功能的JavaScript代码如下：

1. 1 <script type="text/javascript"> 
   • 2   $(function(){  
     • 3       $("#update").click(function(){  
       • 4           var txt=$("#clonetxt").text();  
         • 5           $("#div1").children().replaceWith($ ("#div1").children().                clone().text(txt));  //复制div1中的子元素，并用其文本替换掉clonetxt           中的原有内容  
           • 6       });  
             • 7   });  
               • 8 </script> 

 

具体效果如图3.22所示。

图3.21  复制DIV内容

图3.22  用复制内容替换原有内容