jQuery中DOM树操作之复制元素的方法

这样，同一个段落就会出现两次。可见，.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类，并在样式表中为这个类添加如 下样式规则：

这样，就为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样式， 参见如下代码：

这里，我们同样把需要多次用到的选择符表达式保存在变量$parentParagraph中，以提升性能和可读性。

接下来就是创建突出引用本身，以便利用准备好的CSS样式。此时，我们先复制每个 元素，然后为得到的副本添加pulled类，最后再把这个副本插人到其父段落的开始处，参见如下代码：

这里，我们又定义了一个新变量$clonedCopy，以便后面使用。
因为前面已经为这个复制的元素设置了绝对的定位，因此它在段落中的位置是无所谓的。根据CSS规则中的设置，只要它处于这个段落的内部，它就会相对于段落的上边和右边进行定位。 目前，段落与其中插人的突出引用的外观如下图所示：

希望本文所述对大家的jQuery程序设计有所帮助。