ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryにはクローン作成方法はありますか?

jqueryにはクローン作成方法はありますか?

青灯夜游オリジナル: 2020-11-19 10:14:521852ブラウズ

jquery には、clone() メソッドというクローン作成メソッドがあります。 clone() メソッドは、dom クローンの処理に特別に使用されます。子ノード、テキスト、属性を含む、選択された要素のコピーを生成できます。構文は "$(selector).clone(true|false)" で、true はコピーイベント処理が必要なプログラムです。

関連する推奨事項: "jqvideo"

クローンノードは DOM の一般的な操作であり、jQuery はクローンを提供しますこのメソッドは、dom clone

.clone() メソッドを処理して、すべての一致する要素、一致する要素の下位要素、およびテキストノードを含むすべての一致する要素セットを深くコピーするために特に使用されます。

clone メソッドは比較的単純で、ノードのクローンを作成するだけですが、ノードにイベントやデータなどの他の処理がある場合は、 clone( ture) を指定するため、単純なノード構造を複製するだけでなく、付随するイベントやデータも複製します。

構文

$(selector).clone(true|false)

パラメータ:

##true イベントハンドラーをコピーする必要があることを指定します。
#false デフォルト。イベントハンドラーをコピーしないことを指定します。

#例:

HTML 部分

<div></div>

JavaScript 部分

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

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

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

使い方はとても簡単です。clone を使用する場合は、追加の詳細を知る必要があります:

clone() メソッドをドキュメントに挿入する前に、次のことができます。クローン要素または要素のコンテンツを変更します。たとえば、右側のコードでは、 $(this).clone().css('color','red') で色

を追加します。
true を渡すと、元の要素にバインドされているすべてのイベント処理関数がクローン化された要素にコピーされます。
clone() メソッドは jQuery 拡張機能であり、jQuery を介してバインドされたイベントのみを処理できます。 . Data
要素データ (data) 内のオブジェクトと配列はコピーされず、複製された要素と元の要素の間で引き続き共有されます。ディープコピーのすべてのデータは、

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

ごとに手動でコピーする必要があります。プログラミング関連の知識の詳細については、

を参照してください。！

以上がjqueryにはクローン作成方法はありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript jquery css html 对象事件 dom this

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：jqueryのon()とclick()の違いは何ですか?次の記事：jqueryのon()とclick()の違いは何ですか?

続きを見る