Clone ノードは DOM の一般的な操作です。jQuery は、DOM のクローン作成を処理するために特別に使用される clone メソッドを提供します。
.clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素、匹配元素的下级元素、文字节点。
clone メソッドは比較的単純で、ノードをクローンするだけですが、注意が必要です。 、ノードにイベントやデータなどがある場合。他の処理の場合は、単純なノード構造だけでなく、付随するイベントやデータも複製されるように、 clone(ture) でブール値 ture を渡して指定する必要があります。クローンを一緒に作成します
例:
HTML部分<p></p>JavaScript部分 $("p").on('click', function() {//执行操作}) //clone处理一 $("p").clone() //只克隆了结构,事件丢失 //clone处理二 $("p").clone(true) //结构、事件与数据都克隆
クローンを使用する場合、追加の詳細を知る必要があります:
clone() メソッドをドキュメントに挿入する前に、変更できます。クローンされた要素または要素のコンテンツ (右側のコードなど) I $(this).clone().css('color','red') は色を追加しました
true を渡すことで、すべてのイベント ハンドラーがバインドされます元の要素は複製された要素にコピーされます
<!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 p, .right p { width: 100px; height: 90px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; background: #bbffaa; } </style></head><body> <h2>通过clone克隆元素</h2> <p class="left"> <p class="aaron1">点击,clone浅拷贝</p> <p class="aaron2">点击,clone深拷贝,可以继续触发创建</p> </p> <script type="text/javascript"> //只克隆节点 //不克隆事件 $(".aaron1").on('click', function() { $(".left").append( $(this).clone().css('color','red') ) }) </script> <script type="text/javascript"> //克隆节点 //克隆事件 $(".aaron2").on('click', function() { console.log(1) $(".left").append( $(this).clone(true).css('color','blue') ) }) </script></body></html>
以上がDOM copy clone() を理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。