Verfügt JQuery über eine Klonmethode?-js-Tutorial-php.cn

Verfügt JQuery über eine Klonmethode?

青灯夜游

Freigeben： 2020-11-19 10:14:52

Original

1844 Leute haben es durchsucht

jquery verfügt über eine Klonmethode, die clone()-Methode. Die clone()-Methode wird speziell zum Verarbeiten von Dom-Klonen verwendet. Sie kann eine Kopie des ausgewählten Elements einschließlich untergeordneter Knoten, Text und Attribute generieren. Die Syntax lautet „$(selector).clone(true|false)“, was „true“ angibt Diese Kopierereignisverarbeitung ist ein erforderliches Programm. Verwandte Empfehlungen: „
jq Video“ Sammlung, einschließlich aller übereinstimmenden Elemente, untergeordneter Elemente übereinstimmender Elemente und Textknoten.

Verfügt JQuery über eine Klonmethode? Die Klonmethode ist relativ einfach. Klonen Sie einfach den Knoten. Beachten Sie jedoch, dass wir, wenn der Knoten über andere Verarbeitungsvorgänge wie Ereignisse oder Daten verfügt, einen booleschen Wert ture über clone(ture) übergeben müssen, um dies anzugeben dass es sich nicht nur um einen einfachen Klon handelt. Auch die Knotenstruktur muss zusammen mit den angehängten Ereignissen und Daten geklont werden.

Syntax

$(selector).clone(true|false)

Nach dem Login kopieren

Parameter:

true Gibt an, dass der Ereignishandler kopiert werden muss.

false Standard. Gibt an, dass Ereignishandler nicht kopiert werden.

HTML-Teil
```
<div></div>
```
Nach dem Login kopieren

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

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

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

Nach dem Login kopieren

Es ist so einfach zu verwenden. Wenn wir das Klonen verwenden, müssen wir zusätzliche Details wissen:

clone()-Methode , Bevor wir es in das Dokument einfügen, können wir das geklonte Element oder den Elementinhalt ändern. Im Code rechts füge ich beispielsweise $(this).clone().css('color','red') hinzu color

Durch die Übergabe von true werden alle an das ursprüngliche Element gebundenen Event-Handler in das geklonte Element kopiert. Die clone()-Methode ist eine jQuery-Erweiterung und kann nur über jQuery-Elemente gebundene Ereignisse und Daten verarbeiten und Arrays innerhalb von Daten werden nicht kopiert und weiterhin zwischen geklonten Elementen und Originalelementen gemeinsam genutzt. Alle Daten für das tiefe Kopieren müssen für jeden manuell kopiert werden

<!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>

Nach dem Login kopieren

Weitere Programmierkenntnisse finden Sie unter:

Das obige ist der detaillierte Inhalt vonVerfügt JQuery über eine Klonmethode?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!