4.3　把jQuery添加到页面

如果你使用jQuery的CDN版本之一，可以使用4.2节列出的代码段之一来指向它。例如，要使用jQuery的Google CDN版，可以在页面的头部添加＜script＞标签，如下所示：

＜script src="http：//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.

js"＞＜/script＞

提示：当使用Google CDN的时候，可以省略版本号码部分。如果在链接中使用1.6而不是1.6.1（＜script src="http：//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"＞＜/script＞），那么Google会加载1.6系列中的最新版，例如，1.6.3。如果jQuery更新到1.6.9，那么Google会加载这个版本。这一技术很智能化，因为（正如本节所介绍的），从1.6.1到1.6.9的小版本变化，通常只是进行一些bug修复以提升站点的性能。

常见问题jQuery版本

我确保本书使用jQuery1.6.3，但是，jQuery站点上的当前版本是1.X。这是个问题吗？

jQuery不断更新。常常会发现新的bug，并且jQuery团队很勤奋地工作以修改这些bug。此外，随着带有新功能的新Web浏览器出现以及为了更好地支持当前的标准，jQuery团队更新jQuery以便能够在这些Web浏览器中更有效地工作。最终，有时候会向jQuery中添加新的功能，以使它对Web程序员更有用。基于这些原因，你很可能会找到比本书所用的版本更新的jQuery。如果有新的版本，那么尽量使用新版本。

jQuery随着时间不断成熟，并且其核心功能变化很小。尽管jQuery程序员常常深入其中一探究竟，以使得jQuery更快、更好地跨浏览器工作并且修正bug，但是，使用jQuery的方式通常没有什么大的变化。换句话说，尽管程序员可能会修改一个jQuery函数以便更好地工作，但是，使用函数的方式（函数名称、给函数的参数以及它返回的值）很少改变。这意味着，你从本书中学到的知识很可能也适用于jQuery的新版本，只不过新版更快且更好。

通过版本号，你很容易分辨两个jQuery版本之间有多大区别。第一个数字表示非常重要的新

版本。目前的jQuery的主版本号仍然是1，因此，我们看到过版本1、1.2、1.3和1.4等。版本2（可能还需要相当长的时间才会出现）肯定会提供一些重要的新功能。然后，还有很多带有小版本号的版本，例如jQuery 1.6。这些版本中的每一个，通常都提供一些新的函数，重新编写一些旧的函数以使其更好地工作等。最后的版本号，例如jQuery 1.6.3中的3，通常指的是对jQuery1.6分支的某些bug修复。因此，如果你正在使用jQuery1.6.3，而jQuery1.6.8版发布了，那么，升级到新版本通常是个好主意，因为新版通常会修正1.6.3版中的一些问题。

要搞清楚新版中有哪些变化，只要浏览http：//docs.jquery.com/Downloading_jQuery#Current_Release的下载页面中的“Current release”部分。然后，你会找到“Release notes”的一个链接。单击该链接，所访问的页面列出了该版本中做出的修改。在阅读了该列表后，你可以自行决定是否值得升级（例如，如果修改的相关功能你在自己的站点上也不会用到，你可以跳过这次升级；然而，如果这些修改是你确实用到的功能的bug修复，那么最好升级。如果你在自己的站点上使用jQuery插件，对于升级到jQuery的最新版本要多加小心，除非你确定该插件能够用于jQuery的新版本）。

一旦把jQuer y下载到计算机中，就必须将其附加到想要使用它的Web页面上。jQuery文件只是一个外部.js文件，因此，可以像任何外部JavaScript文件一样附加它，具体步骤参见1.2节的介绍。例如，假设你在自己的站点的根目录中一个名为js的文件夹中存储了jquery.js文件。要将该文件附加到你的主页中，可以在该页面的头部添加如下script标签：

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

一旦已经附加了jQuery文件，就准备好了添加自己的脚本，从而利用jQuery的高级功能。下一步是添加第二组＜script＞标签，在其中带有一些jQuery程序：

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

$（document）.ready（function（）{

//your programming goes here

}）；

＜/script＞

第二组＜script＞标签包含你想要添加到特定Web页面中的任何程序，然而，你可能会有疑惑，那个$（document）.ready（）有什么作用。$（document）.ready（）函数是一个内置jQuery函数，它会等待页面的HTML加载之后再运行脚本。

为什么你想要这么做呢？因为很多JavaScript编程都要操作Web页面的内容：例如，对一个div设计动画，将图像淡入视野，当访问者把鼠标指针悬停到一个链接上的时候产生下拉菜单等。要做一些有趣的事情并且和一个页面元素交互，JavaScript需要选中该元素。然而，在Web浏览器下载HTML标签之前，JavaScript不能选中它。由于Web浏览器立即运行它所遇到的任何JavaScript，因此页面剩下的内容还没有立刻下载（在第3章的测验教程中，你可以看到这种效果）。当载入测验的时候，页面是空白的。只有在完成了测验之后，内容才会出现，这是因为进行测验的JavaScript先运行，而这发生在Web浏览器显示HTML标签之前。

换句话说，为了让页面上的HTML完美，需要等待页面加载。这就是$（document）.ready（）函数所做的工作：它直接等待，直到HTML完成加载，然后，它运行JavaScript代码。如果这有些令人混淆，只要记住，你总是需要包含一个.ready（）函数，并且，需要把代码放入其中，放在$（document）.ready（function（）{和最后的}）；之间。

此外，还要记住如下几点：

·到jQuery的链接必须放在任何依赖于jQuery的程序之前。换句话说，在加载jQuery的＜script＞标签之前，不要放置任何其他的＜script＞标签。

·把JavaScript程序放置在任何CSS样式表之后（包括链接的样式表、外部样式表和内部样式表）。由于jQuery程序经常引用样式表中的样式，应该在Web浏览器已经加载了任何样式之后，再放置JavaScript程序。经验法则是，将JavaScript程序（所有的＜script＞标签）放在＜head＞标签中的任何其他内容之后，但是，在结束的＜/head＞标签之前。

·在}）；之后添加一条JavaScript注释，例如，//end ready，表明ready（）函数结束。例如：

$（document）.ready（function（）{

//your programming goes here

}）；//end ready

在函数的末尾放置一条注释，这使得很容易识别程序的结束。随后你将看到，jQuery很多时候要用到花括号、圆括号和分号的组合。通过在其后添加注释，很容易识别这一组标点符号属于程序的哪一部分。

提示：jQuery提供了一种快捷方式，来编写$（document）.ready（function（）{}：

$（function（）{

//your programming goes here

}）；//end ready