Home > Article > Web Front-end > Does jquery have a cloning method?

Does jquery have a cloning method?

青灯夜游Original: 2020-11-19 10:14:521799browse

jquery has a cloning method, namely the clone() method. The clone() method is specially used to process dom clones. It can generate a copy of the selected element, including child nodes, text and attributes; the syntax is "$(selector).clone(true|false)", true specifies that copy event processing is required program.

Related recommendations: "jq视频"

Clone node is a common operation of DOM, jQuery provides a clone method , specially used for processing dom clone

.clone() method to deeply copy all matching element sets, including all matching elements, subordinate elements of matching elements, and text nodes.

The clone method is relatively simple, just clone the node, but it should be noted that if the node has other processing such as events or data, we need to pass a Boolean value ture through clone(ture) to specify, so Not only clone the simple node structure, but also clone the accompanying events and data.

Syntax

$(selector).clone(true|false)

Parameters:

##true Specifies that the event handler needs to be copied.
#false Default. Specifies that event handlers are not copied.

For example:

HTML part

<div></div>

JavaScript part

$("div").on(&#39;click&#39;, function() {//执行操作})

//clone处理一
$("div").clone()   //只克隆了结构，事件丢失

//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

It’s so simple to use. We need to know additional details when using clone:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }
    
    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }
    </style>
</head>

<body>
    <h2>通过clone克隆元素</h2>
    <div class="left">
        <div class="aaron1">点击,clone浅拷贝</div>
        <div class="aaron2">点击,clone深拷贝,可以继续触发创建</div>
    </div>
    <script type="text/javascript">
        //只克隆节点
        //不克隆事件
        $(".aaron1").on(&#39;click&#39;, function() {
            $(".left").append( $(this).clone().css(&#39;color&#39;,&#39;red&#39;) )
        })
    </script>

    <script type="text/javascript">
        //克隆节点
        //克隆事件
        $(".aaron2").on(&#39;click&#39;, function() {
            console.log(1)
            $(".left").append( $(this).clone(true).css(&#39;color&#39;,&#39;blue&#39;) )
        })
    </script>
</body>

</html>

Programming Course

! !

The above is the detailed content of Does jquery have a cloning method?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery css html 对象事件 dom this

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What is the difference between on() and click() in jquery?Next article：What is the difference between on() and click() in jquery?

See more

Does jquery have a cloning method?

Related articles