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

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

 

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索文档
, 数据
, 函数
, 参数
, this
xhtml
jquery empty html、jquery html text区别、jquery empty、jquery remove empty、jquery的empty,以便于您获取更多的相关知识。

时间: 2024-10-15 08:25:30

jQuery中empty与html('')的区别对比的相关文章

jquery中html,text,val的区别对比

.html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值. 一.jquery中HTML  1. 无参html() 方法用来获取任意元素的HTML内容,如果你调用多个选定元素的.html()方法,那么其读取的只是第一个元素,换句话说:如果选择器匹配多于一个的元素,那么只有第一个匹配元素的 HTML 内容会被获取.另外此法对XML方档是无效的. 要读取一个元素的HTML内容,首先你要选择这个元素,然后在调用jQue

jQuery中empty()方法用法实例

 这篇文章主要介绍了jQuery中empty()方法用法,以实例形式分析了empty()方法的功能.定义及将匹配元素中的所有内容移除的使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery中empty()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够将匹配元素中的所有内容移除,包括所有文本和子节点. 语法结构: 代码如下: $(selector).empty()   实例代码:   代码如下: <!DOCTYPE html> <html> <head&

jquery中attr和prop的区别分析

 这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下     在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 上面的描述也许有点模糊,举几个例子就知道了.

jQuery中serializeArray()与serialize()的区别实例分析_jquery

本文实例讲述了jQuery中serializeArray()与serialize()的区别.分享给大家供大家参考,具体如下: serialize()序列化表单元素为字符串,用于 Ajax 请求. serializeArray()序列化表单元素为JSON数据. 具体实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

jQuery中parents()和parent()的区别分析_jquery

本文实例分析了jQuery中parents()和parent()的区别,分享给大家供大家参考.具体分析如下: 其实在jQuery中,函数或者选择器的概念都是很容易理解的,只要对API手册有足够的熟练就能够很容易分辨,标题中的函数其实也是如此,不过咱们这里还是做一些简单的介绍,毕竟这样可能更为方便一些. 一.parents()函数: 此函数能够获取匹配元素的所有父元素,代码示例: 复制代码 代码如下: $(".mayi").parents().css("color",

ajax的异步请求-Jquery中$.post和$.ajax的区别在哪里呢

问题描述 Jquery中$.post和$.ajax的区别在哪里呢 一直搞不懂这两种请求到底区别在哪呢,求大神指教,两种我接收数据的时候都是用的eval去解析的. 解决方案 $.post就是post请求,$.ajax可以通过配置type为get/post(及其他可用的http方法,如get,delete)指定提交方法,返回数据jquery一般会通过响应头来判断类型自动生成对应的数据,如响应头为application/json会自动转为json对象,其他当做text/html处理 $.post最终使

实例讲解jquery中mouseleave和mouseout的区别_jquery

本文详细的介绍了关于jQuery中mouseleave和mouseout的区别,分享给大家供大家参考,具体内容如下 很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p>先看下使用mouseout的效果:</p> <div id="container" style="width: 300px;">

jQuery中:empty选择器用法实例_jquery

本文实例讲述了jQuery中empty选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配所有不包含子元素或者文本的空元素. 注意:空格也属于选择器包含的元素. 语法结构: 复制代码 代码如下: $(":empty") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码 代码如下: $("li:empty").animate({width:"200px"}) 以上代码能够将li元素集合中的空li元素的宽

jQuery中empty()方法用法实例_jquery

本文实例讲述了jQuery中empty()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够将匹配元素中的所有内容移除,包括所有文本和子节点. 语法结构: 复制代码 代码如下: $(selector).empty() 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" cont