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

本文说明了在jQuery中复制DOM树操作元素的方法。分享给大家参考。具体分析如下：

复制元素

上述操作包括插入新创建的元素，将元素从文档中的一个位置移动到另一个位置，以及用新元素包装现有元素。然而，有时也使用复制元素的操作。例如，您可以复制页面顶部显示的导航菜单，并将副本放在页脚。事实上，每当您可以通过复制元素来增强页面的视觉效果时，这都是重用代码的好机会。毕竟，如果我们可以写一次代码，让jQuery为我们复制，为什么要重写两次，出错的几率会翻倍呢？

复制元素时，需要使用jQuery的。clone()方法，该方法可以创建任何匹配元素集合的副本供将来使用。和以前一样，在用$()创建元素时，这些元素不会出现在文档中，直到对复制的元素应用了insert方法。

例如，下面一行代码将创建div class='chapter '中第一段的副本：副本代码如下： $ ('div.chapter p:eq (0)')。clone()；

但是，创建副本不足以更改页面内容。如果您希望复制的内容显示在网页上，可以通过插入人员将其放在div class=__chapter__的前面。复制代码如下： $ ('div.chapter p:eq (0)')。克隆()。insert before(' div . chapter ')；

这样，同一个段落就会出现两次。因此，之间的关系。clone()和inserting方法就像复制粘贴一样。

与事件一起复制。

默认情况下。clone()方法不复制匹配元素或其子元素中绑定的事件。但是，您可以将布尔参数传递给此方法，如果此参数设置为true，则可以将其与事件一(即)一起复制。克隆(真)。这样，您可以避免在每次复制后手动重新绑定事件的麻烦。

通过复制创建突出引用许多网站，像它们的印刷版本一样，使用pullquote来强调小部分文本并吸引读者的注意力。所谓突出显示是指从文本中提取一部分文本，然后对文本应用特殊的图形样式。这种装饰效果很容易通过。克隆()。首先，我们来看一下示例文本的第三段：ppan class=' pull-quote '这是一个自然法则span class=mdropmwwith us/span一个男孩应该比他的父亲多一个强壮的一面/strong壮的一面/span，这样每一代人都应该(通常)在发展和高贵的规模上上升一步。因此，正方形的儿子是五边形；五边形、六边形的儿子；等等。/p

我们注意到这段开头的Wspan class='pull-quote'X，其中的类为复制做好了准备。将复制的span*文本粘贴到其他位置时，需要修改其样式属性，以便与原始文本区分开来。要实现这种风格，您需要复制3。3。添加一个提取的类，并在样式表中向该类添加以下样式规则：复制代码如下：拉{位置：绝对；宽度： 120 px；top :-20px；right :-180 px；padding: 20pxfont:斜体1.2em 'Times New Roman '，Times，衬线；背景# e5e5e5border: 1px固体# 999；border-radius : 8px；box-shadow: 1px 1px 8px rgba(0，0，0，0.6)；}

这样，一个浅灰色的背景，一些内部空白和不同的字体被添加到拉引号。更重要的是，它绝对位于DOM中最近的祖先元素的上方20px和右侧20px(绝对或相对)。如果祖先元素中没有固定的(静态的除外)元素，那么拉引将相对于文档中的主体元素定位。因此，有必要确保复制的拉引号的父引用在jQuery代码中应用position:relative样式。

计算CSS位置。

虽然拉引号框顶边的位置很直观，但当说它的左侧位于其父元素右侧20像素时，恐怕就没那么容易理解了。要得到这个数字，需要计算拉引号框的总宽度，即width属性的值加上左右内边距，即145px 5px 10px，结果是160px。当为拉引号设置了right属性时，值0将拉引号的右侧与其父元素的右侧对齐。因此，要使其左侧20px位于父元素的右侧，需要向相反方向移动比其总宽度多20px的距离，即-180px。

现在让我们回到jQuery代码，看看如何应用样式。首先，从匹配所有span class='pull-quote '元素的选择器表达式开始，然后将position:relative样式应用于所选元素。请参见以下代码：复制代码为： $(文档)。ready (function () {$ ('span。拉引号')。每个(函数(索引){var $ parent段落=$ (this)。父代(' p ')；$ ParentParameter . CSS(' position '，' relative ')；});});

这里，我们还保存了需要在变量$ parentparameter中多次使用的选择器表达式，以提高性能和可读性。

下一步是创建高亮引用本身，以利用准备好的CSS样式。在这一点上，我们首先复制每个span元素，然后向获得的副本添加一个拉类，最后将该副本插入其父段落的开头。参见以下代码：复制代码如下： $(文档)。ready (function () {$ ('span。拉引号')。每个(函数(索引){var $ parentparama。$ ParentParameter . CSS(' position '，' relative ')；var $clonedCopy=$(this)。clone()；$clonedCopy.addClass('已拉')。前置到($ ParentParameter)；});});

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

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