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. 原生JS封装_new函数，实现new关键字的功能

    1.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 2.原生 ...

  2. 裸板中中断异常处理，linux中断异常处理 ，linux系统中断处理的API，中断处理函数的要求，内核中登记底半部的方式

    1.linux系统中的中断处理  1.0裸板中中断异常是如何处理的?     以s5p6818+按键为例          1)按键中断的触发        中断源级配置            管脚功 ...

  3. day5-基本数据类型总结

    一.数字int(..)二.字符串replace/find/join/strip/startswith/split/upper/lower/format tempalte = "i am {n ...

  4. webpack的npm扩展使用

    一.NPM的扩展使用 (1)  npm init:初始化一个Node.js项目------创建必须的package.json文件 npm init -y:创建必须的package.json文件 (2) ...

  5. Windows终端利器Cmder

    在IT这一行,大部分情况下都是推荐大家使用Linux或者类Unix操作系统去编程,Linux作为一代优秀的操作系统,已经人尽皆知,在IT行业已经成为核心.有条件的大佬都选择了使用mac编程,最优秀的莫 ...

  6. Python 基础之socket编程（三）

    python 基础之socket编程(三) 前面实现的基于socket通信只能实现什么呢?在tcp协议的通信中就是一个用户说一句,服务端给你回一句,你再给服务端说一句,服务端再给你回一句,就这样一直友 ...

  7. SpringMVC错误：nested exception is java.lang.IncompatibleClassChangeError: class org.springframework.core.type.clas

    这是jar包冲突引起的 spring-core.jar已经有asm 所以不用再单独导入asm包了

  8. kubespray2.11安装kubernetes1.15

    关于kubespray Kubespray是开源的kubernetes部署工具,整合了ansible,可以方便的部署高可用集群环境,官网地址:https://github.com/kubernetes ...

  9. C# V: 读取XML文件

    在C#中读取XML有LINQ版本和非LINQ版本. LINQ版本: // Loading from a file, you can also load from a stream var xml = ...

  10. thinkphp分页样式css代码

    <style type="text/css"> .Pagination a:hover,.current{background-color: #f54281;borde ...