jquery实现复制的两种方式
2014-01-16 14:59
232 查看
---恢复内容开始---
jquery两种复制元素的方式:
1.$("seletor").clone(param1,param2)有两个可选参数(布尔类型),默认都是false。param1代表是否复制事件。param2代表是否对事件处理程序和克隆的元素的所有子元素的数据进行复制
Html代码:
结果:
HTML 代码:
jQuery 代码:
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
jquery两种复制元素的方式:
1.$("seletor").clone(param1,param2)有两个可选参数(布尔类型),默认都是false。param1代表是否复制事件。param2代表是否对事件处理程序和克隆的元素的所有子元素的数据进行复制
Html代码:
<b>Hello</b><p>, how are you?</p>jQuery 代码:[/code]
$("b").clone().prependTo("p");
结果:
<b>Hello</b><p><b>Hello</b>, how are you?</p>
HTML 代码:
<button>Clone Me!</button>
jQuery 代码:
$("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
相关文章推荐
- jquery lazyload 和 echo 两种方式实现图片延迟加载
- 两种方法使用jquery实现左右移动效果(包含each遍历方式)
- jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
- java 实现文件复制的两种方式
- Lua实现类与继承的两种方式(复制)and (闭包)
- jquery两种方式实现链接失效
- jQuery中JSONP的两种实现方式
- 原生JavaScript和JQuery两种方式实现AJAX
- C#实现深复制的两种方式
- jquery两种方式实现链接失效
- jquery、javascript实现(get、post两种方式)跨域解决方法
- java 实现文件复制的两种方式
- jquery pagination分页的两种实现方式
- jQuery中JSONP的两种实现方式简单解释
- jQuery图片无缝滑动效果的两种实现方式
- java 实现文件复制的两种方式
- NHibernate+spring.net+jquery打造UI控件库(mvc+webform两种实现) usercontrol,jtemplate两种方式打造无刷新分页(附NHbernate+Spring.net源码)
- jquery阻止事件的两种实现方式
- Java实现文件复制的两种方式
- 原生js和jquery两种方式实现tab切换