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

来源：互联网发布：淘宝店铺绑定分店过程编辑：程序博客网时间：2024/06/06 08:32

- JQueryDOM节点删除复制和拷贝
  - DOM节点删除
    - empty方法
    - remove方法
    - detach保留数据的删除操作
  - DOM复制与替换
    - 拷贝clone
    - 替换方法replaceWithreplaceAll
  - 包裹方法
    - wrap
    - unwrap方法
    - wrapAll
    - wrapInner方法

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 = $("p").detach()    });    $("#bt2").click(function() {        //把p元素在添加到页面中        //事件还是存在        $("body").append(p);    });    </script></body></html>

DOM复制与替换

拷贝clone()

.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

注：
如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了

常用部分如下：

HTML部分<div></div>JavaScript部分$("div").on('click', function() {//执行操作})//clone处理一$("div").clone()   //只克隆了结构，事件丢失//clone处理二$("div").clone(true) //结构、事件与数据都克隆

<!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>    .left,    .right {        width: 300px;        height: 120px;    }    .left div,    .right div {        width: 100px;        height: 90px;        padding: 5px;        margin: 5px;        float: left;        border: 1px solid #ccc;        background: #bbffaa;    }    </style></head><body>    <h2>通过clone克隆元素</h2>    <div class="left">        <div class="aaron1">点击,clone浅拷贝</div>        <div class="aaron2">点击,clone深拷贝,可以继续触发创建</div>    </div>    <script type="text/javascript">        //只克隆节点        //不克隆事件        $(".aaron1").on('click', function() {            $(".left").append( $(this).clone().css('color','red') )        })    </script>    <script type="text/javascript">        //克隆节点        //克隆事件        $(".aaron2").on('click', function() {            console.log(1)            $(".left").append( $(this).clone(true).css('color','blue') )        })    </script></body></html>

替换方法：replaceWith（），replaceAll（）

replaceWith（），replaceAll（）都是替换的意思，只是两者替换内容和位置不一样

//replaceWith（）$("p:eq(1)").replaceWith('<astyle="color:red">替换第二段的内容</a>')//replaceAll（）$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>    <style>    .right div {        background: yellow;    }    </style></head><body>    <h2>replaceWith()和replaceAll()</h2>    <div class="left">        <button class="bt1">点击,通过replaceWith替换内容</button>        <button class="bt2">点击,通过rreplaceAll替换内容</button>    </div>    <div class="right">        <div>            <p>第一段</p>            <p>第二段</p>            <p>第三段</p>        </div>        <div>            <p>第四段</p>            <p>第五段</p>            <p>第六段</p>        </div>    </div>    <script type="text/javascript">    //只克隆节点    //不克隆事件    $(".bt1").on('click', function() {        //找到内容为第二段的p元素        //通过replaceWith删除并替换这个节点        $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')    })    </script>    <script type="text/javascript">    //找到内容为第六段的p元素    //通过replaceAll删除并替换这个节点    $(".bt2").on('click', function() {        $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');    })    </script></body></html>

包裹方法

wrap()

在集合中匹配的每个元素周围包裹一个HTML结构
如：

//给p元素增加一个div包裹<p>p元素</p>$('p').wrap('<div></div>')

例子：

<!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>    .left div,    .right div {        width: 100px;        padding: 5px;        margin: 5px;        float: left;        border: 1px solid #ccc;        background: #bbffaa;    }    .right div {        background: yellow;    }    p {        border: 1px solid red;    }    a {        border: 1px solid blue;    }    </style></head><body>    <h2>DOM包裹wrap()方法</h2>    <div class="left">        <button class="aaron1">点击,通过wrap方法给p元素增加父容器div</button>        <button class="aaron2">点击,通过wrap的回调方法给a元素增加父容器div</div>    </div>    <div class="right">        <p>p元素</p>        <p>p元素</p>    </div>    <div class="left">        <a>a元素</a>        <a>a元素</a>    </div>    <script type="text/javascript">    $(".aaron1").on('click', function() {        //给所有p元素，增加父容器div        $('p').wrap('<div></div>')    })    </script>    <script type="text/javascript">    $(".aaron2").on('click', function() {        $('a').wrap(function() {            return '<div class="' + $(this).text() + '" />';        })    })    </script></body></html>

unwrap()方法

与wrap方法相反，将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

<div>    <p>p元素</p></div>$('p').unwrap();

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>    <style>    .left,    .right {        width: 250px;        height: 120px;    }    .left div,    .right div {        width: 100px;        height: 120px;        padding: 5px;        margin: 5px;        float: left;        border: 1px solid #ccc;        background: #bbffaa;    }    .right div {        background: yellow;    }    p {        border: 1px solid red;    }    a {        border: 1px solid blue;    }    </style></head><body>    <h2>DOM包裹unwrap()方法</h2>    <div class="left">        <div class="aaron1">点击,通过unwrap方法给p元素删除父容器div</div>        <div class="aaron2">点击,通过unwrap的回调方法给a元素删除父容器div</div>    </div>    <div class="right">        <div>            <p>p元素</p>        </div>        <div>            <p>p元素</p>        </div>    </div>    <div class="left">        <div>            <a>a元素</a>        </div>        <div>            <a>a元素</a>        </div>    </div>    <script type="text/javascript">    $(".aaron1").on('click', function() {        //找到所有p元素，删除父容器div        $('p').unwrap('<div></div>')    })    </script>    <script type="text/javascript">    $(".aaron2").on('click', function() {        //找到所有p元素，删除父容器div        $('a').unwrap(function() {            return '<div></div>';        })    })    </script></body></html>

wrapAll()

给集合中匹配的元素增加一个外面包裹HTML结构

如下例子：

//给所有p元素增加div<p>p元素</p><p>p元素</p>$('p').wrapAll('<div></div>')

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>    <style>    .left,    .right {        width: 250px;        height: 120px;    }    .left div,    .right div {        width: 100px;        /*height: 120px;*/        padding: 5px;        margin: 5px;        float: left;        border: 1px solid #ccc;        background: #bbffaa;    }    .right div {        background: yellow;    }    p {        border: 1px solid red;    }    a {        border: 1px solid blue;    }    </style></head><body>    <h2>DOM包裹wrapAll()方法</h2>    <div class="left">        <div class="aaron1">点击,通过wrapAll方法给所有P元素增加父容器div</div>        <div class="aaron2">点击,通过wrapAll的回调方法给每个a元素增加父容器div</div>    </div>    <div class="right">        <p>p元素</p>        <p>p元素</p>    </div>    <div class="left">        <a>a元素</a>        <a>a元素</a>    </div>    <script type="text/javascript">    $(".aaron1").on('click', function() {        //给所有p元素，增加父容器div        $('p').wrapAll('<div></div>');    })    </script>    <script type="text/javascript">    $(".aaron2").on('click', function() {        //wrapAll接受一个回调函数        //每一次遍历this都指向了合集中每一个a元素        $('a').wrapAll(function() {            return '<div></div>'        })    })    </script></body></html>

wrapInner（）方法

给集合中匹配的元素的内部，增加包裹的HTML结构

如下例子：

//给所有元素增加一个p包裹<div>p元素</div><div>p元素</div>$('div').wrapInner('<p></p>')

<!DOCTYPE html><html><head>    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>    <style>    .left,    .right {        width: 250px;        height: 130px;    }    .left div,    .right div {        width: 100px;        padding: 5px;        margin: 5px;        float: left;        border: 1px solid #ccc;        background: #bbffaa;    }    .right div {        background: yellow;    }    p {        border: 1px solid red;    }    a {        border: 1px solid blue;    }    </style></head><body>    <h2>DOM包裹wrapInner()方法</h2>    <div class="left">        <div class="aaron1">点击,通过wrapInner方法给所有div元素增加内部父容器p</div>        <div class="aaron2">点击,通过wrapInner的回调方法给每个div元素增加内部父容器a</div>    </div>    <div class="right">        <div class="right1">p元素</div>        <div class="right1">p元素</div>    </div>    <div class="left">        <div class="left1">a元素</div>        <div class="left1">a元素</div>    </div>    <script type="text/javascript">    $(".aaron1").on('click', function() {        //给所有class=right1的div元素，增加内部包裹父容器p       $('.right1').wrapInner('<p></p>');    })    </script>    <script type="text/javascript">    $(".aaron2").on('click', function() {        //wrapInner接受一个回调函数        //每一次遍历this都指向了合集中每一个class=left1的div元素        $('.left1').wrapInner(function() {            return '<a></a>'        })    })    </script></body>v</html>

阅读全文

0 0