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

来源：互联网发布：网络时间校对器编辑：程序博客网时间：2024/05/01 21:10

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>

1 0