jquery源码解析(第2章之移除)
来源:互联网 发布:vs打开数据库代码 编辑:程序博客网 时间:2024/05/29 04:53
涉及节点删除的接口jQuery划分了四个分别是detach,empty,remove,unwrap,因为使用的范围不同,所以功能有所差异,但是总的来说都是用来清理节点的。
innerText是我们常用的文本清理方法,但是火狐下不兼容,不过会提供一个类似的方法叫textContent。
innerText和textContent 两者还是有一些区别的,总结如下。
IE中的innerText是需要对innerHTML的值进行:
1. HTML转义(等同于XML转义,对<、&等转义字符进行处理); 2. 经过HTML解释和CSS样式解释; 3.之后又剔除格式信息; 4.之后留下的纯文本。
而FF中的textContent没有2、3步,在经过了HTML转义之后直接剔除所有html标签后得到的纯文本,我们在接着看下就jQuery对节点清除的具体封装。
.empty()
从DOM中移除集合中匹配元素的所有子节点,为了避免内存泄漏,jQuery先移除子元素的数据和事件处理函数,然后移除子元素。
empty: function() { var elem, i = 0; for (; (elem = this[i]) != null; i++) { if (elem.nodeType === 1) { jQuery.cleanData(getAll(elem, false)); elem.textContent = ""; } } return this;}
jQuery是合集元素,所以我们遍历下this[i],然后直接把元素的textContent清空即可,但是需要注意jQuery.cleanData方法,清除节点不单单只有元素,还有附加在上面的事件处理与数据缓存。
jQuery.cleanData方法,就是通过元素判断上绑定的expando的这个uuid在与之对应的cache中找到数据与事件句柄加以删除。
.remove()
.remove() 将元素移出DOM,当我们想将元素自身移除时我们用 .remove(),同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。
remove: function(selector, keepData /* Internal Use Only */ ) { var elem, elems = selector ? jQuery.filter(selector, this) : this, i = 0; for (; (elem = elems[i]) != null; i++) { if (!keepData && elem.nodeType === 1) { jQuery.cleanData(getAll(elem)); } if (elem.parentNode) { if (keepData && jQuery.contains(elem.ownerDocument, elem)) { setGlobalEval(getAll(elem, "script")); } elem.parentNode.removeChild(elem); } } return this;}
remove是empty的加强版,把本身的父节点也清除掉了。因为remove支持过滤器所以支持传递selecor。remove需要删除自身及其所有的子元素包括事件与数据,所以要通过找到父节点parnetNode移除。
.detach()
如果你想删除元素,不破坏他们的数据或事件处理程序(这些绑定的信息还可以在之后被重新添加回来)。.detach() 方法和.remove()一样, 除了 .detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素,不久又将该元素插入DOM时,这种方法很有用。
detach: function(selector) { return this.remove(selector, true); }
这个方法也很简单,意味着这要暂时移除节点,但是不销毁对应的事件与数据,在remove方法中支持传递布尔值用来处理这个cleanData的过滤。
<!doctype html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <title>DOM删除</title></head><body><button id="test1">empty操作</button><button id="test2">remove操作</button><div class="container"> <div class="empty">empty</div> <div class="remove">remove</div> <div class="goodbye">Goodbye</div></div><script type="text/javascript"> function empty() { var elem, i = 0; for (; (elem = this[i]) != null; i++) { if (elem.nodeType === 1) { elem.textContent = ""; //文本清理 } } return this; } function remove(selector, keepData /* Internal Use Only */ ) { var elem,i = 0; for (; (elem = this[i]) != null; i++) { if (elem.parentNode) { elem.parentNode.removeChild(elem); } } return this; } $('#test1').click(function() { var elem = document.querySelectorAll('.empty') empty.call(elem) }) $('#test2').click(function() { var elem = document.querySelectorAll('.remove') remove.call(elem) })</script></body></html>
- jquery源码解析(第2章之移除)
- jquery源码解析(第2章之文档碎片DocumentFragment)
- jquery源码解析(第2章之插入)
- jquery源码解析(第2章之外部插入)
- jquery源码解析(第3章元素之元素大小)
- jquery源码解析(第3章元素之尺寸获取)
- jquery源码解析(第3章元素之偏移算法)
- jquery源码解析(第3章元素之坐标算法)
- jquery源码解析(第4章元素之理解样式)
- jquery源码解析(第3章元素之一些常见的细节)
- jquery源码解析(第3章元素之css3的box-sizing)
- jQuery源码解析之jQuery.extend(),jQuery.fn.extend()
- jQuery深入之源码解析(一)
- jquery源码解析之遍历同胞(上)
- jquery源码解析之遍历同胞(下)
- jquery源码解析之遍历后代
- jquery源码解析之选择器实现
- JQuery 移除事件
- Python学习——函数
- 有些过时的设计元素会毁了你的作品
- Linux信号处理函数的一些特征
- python2,socket多进程的错误pickle.PicklingError: Can't pickle <built-in method recvfrom_into of _socket.soc
- 《三体》读后思考-泰勒展开/维度打击/黑暗森林
- jquery源码解析(第2章之移除)
- 素数距离
- c函数调用过程原理及函数栈帧分析
- 超详细的solrCloud伪集群搭建手记 (在同一虚拟机上模拟集群环境)
- HDU-3351
- TensorFlow笔记
- 类的继承
- mysql中join的用法
- js 时间与时间戳的转换