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. alloc、init你弄懂50%了吗？

    前言 这是一篇我记录对alloc.init分析思考的笔记.如果读者想看懂我的第二个思考,可能需要您至少了解内存的分段分页管理,如果您对其一点都不知道,可以先看这篇软文简单了解一下.另外很重要的一点是, ...

  2. Bash算术计算

    1:$(( )) 2:$[ ] 3:`expr $x + $y` 4:bc命令 #!/bin/bash x= y= echo $(( x + y )) echo $[ $x + $y ] echo ` ...

  3. Bootstrap V3使用Tab标签

    Bootstrap V3使用Tab标签 >>>>>>>>>>>>>>>>>>>> ...

  4. Weex 样式

    1.盒型 width height padding padding-left padding-right padding-top padding-bottom margin margin-left m ...

  5. java异常类的使用

    1.异常的概念 什么是异常?程序出错分为两部分,编译时出粗和运行时出错.编译时出错是编译器在编译源码时发生的错误: 运行时出错是在编译通过,在运行时出现的错误.这种情况叫异常. 例如:数组越界,除数为 ...

  6. VS2015 Cordova Ionic移动开发（二）

    一.创建空白Cordova应用 打开VS,选择[新建项目],选择其它语言JavaScript或者TypeScript,语言的话就按个人喜好,喜欢JS就用JS,喜欢TS就用TS,推荐使用TS书写,代码结 ...

  7. ST3破解命令

      open terminal and input it!   printf '\x39' | dd seek=$((0x6f35)) conv=notrunc bs=1 of=/Applicatio ...

  8. ASP.NET Excel数据导出数据库

    /// <summary> /// 根據gridview導出excel /// </summary> /// <param name="ctl"> ...

  9. 用eval 动态编译代码

    eval 有另外一种用法, 其参数是作为一个字串表达式, 而不是代码块.在运行时, 它将字串临时编译成代码并且执行. 这很易用, 但也很危险, 因为有可能会把具有危害性的代码放到字串里. foreac ...

  10. Oracle IN 传递字符串参数查询失效

    在写存储过程中有如下代码: FOR a IN ( SELECT a.svo_no,a.AUDIT_NO,a.order_id FROM TT_PI_MODEL_REL a ) LOOP SELECT ...