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. SSM学习成果总结，图书管理系统进行三层整合

    一:先看一下效果图 二:目录结构  三:pojo package com.zh.pojo; import lombok.AllArgsConstructor; import lombok.Data; ...

  2. 「CF52C」Circular RMQ

    更好的阅读体验 Portal Portal1: Codeforces Portal2: Luogu Description You are given circular array \(a_0, a_ ...

  3. 『题解』Codeforces446C DZY Loves Fibonacci Numbers

    更好的阅读体验 Portal Portal1: Codeforces Portal2: Luogu Description In mathematical terms, the sequence \( ...

  4. 『图论』LCA最近公共祖先

    概述篇 LCA(Least Common Ancestors),即最近公共祖先,是指这样的一个问题:在一棵有根树中,找出某两个节点 u 和 v 最近的公共祖先. LCA可分为在线算法与离线算法 在线算 ...

  5. Scrapy进阶知识点总结（三）——Items与Item Loaders

    一.Items 抓取的主要目标是从非结构化源(通常是网页)中提取结构化数据.Scrapy蜘蛛可以像Python一样返回提取的数据.虽然方便和熟悉,但Python缺乏结构:很容易在字段名称中输入拼写错误 ...

  6. 深入理解计算机系统 第三章 程序的机器级表示 Part1 第二遍

    第一遍对应笔记链接 https://www.cnblogs.com/stone94/p/9905345.html 机器级代码 计算机系统使用了多种不同形式的抽象,利用更简单的抽象模型来隐藏实现的细节. ...

  7. 力扣（LeetCode）删除排序链表中的重复元素 个人题解

    给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 这题思路比较简单,同样是快慢针的思路. 用一个整数类型val对应最新的只出现过一次的那个值, 如果节点的下一个节点的值和这个对应则不做别 ...

  8. Activity生命周期理解

    在Android应用程序运行时,Activity的活动状态由Android以Activity栈的形式管理,当前活动的Activity位于栈顶.随着应用程序之间的切换.关闭等,每个Activity都有可 ...

  9. Redis入门，对Redis的理解和基本环境搭建及操作

    Redis入门使用 参考:https://blog.csdn.net/hellozpc/article/details/81267030 一).缓存的用途举例 1.前端页面广告的数据无需每次查询后台系 ...

  10. 万恶之源-python的进化

    列表 列表的增删改查 3. 列列表的嵌套 元组和元组嵌套 5. range ⼀一. 列表 1.1 列表的介绍 列表是python的基础数据类型之⼀一 ,其他编程语⾔言也有类似的数据类型. 比如JS中的 ...