继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

jQuery DOM操作简单总结-删

Just90
关注TA
已关注
手记 7
粉丝 9
获赞 271
jQuery DOM操作可像SQL操作那样简单分为增、删、改、查。可能这有些牵强,但是能帮助我们理解和记忆。
jQuery DOM操作——删:
一、删除子节点

empty(),清空,仅删除指定元素中的所有子节点,不删除自身节点

$(".self").empty()
<!DOCTYPE html>
<html>
    <head>
        <title>仅删除指定元素中的所有后代节点,不删除自身节点使用.empty()</title>
        <meta charset="utf-8">
        <style>
            .parent {
                border: 1px solid #f00;
                width: 370px;
                line-height: 25px;
                padding: 5px;
            }
            .child { color: #f00; }
        </style>
        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <button>通过.empry()方法清除后代节点</button>
        <div class="parent">
            <div class="child">测试通过.empry()方法清除子节点</div>
            <div class="child">
                <div class="grand-child">测试通过.empry()方法清除孙子(后代)节点</div>
            </div>
        </div>
        <script>
            $("button").click(function() {
                $(".parent").empty();
            });
        </script>
    </body>
</html>

empty
empty-firebug

二、删除自身节点

remove(),删除,remove()会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。

$(".self").remove()
<!DOCTYPE html>
<html>
    <head>
        <title>将元素自身移除,同时移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据,使用remove()</title>
        <meta charset="utf-8">
        <style>
            .parent {
                border: 1px solid #f00;
                width: 370px;
                line-height: 25px;
                padding: 5px;
                box-sizing: border-box;
            }
            .self {
                border: 1px solid #0f0;
                width: 100%;
                line-height: 25px;
                padding: 5px;
                box-sizing: border-box;
            }
            .child { color: #f00; }
        </style>
        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <button>通过.remove()方法删除自身节点</button>
        <button>通过.remove(argument)方法删除自身节点</button>
        <div class="parent">
            <div class="self no-argument">
                <div class="child">
                    <div class="grand-child">测试通过.remove()方法删除自身节点</div>
                </div>
            </div>
            <div class="self argument">
                <div class="child">
                    <div class="grand-child">测试通过.remove(argument)方法删除自身节点</div>
                </div>
            </div>
        </div>
        <script>
            $("button:first").click(function() {
                $(".self.no-argument").remove();
            });
            $("button:last").click(function() {
                $(".self").remove(":contains('argument')");
                /* $(".self").remove();  //将移除 class="self no-argument"和class="self argument" */
            });
        </script>
    </body>
</html>

remove
remove-firebug

三、保留数据和事件的删除

detach(),脱离,表示从当前页面中移除该元素,但保留这个元素的内存模型对象,即保存该元素的数据和事件。

$(".self").detach()
<!DOCTYPE html>
<html>
    <head>
        <title>从当前页面中移除该元素,但保留这个元素的内存模型对象,即保存该元素的数据和事件,使用.detach()</title>
        <meta charset="utf-8">
        <style>
            .parent {
                border: 1px solid #f00;
                width: 370px;
                line-height: 25px;
                padding: 5px;
                box-sizing: border-box;
            }
            .self {
                border: 1px solid #0f0;
                width: 100%;
                line-height: 25px;
                padding: 5px;
                box-sizing: border-box;
            }
            .child { color: #f00; }
        </style>
        <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    </head>
    <body>
        <button>通过.detach()方法删除自身节点</button>
        <button>通过.append()方法将删除的原本节点添加到父元素的最后</button>
        <div class="parent">
            <div class="self">测试通过.detach()方法删除自身节点</div>
        </div>
        <script>
            var self;
            $("button:first").click(function() {
                self = $(".self").detach();
            });
            $("button:last").click(function() {
                $(".parent").append($(self)); 
                /*这里self没有加上引号,删除后不存在 .self 这个元素,在$("button:first").click(function() {});中
                $(".self")被绑定到了self。不知这样理解是否正确*/
            });
        </script>
    </body>
</html>

点击第一个按钮后:
detach
detach-firebug
再点击第二个按钮后:
detach-append
detach-append-firebug

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP