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. Android 开发实践 ViewGroup 实现左右滑出窗口（一）

    利用假期把以前做的东西总结整理一下,先从简单的开始吧.实现的效果是这样的:   做了个截屏动画,比例有点不对了,凑合着看吧. 整个窗口有3部分组成,中间的主界面是个列表,左边的滑出界面是个菜单,右边的 ...

  2. CentOS修改主机名hostname

    方法一:即时生效,重启后失效 hostname 新主机名 方法二:永久生效 1.修改/etc/hosts vim /etc/hosts 127.0.0.1 localhost 新主机名 2.修改/et ...

  3. HDFS的Java客户端操作代码(查看HDFS下所有的文件或目录)

    1.查看HDFS下所有的文件或目录 package Hdfs; import java.io.IOException; import java.net.URI; import org.apache.h ...

  4. (转）function($){}(window.jQuery) 是什么意思？

    function(){}(); (function(){})(); 这两个是self-invoking anonymous 自调匿名函数,用这类的方法,能强制使匿名函数成为表达式,把不合法变成合法. ...

  5. webUploader上传组件 实际运用小结

    WebUploader组件实际介绍: 官网:http://fex.baidu.com/webuploader/doc/index.html 组件优势及优化总结:http://itindex.net/d ...

  6. Mac下载并编译Google安卓AOSP项目代码

    Mac下载并编译Google安卓AOSP项目代码 参考 https://source.android.com/source/index.html 这两天用Mac下载安卓AOSP源码,且把遇到的问题记下 ...

  7. WCF，WebAPI，WCFREST和WebService的区别

    Web ServiceIt is based on SOAP and return data in XML form.It support only HTTP protocol.It is not o ...

  8. Singleton设计模式的一种见解

    单实例Singleton设计模式可能是被讨论和使用的最广泛的一个设计模式了,这可能也是面试中问得最多的一个设计模式了.这个设计模式主要目的是想在整个系统中只能出现一个类的实例.这样做当然是有必然的,比 ...

  9. cocos2dx JAVA，C++互相调用函数

    C++调用JAVA 例子 #if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID) #include "platform/android/jni/Jni ...

  10. 我用Emacs，后来转向Vim——Vim学习之Vim键盘图(绝对值得珍藏)

    Emacs本来就比较臃肿,麻烦.当我发现Vim键盘图时,我就渐渐转向Vim,追随Unix/Linux哲学去了.. 我用了Emacs三个月,因为它的学习曲线没Vim陡,这点吸引了,我使用Linux才7. ...