How to understand DOM copy clone()
Clone node is a common operation of DOM. jQuery provides a clone method, which is specially used to deal with dom cloning:
.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
The clone method is relatively simple, but it is to clone the node. It should be noted that if the node has other processing such as events or data, we need to pass a Boolean value ture through clone(ture) to specify, so that it not only clones the simple node structure, but also gives the attached events and data. Clone
for example:
HTML部分<p></p>JavaScript部分
$("p").on('click', function() {//执行操作})
//clone处理一
$("p").clone() //只克隆了结构，事件丢失
//clone处理二
$("p").clone(true) //结构、事件与数据都克隆It is so simple to use. Additional details we need to know when using clone:
clone() method, before inserting it into the document, we can modify the cloned element or element content, such as the code on the right $(this).clone().css('color', 'red') adds a color
By passing true, all event handlers bound to the original element are copied to the cloned element
-
The clone() method is an extension of jQuery and can only handle events and data bound through jQuery
Objects and arrays within the element data (data) will not be copied and will Continue to be shared between the cloned element and the original element. All data for deep copying needs to be manually copied for each
Case analysis:
##
<!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>The above is the detailed content of How to understand DOM copy clone(). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Six pictures explain Linux zero-copy technology clearly
Feb 22, 2024 pm 06:40 PM
Hello everyone, today let us talk about Linux zero-copy technology. We will use the sendfile system call as an entry point to deeply explore the basic principles of zero-copy technology. The core idea of zero-copy technology is to minimize the copying of data between memories and improve the efficiency and performance of data transmission by optimizing the data transmission path. 1. Introduction to zero-copy technology Linux zero-copy technology is a technology used to optimize data transmission. It improves the efficiency of data transmission by reducing the number of data copies between kernel mode and user mode. During the process of data transmission, it is usually necessary to copy the data from the kernel buffer to the application buffer, and then from the application buffer to the buffer of the network device before the transmission can be completed. Advantages of zero-copy technology
A brief analysis of zero-copy technology in Linux
Aug 04, 2023 pm 04:23 PM
This article discusses the main zero-copy technologies in Linux and the applicable scenarios for zero-copy technology. In order to quickly establish the concept of zero copy, we introduce a common scenario.
How to implement copy function in react
Dec 30, 2022 am 11:27 AM
Methods for react to implement the copy function: 1. Implement the copy function through the "copy-to-clipboard" library; 2. Use the "react-copy-to-clipboard" library to implement the copy function; 3. Through "navigator.clipboard.writeText(e )" method to realize copying; 4. Use the "document.execcommand("copy")" method to realize copying; 5. Use the "copy-js" library to realize the copy function.
In-depth understanding of how to use Linux pipelines
Feb 21, 2024 am 09:57 AM
In-depth understanding of the use of Linux pipes In the Linux operating system, pipes are a very useful function that can use the output of one command as the input of another command, thereby conveniently realizing various complex data processing and operations. A deep understanding of how Linux pipes are used is very important for system administrators and developers. This article will introduce the basic concepts of pipelines and show how to use Linux pipelines for data processing and operations through specific code examples. 1. Basic concepts of pipes in Linux
Understand the importance of Go language comments
Mar 29, 2024 pm 04:48 PM
Comments are a very important part of Go programming. Comments can help programmers better understand the logic, purpose, and details of the code, thereby improving the readability and maintainability of the code. This article will introduce the importance of comments in the Go language, and combine it with specific code examples to illustrate how comments help code understanding. First, let's look at a simple Go program example: packagemainimport "fmt" funcmain(){/
How to correctly understand value passing in PHP
Mar 08, 2024 pm 03:30 PM
How to correctly understand the value passing method in PHP PHP is a scripting language widely used in Web development, and the parameter passing methods in PHP mainly include value passing and reference passing. And understanding how values are passed in PHP is crucial to writing efficient code. This article will discuss the value passing method in PHP in detail and use specific code examples to help readers better understand. The basic concept of value passing method is to copy the value of a variable and pass it to a function or method. Operations on the value within the function will not affect it.
In-depth understanding of the strings.Split function in Go language documentation
Nov 04, 2023 pm 01:14 PM
To deeply understand the strings.Split function in the Go language documentation, specific code examples are required. In the Go language, string operations are a very common requirement. Among them, the strings package is a standard package provided by the Go language and provides a wealth of string processing functions. Among them, the strings.Split function is one of the commonly used functions. Its function is to split a string into a string slice according to the specified delimiter. Before we officially dive into the strings.Split function,
Understanding the middleware of ThinkPHP6
Jun 20, 2023 am 10:03 AM
As the complexity of modern web applications continues to increase, code logic is becoming more and more complex. To solve this problem, middleware is becoming more and more popular in modern web development. ThinkPHP6 is a popular PHP framework that also supports middleware. In this article, we will discuss the basics and practical uses of ThinkPHP6 middleware. What is middleware? In web development, middleware refers to a way of processing HTTP requests and responses. When the client sends a request to the server,
