jQuery.clone() 函數實例詳解

clone()函數用於複製目前符合元素集合的副本，並以jQuery物件的形式傳回。你也可以簡單地理解為：克隆目前jQuery物件。

你也可以指定是否複製這些符合元素(甚至它們的子元素)的附加資料( data()函數 )和綁定事件。

此函數屬於jQuery物件(實例)。

語法

jQueryObject.clone( withDataAndEvents [, deepWithDataAndEvents ] )

參數

#參數 描述

#withDataAndEvents 可選/Boolean類型是否同時複製元素的附加資料和綁定事件，預設為false。

deepWithDataAndEvents 可選/Boolean類型是否同時複製元素的所有子元素的附加資料和綁定事件，預設值即為參數withDataAndEvents的值。

clone()主要用於複製目前jQuery物件的一個副本。

jQuery 1.5 新增支援：clone()支援第二個參數deepWithDataAndEvents。此參數指示是否同時複製被克隆元素的所有子元素的附加資料和綁定事件。

注意：

1、在jQuery 1.4之前，clone()函數只額外複製元素的綁定事件，從1.4版本開始，才開始支援複製元素的附加資料。

2、1.5.0版本時(只有1.5.0)，參數withDataAndEvents的預設值被錯誤地設定為true，從1.5.1開始，其預設值才被改回false。

傳回值

clone()函數的回傳值為jQuery類型，傳回目前jQuery物件的一個複製副本。

注意：基於效能原因考慮，clone()函數不會複製某些表單元素的動態，例如使用者在4750256ae76b6b9d804861d8f69e79d3輸入的內容、使用者在221f08282418e2996498697df914ce4e中選擇的選項。不過d5fd7aea971a85678ba271703566ebfd元素的動態將會被複製，例如使用者在text中輸入的內容、使用者對checkbox的選取狀態。

範例&說明

clone()函數用於複製目前jQuery物件。請參考下面這段HTML程式碼為例：

<p id="n1">
    <input id="n2" type="button" value="按钮1" />
    <input id="n3" type="button" value="按钮2" />
</p>

以下jQuery範例程式碼用於示範clone()函數的具體用法：

// 目前jQuery版本：1.11.1

$(":button").click( function(){

    document.writeln( this.value );

#} );

var $n2 = $("#n2");

$n2.data("myData", "附加資料");

//沒有複製附加資料和綁定事件

var $clonedN2 = $n2.clone(); // 兩個參數都預設為false

document.writeln( $clonedN2.data("myData") ); / / undefined

$clonedN2.trigger("click"); // (沒有綁定的點擊事件，無回應輸出)

//同時複製附加資料和綁定事件

var $clonedN2WithCopy = $n2.clone( true ); // 兩個參數：true、true(第二個參數不設置，預設為第一個參數的值)

document. writeln( $clonedN2WithCopy.data("myData") ); // 附加資料

$clonedN2WithCopy.trigger("click"); // 按鈕1

以上是jQuery.clone() 函數實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！