4、JQuery——DOM节点删除、复制和拷贝

最新推荐文章于 2022-08-11 09:38:25 发布

无畏无惧踏雪

最新推荐文章于 2022-08-11 09:38:25 发布

阅读量1.9k

点赞数

分类专栏： JQuery学习笔记文章标签： jquery

本文链接：https://blog.csdn.net/cxg200888/article/details/78302801

版权

本文详细介绍了JQuery中DOM节点的删除操作，包括.empty(), .remove()和.detach()方法，以及DOM复制的.clone()方法，还讲解了替换方法.replaceWith()和.replaceAll()以及包裹方法wrap(), unwrap(), wrapAll()和wrapInner()的使用场景和示例。" 85325890,1104471,解决Android Studio indexing卡顿问题,"['Android开发', 'IDE问题', 'Android Studio故障排除', '代码编辑器']

摘要由CSDN通过智能技术生成

- JQueryDOM节点删除复制和拷贝

JQuery——DOM节点删除、复制和拷贝

DOM节点删除

.empty()方法

移除指定元素中的所有子节点，同样移除元素的文本
清空所有元素中后代节点，不删除自己本身

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    div {
        background: #bbffaa;
        width: 300px;
    }
    </style>
</head>
<body>
    <h2>通过empty移除元素</h2>
    <div id="test">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <button>点击通过jQuery的empty移除元素</button>
    <script type="text/javascript">
    $("button").on('click', function() {
    
        //通过empty移除了当前div元素下的所有p元素
        //但是本身id=test的div元素没有被删除
        $("#test").empty()
    })
    </script>
</body>
</html>

.remove()方法

remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的JQuery数据（自带事件销毁方法，防止内存泄露）

该节点与该节点所包含的所有后代节点将同时被删除
提供传递一个筛选的表达式，删除指定合集中的元素

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .test1 {
        background: #bbffaa;
    }

    .test2 {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>通过jQuery remove方法移除元素</h2>
    <div class="test1">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <div class="test2">
        <p>p元素3</p>
        <p>p元素4</p>
    </div>
    <button>通过点击jQuery的empty移除元素</button>
    <button>通过点击jQuery的empty移除指定元素</button>
    <script type="text/javascript">
    $("button:first").on('click', function() {
    
        //删除整个 class=test1的div节点
        $(".test1").remove()
    })

    $("button:last").on('click', function() {
    
        //找到所有p元素中，包含了3的元素
        //这个也是一个过滤器的处理
        //带参数的remove
        $("p").remove(":contains('3')")
    })
    </script>
</body>
</html>

.detach()保留数据的删除操作

$(“div”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style type="text/css">
    p {
        color: red;
    }
    </style>
</head>

<body>
    <p>P元素1，默认给绑定一个点击事件</p>
    <p>P元素2，默认给绑定一个点击事件</p>
    <button id="bt1">点击删除 p 元素</button>
    <button id="bt2">点击移动 p 元素</button>
    <script type="text/javascript">
    $('p').click(function(e) {
    
        alert(e.target.innerHTML)
    })
    var p;
    $("#bt1").click(function() {
    
        if (!$("p").length) return; //去重
        //通过detach方法删除元素
        //只是页面不可见，但是这个节点还是保存在内存中
        //数据与事件都不会丢失
        p = $(