DOM copy clone() を理解する方法
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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7548
15
1382
52
83
11
22
90
Linux ゼロコピー テクノロジをわかりやすく説明する 6 枚の写真
Feb 22, 2024 pm 06:40 PM
みなさん、こんにちは。今日は Linux のゼロコピー テクノロジについて話しましょう。 sendfile システム コールをエントリ ポイントとして使用して、ゼロコピー テクノロジの基本原理を深く調査します。ゼロコピーテクノロジーの中心的な考え方は、データ伝送経路を最適化することでメモリ間のデータのコピーを最小限に抑え、データ伝送の効率とパフォーマンスを向上させることです。 1. ゼロコピー技術の紹介 Linux のゼロコピー技術は、データ転送を最適化する技術であり、カーネルモードとユーザーモード間のデータコピー数を減らし、データ転送の効率を向上させます。データ送信のプロセス中、通常、送信を完了する前に、データをカーネル バッファからアプリケーション バッファにコピーし、次にアプリケーション バッファからネットワーク デバイスのバッファにコピーする必要があります。ゼロコピーテクノロジーの利点
Linux のゼロコピー テクノロジの簡単な分析
Aug 04, 2023 pm 04:23 PM
この記事では、Linux の主なゼロコピー テクノロジと、ゼロコピー テクノロジに適用できるシナリオについて説明します。ゼロコピーの概念を迅速に確立するために、一般的なシナリオを紹介します。
Linux パイプラインの使用方法についての深い理解
Feb 21, 2024 am 09:57 AM
Linux パイプの使用法を深く理解する Linux オペレーティング システムでは、パイプは、あるコマンドの出力を別のコマンドの入力として使用することで、さまざまな複雑なデータ処理や操作を便利に実現できる非常に便利な機能です。 Linux パイプの使用方法を深く理解することは、システム管理者と開発者にとって非常に重要です。この記事では、パイプラインの基本概念を紹介し、具体的なコード例を通じてデータ処理と操作に Linux パイプラインを使用する方法を示します。 1. Linux におけるパイプの基本概念
Reactでコピー機能を実装する方法
Dec 30, 2022 am 11:27 AM
React がコピー機能を実装する方法: 1. "copy-to-clipboard" ライブラリを使用してコピー機能を実装します。 2. "react-copy-to-clipboard" ライブラリを使用してコピー機能を実装します。 3. "コピーを実現するには「navigator.clipboard.writeText(e)」メソッドを使用; 4. コピーを実現するには「document.execcommand("copy")」メソッドを使用; 5. コピー機能を実現するには「copy-js」ライブラリを使用します。
PHPの値の受け渡し方法を正しく理解する方法
Mar 08, 2024 pm 03:30 PM
PHPの値の受け渡し方法を正しく理解する方法 PHPはWeb開発で広く使われているスクリプト言語で、PHPにおけるパラメータの受け渡し方法には主に値の受け渡しと参照の受け渡しがあります。また、PHP で値がどのように渡されるかを理解することは、効率的なコードを作成するために重要です。この記事では、PHP での値の受け渡し方法について詳しく説明し、読者の理解を助けるために特定のコード例を使用します。値渡しメソッドの基本的な概念は、変数の値をコピーして関数またはメソッドに渡すことであり、関数内の値に対する操作は影響しません。
Go 言語のコメントの重要性を理解する
Mar 29, 2024 pm 04:48 PM
コメントは Go プログラミングの非常に重要な部分です。コメントは、プログラマーがコードのロジック、目的、詳細をより深く理解するのに役立ち、コードの読みやすさと保守性が向上します。この記事では、Go 言語におけるコメントの重要性を紹介し、それを具体的なコード例と組み合わせて、コメントがコードの理解にどのように役立つかを説明します。まず、簡単な Go プログラムの例を見てみましょう: packagemainimport "fmt" funcmain(){/
文字列についての深い理解。Go 言語ドキュメントの Split 関数
Nov 04, 2023 pm 01:14 PM
Go 言語ドキュメントの string.Split 関数を深く理解するには、特定のコード例が必要です。Go 言語では、文字列操作は非常に一般的な要件です。このうちstringsパッケージはGo言語が提供する標準パッケージであり、豊富な文字列処理機能を提供します。その中でも、strings.Split 関数はよく使われる関数の 1 つで、指定された区切り文字に従って文字列を文字列スライスに分割する機能です。 string.Split 関数を正式に説明する前に、
ThinkPHP6のミドルウェアを理解する
Jun 20, 2023 am 10:03 AM
最新の Web アプリケーションの複雑さが増すにつれて、コード ロジックもますます複雑になってきています。この問題を解決するために、最新の Web 開発ではミドルウェアがますます普及しています。 ThinkPHP6 は、ミドルウェアもサポートする人気の PHP フレームワークです。この記事では、ThinkPHP6 ミドルウェアの基本と実際の使用方法について説明します。ミドルウェアとは何ですか? Web 開発では、ミドルウェアは HTTP リクエストとレスポンスを処理する方法を指します。クライアントがサーバーにリクエストを送信すると、
