jQuery中DOM樹運算複製元素的方法_jquery

本文實例講述了jQuery中DOM樹操作之複製元素的方法。分享給大家供大家參考。具體分析如下：

複製元素

前面提到的操作包括：插人新建立的元素、將元素從文件中的一個位置移動 到另一個位置，以及透過新元素來包裝現有的元素。可是，有時候也會用到複製元素的操作。例如，可以複製出現在頁面頂部的導覽選單，並將副本放到頁腳。實際上，無論何時，只要能透過複製元素來增強頁面的視覺效果，都是以重複使用程式碼來實現的好機會。畢竟，如果能夠只寫一次程式碼並讓jQuery替我們完成複製，何必要重寫兩次同時又增加雙倍的出錯機會呢？

在複製元素時，需要使用jQuery的.clone()方法，這個方法能夠創建任何匹配的元素集合 的副本以便將來使用。與前面使用$()建立元素時一樣，在為複製的元素套用插人方法 之前，這些元素不會出現在文件中。

例如，下面這行程式碼將建立

中第一段落的副本：

複製程式碼 程式碼如下:

$('div.chapter p:eq(0)').clone() ;

但僅建立副本還不足以改變頁面的內容。若要讓複製的內容顯示在網頁中，可以使用插人方 法將其放到

前面。

複製程式碼 程式碼如下:

$('div.chapter p:eq(0)').clone() .insertBefore('div.chapter');

這樣，同一個段落就會出現兩次。可見，.clone()與插人方法的關係就如同複製和貼上一樣。

連同事件一起複製

在預設情況下，.clone()方法不會複製匹配的元素或其後代元素中綁定的 事件。不過，可以為這個方法傳遞一個布林值參數，將這個參數設為true, 就可以連同事件一'起複製，即.clone(true)。這樣一'來，就可以避免每次複製 之後還要手工重新綁定事件的麻煩。

透過複製創建突出引用許多網站都和它們的印刷版一樣，使用了突出引用（pullquote)來強調小塊的文本並吸引讀 者的眼球。所謂突出引用，就是從正文中提取一部分文本，然後為這段文本應用特殊的圖形樣式。 透過.clone()方法可以輕易地完成這種裝飾效果。首先，我們來看看例子文本的第三段:

It is a Law of Nature with us that a male child shall have one more side than his father, so that each generation shall rise (as a rule) one step in the scale of development and nobility. Thus the son of a Square is a Pentagon; the son of a Pentagon, a Hexagon; and so on.

我們注意到這個段落WX素開始，其中的類別是為了複製而 準備的。當把複製的*的文字貼到其他位置上時，還需要修改它的樣式屬性，以便它 與原來的文字區分開來。
要實現這種樣式，需要為複製的新增一個pulled類，並在樣式表中為這個類別添加如 下樣式規則：

複製程式碼 程式碼如下:

.pulled {
position: absolute; width: 120px; top: -20px; right: -180px; padding: 20px;
font: italic 1.2em "Times New Roman", Times, serif; background: #e5e5e5; border: 1px solid #999; border-radius: 8px;
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);
}

這樣，就為pull-quote添加了淺灰色的背景、一些內邊距和不同的字體。更重要的是將它 絕對定位到了在DOM中（絕對或相對）定位的最近祖先元素的上方20px、右側20px。如果祖先 兀素中沒有應用定位（除了static)的兀素，那麼pull-quote就會相對於文件中的

兀素 定位。為此，需要在jQuery程式碼中確保複製的pull-quote的父兀素應用了 position:relative 樣式。

計算CSS位置

雖然pull-quote盒子的上沿位置比較直觀，但說到它的左邊位於其定位的 父元素右側20像素時，恐怕就沒有那麼好理解了。要得到這個數字，需要先計算 pull-quote盒子的總寬度，即width屬性的值加上左右內邊距，或者說145px 5px 10px，結果是160px。當pull-quote設定right屬性時，值為0會使 pull-quote的右邊與其父元素的右邊對齊。因此，要使它的左邊位於父元素右 側20px，需要在相反的方向上將它移動比其總寬度多20px的距離，即-180px。

現在我們再回到jQuery程式碼中，看看怎麼套用樣式。首先，從符合所有元素的選擇符表達式開始，然後為選擇的元素套用position:relative樣式， 請參閱以下程式碼：

複製程式碼 程式碼如下:

$(document).ready(function() {
$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative');
});
});

這裡，我們同樣把需要多次用到的選擇符表達式保存在變數$parentParagraph中，以提升效能和可讀性。

接下來就是建立突出引用本身，以便利用準備好的CSS樣式。此時，我們先複製每個 元素，然後為得到的副本添加pulled類，最後再把這個副本插人到其父段落的開始處，參見如下代碼：

複製程式碼 程式碼如下:

$(document).ready(function() {
$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative'); var $ clonedCopy = $(this).clone();
$clonedCopy
.addClass('pulled')
.prependTo($parentParagraph);
});
});

這裡，我們又定義了一個新變數$clonedCopy，以便後面使用。
因為前面已經為這個複製的元素設定了絕對的定位，因此它在段落中的位置是無所謂的。根據CSS規則中的設置，只要它處於這個段落的內部，它就會相對於段落的上邊和右邊進行定位。 目前，段落與其中插人的突出引用的外觀如下圖所示：

希望本文所述對大家的jQuery程式設計有所幫助。