本文实例讲述了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()方法可以轻而易举地完成这种装饰效果。首先,我们来看一看例子文本的第三段:
<p>
<span class=”pull-quote”>It is a Law of Nature <span class=MdropM>with us</span> that a male child shall have <strong>one more side</strong> than his father</span>, 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.
</p>
我们注意到这个段落W<span class=”pull-quote”>X素开始,其中的类是为了复制而 准备的。当把复制的<span>*的文本粘贴到其他位置上时,还需要修改它的样式属性,以便它 与原来的文本区别开来。










