1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

jquery移除

作者:用户 来源:互联网 时间:2016-08-03 20:21:08

火狐方法节点转义InnerTexttextContent

jquery移除 - 摘要: 本文讲的是jquery移除, 涉及节点删除的接口jQuery划分了四个分别是detach,empty,remove,unwrap,因为使用的范围不同,所以功能有所差异,但是总的来说都是

涉及节点删除的接口jQuery划分了四个分别是detach,empty,remove,unwrap,因为使用的范围不同,所以功能有所差异,但是总的来说都是用来清理节点的。

innerText是我们常用的文本清理方法,但是火狐下不兼容,不过会提供一个类似的方法叫textContent。

两者还是有一些区别的,总结如下。

IE中的innerText是需要对innerHTML的值进行:

  1.  HTML转义(等同于XML转义,对<、&等转义字符进行处理);
  2.  经过HTML解释和CSS样式解释;
  3.  之后又剔除格式信息;
  4.  之后留下的纯文本。

而FF中的textContent没有2、3步,在经过了HTML转义之后直接剔除所有html标签后得到的纯文本,我们在接着看下就jQuery对节点清除的具体封装。

.empty()

从DOM中移除集合中匹配元素的所有子节点,为了避免内存泄漏,jQuery先移除子元素的数据和事件处理函数,然后移除子元素。

empty: function() {
    var elem,
        i = 0;
    for (;
        (elem = this[i]) != null; i++) {
        if (elem.nodeType === 1) {
            jQuery.cleanData(getAll(elem, false));
            elem.textContent = "";
        }
    }
    return this;
}

jQuery是合集元素,所以我们遍历下this[i],然后直接把元素的textContent清空即可,但是需要注意jQuery.cleanData方法,清除节点不单单只有元素,还有附加在上面的事件处理与数据缓存。

jQuery.cleanData方法,就是通过元素判断上绑定的expando的这个uuid在与之对应的cache中找到数据与事件句柄加以删除。

.remove()

.remove() 将元素移出DOM,当我们想将元素自身移除时我们用 .remove(),同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。

remove: function(selector, keepData /* Internal Use Only */ ) {
    var elem,
        elems = selector ? jQuery.filter(selector, this) : this,
        i = 0;
    for (;
        (elem = elems[i]) != null; i++) {
        if (!keepData && elem.nodeType === 1) {
            jQuery.cleanData(getAll(elem));
        }
        if (elem.parentNode) {
            if (keepData && jQuery.contains(elem.ownerDocument, elem)) {
                setGlobalEval(getAll(elem, "script"));
            }
            elem.parentNode.removeChild(elem);
        }
    }
    return this;
}

remove是empty的加强版,把本身的父节点也清除掉了。因为remove支持过滤器所以支持传递selecor。remove需要删除自身及其所有的子元素包括事件与数据,所以要通过找到父节点parnetNode移除。

.detach()

如果你想删除元素,不破坏他们的数据或事件处理程序(这些绑定的信息还可以在之后被重新添加回来)。.detach() 方法和.remove()一样, 除了 .detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素,不久又将该元素插入DOM时,这种方法很有用。

detach: function(selector) {
      return this.remove(selector, true);
 }

这个方法也很简单,意味着这要暂时移除节点,但是不销毁对应的事件与数据,在remove方法中支持传递布尔值用来处理这个cleanData的过滤。



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索火狐 , 方法 , 节点 , 转义 , InnerText textContent jquery移除属性、jquery移除元素、jquery移除事件、jquery移除css样式、jquery移除class,以便于您获取更多的相关知识。

jquery 移除 div里面最后一个checkbox,为什么只把框移除了,文字还在?

问题描述 jquery 移除 div里面最后一个checkbox,为什么只把框移除了,文字还在? 移除前 移除后 这个要怎么处理? 代码: function removelast(){ $("#mend").children("input[type=&#039;checkbox&...

浅析jquery unbind()方法移除元素绑定的事件_jquery

unbind()方法可以移除元素已绑定的事件,它的调用格式如下: $(selector).unbind(event,fun) 其中参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称。 语法  unbind()函数主要有以下两种形式...

jquery(4-3) remove()移除元素

1.remove() remove() 方法移除被选元素,包括所有的文本和子节点。 该方法也会移除被选元素的数据和事件。 提示:如需移除元素,但保留数据和事件,请使用detach()方法代替。 提示:如只需从被选元素移除内容,请使用empty()方法...

Easy Ajax with jQuery[中文版2]

示例二: 使用jQuery建造聊天程序为了展示jQuery的强大,我们将建立一个具有ajax功能的聊天程序.它允许用户发布信息,并且可以实时的更新信息--但是没有任何的页面刷新.鉴于我们将要处理一个相对比较复杂的应用,我将更加深入的...

jQuery中DOM节点的删除方法总结(超全面)

前言 相信大家都知道,要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题。下面本文就进行一个详细的介绍,感兴趣的朋友们一起来看看吧。 一、empty empty 顾名思义,清空方法,但是与删除...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备