Jquery empty() remove() detach() 方法的区别(3)_H5之家 - 中国HTML5教程资源分享第一站

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Jquery remove detach empty</title>
<style>
p {
    background:yellow;
    margin:6px 0;
}
p.off {
    background: black;
}
</style>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
    // 处理P标签click事件
    function clickHandler(element){
        $(element).toggleClass("off");
    }

    $(document).ready(function(){
        var p;
        $("#button").click(function(){
              if ( p ) {
                p.appendTo("body");
                p = null;
              } else {
                // p = $("p").detach();
                 p = $("p").remove();
                // p = $("p").empty();
              }
        });

    });
</script>
</head>

<body>
<p id="A" onclick="clickHandler(this)">Hello <span>subNode</span></p>
how are
<p id="B" onclick="clickHandler(this)">you? <span>subNode</span></p>

<input type="button" id="button" value="Attach/detach paragraphs" /> <br/>

</body>
</html>

我们再次使用remove方法，删除然后在append，发现事件响应有效了。其实这里的click事件已经作为一个静态的p元素的一个属性onclick的值了。所有append之后是有效的。

综上所述，可以得到这个三个方法的上述比较表格了。

点击复制链接与好友分享!回本站首页上一篇：屏蔽键盘输入js 下一篇：readonly 和disabled 相关文章

菜鸟学JQuery第二天--当学生也不容易啊

Amazing blank in jQuery

jquery动态添加删除div

jquery.each兼容IE,firefox

mvc2下jquery做普通验证

学习jquery基础的一点笔记

jquery操作和获取iframe中的对象

jquery 等比例缩放图片插件

jQuery异步生成树

jquery实现跟随鼠标移动显示页面信息

图文推荐