对DOM节点进行操作--删除、复制与替换节点

删除节点:
方法1:remove([selector]):用于从DOM中删除所有匹配的元素
selector:可选参数,jquery选择器,
不传的话,则删除匹配到的所有元素

该方法删除某个节点之后,该节点所包含的所有后代节点元素也同时被删除
返回值是一个指向已被删除节点的引用,以后还可以继续

方法2:detach([selector]):删除DOM中匹配的元素
selector:可选参数,jquery选择器,
不传的话,则删除匹配到的所有元素
与remove()方法不同的是,这个方法不会吧匹配的元素从jquery对象中删除,
所有绑定的事件和数附加的据都会保留下来

方法3:empty():将节点清空,清空元素中所有的后代节点元素

复制节点:
clone()方法;复制节点
1.不带参数的,复制匹配的DOM元素且选中这些复制的副本
2.带布尔型的参数
参数为true时,表示复制匹配的元素以及所有的事件处理
false时,表示不复制元素的事件处理

替换节点:
replaceAll(selector):
selector:用于查找所要被替换的元素
使用匹配的元素替换掉所有selector匹配到的元素
A.replaceAll(selector):
用A元素替换所有匹配到的元素

replaceWith(content)
content:用于将匹配元素替换掉的内容
将所有的元素替换成指定的HTML或DOM元素
A.replaceWith(B):B替换匹配的A内容

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jquery之删除、复制与替换节点</title>
    <script src="../../../js/jquery.min.js"></script>
    <script>
        $(function(){
     
        // $('div p').remove();
        $('div.box1  p').remove("p[title!='testP2']");
       var $p4= $('div.box2 p').detach("p[title!='testP3']");
       $('.box2').append($p4);

       $('div.box3 p').empty();//清空p节点

       //复制节点
       $('#copyElement').on('click',function(){
     
          var box4Ele=$('div.box4');
           var clonedEle= box4Ele.children().eq(1).clone(true);
           $('.box1').append(clonedEle);
         });

         //替换所有被匹配到的元素
         var $ele=$('Paragraph. ');
         $ele.replaceAll('div.replace p');
    
         //替换掉匹配的内容
         var $ele2=$('Love,Love,Love ');
         $('div.replace2').replaceWith($ele2);//后面替换前面的
        
        });
    </script>
</head>
<body>
    <button id="copyElement">复制节点</button>
    <div class="box1">
        <p title="testP1">every day!you must cheer up! 1</p>
        <p title="testP2">every day!you must cheer up! 2</p>
    </div>

    <div class="box2">
            <p title="testP3">every day!you must cheer up! 3</p>
            <p title="testP4">every day!you must cheer up! 4</p>
        </div>

        <div class="box3">
                <p title="testP5">every day!you must cheer up! 5</p>
                <p title="testP6">every day!you must cheer up! 6</p>
            </div>


            <div class="box4">
                    <p title="test7">every day!you must cheer up! 7</p>
                    <p title="testP8">every day!you must cheer up! 8</p>
                </div>
            <div class="replace">
                    <p>Hello</p><p>cruel</p><p>World</p>
            </div>
            <div class="replace2">
                    <p>you</p><p>are</p><p>mine!</p>
            </div>
</body>
</html>

你可能感兴趣的:(JQuery,jquery,js,dom)