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. 升级 node 版本

    npm install -g n n stablen v0.10.26 n 0.10.26

  2. 安装Visual Studio 2013 中文社区版

    Visual Studio 2013 免费了,我收到邮件后,立即从邮件的下载连接安装了 Visual Studio Community 2013 with Update 4 . 安装后几天没打开,今天 ...

  3. 基于Html5的兼容所有主流浏览器的在线视频播放器videoJs

    在一个新的项目上需要实现在线视频播放,原本打算借助优酷的视频存储和播放,但是发现这个需要用户注册优酷账户,严重影响用户体验,于是这个方案被毙掉了.于是开始了自己开发一个在线播放器的想法,当然尽量使用已 ...

  4. Unity3D 常用事件

    这里总结一下U3D常用的一些事件 //按下事件,GetKeyDown //抬起事件,Input.GetKeyUp //长按事件,Input.GetKey //任意键按下事件,Input.anyKeyD ...

  5. DataView操作DataTable

    1.DataView筛选数据 //假设有一个DataTable数据 DataTable dt = new DataTable(); //转成DefaultView DataView dv = dt.D ...

  6. ado.net与各种orm操作数据方式的比较

    ADO.NET与ORM的比较(1):ADO.NET实现CRUD http://zhoufoxcn.blog.51cto.com/792419/283952 ADO.NET与ORM的比较(2):NHib ...

  7. 图论——读书笔记（基于BFS广度优先算法的广度优先树）

    广度优先树 对于一个图G=(V,E)在跑过BFS算法的过程中会创建一棵广度优先树. 形式化一点的表示该广度 优先树的形成过程是这样的: 对于图G=(V,E)是有向图或是无向图, 和图中的源结点s, 我 ...

  8. QT QSettings 操作（导入导出、保存获取信息）*.ini文件详解

    1.QSettings基本使用 1.1.生成.ini文件,来点实用的代码吧. QString fileName;fileName = QCoreApplication::applicationDirP ...

  9. Android三种菜单简介

    Android的菜单分为三种类型:选项菜单(Option Menu).上下文菜单(Context Menu).子菜单(Sub Menu). 一.选项菜单 用户点击设备上的菜单按钮(Menu),触发事件 ...

  10. yzoi2223集合构造的详细解法

    Description - 问题描述 集合M的定义如下: 1是M中的元素 如果x是M中的元素,那么2x+1和4x+5都是M中的元素 那么,集合M中,最小的n个数是哪些? Input - 输入数据 一个 ...