Home >Web Front-end >JS Tutorial >Does jquery have a cloning method?
Does jquery have a cloning method?
- 青灯夜游Original
- 2020-11-19 10:14:521840browse
jquery has a cloning method, namely the clone() method. The clone() method is specially used to process dom clones. It can generate a copy of the selected element, including child nodes, text and attributes; the syntax is "$(selector).clone(true|false)", true specifies that copy event processing is required program.
Related recommendations: "jq视频"
Clone node is a common operation of DOM, jQuery provides a clone method , specially used for processing dom clone
.clone() method to deeply copy all matching element sets, including all matching elements, subordinate elements of matching elements, and text nodes.
The clone method is relatively simple, just clone the node, but 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 Not only clone the simple node structure, but also clone the accompanying events and data.
Syntax
$(selector).clone(true|false)
Parameters:
- ##true Specifies that the event handler needs to be copied.
- #false Default. Specifies that event handlers are not copied.
For example:
HTML part
##<div></div>
JavaScript part
$("div").on('click', function() {//执行操作})
//clone处理一
$("div").clone() //只克隆了结构，事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆It’s so simple to use. We need to know additional details when using clone:
- clone() method, before inserting it into the document, we can Modify the cloned element or element content. For example, in the code on the right, I $(this).clone().css('color','red') adds a color
- by passing true, copies all event handling functions bound to the original element to the cloned element
- The clone() method is a jQuery extension and can only handle events bound through jQuery. Data
- Objects and arrays within 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 copied manually for each
-
<!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('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>For more programming-related knowledge, please visit:
The above is the detailed content of Does jquery have a cloning method?. For more information, please follow other related articles on the PHP Chinese website!