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

作者:袖梨 2022-06-25

html()

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

empty()

返回值:jQuery
概述
删除匹配的元素集合中所有的子节点。


html() 方法如果未设置参数,则返回被选元素的当前内容。
html("") 则清空被选元素的当前内容。
empty() 方法从被选元素移除所有内容,包括所有文本和子节点。


例子

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 = '';

 

相关文章

精彩推荐