1.3　第一个 jQuery 驱动的页面

了解jQuery能够提供的丰富特性之后，我们可以来看一看这个库的实际应用了。为此，我们需要下载一个jQuery的副本。

1.3.1　下载jQuery

jQuery不需要安装，要使用它只需该文件的一个副本，该副本可以放在外部站点上，也可以放在自己的服务器上。由于JavaScript是一种解释型语言，所以不必担心编译和构建。什么时候需要使用jQuery，只要在HTML文档中使用<script>元素把它导入进来即可。

jQuery官方网站（http://jquery.com/）始终都包含该库最新的稳定版本，通过官网的首页就可以下载。官方网站在任何时候都会提供几种不同版本的jQuery库，但其中最适合我们的是该库最新的未压缩版。而在正式发布的页面中，则可以使用压缩版。

随着jQuery的日益流行，很多公司都通过自己的CDN（Content Delivery Networks，内容分发网络）来托管其库文件，让开发人员能更方便地使用它。最典型的就是谷歌（ https://developers.google.com/speed/libraries/devguide）和微软（http://www.asp.net/ajaxlibrary/cdn.ashx）和jQuery项目自己的服务器（http://code.jquery.com/），jQuery库文件被放在了强劲、低延时的服务器上，这些服务器遍布全球各地，无论用户在哪个国家，都能以最快速度下载到jQuery。虽然托管在CDN上的文件由于分布式和缓存的原因有速度优势，但在实际开发中还是使用本地副本更方便一些。本书中的所有示例都将使用一个保存在本地的jQuery库文件，这样即使不上网也可以运行代码。

1.3.2　本书使用jQuery的哪个版本

如果是以前，这个问题很容易回答。因为一般来说，最合适的版本就是jQuery的最新版本。可是，对于现有的jQuery 2.0版来说，问题就复杂一点了。为了确保在现代浏览器中速度更快，代码更简洁，jQuery从2.0版开始不再支持IE6、IE7和IE8。

jQuery开发团队知道，支持这些老版本浏览器也很重要。正因为如此，该团队还会继续维护jQuery 1.x版。本书出于讲解的需要使用jQuery 1.10 。不过，全书所有示例都能在jQuery 2.0下运行。

　如果项目中有针对jQuery 1.9之前的版本编写的代码，可以使用jQuery迁移插件（http://jquery.com/upgrade-guide/1.9/#jquery-migrate-plugin）实现与jQuery 1.10兼容。

1.3.3　在HTML文档中引入jQuery

本书多数jQuery应用示例都包含以下三部分：HTML文档，为该文档添加样式的CSS文件，以及为该文档添加行为的JavaScript文件。在本书的第一个例子中，我们使用一个包含图书内容提要的页面，同时，该页面中的很多部分都添加了相应的类。这个页面中包含对最新版jQuery库的引用，我们将这个文件下载之后将它重命名为jquery.js，并放在本地项目文件夹下。示例的HTML文档如下。

  1. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="utf-8">
  6.     <title>Through the Looking-Glass</title>
  8.     <link rel="stylesheet" href="01.css">
  10.     <script src="jquery.js"></script>
  11.     <script src="01.js"></script>
  12.   </head>
  14.   <body>
  15.     <h1>Through the Looking-Glass</h1>
  16.     <div class="author">by Lewis Carroll</div>
  17.     <div class="chapter" id="chapter-1">
  18.       <h2 class="chapter-title">1. Looking-Glass House</h2>
  19.       <p>There was a book lying near Alice on the table,
  20.         and while she sat watching the White King (for she
  21.         was still a little anxious about him, and had the
  22.         ink all ready to throw over him, in case he fainted
  23.         again), she turned over the leaves, to find some
  24.         part that she could read, <span class="spoken">
  25.         "&mdash; for it's all in some language I don't know,"
  26.         </span> she said to herself.</p>
  27.       <p>It was like this.</p>
  28.       <div class="poem">
  29.         <h3 class="poem-title">YKCOWREBBAJ</h3>
  30.         <div class="poem-stanza">
  31.           <div>sevot yhtils eht dna ,gillirb sawT'</div>
  32.           <div>;ebaw eht ni elbmig dna eryg diD</div>
  33.           <div>,sevogorob eht erew ysmim llA</div>
  34.           <div>.ebargtuo shtar emom eht dnA</div>
  35.         </div>
  36.       </div>
  37.       <p>She puzzled over this for some time, but at last
  38.         a bright thought struck her. <span class="spoken">
  39.         "Why, it's a Looking-glass book, of course! And if
  40.         I hold it up to a glass, the words will all go the
  41.         right way again."</span></p>
  42.       <p>This was the poem that Alice read.</p>
  43.       <div class="poem">
  44.         <h3 class="poem-title">JABBERWOCKY</h3>
  45.         <div class="poem-stanza">
  46.           <div>'Twas brillig, and the slithy toves</div>
  47.           <div>Did gyre and gimble in the wabe;</div>
  48.           <div>All mimsy were the borogoves,</div>
  49.           <div>And the mome raths outgrabe.</div>
  50.         </div>
  51.       </div>
  52.     </div>
  53.   </body>
  54. </html>

文档中，紧随常规的HTML开头代码之后的是加载样式表文件的代码。在这个例子中，我们使用的样式比较简单。

  1. body {
  2.   background-color: #fff;
  3.   color: #000;
  4.   font-family: Helvetica, Arial, sans-serif;
  5. }
  6. h1, h2, h3 {
  7.   margin-bottom: .2em;
  8. }
  9. .poem {
  10.   margin: 0 2em;
  11. }
  12. .highlight {
  13.   background-color: #ccc;
  14.   border: 1px solid #888;
  15.   font-style: italic;
  16.   margin: 0.5em 0;
  17.   padding: 0.5em;
  18. }

　下载示例代码

如同本书其他HTML、CSS以及JavaScript示例一样，上面的标记只是完整文档的一个片段。如果读者想试一试这些示例，可以从以下地址下载完整的示例代码： Packt Publishing 网站 http://www.packtpub.com/support，或者本书网站 http://book.learningjquery.com/。

在引用样式表文件的代码之后，是包含JavaScript文件的代码。这里要注意的是，引用jQuery库文件的<script>标签，必须放在引用自定义脚本文件的<script>标签之前。否则，在我们编写的代码中将引用不到jQuery框架。

　在本书的其他示例中，我们将只印出HTML和CSS文件的相关部分。书中提到文件的完整版可以在本书配套网站http://book.learningjquery.com中找到。

现在，这个示例页面的外观如图1-1所示。

1.3　第一个 jQuery 驱动的页面 - 图1

图　1-1

接下来，我们就使用jQuery为页面中的诗歌文本添加一种新样式。

　这个例子是为了展示jQuery的简单用法而设计的。在实际应用中，为页面中的文本添加样式可以通过纯CSS的方式来实现。

1.3.4　编写jQuery代码

我们自定义的代码应该放在HTML文档中第二个、使用<script src="01.js"> </script>标签引入的空JavaScript文件中。对这个例子而言，我们只需编写3行代码：

  1. $(document).ready(function() {
  2.   $('div.poem-stanza').addClass('highlight');
  3. });

接下来我们分析这几行代码。

  • 查找诗歌文本

jQuery中基本的操作就是选择文档中的某一部分，这是通过$()函数来完成的。通常，该函数需要一个字符串参数，参数中可以包含任何CSS选择符表达式。在这个例子中，我们想要找到带有poem-stanza类的所有<div>元素，因此选择符非常简单。不过，在本书其他章中，我们还会介绍很多更复杂的选择符表达式。在第2章中，我们要讨论的就是查找文档部分的不同方式。

这里用到的$()函数会返回一个新的jQuery对象实例，它是我们从现在开始就要打交道的基本的构建块。jQuery对象中会封装零个或多个DOM元素，并允许我们以多种不同的方式与这些DOM元素进行交互。在这个例子中，我们希望修改页面中这些部分的外观，而为了完成这个任务，就需要改变应用到诗歌文本的类。

  • 加入新类

本例中，.addClass()方法的作用是不言而喻的，它会将一个CSS类应用到我们选择的页面元素。这个方法唯一的参数就是要添加的类名。.addClass()方法及其反方法.removeClass()，为我们探索jQuery支持的各种选择符表达式提供了便利。现在，这个例子只是简单地添加了highlight类，而我们的样式表中为这个类定义的是带边框和灰色背景的斜体文本样式。

我们注意到，无需迭代操作就能为所有诗歌中的节1添加这个类。前面我们提到过，jQuery在.addClass()等方法中使用了隐式迭代机制，因此一次函数调用就可以完成对所有选择的文档部分的修改。

1 即类为.poem-stanza的文档部分。

  • 执行代码

综合起来，$()和.addClass()对我们修改诗歌中文本的外观已经够用了。但是，如果将这行代码单独插入文档的头部，不会有任何效果。通常，JavaScript代码在浏览器初次遇到它们时就会执行，而在浏览器处理头部时，HTML还不会呈现样式。因此，我们需要将代码延迟到DOM可用时再执行。

通过使用$(document).ready()方法，jQuery支持我们预定在DOM加载完毕后调用某个函数，而不必等待页面中的图像加载。尽管不使用jQuery，也可以做到这种预定，但$(document).ready()为我们提供了很好的跨浏览器解决方案，涉及如下功能：

  • 尽可能使用浏览器原生的DOM就绪实现，并以window.onload事件处理程序作为后备；

  • 可以多次调用$(document).ready()并按照调用它们的顺序执行；

  • 即便是在浏览器事件发生之后把函数传给$(document).ready()，这些函数也会执行；

  • 异步处理事件的预定，必要时脚本可以延迟执行；

  • 通过重复检查一个几乎与DOM同时可用的方法，在较早版本的浏览器中模拟DOM就绪事件。

.ready()方法的参数可以是一个已经定义好的函数的引用，如下面的代码清单1-1所示。

代码清单1-1

  1. function addHighlightClass()  {
  2.   $('div.poem-stanza').addClass('highlight');
  3. }
  5. $(document).ready(addHighlightClass);

然而，正如原始的脚本中所示——代码清单1-2就摘自那里，这个方法也可以接收一个匿名函数。

代码清单1-2

  1. $(document).ready(function() {
  2.   $('div.poem-stanza').addClass('highlight');
  3. });

这种匿名函数的写作在jQuery中十分方便，特别适合传递那些不会被重用的函数。而且，与此同时创建的闭包也是一种非常高级和强大的工具。但是，假如处理不当的话，闭包也会给我们带来意想不到的后果以及内存占用问题。附录A详细介绍了闭包。

1.3.5　最终结果

在编写好JavaScript代码之后，现在的页面如图1-2所示。

1.3　第一个 jQuery 驱动的页面 - 图2

图　1-2

由于JavaScript插入了highlight类，页面中的两节诗歌文本变成了斜体，带有了灰色背景， 并且被包含在方框中；这些样式来源于01.css样式表。