jQuery源码之 empty与html('')的区别
empty: function() {
var elem,
i = 0;
for ( ; (elem = this[i]) != null; i++ ) {
// Remove element nodes and prevent memory leaks
if ( elem.nodeType === 1 ) {
//循环清除Data数据
jQuery.cleanData( getAll( elem, false ) );
}
// 移除child
while ( elem.firstChild ) {
elem.removeChild( elem.firstChild );
}
// If this is a select, ensure that it displays empty (#12336)
// Support: IE<9
if ( elem.options && jQuery.nodeName( elem, "select" ) ) {
elem.options.length = 0;
}
}
return this;
},
代码中,首先清除了所有的data数据,那么data都包含哪些内容呢?
getALl方法查找到到所有后代元素。jquery的getAll代码如下:
var strundefined = typeof undefined;
function getAll( context, tag ) {
var elems, elem,
i = 0,
found = typeof context.getElementsByTagName !== strundefined ? context.getElementsByTagName( tag || "*" ) :
typeof context.querySelectorAll !== strundefined ? context.querySelectorAll( tag || "*" ) :
undefined; if ( !found ) {
for ( found = [], elems = context.childNodes || context; (elem = elems[i]) != null; i++ ) {
if ( !tag || jQuery.nodeName( elem, tag ) ) {
found.push( elem );
} else {
jQuery.merge( found, getAll( elem, tag ) );
}
}
} return tag === undefined || tag && jQuery.nodeName( context, tag ) ?
jQuery.merge( [ context ], found ) :
found;
} getAll(document.body,false);// HTMLCollection Array
将getALl取到的集合, cleanData
- removeEvent 解除事件,释放内存 (jquery绑定的事件保存在data中),代码如下,可以找到我们绑定的事件列表。//expando是页面中不重复的jquery每个对象的标识。expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
$('body').on('click',function(){
alert('this is body');
});
console.log($.cache[$('body')[0][$.expando]]); - 删除internalKey(对象标识),push id到deletedIds
简单的说empty,首先循环给后代元素移除绑定、清除jquery给此dom的cache,然后循环removeFirstChild。
而html(''),则是简单暴力的设置innerHTML = '';
jQuery源码之 empty与html('')的区别的更多相关文章
- jQuery源码:从原理到实战
jQuery源码:从原理到实战 jQuery选择器对象 $(".my-class"); document.querySelectorAll*".my-class" ...
- 读jQuery源码 - Callbacks
代码的本质突出顺序.有序这一概念,尤其在javascript——毕竟javascript是单线程引擎. javascript拥有函数式编程的特性,而又因为javascript单线程引擎,我们的函数总是 ...
- jQuery源码-dom操作之jQuery.fn.html
写在前面 前面陆陆续续写了jQuery源码的一些分析,尽可能地想要cover里面的源码细节,结果导致进度有些缓慢.jQuery的源码本来就比较晦涩,里面还有很多为了解决兼容问题很引入的神代码,如果不g ...
- 阅读jQuery源码的18个惊喜
注释:本文使用$.fn.method指代调用一系列选中的元素的方法.例如,$.fn.addClass,指代$('div').addClass(‘blue’) 或 $('a.active’).addCl ...
- jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究
终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...
- jQuery 源码解析一:jQuery 类库整体架构设计解析
如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...
- 读jQuery源码有感2
那么就来读读jQuery源码的Callbacks部分. 一上来看原版源码 jQuery.Callbacks = function( options ) { // Convert options fro ...
- jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...
- jQuery源码学习感想
还记得去年(2015)九月份的时候,作为一个大四的学生去参加美团霸面,结果被美团技术总监教育了一番,那次问了我很多jQuery源码的知识点,以前虽然喜欢研究框架,但水平还不足够来研究jQuery源码, ...
随机推荐
- 开源PaaS工具CloudFoundry落地阿里云
原文:https://yq.aliyun.com/articles/292815?utm_content=m_37457 云计算技术的不断成熟和完善,尤其是IaaS平台的不断发展,使得越来越多的企业和 ...
- 利用备份技术获取apk本地存储数据
即使设备没有root,我们也可以通过物理访问设备来获取应用程序的数据,我们还可以通过此方法改变一个应用程序的数据.如果一个应用程序将数据存储在客户端, 使用简单的密码或pin检查,攻击者有可能使用这种 ...
- 64位RHEL5系统上运行yum出现"This system is not registered with RHN”的解决方法
在红帽EL5上运行yum,提示“This system is not registered with RHN”,意思是没有在官网上注册,不能下载RH的软件包,替代方案是采用centos源. 1.卸载r ...
- 20155233 《网络对抗》 Exp8 Web基础
实验内容 Web前端HTML Web前端javascipt Web后端:MySQL基础:正常安装.启动MySQL,建库.创建用户.修改密码.建表 Web后端:编写PHP网页,连接数据库,进行用户认证 ...
- 13、通过Docker-compose快速搭建Wordpress
一.compose定义 以下定义摘自docker官网:https://docs.docker.com/compose/overview/ Compose is a tool for defining ...
- React半科普文
React半科普文 什么是React getting started 文件分离 Server端编译 定义一个组件 使用property 组件嵌套 组件更新 Virtual DOM react nati ...
- Asp.Net_抓包解析xml文件为json
protected void Button1_Click(object sender, EventArgs e) { string Phone = this.Txt_Con.Text; string ...
- 504. Base 7
Given an integer, return its base 7 string representation. Example 1: Input: 100 Output: "202&q ...
- ats显示代理缓存
如果要将ats用作显示代理缓存,则必须配置客户端软件(即浏览器)以将请求直接发送到ats. 如果没有将ats配置为使用透明度选项(通过交换机或路由器在路由到源服务器的情况下拦截客户端请求并重新路由到a ...
- 使用SSH过程中遇到的几个问题及解决方案
一.HTTP Status 500 - org.springframework.orm.hibernate3.HibernateOptimisticLockingFailureException: B ...