jQuery中DOM樹操作之復制元素的方法

2019-11-20 13:19:50

字體：大中小

來源：轉載

供稿：網友

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

復制元素

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

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

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

復制代碼代碼如下:

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

但僅創建副本還不足以改變頁面的內容。要想讓復制的內容顯示在網頁中，可以使用插人方法將其放到 <div class=__chapter__> 前面。

復制代碼代碼如下:

$('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素開始，其中的類是為了復制而準備的。當把復制的*的文本粘貼到其他位置上時，還需要修改它的樣式屬性，以便它與原來的文本區別開來。
要實現這種樣式，需要為復制的<3。3。>添加一個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就會相對于文檔中的<body>兀素定位。為此，需要在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規則中的設置，只要它處于這個段落的內部，它就會相對于段落的上邊和右邊進行定位。目前，段落與其中插人的突出引用的外觀如下圖所示：