複製--.clone()
- 詳細內容
- 分類：JQuery
- 發佈：2013-08-09, 週五 23:50
- 點擊數：2878
JQuery：複製--.clone()：
(PS:這篇文章是從官網翻譯並且從新排版過)
.clone()可以為匹配的元素建立一個深層複製的拷貝。.clone()傳回值是一個Jquery物件。
語法一：
.clone( [withDataAndEvents ] ) // version added: 1.0
withDataAndEvents ：布林值，預設值是false，代表事件處理函式是否要跟隨著元素一起複製。從jQuery1.4開始，元素的資料也會被複製。(翻譯註解：可參考.data())
語法二：
.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] ) //version added: 1.5
withDataAndEvents ：布林值，預設值是false，代表事件處理函式是否要跟隨著元素一起複製。JQuery1.5.0中的預設值被錯誤的設定為true，這個錯誤在1.5.1版本中被更正為false。
deepWithDataAndEvents：布林值，預設值是withDataAndEvents的值，代表子元素的事件處理函式與資料是否要進行複製。其預設值會匹配第一個參數的值。(第一個參數的預設值是false)
.clone()方法會為匹配的元素進行深層的複製，這意味著他會複製匹配元素，以及其子元素和文字節點。由於效率的考量，動態的表單元素(例如在input 與 textarea輸入的使用者資料，或是在select選擇的使用者選項)。是不會被複製到新的複製元素中的。複製操作會將這些區塊的值設定為在HTML中的預設值。
當配合插入方法使用時，.clone()可以方便地在一個頁面中複製元素。考慮一下下面的HTML。
<div class="container"> <div class="hello">Hello</div> <div class="goodbye">Goodbye</div> </div>
就像在.append()中討論的一樣。通常當一個元素被插入某個DOM中時，他是被從舊的位置移到新的位置。所以，執行下面的程式碼：
$( ".hello" ).appendTo( ".goodbye" );
其DOM結構會變成這樣子：
<div class="container"> <div class="goodbye"> Goodbye <div class="hello">Hello</div> </div> </div>
為了避免這樣的狀況，替代的方法是，建立一個新的元素副本作為取代。你可以這樣寫：
$( ".hello" ).clone().appendTo( ".goodbye" );
結果會是：
<div class="container"> <div class="hello">Hello</div> <div class="goodbye"> Goodbye <div class="hello">Hello</div> </div> </div>注意：當使用.clone()方法時，你可以在把它插入文件前，修改複製元素或是其內容。
通常情況下，任何原始元素的事件處理函式都不會被複製到新的元素中。但是輸入參數的選項withDataAndEvents參數允許我們改變這個行為，讓我們能對元素的事件處理函式進行複製，並且綁定在新的元素上。從jQuery 1.4開始，所有的元素資料(由.data()方法附加上的)也會被複製到新的元素中。
然而元素資料中的物件與陣列是不會被複製並且依然在原本元素與複製元素上保持著共享的狀態。如果要深層複製其所有資料，必須要手動複製每一個資料。(翻譯註解：意思是通常情況下 元素資料的物件與陣列只有參考被複製，所以會參考到同一個物件與陣列上。)
// Original element with attached data var $elem = $( "#elem" ).data( "arr": [ 1 ] ), $clone = $elem.clone( true ) // Deep copy to prevent data sharing .data( "arr", $.extend( [], $elem.data( "arr" ) ) )
注意：使用 .clone() 有個副作用，就是會產生相同id屬性的元素。而id屬性應該要是唯一的。在可能的情況下，建議應該避免複製元素有相同的id屬性。或者可以使用class屬性作為識別符來替代。從 jQuery 1.5開始，withDataAndEvents參數可以被選用來增強deepWithDataAndEvents 參數，藉以進行所有複製元素的子元素的事件與資料的複製。
範例：
複製所有的b元素(並且選擇該複製元素)，並且將其放置在所有的段落前面。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>clone demo</title> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <b>Hello</b><p>, how are you?</p> <script> $( "b" ).clone().prependTo( "p" ) </script> </body> </html>
按個讚!~支持本站!~