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. python stomp activemq客户端

    #coding=utf-8import timeimport sysimport stomp class MyListener(object): def on_error(self, headers, ...

  2. 03011_预处理对象executeUpdate方法（实现数据库的增、删、改）

    1.概述 (1)通过预处理对象的executeUpdate方法,完成记录的insert\update\delete语句的执行: (2)操作格式统一如下: ①注册驱动: ②获取连接: ③获取预处理对象: ...

  3. 洛谷——P1137 旅行计划

    https://www.luogu.org/problem/show?pid=1137 题目描述 小明要去一个国家旅游.这个国家有N个城市,编号为1-N,并且有M条道路连接着,小明准备从其中一个城市出 ...

  4. Android SDK使用国内镜像站,解决下载速度慢无法更新？

    1. 国内android开源镜像网站 下面是国内几个比較知名的开源网站.我用的是电子科技大学的镜像源,下载速度很快. mirrors.neusoft.edu.cn //东软信息学院 ubuntu.bu ...

  5. ubuntu搭建交叉编译环境makeinfo: command not found

    解决办法:sudo apt-get install texinfo

  6. log4j.properties配置与加载应用

    log4j.properties总结:   一.介绍 Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务 器 ...

  7. 让ie6 7 8 9支持原生html5 websocket

      让ie6 7 8 9支持原生html5 websocket   从github上的 web-socket-js(socket.io好像也是用这个做的他们的flash替代传输方式)改过来的.不过值得 ...

  8. 15、python学习手册之：python语句、赋值、表达式和打印

    1.语句的另一个特殊规则是用一对括号把语句括起来就可以:括号().方括号[].字典的大括号{}.任何括在这些符号里的程序代码都可横跨好几行. 2.括号是可以包含一切的,因为任何表达式都可以包含在内,只 ...

  9. Python 极简教程（五）输入输出

    输入函数,用于接收键盘输入.主要用于在学习和练习过程中,增加练习的乐趣.让我们的程序相对完整和具备简单的交互能力. 输出函数,将代码运行结果打印在控制台上,同样也能让我们观察程序运行的结果.也是为了增 ...

  10. 【Java并发编程实战】-----“J.U.C”：CLH队列锁

    在前面介绍的几篇博客中总是提到CLH队列,在AQS中CLH队列是维护一组线程的严格依照FIFO的队列.他可以确保无饥饿,严格的先来先服务的公平性.下图是CLH队列节点的示意图: 在CLH队列的节点QN ...