jQuery源码分析之remove和detach方法的区别
来源:互联网 发布:ipad上电视直播软件 编辑:程序博客网 时间:2024/05/24 01:28
请提前阅读:点击打开链接
detach源码分析:
detach: function( selector ) {return this.remove( selector, true );}可见detach内部调用的是remove函数,同时把selector传入remove方法,但是第二个参数是true,所以remove方法中的keepData是true表示不会调用里面的cleanData函数,这样,remove和detach的区别就显而易见了。
总结:
remove方法会移除该元素以及该元素的子元素下面的所有的数据和事件,但是detach方法不会移除该元素以及该元素的子元素的下面的所有的事件和数据!
之所以能够这样包括自身和子元素是因为:在remove源码中调用了getAll(elem)所以在getAll返回值里面会包含调用元素,所以detach,remove都会返回子元素以及调用者元素!
在这里给出一个重要的例子:(怎么把移除的节点找回来)
<div id="me1">I can not removed</div><div class="removed" id="me2">I can removed</div>JS部分:
var removed=$("div");var removedMark=removed.remove(".removed");//console.log(removed.length);//打印2//removedMark返回值是$("div"),所以把他添加到body上面的时候会创建文档片段,该文档碎片会包含$("div")//中所有的元素,所以最后不管你调用append还是prepend结果都是一样的!注意:这里注意后台调用的是buildFragment//不是克隆,所以虽然id为m1没有被移除,但是在创建文档碎片以后他的位置已经发生移动了,因为DOM数不可能有//两个完全一样的节点,因为他们的指针是相同的!removedMark.prependTo($("body"));
测试用例2:(交换两个DOM节点的位置)
var frag=jQuery.buildFragment([$("#me2")[0],$("#me1")[0]],document,false,this);//如果没有后面那一句append,这时候两个div都已经消失了! $(frag).appendTo($("body"));注意:这个测试用例你会发现body中的两个div的位置已经发生交换了!
note:要知道append后台调用了buildFragment,而且该方法没有对节点进行克隆,所以如果创建fragment时候该节点已经在DOM树上,那么也会把节点移动到该fragment上,因为DOM树中fragment中的DOM和文档中的DOM指针相同。所以上面调用append和prepend方法是一样的,因为文档碎片中始终m1在前面,m2在后面!
0 0
- jQuery源码分析之remove和detach方法的区别
- jQuery之detach()和remove()的区别
- 小议jquery的remove()和detach()的方法区别
- jQuery中删除方法empty(),remove()和detach()的区别
- Jquery empty() remove() detach() 方法的区别
- Jquery empty() remove() detach() 方法的区别
- jquery detach()和remove()的区别
- jquery中remove(),detach()和empty()的区别
- jQuery解读之empty、remove、detach区别
- jQuery解读之empty、remove、detach区别
- jQuery学习之remove与detach区别
- jQuery解读之empty、remove、detach区别
- jquery中detach()和remove()区别
- jquery的detach remove empty的区别
- jquery中remove()与detach()的区别
- jquery中empty、remove、detach的区别
- jquery中remove()与detach()的区别
- jquery中remove()与detach()的区别
- vs2008打包过程图解
- Android学习笔记之一 Activity的生命周期
- Linux——虚拟机安装Centos6.5
- 官方ebs设置文档地址--DZY
- Masonry介绍与使用实践:快速上手Autolayout
- jQuery源码分析之remove和detach方法的区别
- ExpandableListView中ListView无法使用Item的监听事件
- “Could not get lock /var/lib/apt/lists/lock”错误提示
- c#正则表达式匹配整数和小数
- leetcode 155 Min Stack C++ 24ms solution
- Http协议介绍
- 电路入门小常识:电路常识性概念——输入、输出阻抗
- 初识Kettle
- QtConcurrent 名字空间 run函数