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. iOS 数据持久化（3）：Core Data

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css); @import url(/ ...

  2. javascript权威指南第6版学习笔记

    javascript权威指南第6版学习笔记 javascript数组.函数是特殊对象 看一点少一点. 3.1.4 hello.js内容是 var x=.3-.2;var y=.2-.1 console ...

  3. String or binary data would be truncated. The statement has been terminated.

    常见的情况为:插入的值大于字段定义的最大长度. String or binary data would be truncated. The statement has been terminated

  4. 02.[WPF]如何固定窗口的大小

    在WPF开发过程中碰到一个需求,要求保证窗口大小不变,即便是双击 titlebar 也不能改变窗口大小和位置.要实现这样的效果,需要执行如下步骤: 1,分别设置窗口的 Width/MaxWidth/M ...

  5. CentOS下的svn强制用户提交时写日志

    问题:在项目提交时候不写日志,在后期查看修改历史时需要对比版本才知道提交原因.解决方案:在svn服务端通过hooks在提交时强制要求写日志.#!/bin/shREPOS="$1"T ...

  6. Strut2 采用token机制防御CSRF同时也可以防止表单重复提交

    一 未配置Struts2 token的情况下测试 1.从表单提交数据,可以从下图看出,快速点击保存按钮,请求提交了两次 2.检查post提交的数据中未含有token参数 3.查看数据列表,有重复数据 ...

  7. java常用指令

    javac 编译java源文件到字节码文件 -d XXX 1.指定编译后的字节码文件存放位置. 2.若编译的java源文件中使用包名,则根据包名生成相应的子目录 javac -d . Hello.ja ...

  8. Vijos1523 NOI2002 贪吃的九头龙 树形dp

    思路不算很难,但细节处理很麻烦 前面建图.多叉转二叉,以及确定dp处理序列的过程都是套路,dp的状态转移过程以注释的形式阐述 #include <cstdio> #include < ...

  9. c读写文件相关

    1.打开文件: 函数原型: FILE * fopen(const char * path,const char * mode); 返回值: 文件顺利打开后,指向该流的文件指针就会被返回.如果文件打开失 ...

  10. javascript--”原路返回“

    css代码: <style type="text/css"> * { margin: 0px; padding: 0px; font-family: "mic ...