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. Vue组件间通信方式到底有几种

    1. 前言 Vue的一个核心思想就是组件化.所谓组件化,就是把页面拆分成多个组件 (component),每个组件依赖的 CSS.JavaScript.模板.图片等资源放在一起开发和维护.组件是资源独 ...

  2. svg路径蒙版动画

    svg路径蒙版动画,是比较实用的一种动画效果,能够绘制如下图所示的动画. 接下来细说这样的动画是如何做成的: 1.准备工作 2.SVG路径动画 3.SVG路径蒙版动画 4.复杂图形的编辑技巧 1.准备 ...

  3. 1005 csp-s 60 凉凉

    T1 嘟嘟噜 上来一看数据范围1e9就蒙蔽,然后不知所措的打了一个 $ O(n)$的无脑算法,由于本人真的脑小,导致O(n)的柿子推了好长时间,导致心态崩了,然后........ 今天能明白了log的 ...

  4. 如何处理消息队列消费过程中的重复消息&如何实现幂等性

    什么是幂等 幂等本来是数学上的概念,它的定义是这样的: 如果一个函数 f(x) 满足:f(f(x)) = f(x),则函数 f(x) 满足幂等性. 在计算机领域用来描述一个操作.方法或者服务.一个幂等 ...

  5. 使用 vue-element-admin 动态路由渲染

    附上:vue-element-admin 官方文档 vue-element-admin https://panjiachen.github.io/vue-element-admin-site/zh/g ...

  6. [ISE调试] 在ISE调试过程中，遇到过的error以及消除办法

    1.Incompatible IOB's are locked to the same bank 15,具体如右图, 于是去查引脚配置,发现 也就是说,在bank=15的这组IO里面,我既选了LVAM ...

  7. Algorithm： GCD、EXGCD、Inverse Element

    数论基础 数论是纯数学的一个研究分支,主要研究整数的性质.初等数论包括整除理论.同余理论.连分数理论.这一篇主要记录的是同余相关的基础知识. 取模 取模是一种运算,本质就是带余除法,运算结果就是余数. ...

  8. nyoj 822-画图 (*)

    822-画图 内存限制:64MB 时间限制:1000ms 特判: No 通过数:133 提交数:187 难度:0 题目描述: 计算机画图也挺有趣的哈!那我们就来用计算机画幅图吧... 输入描述: 输入 ...

  9. MySQL数据库root账户密码忘记两种处理方法（保有效）

    方法1: 1.停止MySQL服务 # kill `cat /var/run/mysqld/mysqld.pid` 或者 # pkill mysqld 2.创建一个密码赋值语句的文本文件 # vi my ...

  10. python：类5——Python 的类的下划线命名有什么不同？

    首先是单下划线开头,这个被常用于模块中,在一个模块中以单下划线开头的变量和函数被默认当作内部函数,如果使用 from a_module import * 导入时,这部分变量和函数不会被导入.不过值得注 ...