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. ASP.NET Core Blazor 用Inspinia静态页模板搭建简易后台（实现菜单选中）

    Blazor 是一个用于使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应用逻辑 ...

  2. 如何在双向绑定的Image控件上绘制自定义标记（wpf）

    我们的需求是什么? 答:需要在图片上增加一些自定义标记,例如:2个图片对比时,对相同区域进行高亮. 先上效果图: 设计思路 1.概述 1.通过TargeUpdated事件,重新绘制图片进行替换. 2. ...

  3. JAVA Rest High Level Client如何取聚合后得数据

    对于刚刚学习es的童鞋来说,很容易不清楚怎么获取客户端对es文档的聚合结果,下面就演示一下模仿DSL写聚合,然后获取到聚合对结果. 一, 对于下面这个简单的聚合,目的是对于文档全文匹配,聚合颜色字段. ...

  4. 使用Git-Rebase合并多次提交

    在平时的软件开发中,我们每个team使用一个公共仓库(这里说的是Git仓库).每当有一个新的需求,我们会拉出一个特性分支,然后在这个特性分支上做开发以及提交个人的代码. 我有个习惯就是:为了确保代码的 ...

  5. 部署django

    添加uwagi配置文件 在你项目的根目录中创建mysite.xml(名字无所谓),或者创建mysite.ini,输入以下内容: <uwsgi> <socket>127.0.0. ...

  6. [剑指offer]删除链表中重复的结点(把重复的都删掉，1个不留）

    ①题目 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理后为 ...

  7. Vue img的src使用数据绑定不显示

    不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. <img src="{{ imgUrl }}"/> 原因:写法错误 解决 ...

  8. nyoj 163 Phone List(动态字典树<trie>) poj Phone List (静态字典树<trie>)

    Phone List 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 Given a list of phone numbers, determine if it i ...

  9. beta week 2/2 Scrum立会报告+燃尽图 01

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9954 一.小组情况 队名:扛把子 组长:孙晓宇 组员:宋晓丽 梁梦瑶 韩昊 ...

  10. Python 编程语言要掌握的技能之一：使用数字与字符串的技巧

    最佳实践 1. 少写数字字面量 “数字字面量(integer literal)” 是指那些直接出现在代码里的数字.它们分布在代码里的各个角落,比如代码 del users[0] 里的 0 就是一个数字 ...