使用 jQuery，第 1 部分: 将桌面应用程序引入浏览器_H5之家

简介

jQuery 逐渐从其他 JavaScript 库选择中脱颖而出，并且成为 Web 开发人员的最佳选择。它迅速成为希望简化客户端开发和快速高效地创建富 Internet 应用程序（RIA）的程序员的首选。随着 RIA 的广泛使用，将越来越多地使用 JavaScript 库协助开发。RIA 被定义（松散地）为通过浏览器运行的应用程序，这种浏览器结合使用 CSS/JavaScript/Ajax 创建类似桌面应用程序的外观。Firefox、Internet Explorer 和 Safari 最新发行版中新增的特性，以及 Google 新 Chrome 浏览器最近的版本，都专注于加快每个浏览器的内部 JavaScript 引擎的速度，其惟一目的是更加适应浏览器制造商为未来设计的 RIA。这些公司认为未来的 Web 页面将包含大量 JavaScript 代码，因此首先开发一个成熟的、没有 bug 的库是非常重要的。

Ajax 资源中心

请访问 Ajax 资源中心，这是有关 Ajax 编程模型信息的一站式中心，包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。

因此，随着未来 Web 应用程序不断朝富沉浸式界面（rich and immersive interface）的方向发展，Web 开发人员不断地寻找可以简化这些工作的工具。现在已经有几个 JavaScript 库，每个库都有各自的优点和缺点，同时也有各自的支持者和反对者。在这里，我不讨论哪个库的特性更好，因为这对最终结果没有多大影响。最重要的是哪个库使用得更多 — 数量才是最重要的。看看下面 4 个最流行的 JavaScript 库的 Google 趋势图。很明显，在过去 6 到 8 个月里，jQuery 成为主导的 JavaScript 库，并且这一趋势仍在上升。

图 1. 常见的 JavaScript 库的 Google 趋势图

常见的 JavaScript 库的 Google 趋势图

就业市场方面也显示出 jQuery 渐渐上升为最多人选择的 JavaScript 库。Monster.com 的一个非科研性结果表明，与 jQuery 相关的职位有 113 个，而 YUI、ExtJS 和 mootools 分别是 67、19 和 13。

这个 jQuery 系列文章的第一篇以探索 jQuery 语法开始，同时了解它的函数是如何调用的。本文后面的小节探索这个库的核心函数，以及这个库如何使用它的强大的选择器和过滤器使 DOM 遍历更加简单明了。接下来的文章将阐述 CSS 操作、表单控制、文本更改、Ajax 简单性和动画（所有人的爱好）。jQuery 的最有趣的特性之一是它的插件架构，它允许很多开发人员添加新的 jQuery 功能。本文的最后一篇文章将介绍许多强大的插件，它们可用于完成 RIA 开发过程。

本系列文章针对具备 JavaScript 语法、CSS 语法和 DOM 语法知识的读者。如果您需要在阅读本系列文章之前复习一下这些语法，我强烈推荐本文小节中的 W3Schools 链接。

基础知识

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

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

由于 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