1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

jquery克隆

作者:用户 来源:互联网 时间:2016-08-03 10:11:15

jquery数据深度缓存事件节点处理一个克隆用户深度克隆jquery的事件处理克隆方法深克隆jQuery遍历节点jquery克隆节点

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

所有类型节点都会有一个方法就是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绑定的,如果节点是有嵌套的话,需要遍历每一个元素节点,在每个节点上都要处理事件与数据。



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery , 数据 , 深度缓存 , 事件 , 节点 , 处理 , 一个 , 克隆用户 , 深度克隆 , jquery的事件处理 , 克隆方法 , 深克隆 , jQuery遍历节点 jquery克隆节点 jquery克隆对象、jquery克隆元素、jquery、js、jquery克隆节点,以便于您获取更多的相关知识。

jquery-求教一个 jQuery 对象的赋值问题

问题描述 求教一个 jQuery 对象的赋值问题 var $oldObject = scrollobj;//$oldObject scrollobj 这两个都是 jquery对象 scrollobj.find("li:gt(3)").prependTo(scrollobj); scrollobj.find("li:lt(2)").clone().appendTo(scrollobj); ...

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

什么情况下使用到克隆节点?   我们知道在对DOM操作过程中如果直接使用节点会出现节点随操作而变动的情况。比如对节点使用.after/.before/.append等方法后,节点被添加到新的地方,原来的位置上的节点被移除了。有的时候需...

12 个非常实用的 jQuery 代码片段

jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助。1. 导航菜单背景切换效果在项目的前端页面里,相对于其它的导航菜单,...

Rails学习笔记(5)

接上一篇Rails学习笔记(4),继续学习rails吧。关于git的使用(update+)上一篇Rails学习笔记(4)中提到了关于git的一些简单的&常用的指令,其中提到了一些使用过程中遇到的问题和解决办法,现在就这些问题做一个简单的explain...

节点克隆

对于克隆节点最长用的方法有两种,一、原生JavaScript。 二、使用流行类库。这篇文章里我会说下使用原生Javascript方法和jQuery方法克隆节点。以及,两者的异同点。好了,废话也不多说了,进入主题。。 在说两种实现克隆节点...

前三篇
后三篇