jquery克隆

所有类型节点都会有一个方法就是cloneNode,也就是克隆节点。克隆的操作也是我们常常需要使用的,本来就是一个很简单的接口,但是还是有一些细节问题需要处理。

cloneNode不会复制javascript属性,比如事件,这个方法只会复制特性。当然IE有这个BUG它会复制事件处理程序。cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝。

true:表示执行深拷贝,复制本节点以及整个子节点树。

false:浅拷贝,只复制节点本身。

复制后返回的节点副本属于文档所有,但是并没有父节点。除非使用 appendChild,insertChild(),replaceChild()将它添加到文档。

关于事件的处理

IE旧版会克隆原生的事件,所以我们需要做克隆的时候先移除掉,当然2.1.1版本是不再兼容低级版本了。所以我们考虑的是jQuery体系的处理,因为这里还没有涉及到事件的原理,所以我们暂时先初步理解下,jQuery的事件处理是非常nice的,利用了数据缓存的机制,把数据都缓存在内存中而不直接跟dom元素绑定,这样的好处很多,具体我们在事件交互那一章会超详细讲解。

cloneNode(true)的时候是遍历的节点,但是不会把对应的事件与数据给复制,但是jQuery.clone方法克隆的时候,是会把该节点上的事件与数据给一并复制过去的,这样的机制是建立在数据分离的基础上。简单来说,jQuery在DOM上做了一个uuid的标记,然后把与这个dom相关联的所有数据都放到一个内存区域,通过这个uuid映射,这样我们在深度拷贝 dom 的时候自然也可以把内存的数据给复制一份了,当然这里要注意一个问题,事件是不能被复制的,需要重新绑定了。

因为操作都是跟data_priv与data_user挂钩的所以我模拟的话实现的代码量太大了,这里就直接给大概的流程吧。

首先我们elem.cloneNode(true)直接给这个元素克隆一份,我们要做的就是把克隆后的元素加入事件与数据。

jQuery内部的数据都缓存在data_priv中,包括事件,data_user是提供给用户操作的,用户的数据。

所以就需要把这个2个缓存给找出来然后混入到新的克隆节点中,jQuery都是提供接口data_priv.access,data_priv.set。

值得注意的事件的复制是需要重新jQuery.event.add绑定的,如果节点是有嵌套的话,需要遍历每一个元素节点,在每个节点上都要处理事件与数据。

时间: 2024-10-03 05:34:40

jquery克隆的相关文章

jQuery 克隆对象的简单示例

简单例子  代码如下 复制代码 // 浅层复制(只复制顶层的非 object 元素)  var newObject = jQuery.extend({}, oldObject);    // 深层复制(一层一层往下复制直到最底层)  var newObject = jQuery.extend(true, {}, oldObject); 测试如下: var obj1 = {   'a': 's1',   'b': [1,2,3,{'a':'s2'}],   'c': {'a':'s3', 'b':

克隆合成对象

试图深层复制合成对象时会遇到一个问题.必须假定成员对象中的clone()方法也能依次对自己的句柄进行深层复制,以此类推.这使我们的操作变得复杂.为了能正常实现深层复制,必须对所有类中的代码进行控制,或者至少全面掌握深层复制中需要涉及的类,确保它们自己的深层复制能正确进行. 下面这个例子总结了面对一个合成对象进行深层复制时需要做哪些事情:   //: DeepCopy.java // Cloning a composed object class DepthReading implements C

60个很实用的jQuery代码开发技巧收集_jquery

由于内容比较多建议用CTRL+F搜索 偶然在网上看到这些不错的jQuery代码开发技巧.原文收集了30个,另外查找的时候发现了还有20个.加上另外十个实用的jQuery代码片段,共60个代码技巧,收集在一起分享给大家. 1. 创建一个嵌套的过滤器 .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 2. 重用你的元素查询 var allItems = $("div.item"); var keep

jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点_jquery

什么情况下使用到克隆节点? 我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况.比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位置上的节点被移除了.有的时候需要保留原来位置上的节点,仅仅是需要一个副本添加到对应位置,这个时候克隆就有了使用场景. jQuery.fn.clone克隆当前匹配元素集合的一个副本,并以jQuery对象的形式返回. 你还可以指定是否复制这些匹配元素(甚至它们的子元素)的附加数据( data()函数 )

jQuery 常用代码集锦(必看篇)_jquery

1. 选择或者不选页面上全部复选框 var tog = false; // or true if they are checked on load $('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog; }); 2. 取得鼠标的X和Y坐标 $(document).mousemove(function(e){ $(document).ready(func

《jQuery Cookbook中文版》——1.13 克隆DOM元素

1.13 克隆DOM元素 1.13.1 问题 你需要克隆/复制DOM的一部分. 1.13.2 解决方案 jQuery提供clone()方法复制DOM元素.它的用法很简单,只要用jQuery函数选择DOM元素,然后在选择的元素集上调用clone()方法就可以了.结果是返回用于链接的DOM结构的一个副本,而不是原来选中的DOM元素.在下面的代码中,将克隆一个< ul>元素,然后用插入方法appendTo()将这个副本附加到DOM中.实际上,在页面上插入了与现有的< ul>完全相同的一个

jQuery.extend克隆对象实现方法详解

在What is the most efficient way to clone a JavaScript object?看到jQuery作者John Resig给出的回答是这样的  代码如下 复制代码 // Shallow copy var newObject = jQuery.extend({}, oldObject);   // Deep copy var newObject = jQuery.extend(true, {}, oldObject); 今天发现 jQuery 的作者 Joh

jquery 文档碎片DocumentFragment

文档碎片是什么? 参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的作用.   createDocumentFragment有什么作用 多次使用节点方法(如:appendChild)绘制页面,每次都要刷新页面一次.效率也就大打折扣了,而使用document_createDocumentFragment()创建一个文档碎片,把所有的新结点附加在其上,然后把文档碎片的内容一次性添加到document中,这也就只需要

JQuery常用方法基础教程

Attribute:$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值,参数是map$("img").attr("src","test.jpg"); 给某个元素添加属性/值$("img").attr(