jquery實現復制的兩種方式


---恢復內容開始---

jquery兩種復制元素的方式:

1.$("seletor").clone(param1,param2)有兩個可選參數(布爾類型),默認都是false。param1代表是否復制事件。param2代表是否對事件處理程序和克隆的元素的所有子元素的數據進行復制

Html代碼:
<b>Hello</b><p>, how are you?</p>

jQuery 代碼:
$("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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM