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. [ES6] Extends class in ES6 vs ES5 subclass

    ES6 class with extends and super: class Tree { constructor(size = ', leaves = {spring: 'green', summ ...

  2. 让checkbox不选中

    今天在做项目的时候.遇到一个问题.须要把选中的checkbox置空,即将选中的checkbox不选中. 最后,发现一个方法非常好使,特此记录. $("input[type='checkbox ...

  3. POJ--2516--Minimum Cost【最小费用最大流】

    链接:http://poj.org/problem?id=2516 题意:有k种货物,n个客户对每种货物有一定需求量,有m个仓库.每一个仓库里有一定数量的k种货物.然后k个n*m的矩阵,告诉从各个仓库 ...

  4. [BZOJ1645][Usaco2007 Open]City Horizon 城市地平线 线段树

    链接 题意:N个矩形块,交求面积并. 题解 显然对于每个 \(x\),只要求出这个 \(x\) 上面最高的矩形的高度,即最大值 将矩形宽度离散化一下,高度从小到大排序,线段树区间set,然后求和即可 ...

  5. thinkphp5空控制器和空操作

    thinkphp5空控制器和空操作 一.总结 1.空控制器和空操作用:空控制器和空操作都是为了防止网站上的用户恶意输入,网站上线的话必须加上, 2.空操作:空操作就是在一般的控制器里面加上一个 _em ...

  6. [TS] Parse a string to an integer

    A common interview question is to write
 a
function
that
converts
 a
 string
into
an
integer e.g. &q ...

  7. ImportError: No module named tornado.ioloop 记录过程

    ImportError: No module named tornado.ioloop 记录过程 安装 pycurl    pip install pycurl 报错 'curl-config' no ...

  8. android.mk-编译文件学习（转载）

    工作了那么久,都是使用大神们写的脚本机械的编译,对于android.mk根本没去了解过.今天趁着这个机会,在网上搜索了下.虽然依然不是很名白,留做记录,以后真用到了,再深入研究 转载自 http:// ...

  9. Java 函数的参数说

    java函数参数传递的到底是值还是引用对确实容易让人迷糊.而很多时候因为对这个问题的模糊甚至造成一些错误.最常见的说法是基本类型传的是值,对象传的引用.对于基本类型,大家都达成共识,没有什么可以争论的 ...

  10. 5.decltype类型拷贝

    #include <iostream> using namespace std; template <class T> void show(T *p) { //初始化 decl ...