快捷導(dǎo)航

jQuery中DOM樹操作之復(fù)制元素的方法

更新時間：2015年01月23日 11:13:46 投稿：shichen2014

這篇文章主要介紹了jQuery中DOM樹操作之復(fù)制元素的方法,實例分析了DOM樹復(fù)制元素的使用技巧,需要的朋友可以參考下

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

復(fù)制元素

前面提到的操作包括：插人新創(chuàng)建的元素、將元素從文檔中的一個位置移動到另一個位置，以及通過新元素來包裝已有的元素。可是，有時候也會用到復(fù)制元素的操作。例如，可以復(fù)制出現(xiàn)在頁面頂部的導(dǎo)航菜單，并把副本放到頁腳上。實際上，無論何時，只要能通過復(fù)制元素增強頁面的視覺效果，都是以重用代碼來實現(xiàn)的好機會。畢竟，如果能夠只編寫一次代碼并讓jQuery替我們完成復(fù)制，何必要重寫兩遍同時又增加雙倍的出錯機會呢？

在復(fù)制元素時，需要使用jQuery的.clone()方法，這個方法能夠創(chuàng)建任何匹配的元素集合的副本以便將來使用。與前面使用$()創(chuàng)建元素時一樣，在為復(fù)制的元素應(yīng)用一種插人方法之前，這些元素不會出現(xiàn)在文檔中。

例如，下面這行代碼將創(chuàng)建<div class="chapter">中第一段落的副本：

復(fù)制代碼代碼如下:

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

但僅創(chuàng)建副本還不足以改變頁面的內(nèi)容。要想讓復(fù)制的內(nèi)容顯示在網(wǎng)頁中，可以使用插人方法將其放到 <div class=__chapter__> 前面。

復(fù)制代碼代碼如下:

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

這樣，同一個段落就會出現(xiàn)兩次?？梢?，.clone()與插人方法的關(guān)系就如同復(fù)制和粘貼一樣。

連同事件一起復(fù)制

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

通過復(fù)制創(chuàng)建突出引用很多網(wǎng)站都和它們的印刷版一樣，使用了突出引用（pullquote)來強調(diào)小塊的文本并吸引讀者的眼球。所謂突出引用，就是從正文中提取一部分文本，然后為這段文本應(yīng)用特殊的圖形樣式。通過.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素開始，其中的類是為了復(fù)制而準備的。當把復(fù)制的*的文本粘貼到其他位置上時，還需要修改它的樣式屬性，以便它與原來的文本區(qū)別開來。
要實現(xiàn)這種樣式，需要為復(fù)制的<3。3。>添加一個pulled類，并在樣式表中為這個類添加如下樣式規(guī)則：

復(fù)制代碼代碼如下:

.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添加了淺灰色的背景、一些內(nèi)邊距和不同的字體。更重要的是將它絕對定位到了在DOM中（絕對或相對）定位的最近祖先元素的上方20px、右側(cè)20px。如果祖先兀素中沒有應(yīng)用定位（除了static)的兀素，那么pull-quote就會相對于文檔中的<body>兀素定位。為此，需要在jQuery代碼中確保復(fù)制的pull-quote的父兀素應(yīng)用了 position:relative 樣式。

計算CSS位置

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

現(xiàn)在我們再回到j(luò)Query代碼中，看看怎么應(yīng)用樣式。首先，從匹配所有元素的選擇符表達式開始，然后為選擇的元素應(yīng)用position:relative樣式，參見如下代碼：

復(fù)制代碼代碼如下:

$(document).ready(function() {

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

});

});

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

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

復(fù)制代碼代碼如下:

$(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，以便后面使用。
因為前面已經(jīng)為這個復(fù)制的元素設(shè)置了絕對的定位，因此它在段落中的位置是無所謂的。根據(jù)CSS規(guī)則中的設(shè)置，只要它處于這個段落的內(nèi)部，它就會相對于段落的上邊和右邊進行定位。目前，段落與其中插人的突出引用的外觀如下圖所示：