jQuery中empty&&remove&&detach三种方法的区别

　　empty():移除指定元素内部的所有内容,但不包括它本身

　　remove():移除指定元素内部的所有内容,包括它本身,所有绑定的事件、附加的数据等都会删除

　　detach():临时删除页面上的所有元素包括它本身,所有绑定的事件、附加的数据等都会保留下来

　　　　　　官方解读:这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

　　　　　　　　　　$("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

哈哈哈!举的例子,更加明确

　　　　　　　　　　　　注:如有错误请联系本人更改或者删除

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>detach&&remove&&empty三种方法演示</title>

    <script src="../jQuery库/jquery-3.3.1.js"></script>

    <style>

        .DETACH,

        .REMOVE,

        .EMPTY{

            width: 300px;

            height: 166px;

            border: 5px solid #ccc;

        }

        .DETACH_DIV,

        .REMOVE_DIV,

        .EMPTY_DIV{

            width: 300px;

            height: 120px;

            border: 3px solid pink;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

    <!-- empty方法演示块 -->

    <div class="EMPTY">

        <div class="EMPTY_DIV">

            <h1>小麦王</h1>

            <p>这是小麦王啤酒</p>

        </div>

        <input id="bt1" type="button" value="点击删除这中的class=EMPTY_DIV中的元素">

    </div>

    <script>

        $("#bt1").on("click",function(){

            $(".EMPTY_DIV").empty();

        });

    </script>

    <!-- remove方法演示块 -->

    <div class="REMOVE">

        <div class="REMOVE_DIV">

            <h1>哈尔滨</h1>

            <p>哈尔滨啤酒</p>

        </div>

        <input id="bt2" type="button" value="点击删除这里的class=REMOVE_DIV中的元素">

    </div>

    <script>

        $("#bt2").on("click",function(){

            $(".REMOVE_DIV").remove();

        });

    </script>

    <!-- detach方法演示块 -->

    <div class="DETACH">

        <div class="DETACH_DIV">

            <h1>雪花</h1>

            <p>雪花啤酒</p>

        </div>

        <input id="bt3" type="button" value="点击删除这里的class=DETACH_DIV中的元素">

        <input id="bt4" type="button" value="点击还原class=DETACH_DIV中的元素">

    </div>

    <script>

        $("#bt3").on("click",function(){

            p = $(".DETACH_DIV").detach();

        });

        $("#bt4").on("click",function(){

            $(".DETACH").prepend(p);

        });

    </script>

</body>

</html>

 

jQuery中detach&&remove&&empty三种方法的区别的更多相关文章

  1. Java中创建线程的三种方法以及区别

    Java使用Thread类代表线程,所有的线程对象都必须是Thread类或其子类的实例.Java可以用三种方式来创建线程,如下所示: 1)继承Thread类创建线程 2)实现Runnable接口创建线 ...

  2. jquery remove() detach() empty()三种方法的区别

    remove方法把事件删除掉了,数据并没有删除 detach方法保存了事件和数据 empty方法保留了元素本身,移除子节点,删除内容 举例: <!DOCTYPE html><html ...

  3. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  4. jquery动态加载js三种方法实例

    这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getScript(\"test.js\" ...

  5. jquery取消事件冒泡的三种方法展示

    jquery取消事件冒泡的三种方法展示 html代码 <!doctype html> <html> <head> <meta charset="ut ...

  6. Android中全屏 取消标题栏，TabHost中设置NoTitleBar的三种方法(转)

    Android中全屏 取消标题栏,TabHost中设置NoTitleBar的三种方法http://www.cnblogs.com/zdz8207/archive/2013/02/27/android- ...

  7. Openerp 中打开 URL 的三种 方法

    来自:http://shine-it.net/index.php/topic,8013.0.html 最近总结了,Openerp 中打开 URL 的三种 方法: 一.在form view 添加 < ...

  8. mysql 中添加索引的三种方法

    原文:http://www.andyqian.com/2016/04/06/database/mysqleindex/ 在mysql中有多种索引,有普通索引,全文索引,唯一索引,多列索引,小伙伴们可以 ...

  9. 《Java多线程面试题》系列-创建线程的三种方法及其区别

    1. 创建线程的三种方法及其区别 1.1 继承Thread类 首先,定义Thread类的子类并重写run()方法: package com.zwwhnly.springbootaction.javab ...

随机推荐

  1. python学习之【第十七篇】：Python中的面向对象（类和对象）

    1.什么是类和类的对象? 类是一种数据结构,我们可以用它来定义对象,后者把数据值和行为特性融合在一起,类是现实世界的抽象的实体以编程形式出现.实例是这些对象的具体化.类是用来描述一类事物,类的对象指的 ...

  2. JavaScript BOM学习

    Mirror王宇阳 2019年11月13日 [首发] 数日没有更新博文了,觉得不好意思了!这不是,整理了一下JavaScript的一下BOM笔记资料,今天贡献出来!(HTML DOM也会随后整理发表) ...

  3. mysql批量更新写法

    mysql批量更新写法<pre> $namedmp=filter($_POST['namedmp']); $namedsp=filter($_POST['namedsp']); $name ...

  4. Havok Physics 2012(1)

    目录 Chapter 1. Introduction 1. What is a Physics Engine? Chapter 1. Introduction ​ 欢迎来到Havok Physics ...

  5. [LC]206题 Reverse Linked List （反转链表）（链表）

    ①英文题目 Reverse a singly linked list. Example: Input: 1->2->3->4->5->NULL Output: 5-> ...

  6. 在 ASP.NET Core 项目中使用 MediatR 实现中介者模式

    一.前言  最近有在看 DDD 的相关资料以及微软的 eShopOnContainers 这个项目中基于 DDD 的架构设计,在 Ordering 这个示例服务中,可以看到各层之间的代码调用与我们之前 ...

  7. [NLP] Adaptive Softmax

    1. Overview Adaptive softmax算法在链接1中的论文中提出,该算法目的是为了提高softmax函数的运算效率,适用于一些具有非常大词汇量的神经网络. 在NLP的大部分任务中,都 ...

  8. opencv 3 core组件进阶(2 ROI区域图像叠加&图像混合；分离颜色通道、多通道图像混合；图像对比度，亮度值调整）

    ROI区域图像叠加&图像混合 #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp&g ...

  9. Class文件结构全面解析（下）

    接上回书 书接上一回,分享了Class文件的主要构成,同时也详细分析了魔数.次版本号.主版本号.常量池集合.访问标志的构造,接下来我们就继续学习. 欢迎关注微信公众号:万猫学社,每周一分享Java技术 ...

  10. 【Stream—6】BufferedStream相关知识分享

    一.简单介绍以下BufferedStream 在前几章的讲述中,我们已经能够掌握流的基本特性和特点,一般进行对流的处理时,系统肩负着IO所带来的开销,调用十分频繁,这时候就应该想个办法减少这种开销,而 ...