4.11　自动提取引用

在本章的最后一个教程中，将创建一段脚本以方便向页面添加提取引用（如图4-7所示）。提取引用是包含了对页面的主文本的有趣引用的一个框。新闻、杂志和W e b站点都使用这些框来吸引读者的注意并且强调要点或有趣的内容。但是，手动添加提取引用需要从页面复制文本并将其放置在一个＜div＞标签、＜span＞标签或其他一些容器中。创建所有这些HTML很费时间，并且还会给最终页面增加额外的HTML和文本副本。好在，可以使用JavaScript快速地向页面添加任何数量的提取引用，而只需要增加少量的H T M L。

4.11.1　概览

要创建的脚本将做几件事情：

1.找到包含特殊的类名pq（pull quote，表示提取引用）的每个＜span＞标签。对于页面的HTML必须做的唯一工作，就是在想要放入提取引用中的任何文本周围添加＜span＞标签。例如，假设页面上有一段文本并且我们想要在提取引用框中强调来自该段落的几句话。只要把强调的文本包含到＜span＞标签中，代码如下所示：

＜span class="pq"＞……and that's how I discovered the Loch Ness monster.＜/span＞

图　4-7　手动把提取引用添加到一个页面的HTML中，有点麻烦。特别是当可以使用JavaScript来自动完成这一过程的时候

2.复制每个＜span＞标签。

每个提取引用框实际上只是其中具有不同文本的另一个＜span＞标签，因此，可以通过复制当前的＜span＞标签来使用JavaScript。

3.从复制的＜span＞标签删除pq类，并且添加新的pullquote。

格式化的魔术，包括组成每个提取引用框的框、较大文本、边框和背景颜色，这些都不是JavaScript来完成的。页面的样式表包含一个CSS类选择器：.pullquote，它完成所有这些内容。因此，直接使用JavaScript来改变复制标签的类名，就完全改变新的＜span＞标签的外观。

4.向页面添加复制的＜span＞标签。

最后可以向页面添加复制的＜span＞标签（步骤2只是在Web浏览器的内存中复制了标签，但还没有真正把标签添加到页面中。这给了我们一个机会，可以在把复制的标签显示给页面浏览者之前进一步操作它）。