jQuery clone（）示例

最新推荐文章于 2023-12-15 20:51:44 发布
最新推荐文章于 2023-12-15 20:51:44 发布
阅读量187 收藏
点赞数
文章标签： javascript ViewUI

jQuery clone（）用于创建匹配元素的副本。 它还支持一个布尔参数，以指示是否需要复制事件处理程序和数据以及匹配的元素。

1.克隆html元素

例如，您将克隆以下html代码。 

<div class="smallBox">
	I'm a small box
	<div class="smallInnerBox">I'm a small small inner box</div>
 </div>

使用clone（）创建上述元素的副本，并将复制的元素放在包含“ smallBox”类名称的div标记之后。 

$('.smallBox').clone().insertAfter(".smallBox");

结果 ： 

<div class="smallBox">
	I'm a small box
	<div class="smallInnerBox">I'm a small small inner box</div>
 </div>
  <div class="smallBox">
	I'm a small box
	<div class="smallInnerBox">I'm a small small inner box</div>
 </div>

2.克隆事件处理程序

下一个示例将克隆按钮单击事件，您将复制包含id为“ cloneButton1”的按钮。 

<button id="cloneButton1">clone()</button>

<script type="text/javascript">
    $("#cloneButton1").click(function () {
		
	  $('.smallBox').clone().insertAfter(".smallBox");
	  
    });
</script>

如果使用默认的clone（）或clone（false）方法，它将仅复制按钮元素，而不复制click（）事件处理程序。 

$('#cloneButton1').clone().insertAfter("#cloneButton1");

若要复制click（）事件处理程序以及匹配的元素，应使用clone（true）。 

$('#cloneButton1').clone(true).insertAfter("#cloneButton1");

自己尝试 

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
	.smallBox{
		padding:8px;
		border:1px solid blue;
		margin:8px;
	}
	.smallInnerBox{
		padding:8px;
		border:1px solid green;
		margin:8px;
	}
</style>

</head>
<body>
  <h1>jQuery clone() example</h1>

  <div class="smallBox">
	I'm a small box
	<div class="smallInnerBox">I'm a small small inner box</div>
   </div>
  
  <p>
  <button id="cloneButton1">clone()</button>
  <button id="cloneButton2">clone() button (default)</button>
  <button id="cloneButton3">clone(true) button</button>
  <button id="reset">reset</button>
  </p>
  
<script type="text/javascript">
	
    $("#reset").click(function () {
	  location.reload();
    });
	
    $("#cloneButton1").click(function () {
		
	  $('.smallBox').clone().insertAfter(".smallBox");
	  
    });
	
    $("#cloneButton2").click(function () {
		
	  $('#cloneButton1').clone(false).insertAfter("#cloneButton1");
	  
    });
	
    $("#cloneButton3").click(function () {
		
	  $('#cloneButton1').clone(true).insertAfter("#cloneButton1");
	  
    });
	
</script>
</body>
</html>
试试演示
标签：

翻译自: https://mkyong.com/jquery/jquery-clone-example/

cyan20115
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery clone( ) 方法
m0_57835615的博客
06-11 1551
语法格式： $(selector).clone(true[false])
Java中的clone()方法
热门推荐
yygr的博客
01-12 1万+
clone()方法的约定 Cloneable接口的目的是作为对象的一个混合接口，表明这样的对象允许克隆（clone），但是这个接口却没有定义clone()，这是它的缺陷：无法约束子类实现clone()方法。Object定义了一个受保护的clone()方法。Cloneable虽然没有定义clone()方法，但是却影响了Object.clone()方法的行为：如果一个类实现了Cloneable，调用Object的clone()就会返回该对象的逐域拷贝，否则抛出CloneNotSupportedException
clone()
KingOfMyHeart的博客
05-17 2416
clone是Linux为创建线程设计的（虽然也可以用clone创建进程）。所以可以说clone是fork的升级版本，不仅可以创建进程或者线程，还可以指定创建新的命名空间（namespace）、有选择的继承父进程的内存、甚至可以将创建出来的进程变成父进程的兄弟进程等等。 clone函数功能强大，带了众多参数，它提供了一个非常灵活自由的常见进程的方法。 clone可以让你有选择性的继承父进程的资源，你...
jQuery之克隆节点clone()
06-16 772
【代码】jQuery之克隆节点clone()
jquery之clone()方法详解
weixin_33869377的博客
10-17 765
clone()函数用于克隆当前匹配元素集合的一个副本，并以jQuery对象的形式返回。你也可以简单地理解为：克隆当前jQuery对象。 你还可以指定是否复制这些匹配元素(甚至它们的子元素)的附加数据( data()函数 )和绑定事件。 该函数属于jQuery对象(实例)。 语法 jQueryObject.clone( withDataAndEvents [, deepWithDataAnd...
jQuery Clone Bug解决代码
10-28
下面是一个 jQuery Clone Bug 的示例代码： ```html Array.prototype.xyzz = function (arg) { console.log(1,this,arg); }; Array.prototype.xyzzz = function (arg) { console.log(2,this,arg); }; $...
jQuery复制节点用法示例(clone方法)
10-21
主要介绍了jQuery复制节点的方法,结合实例形式分析了clone方法复制节点及appendTo方法追加节点的相关操作技巧,需要的朋友可以参考下
jquery学习示例
03-29
**jQuery学习示例** jQuery，一个轻量级的JavaScript库，极大地简化了JavaScript的DOM操作、事件处理、动画效果和Ajax交互。它以其简洁的API和高效性在全球范围内深受开发者喜爱。这个压缩包包含了多个jQuery的学习...
jqueryUI里拖拽排序示例分析
12-10
本示例分析了如何在jQuery UI中实现一个具有拖拽排序功能的产品目录，用户可以将商品从分类列表拖动到购物车并自动排序。 首先，HTML代码定义了产品列表和购物车两个区域。`<div id="products">` 包含了一个`...
简述jQuery的clone()方法
飞翔的企鹅的博客
11-10 378
介绍 复制指定元素生成新的JQ对象，传入值有两个true和false。 举例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jqu...
jQuery 文档操作 - clone() 方法
生活中的思索
09-12 1214
clone( [withDataAndEvents ] ):创建一组匹配元素的深层副本 withDataAndEvents :一个布尔值，指示是否应复制克隆元素的所有子代的事件处理程序和数据。默认情况下，它的值与第一个参数的值匹配（默认值为false）。clone（）方法执行匹配元素集的深层拷贝，这意味着它会复制匹配的元素以及其所有后代元素和文本节点。注意：出于性能原因，某些表单元素（例如，输入到
pytorch中的.clone() 和 .detach()复制变量、共享内存变量
爱在深秋
08-31 9405
使用torch.clone()获得的新tensor和原来的数据不再共享内存，但仍保留在计算图中，clone操作在不共享数据内存的同时支持梯度梯度传递与叠加，所以常用在神经网络中某个单元需要重复使用的场景下。需要注意的是view返回的Tensor与源Tensor是共享data的，但是依然是一个新的Tensor（因为Tensor除了包含data外还有一些其他属性），两者id（内存地址）并不一致。detach()函数可以返回一个完全相同的tensor,与旧的tensor共享内存，脱离计算图，不会牵扯梯度计算。..
java对象拷贝
weixin_33749131的博客
03-22 888
为什么80%的码农都做不了架构师？>>> ...
clone()方法
qq_43135507的博客
01-14 507
package com.yyr.clone; //why clone? A与B是两个独立对象，但B的初始值由A对象确定的。so,clone()方法是最简单也是最高效的手段。 public class CloneTest { public static void main(String[] args) throws CloneNotSupportedException {     Face fac...
Java的clone()方法
最新发布
2301_76947341的博客
12-15 481
如果两个Person对象的name的地址值相同， 说明两个对象的name都指向同一个String对象， 也就是浅拷贝， 而如果两个对象的name的地址值不同， 那么就说明指向不同的String对象， 也就是在拷贝Person对象的时候， 同时拷贝了name引用的String对象， 也就是深拷贝。如果只是用Object中默认的clone方法，是浅拷贝的。深拷贝：根据Person源对象中的name指向的字符串对象创建一个新的相同的字符串对象，将这个新字符串对象的引用赋给新拷贝的Person对象的name字段。
Clone使用方法详解
weixin_30642029的博客
11-29 581
本文转载自:http://www.blogjava.net/jerry-zhaoj/archive/2009/10/14/298141.html Clone使用方法详解 java“指针” Java语言的一个优点就是取消了指针的概念，但也导致了许多程序员在编程中常常忽略了对象与引用的区别，本文会试图澄清这一概念。并且由于Java不能通过简单的赋值来解决对象...
jquery clone()函数讲解
行天之路
11-24 2627
Jqueryclone()实例 Jquery clone() 函数被用来创建匹配元素的一份拷贝。其也支持比尔参数用来指示是否拷贝匹配元素的数据和事件处理器。   1 拷贝html 元素   例如： 我们将拷贝以下的html 代码 divclass="smallBox">         I'm a small box         divclass="smallInnerBo
Java的clone()方法使用详解
drinkingcode
10-23 9526
前言： 我们知道，在java的object类中，有这么一个方法clone()，这个方法有什么用呢？怎样才能正确地使用这个方法呢？ 下面一一来进行阐述一下 clone()方法详解： 1>clone()方法的作用 顾名思义，clone()方法的作用就是克隆的意思，引入这个方法，这样就便于我们构建属于自己的一些本地对象副本。 这样我们就不用担心因为副本对象的引用而使原生的对象发生改变
jquery基础4
dunyanan1的专栏
03-23 674
克隆节点:    $("#ld").clone().appendTo("#user"); 克隆id等于ld的元素克隆并追加到id为user的元素中   $("#ld").clone().insertAfter("#abm");  克隆id等于ld的元素克隆并追加到id为abm的元素之后 包裹元素    $("ul").wrp("")   将ul用div进行包裹 $("ul").w
jquery的clone
03-30
方法是用于复制元素及其子元素，同时也会复制元素的事件和数据。 语法： ```javascript $(selector).clone(deepCopy) ``` 参数： - selector：必需，要复制的元素。 - deepCopy：可选，一个布尔值，表示是否要深度复制。默认为 false，只复制元素本身，不复制子元素。如果设置为 true，则会复制子元素。 返回值： - 返回新复制的元素。 示例： ```html <div id="box"> <p>Hello World!</p> </div> ``` ```javascript // 只复制元素本身 var $cloneBox = $('#box').clone(); console.log($cloneBox); // <div id="box"></div> // 深度复制 var $deepCloneBox = $('#box').clone(true); console.log($deepCloneBox); // <div id="box"><p>Hello World!</p></div> ``` 注意事项： - 使用 clone 方法复制的元素和原始元素具有相同的 ID，这可能会导致 ID 冲突。应该避免使用相同的 ID。 - 复制的元素会脱离文档流，需要手动将其插入到文档中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值