54-jQuery复制节点相关方法

最新推荐文章于 2021-11-24 23:55:15 发布

杨亚仑

最新推荐文章于 2021-11-24 23:55:15 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery入门练习

本文链接：https://blog.youkuaiyun.com/yangyalun/article/details/84305613

jQuery入门练习专栏收录该内容

60 篇文章

订阅专栏

本文详细介绍了jQuery中clone()方法的使用，包括浅复制和深复制的区别。浅复制仅复制元素，不包含事件，而深复制同时复制元素及其事件。通过实例展示了如何使用此方法进行节点复制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习了jQuery复制节点的方法。

clone()里面的参数如果是false，那么就是浅复制；如果是true，那么就是深复制

所谓的浅复制和深复制的区别就是：浅复制不能复制元素的事件，而深复制可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>54-jQuery复制节点相关方法</title>
    <script src="JS_file/jquery-1.12.4.js"></script>
    <script>
         $(function () {
                 //    编写jQuery相关代码
             /*
             复制
             clone([Even[,deepEven]])
             如果传入false就是浅复制，如果传入true就是深复制
             浅复制只会复制元素，不会复制元素事件
             深复制不仅会复制元素，而且还会复制元素事件
              */
             $("button").eq(0).click(function () {
                // 1.浅复制一个元素
                var $li=$("li:first").clone(false);
                //   2.将复制的元素添加到ul中
                 $("ul").append($li);
             });
             $("button").eq(1).click(function () {
                 // 1.深复制一个元素
                 var $li=$("li:first").clone(true);
                 //   2.将复制的元素添加到ul中
                 $("ul").append($li);
             });
             $("li").click(function () {
                 alert($(this).html());
             })
         })
    </script>
</head>
<body>
<button>浅复制节点</button>
<button>深复制节点</button>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
</ul>
</body>
</html>