Jquery empty() remove() detach() 方法的区别

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <div id="box1">box1</div>

    <button id="btn1">btn1</button>

    <div id="box2">box2</div>

    <button id="btn2">btn2</button>

    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>

    <script>

        $('#box1').click(function() {

            console.log('box1')

        })

        $('#box2').click(function() {

            console.log('box2')

        })

        $('#box1').data('key1', 'value1')

        $('#box2').data('key2', 'value2')

        var $box1

        var $box2

        $('#btn1').click(function() {

            console.log($('#box1').data('key1'))

            if ($box1) {

                $('#btn1').before($box1)

                $box1 = null

            } else {

                $box1 = $('#box1').detach()

            }

        })

        $('#btn2').click(function() {

            console.log($('#box2').data('key2'))

            if ($box2) {

                $('#btn2').before($box2)

                $box2 = null

            } else {

                $box2 = $('#box2').remove()

            }

        })

    </script>

</body>

</html>

♫【jQuery】detach的更多相关文章

  1. 【jQuery】使用JQ来编写面板的淡入淡出效果

    本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...

  2. 【jQuery】复选框的全选、反选，推断哪些复选框被选中

    本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...

  3. js【jquery】 - DOM操作

    1.修改元素样式 js方式: var div2 = document.getElementById("") div2.style.width = '200px'; div2.cla ...

  4. 【jQuery】 实用 js

    [jQuery] 实用 js 1. int 处理 parseInt(") // int 转换 isNaN(page) // 判断是否是int类型 2. string 处理 // C# str ...

  5. 【jQuery】 Ajax

    [jQuery] Ajax $.ajax({ type: "Post", // 发包方式 cache: false, // 是否缓存 contentType: "appl ...

  6. 【jQuery】 常用函数

    [jQuery] 常用函数 html() : 获取设置元素内的 html,包含标签 text() : 获取设置元素内的文本, 不包含标签 val() : 获取设置 value 值 attr() : 获 ...

  7. 【jQuery】 资料

    [jQuery] 资料 1. 选择器 http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 2. 事件 http://www.w3sch ...

  8. 【jQuery】 效果

    [jQuery] 效果 资料 http://www.w3school.com.cn/jquery/jquery_ref_effects.asp 1. 显示隐藏 hide(); 隐藏 show(): 显 ...

  9. 【jQuery】 选择器

    [jQuery] 选择器 资料: w3school  http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 1. 标签选择器 : $(& ...

随机推荐

  1. HTTP协议基础与实验

    一. HTTP协议(Hypetext Transfer Protoacal,超文本传输协议) HTTP协议规定了Web基本的运作过程,以及Web服务器之间的通信细节. Http协议采用客户端/服务器端 ...

  2. jQuery 获取文件后缀的方法

    var location=$("input[name='file']").val(); var point = location.lastIndexOf("." ...

  3. PHP面向对象的基本写法（区别于java）

    <?php /** * 这是一个人的对象 */ class ClassName { public $name; public $age; public $sex; public static $ ...

  4. VS2015 Cordova Ionic移动开发（三）

    一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选项卡中,将显示名称和起始页,修改为自己想要的名称即可. 如需直接在xml文件中修改:右击config ...

  5. Eclipse基本设置

    1.设置java的JDK:window->preferences->Java->Installed JREs->Add 2.设置文件默认打开方式: window->pre ...

  6. wpf 中DataGrid 控件的样式设置及使用

    本次要实现的效果为: 这个DataGrid需要绑定一个集合对象,所以要先定义一个Experience类,包含三个字段 /// <summary> /// 定义工作经历类 /// </ ...

  7. 获取C++类成员变量的地址偏移

    今天有在校学生问怎么获取类中的成员变量的地址偏移量,这个应该是很多初学C++的人很好奇的问题.以前我在学校的时候,也有过这种需求.忘了当时是要写什么“奇怪的程序”了,反正需要获取一个类的成员变量的地址 ...

  8. ubuntn 虚拟机NAT 静态IP 网络配置

    在虚拟机安装ubuntu12.04自动获取IP 一切都没有问题 ssh连接也正常.关机重启后郁闷的发现网络已经不通了,于是开始了以下的摸索. 1.配置静态IP 网关: ip段: 命令: Vim /et ...

  9. 『重构--改善既有代码的设计』读书笔记----Inline Class

    如果某个类没有做太多的事情,你可以将这个类的所有特性搬移到另外一个类中,然后删除原类.可以看到,Inline Class正好和Extract Class相反,后者是将一个巨类分解成多个小类从而来分担责 ...

  10. 执行*.sh脚本时提示Permission denied

    使用chmod修改.sh的权限 chmod u+x *.sh 再次执行