jQuery clone()方法 - BBSMAP

jQuery clone()方法

Post published:2023年5月12日
Post category:jquery

当需要复制一个元素并在页面上显示多个完全相同的元素时，可以使用jQuery的clone()方法。

1. clone()方法的语法

$(selector).clone(deepCopy, withDataAndEvents)

参数说明：

deepCopy：可选，是否使用深拷贝，默认为false。如果设为true，则会复制元素及其子元素、文本内容、属性和绑定的数据和事件。如果设为false，则只复制元素本身。
withDataAndEvents：可选，是否复制元素的数据和事件，默认为false。如果设为true，则会复制元素绑定的所有数据和事件。

2. clone()方法示例

2.1 深拷贝示例

在以下示例中，我们复制了一个<div>元素并添加到页面中。深拷贝包括复制元素及其所有子元素、文本内容、属性和绑定的数据和事件。

<html>
<head>
    <title>jQuery Clone() Method Demo - Deep Copy</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="original">
        <h2>Original</h2>
        <p>This is the original content.</p>
        <button>Click Me</button>
    </div>
    <div id="clone">
        <h2>Clone</h2>
    </div>
    <script>
        $(document).ready(function() {
            // 复制元素并添加到页面中
            var cloned = $('#original').clone(true);
            cloned.attr('id', 'cloned');
            $('#clone').append(cloned);
        });
    </script>
</body>
</html>

2.2 浅拷贝示例

在以下示例中，我们仅复制了一个<div>元素本身，并添加到页面中。由于未指定deepCopy为true，因此只复制元素本身，而不包括其子元素、文本内容、属性和绑定的事件和数据。

<html>
<head>
    <title>jQuery Clone() Method Demo - Shallow Copy</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="original">
        <h2>Original</h2>
        <p>This is the original content.</p>
        <button>Click Me</button>
    </div>
    <div id="clone">
        <h2>Clone</h2>
    </div>
    <script>
        $(document).ready(function() {
            // 复制元素并添加到页面中
            var cloned = $('#original').clone();
            cloned.attr('id', 'shallow-clone');
            $('#clone').append(cloned);
        });
    </script>
</body>
</html>

这两个示例演示了如何使用jQuery的clone()方法复制元素并显示在页面上。您可以根据需要自定义更多选项，如：clone()其他参数，如何处理事件，等等。

Tags: jquery