4.11.2　编程

现在对于想要完成的脚本有了一个概念，是时候打开文本编辑器并完成编程了。

注意：参见1.3节中的“注意”部分了解如何下载教程文件的信息。

1.在文本编辑器中打开chapter04目录下的pull-quote.html文件。

首先，添加到jQuery文件的一个链接。

2.单击结束的＜/head＞标签之上的空行，并且输入：

＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞

这会从站点加载jQuery文件。注意，包含jQuery文件的文件夹的名称是_js（别忘了开始的下划线）。然后，可以为程序添加一对＜script＞标签。

3.按下回车键，在jQuery代码下面创建新行，并且添加如下粗体所示的代码：

1＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞

2＜script＞

3

4＜/script＞

注意：每行左边的行号只是为了方便引用。不要在Web页面上真的将它们作为脚本的一部分录入。

现在，加入document.ready（）函数。

4.单击＜script＞标签之间的空行，并且添加粗体所示的代码：

1＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞

2＜script＞

3$（document）.ready（function（）{

4

5}）；//end ready

6＜/script＞

当程序变得很长很复杂的时候，JavaScript注释//end ready特别有用。在一个较长的程序中，最终整个程序中有很多}）；散落各处，每一个}）；都标志着一个匿名函数和一个函数调用的结束。放置一个注释来表明该}）；是和哪一部分相匹配的，这使得你稍后回头来阅读自己的代码的时候更容易理解。

步骤1到步骤4涵盖了使用jQuery编写任何程序的基本过程，因此，确保要理解每一个步骤在做什么。接下来，通过选择包含应该出现在pullquote框中的文本的＜span＞标签，我们进入程序的核心部分。

5.添加第4行中粗体所示的代码：

1＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞

2＜script＞

3$（document）.ready（function（）{

4$（'span.pq'）

5}）；//end ready

6＜/script＞

$（'span. pq'）是一个jQuery选择器，它查找带有pq类的每个＜span＞标签。接下来添加遍历每个＜span＞标签并对它们进行一些操作所需的代码。

6.添加如下第4行和第6行所示的粗体代码：

1＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞

2＜script＞

3$（document）.ready（function（）{4

$（'span.pq'）.each（function（）{

5

6}）；//end each

7}）；//end ready

8＜/script＞

正如4.10节所介绍的，.each（）是一个jQuery函数，允许遍历一个选择的元素。这个函数接收一个参数，它本身也是一个匿名函数。

接下来，开始构建将要应用于页面上每一个匹配的＜span＞标签的函数：第一步是创建＜span＞的一个副本。

7.把下面第5行中粗体所示代码添加到脚本中：

1＜script src="../_js/jquery-1.6.2.min.js"＞＜/script＞

2＜script＞

3$（document）.ready（function（）{4

$（'span.pq'）.each（function（）{5 var quote=$（this）.clone（）；

6

}）；//end each

7}）；//end ready

8＜/script＞

这个函数首先创建一个名为quote的变量，它包含当前的＜span＞（如果忘记了$（this）的含义，请参见4.10.2节）的一个“副本”（只是一个副本）。jQuery的.clone（）函数复制了当前元素，包括元素中所有的HTML。在这个例子中，它复制了＜span＞标签，包括＜span＞标签中的将要出现在提取引用框中的文本。

复制一个元素会复制所有内容，包括应用于元素的所有属性。在这个例子中，最初的＜span＞有一个类名pq。我们将从副本中删除该类。

8.把如下第6行和第7行所示的粗体代码添加到脚本中：

1＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞

2＜script＞

3$（document）.ready（function（）{4

$（'span.pq'）.each（function（）{

5 var quote=$（this）.clone（）；

6 quote.removeClass（'pq'）；

7 quote.addClass（'pullquote'）；

9}）；//end ready

10＜/script＞

8}）；//end each

正如4.8.1节所述，removeClass（）函数从标签中删除一个类名，而.addClass（）函数为标签添加一个类名。在这个例子中，要替换副本中的类名，以便使用一个名为.pullquote的CSS类来把＜span＞格式化为提取引用框。

最后，将向页面添加＜span＞。

9.把如下粗体所示代码（第8行）添加到脚本中：

1＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞

2＜script＞

3$（document）.ready（function（）{

4$（'span.pq'）.each（function（）{

5 var quote=$（this）.clone（）；

6 quote.removeClass（'pq'）；

7 quote.addClass（'pullquote'）；

8$（this）.before（quote）；

9}）；//end each

10}）；//end ready

11＜/script＞

这行代码是函数的最后部分，在这行之前，我们一直在操作Web浏览器的内存中＜span＞的一个副本。浏览页面的人看不到它，直到这个副本真正地添加到DOM中。

在这个例子中，插入的是＜span＞标签的副本，就在HTML中的那个＜span＞标签之前。实际上，页面最终的HTML如下所示：

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

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

monster.＜/span＞

尽管从这段内容看上去会紧挨着显示副本，CSS格式化使得提取引用框出现在页面的右边。

注意：要实现提取引用框的视觉效果，页面拥有一个CSS样式，它使用了CSS float属性。框移动到文本所出现的段落的右边，并且由段落中其他的文本包围着它。如果不熟悉这一技术，可以通过http：//css.maxdesign.com.au/floatutorial/来了解CSS float属性。如果想要查看.pullquote样式，只要看一下教程文件的头部就行了。该样式及其所有的属性在那里列出。

此时，所有的JavaScript都完成了。然而，我们没有看到任何提取引用框，直到在HTML中给出一些消息。

10.找到页面的H T M L的第一个＜p＞标签。找到一条句子，并且用＜s p a n class="pq"＞＜/span＞包围它。例如：

＜span class="pq"＞Nullam ut nibh sed orci tempor rutrum.＜/span＞

可以重复这一过程来给其他的段落添加提取引用。

11.保存文件并在Web浏览器中预览它。

最终的结果如图4-7所示。如果没有看到一个提取引用框，确保在步骤10中正确地添加了＜span＞标签。此外，检查1.6节关于修改有问题的程序的提示。可以在文件complete_pull-quote.html中看到本教程的一个完成版本。