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. 怎样扩展Chromium各层的接口

    加入新功能时,可能须要添加各层的接口,接口怎样加?必定须要向Chromium的原则看齐. 首先Chromium的模块设计遵循依赖倒置原则,上层模块依赖于低层模块.低层模块不会依赖上层模块的实现. 再者 ...

  2. 【hadoop之翊】——CentOS6.5 Linux上面编译Hadoop2.4源代码

    今天来说说编译hadoop源代码的事情吧~ 1.首先下载源代码 地址:http://mirror.bit.edu.cn/apache/hadoop/common/hadoop-2.4.0/ 2.加压t ...

  3. hdu 1384 Intervals (差分约束)

    /* 给你 n 个区间 [Ai, Bi],要求从每一个区间中至少选出 Ci 个数出来组成一个序列 问:满足上面条件的序列的最短长度是多少? 则对于 不等式 f(b)-f(a)>=c,建立 一条 ...

  4. 使用框架的php假设使用定时服务Cronjob

    工作须要用php开发了个监控的小程序,既然是监控就须要定时运行. 之前我用的是chrome加个定时刷新的小插件,放在server上执行.也能实现,就是别扭. 通用正规的做法应该是:linux上的Cro ...

  5. js21---单体（单例）模式

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. vim-大小写装换

    以下内容参考自 http://blog.csdn.net/yangzhongxuan/article/details/8484167 自己验证了效果 命令一:单个字符转换(光标所在位置的字母进行转换) ...

  7. Zabbix监控Tomcat,Redis

    一 Tomcat监控 1.1.1 Tomcat 端配置 JMX 编辑catalina.sh文件,配置如下: CATALINA_OPTS="$CATALINA_OPTS -Dcom.sun.m ...

  8. android audio

    package com.javacodegeeks.android.audiocapturetest; import java.io.IOException; import android.media ...

  9. 【习题 7-2 UVA-225】Golygons

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 暴力枚举每次走哪里就好. 用一个二维数组来判重.(数据里,要求不能经过一个点两次->但路径可以相交 然后再用一个flag数组, ...

  10. 移动mm 话费支付接入过程（ane）

    下面记录移动mm 话费支付接入的过程 1.强联网.弱联网差别.sdk是否有区分?用户体验部分由什么不同和差异? 差别在于强联网是网络通道(wifi/gprs/3g),弱联网是走短信通道,用户层面差异在 ...