Jquery浅克隆与深克隆是什么

一、总结

一句话总结：克隆的那些标签内容就是对应元素的html，事件就是那些绑定的事件。

1、jquery克隆的时候的注意事项是什么？

元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。

二、Jquery浅克隆与深克隆

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

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

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

例如：

HTML部分

<div></div>

JavaScript部分

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

//clone处理一

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

//clone处理二

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

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

  • clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容，如右边代码我 $(this).clone().css('color','red') 增加了一个颜色
  • 通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上
  • clone()方法是jQuery扩展的，只能处理通过jQuery绑定的事件与数据
  • 元素数据（data）内对象和数组不会被复制，将继续被克隆元素和原始元素共享。深复制的所有数据，需要手动复制每一个
<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

    <style>

    .left,

    .right {

        width: 300px;

        height: 120px;

    }

    .left div,

    .right div {

        width: 100px;

        height: 90px;

        padding: 5px;

        margin: 5px;

        float: left;

        border: 1px solid #ccc;

        background: #bbffaa;

    }

    </style>

</head>

<body>

    <h2>通过clone克隆元素</h2>

    <div class="left">

        <div class="aaron1">点击,clone浅拷贝</div>

        <div class="aaron2">点击,clone深拷贝,可以继续触发创建</div>

    </div>

    <script type="text/javascript">

        //只克隆节点

        //不克隆事件

        $(".aaron1").on('click', function() {

            $(".left").append( $(this).clone().css('color','red') )

        })

    </script>

    <script type="text/javascript">

        //克隆节点

        //克隆事件

        $(".aaron2").on('click', function() {

            console.log(1)

            $(".left").append( $(this).clone(true).css('color','blue') )

        })

    </script>

</body>

</html>
 

Jquery浅克隆与深克隆是什么的更多相关文章

  1. Jquery浅克隆与深克隆

    Jquery浅克隆与深克隆 JavaScript部分 $("div").on('click', function() {//执行操作}) //clone处理一 $("di ...

  2. c#:浅克隆和深克隆，序列化和反序列化

    一.浅克隆和深克隆(浅复制和深复制)浅克隆和深克隆最典型的应用是数据集对象DataSet的Clone和Copy方法.Clone()方法用来复制DataSet的结构,但是不复制DataSet的数据,实现 ...

  3. 【Java一看就懂】浅克隆和深克隆

    一.何为克隆 在Java的体系中,数据类型分为基本数据类型和引用数据类型. 基本数据类型包括byte,short,int,long,float,double,boolean,char 8种,其克隆可通 ...

  4. js的浅克隆和深克隆

    谈一谈个人对js浅克隆和深克隆的区别. 之前也看到很多博客在写,当然也有写的非常好的,但是个人觉得既然要分享就不要写的太深奥,尽量以简单易懂为主. 浅克隆其实就是 对象A = 对象B:如果改变了对象B ...

  5. 深入理解Java的浅克隆与深克隆

    前言 克隆,即复制一个对象,该对象的属性与被复制的对象一致,如果不使用Object类中的clone方法实现克隆,可以自己new出一个对象,并对相应的属性进行数据,这样也能实现克隆的目的. 但当对象属性 ...

  6. Java必备技能：clone浅克隆与深克隆

    介绍 一直以来只知道Java有clone方法,该方法属于Object的,对于什么是浅克隆与深克隆就比较模糊了,现在就来补充学习一下. 概念 浅拷贝(浅克隆)复制出来的对象的所有变量都含有与原来的对象相 ...

  7. Java的浅克隆与深克隆

    前言 克隆,即复制一个对象,该对象的属性与被复制的对象一致,如果不使用Object类中的clone方法实现克隆,可以自己new出一个对象,并对相应的属性进行数据,这样也能实现克隆的目的. 但当对象属性 ...

  8. java浅克隆和深克隆，序列化和反序列化实现深克隆（封装序列化和反序列化操作）

    本篇博客内容: 一.浅克隆(ShallowClone)和深克隆(DeepClone) 二.序列化和反序列化实现深克隆 三.封装序列化和反序列化操作 ObjectOutputStream + 内存流By ...

  9. 【C#】浅克隆和深克隆的区别和在C#中的体现形式

    前言:我们知道对象分引用类型和值类型. 浅克隆:复制一个现有对象,引用类型指向同一个内存块(string为最特殊的对象,这里当作值类型来看先) public class User { public i ...

随机推荐

  1. STM32上使用JSON

    一.STM32工程中添加JSON 最近在一网2串项目,串口和网口之间可能需要定义一下简单的通信协议,而通信协议上则需要去定义一下通信的数据格式,上次听剑锋说要用Json来定义,目前查了下资料具体如何去 ...

  2. ArcGIS “Error HRESULT E_FAIL has been returned from a call to a COM component.” 异常的解决

    错误提示内容: {System.Runtime.InteropServices.COMException (0x80004005): Error HRESULT E_FAIL has been ret ...

  3. C++怎么访问私有变量和函数

    用指针呀,了解C++内存结构的话. 1. 对于私有成员变量,可以用指针来访问. 2. 对于虚函数,也可以用指针来访问. 3. 另外,对于私有成员,如果摸不准地址构造,可以先构造一个结构相似的类,然后增 ...

  4. thinkphp杂项功能（主干）

    thinkphp杂项功能(主干) 一.总结 1.杂项功能:杂项里面我需要有点印象的是五个:缓存,多语言,图像处理,文件处理,单元测试 二.thinkphp杂项功能(主干) thinkphp扩展杂项功能 ...

  5. 可变参数的实现my_sprintf

    #include "stdafx.h" #include <stdio.h> #include <stdarg.h> void my_sprintf(cha ...

  6. 从数据库中生成XML文件

    前台页面<%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...

  7. COGS——T 2057. [ZLXOI2015]殉国

    http://cogs.pro/cogs/problem/problem.php?pid=2057 ★☆   输入文件:BlackHawk.in   输出文件:BlackHawk.out   评测插件 ...

  8. 图像处理 Mine

    1)中值滤波:排序取中间值.作用:去噪点 1.1)均值滤波; 1.2)高斯模糊:执行高斯模糊,然后改混合模式,改成叠加.柔光或者深色.就能得到平滑而不模糊的效果. 2)腐蚀.膨胀:开运算(腐蚀后膨胀) ...

  9. Java Web学习总结（17）——JSP属性范围

    所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...

  10. HDU 2577 How to Type (线性dp)

    How to Type Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...