jquery实现复制的两种方式

最新推荐文章于 2023-08-11 15:54:23 发布

weixin_34014555

最新推荐文章于 2023-08-11 15:54:23 发布

阅读量820

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/zhangye/p/3522547.html

版权

---恢复内容开始---

jquery两种复制元素的方式：

1.$("seletor").clone(param1,param2)有两个可选参数(布尔类型)，默认都是false。param1代表是否复制事件。param2代表是否对事件处理程序和克隆的元素的所有子元素的数据进行复制

<b>Hello</b><p>, how are you?</p>

jQuery 代码:

$("b").clone().prependTo("p");

<button>Clone Me!</button>

$("button").click(function(){
  $(this).clone(true).insertAfter(this);//新复制的按钮也会有click事件
});

2.jQuery.extend([deep], target, object1, [objectN])//用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

如果不指定target，则给jQuery命名空间本身进行扩展。如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

deep:如果设为true，则递归合并。

target:待修改对象。

object1:待合并到第一个对象的对象。

objectN:待合并到第一个对象的对象。

根据这个方法的特性，我们可以这样实现jquery的复制功能。

//浅复制，只复制第一层节点

jQuery extend({}, oldObject)

//深度复制，循环复制每层节点

jQuery.extend(true, {}, oldObject);

var obj1={

'a': 's1',
'b': [1,2,3,{'a':'s2'}],
'c': {'a':'s3', 'b': [4,5,6]

};

var obj2 = $.extend(true, {}, obj1);
obj2.a='s1s1';
obj2.b[0]=100;
obj2.c.b[0]=400;

console.log(obj1);
console.log(obj2);

obj2 内部元素的值改变之后，如果 obj1 的相应值保持不变，就说明复制成功。

本文参考资料：jquery API和http://www.php100.com/html/program/jquery/2013/0905/6007.html

转载于:https://www.cnblogs.com/zhangye/p/3522547.html

关注