jQuery文档处理(二)--复制，替换，包裹

最新推荐文章于 2021-07-06 15:10:15 发布

darling.0

最新推荐文章于 2021-07-06 15:10:15 发布

阅读量807

点赞数 1

分类专栏： web前端文章标签： jquery 文档处理复制替换包裹

本文链接：https://blog.csdn.net/daliyuan350649623/article/details/53765682

版权

web前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

jQuery文档处理(二)–复制，替换，包裹

复制

这里写图片描述

这里写图片描述

clone() 克隆
even ：指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>06_复制节点.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    </head>
    <body>
        <button id="save">保存</button><br>   
        <p>段落</p>
    </body>
    <script type="text/javascript">
        $(document).ready(function(){
            //点击按钮时，克隆按钮自己
            $("#save").click(function(){
                var $new = $(this).clone(true);//克隆，参数为true，会复制事件，默认是false不会复制事件
                //显示克隆出的按钮
                $("body").append($new);
            });
        });
    </script>
</html>

替换

A.replaceWith(B) ，使用A将B替换掉
A.replaceAll(B) ，使用B将A替换掉

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>07_替换节点.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    </head>
    <html>
        <p>段落</p>
        <p>段落</p>
        <p>段落</p>
        <button>保存</button>
    </html>
<script type="text/javascript">
        $(document).ready(function(){
            //把p替换成a标签
            //$("p").replaceWith("<a>dly</a><br/>");
            $("<a>dly</a><br/>").replaceAll($("p"));
        });
</script>
</html>

包裹

这里写图片描述

A.wrap(B) ，使用B将每一个A进行包裹（多个B）

    <B><A></A></B>
    <B><A></A></B>

这里写图片描述

A.wrapAll(B) ，使用B将所有A进行包裹（一个B）

    <B>
        <A></A>
        <A></A>
    </B>

这里写图片描述

A.wrapInner(B) ,使用B将每一个A的标签体包裹。

    <A><B>。。。</B></A>
    <A><B>。。。</B></A>

这里写图片描述
A.unwrap() ，将A的父元素删除，自己留着

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>包裹节点.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

    </head>

    <body>
        <strong title="jQuery">jQuery</strong>
        <strong title="jQuery">jQuery</strong>
    </body>
    <script type="text/javascript">
        $(document).ready(function(){
            //每个strong都分别被div包裹
            //$("strong").wrap("<div></div>");
            //所有strong被一个div包裹
            $("strong").wrapAll("<div></div>");
            //包裹strong内部的内容
            //$("strong").wrapInner("<div></div>");
            $("strong").unwrap();//去除包裹，去除的是外部包裹(也就是包裹的父标签),去除的是wrap方法包裹的，其他两个都不能去除
        });
    </script>
</html>