文件名称：复制元素-st7701规格书 st7701_spec_v1.1
文件大小：8.79MB
文件格式：PDF
更新时间：2024-06-29 19:24:06
JavaScript JQuery
5.3 复制元素 本章到目前为止已经示范的操作包括：插入新创建的元素、将元素从文档中的一个位置移动 到另一个位置，以及通过新元素来包装已有的元素。可是，有时候也会用到复制元素的操作。例 如，可以复制出现在页面顶部的导航菜单，并把副本放到页脚上。实际上，无论何时，只要能通 过复制元素增强页面的视觉效果，都是以重用代码来实现的好机会。毕竟，如果能够只编写一次 代码并让jQuery替我们完成复制，何必要重写两遍同时又增加双倍的出错机会呢？ 在复制元素时，需要使用jQuery的.clone()方法，这个方法能够创建任何匹配的元素集合 的副本以便将来使用。与本章前面使用$()创建元素时一样，在为复制的元素应用一种插入方法 之前，这些元素不会出现在文档中。 例如，下面这行代码将创建
中第一段落的副本：
$('div.chapter p:eq(0)').clone();
但仅创建副本还不足以改变页面的内容。要想让复制的内容显示在网页中，可以使用插入方
法将其放到
前面。
$('div.chapter p:eq(0)').clone().insertBefore('div.chapter');
这样，同一个段落就会出现两次。可见，.clone()与插入方法的关系就如同复制和粘贴
一样。
连同事件一起复制
在默认情况下，.clone()方法不会复制匹配的元素或其后代元素中绑定的
事件。不过，可以为这个方法传递一个布尔值参数，将这个参数设置为true，
就可以连同事件一起复制，即.clone(true)。这样一来，就可以避免每次复制
之后还要手工重新绑定事件的麻烦（第3章曾讨论过）。
通过复制创建突出引用
很多网站都和它们的印刷版一样，使用了突出引用（pull quote）来强调小块的文本并吸引读
者的眼球。所谓突出引用，就是从正文中提取一部分文本，然后为这段文本应用特殊的图形样式。
通过.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.
图灵社区会员 吉舟(hezelwong@gmail.com) 专享 尊重版权