基础知识

在深入研究有趣的 jQuery 内容之前，我们先了解一些基础知识 — 如何安装 jQuery，以及如何使其正常运行等。首先从小节下载 jQuery 库，然后像链接其他外部 JavaScript 文件一样链接到该库：

下载 jQuery

共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。

这两个版本都可从 下载。

清单 1. 如何在代码中安装 jQuery

<script type="text/javascript" src="jquery.js"></script>

由于 jQuery 调用或操作 DOM 对象，因此如果在文档装载完所有页面元素之前，使用 JavaScript 代码直接操作这些对象将会遇到问题。相反，您也不希望等待页面上的所有元素都装载完 — 所有图像、标题广告、解析代码和 YouTube 视频预览 — 才开始调用 jQuery 代码。您可以适当折中，在文档完全装载完页面上的所有元素，但所有的图像、链接和呈现尚未完成之前，以一种安全的、无错误的方式调用 jQuery 代码。再强调一遍，您的所有 jQuery 代码必须在页面上的这个函数中，或在它自己的函数中。如果
jQuery 代码不在一个函数中，则不可将其代码放置在 JavaScript 代码中。

清单 2. 如何正确调用 jQuery 函数

// Incorrect <script language=JavaScript> $("div").addClass("a"); </script> // Correct $(document).ready(function(){ $("div").addClass("a"); }); // - or - $(document).ready(function(){ myAddClass(); }); function myAddClass() { $("div").addClass("a"); }

此外，还有一个值得注意的地方：一个页面上可以有任意个 document.ready() 函数，它们将被依次调用。如果您正在使用模块动态地构建页面，并且每个模块有它自己的 jQuery 支持代码（例如，一个由许多很小的 PHP 页面片段构成的 PHP 页面），这是一个不错的方法。

jQuery 最有趣的特性之一是 “链接性”，它能够将一系列函数集中起来，改善可读性和简化代码的编写。几乎每个 jQuery 函数都返回一个 jQuery 对象，这意味着您仅需在其上反复调用其他函数，就可以将一个完整的 jQuery 命令链接在一起。我将这比作 Java 的 String 类，在其中有几个函数返回一个 String 对象，使您可以将在同一行上的多个函数链接在一起：

清单 3. jQuery 的链接性

String man = new String("manipulated").toUpperCase().substring(0,5).toLowerCase(); $("div").addClass("a").show().text("manipulated");

最后需要记住的是，当使用 jQuery 或任何 JavaScript 库时，它们之间有可能发生冲突。换句话说，在同时使用两个以上的库时，会有一个以上的库同时使用变量 “$”，这意味着在进行 “$” 调用时，引擎将不知道引用哪个库。这种情况的一个很好的例子就是 CakePHP 库，它包含内置的 prototype.js。在这些页面上使用 jQuery 将导致错误。为了解决这个问题，jQuery 提供了一种方法将 “$” 变量映射到另一个变量，例如：

清单 4. jQuery 解决冲突的办法

j$ = jQuery.noConflict(); j$("div").addClass("a");

选择

jQuery 的根本在于它在页面上选择和操作某些元素的能力。从某种意义上说，需要围绕这些对象才能构建出有效的 jQuery 库。因此，面对一个普通 HTML 页面上提供的大量选项，您需要一种方法来快速高效地选择您需要在页面上使用的元素，只选择需要的元素（不多也不少）。jQuery 如我们所愿地提供了一些强大的选择方法，帮助我们在页面上寻找和选择对象。jQuery 创建了它自己的选择语法，并且这种语法很容易掌握。

（以下大部分示例所使用的函数将留在下一篇中讨论，不过它们的功能应该是很直观明了的）。

根本上来讲，jQuery 中的选择过程就是一个巨大的过滤过程，页面上的每个元素都经过这个过滤器，它将返回一个匹配的对象，或一个可以遍历的匹配对象的数组。

排在前面的 3 个示例是最常用的。它们通过 HTML 标记、ID 或 CLASS 查找对象。

HTML

要获取一个页面中所有匹配的 HTML 元素的数组，您仅需将 HTML 标记（不带括号）传递到 jQuery 搜索字段。这是查找对象的 “快速但是粗糙” 的方法。如果要将属性附加到通用的 HTML 元素，这种方法是很有用的。

清单 5. HTML 选择

// This will show every <div> tag in the page. Note that it will show // every <div>, not the first matching, or the last matching. // Traversing Arrays is discussed later in the article. $("div").show(); // This will give a red background to every <p> tag in the page. $("p").css("background", "#ff0000");

ID

正确的页面设置要求页面上的每个 ID 都是惟一的，虽然有时并不是这样（有意或无意）。使用 ID 选择时，jQuery 仅返回第一个匹配的元素，因为它要求您遵循正确的页面设计。如果您需要将一个标记附加到同一页面上的几个元素，应当选择使用 CLASS 标记。

清单 6. ID 选择

// This will set the innerHTML of a span element with the id of "sampleText" to "Hi". // Note the initial "#" in the command. This is the syntax used by jQuery to search // for IDs, and must be included. If it is excluded, jQuery will search for the HTML // tag instead, and with no <sampleText> tags on a page, will ultimately do // nothing, leading to frustrating and hard-to-find bugs (not that that has ever // happened to me of course). $("#sampleText").html("Hi");

CLASS

CLASS 与 ID 非常相似，不同之处是它可以用于一个页面上的一个或多个元素。因此，尽管受到同一页面的每个元素只有一个 ID 的限制，同一页面上的多个元素仍然可以拥有相同的 CLASS。这使您可以在一个页面上跨多个元素执行函数，并且只需传入一个 CLASS 名称。

清单 7. CLASS 选择