夏日博客

A-A+

jQuery中empty与html(”)的区别对比

2016年01月12日 前端设计 暂无评论 阅读 7 views 次

在jquery中empty与html('')的区别许多的朋友估计不是非常的清除了，下文我们给各位empty与html('')的区别级例子，希望下文能够对各位有所帮助，具体如下。

html()

返回值:String

概述:

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

empty()

返回值:jQuery

概述:

删除匹配的元素集合中所有的子节点。

html() 方法如果未设置参数，则返回被选元素的当前内容。

html("") 则清空被选元素的当前内容。

empty() 方法从被选元素移除所有内容，包括所有文本和子节点。

例子:

  1. empty: function() {  
  2.         var elem,  
  3.             i = 0;  
  4.         for ( ; (elem = this[i]) != null; i++ ) {  
  5.             // Remove element nodes and prevent memory leaks  
  6.             if ( elem.nodeType === 1 ) {  
  7.                                 //循环清除Data数据  
  8.                 jQuery.cleanData( getAll( elem, false ) );  
  9.             }  
  10.             // 移除child  
  11.             while ( elem.firstChild ) {  
  12.                 elem.removeChild( elem.firstChild );  
  13.             }  
  14.             // If this is a <a href="/tags.php/select/" target="_blank">select</a>, ensure that it displays empty (#12336)  
  15.             // Support: IE<9  
  16.             if ( elem.options && jQuery.nodeName( elem, "select" ) ) {  
  17.                 elem.options.length = 0;  
  18.             }  
  19.         }  
  20.         return this;  
  21.     },  

代码中，首先清除了所有的data数据，那么data都包含哪些内容呢？getALl方法查找到到所有后代元素,jquery的getAll代码如下:

  1. var str<a href="/tags.php/undefined/" target="_blank">undefined</a> = typeof undefined;  
  2. function getAll( context, tag ) {  
  3.     var elems, elem,  
  4.         i = 0,  
  5.         found = typeof context.getElementsByTagName !== strundefined ? context.getElementsByTagName( tag || "*" ) :  
  6.             typeof context.querySelectorAll !== strundefined ? context.querySelectorAll( tag || "*" ) :  
  7.             undefined;  
  8.     if ( !found ) {  
  9.         for ( found = [], elems = context.childNodes || context; (elem = elems[i]) != null; i++ ) {  
  10.             if ( !tag || jQuery.nodeName( elem, tag ) ) {  
  11.                 found.push( elem );  
  12.             } else {  
  13.                 jQuery.merge( found, getAll( elem, tag ) );  
  14.             }  
  15.         }  
  16.     }  
  17.     return tag === undefined || tag && jQuery.nodeName( context, tag ) ?  
  18.         jQuery.merge( [ context ], found ) :  
  19.         found;  
  20. }  
  21. getAll(document.body,false);// HTMLCollection Array  

将getALl取到的集合， cleanData,removeEvent 解除事件,释放内存(jquery绑定的事件保存在data中),代码如下,可以找到我们绑定的事件列表,expando是页面中不重复的jquery每个对象的标识.

  1. expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),  
  2.    
  3. $('body').on('click',function(){  
  4.    
  5.     alert('this is body');  
  6.    
  7. });  
  8.    
  9. console.log($.cache[$('body')[0][$.expando]]);  

删除internalKey（对象标识），push id到deletedIds,简单的说empty，首先循环给后代元素移除绑定、清除jquery给此dom的cache，然后循环removeFirstChild,而html('')，则是简单暴力的设置innerHTML = '';

标签：

给我留言