ホームページ > 記事 > ウェブフロントエンド > DOM copy clone() を理解する方法
DOM copy clone() を理解する方法
- 一个新手オリジナル
- 2017-09-30 09:23:591443ブラウズ
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 を渡すことで、すべてのイベント ハンドラーがバインドされます元の要素は複製された要素にコピーされます
- clone() メソッドは jQuery 拡張機能であり、jQuery を介してバインドされたイベントとデータのみを処理できます
- 要素データ (データ) 内のオブジェクトと配列はコピーされませんクローン要素と元の要素によって引き続き共有されます。ディープコピー用のすべてのデータは、
<!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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。