Drupal专业开发指南(49)–第17章在 Drupal 中使用 jQuery（1）

30Sep2008 分类: Drupal 作者: popox - 44 访问 -

JavaScript 无处不在。每一个流行的 Web 浏览器都带有一个 JavaScript 解释器。Apple 的主面板的窗口小部件是用 JavaScript 写的。Mozilla Firefox 使用 JavaScript 来实现它的用户接口。Adobe Photoshop 里面可以使用 JavaScript。JavaScript 存在于每个角落。

以前，大量的 JavaScript 代码使人头痛。如果你曾经有过这样痛苦的经历，现在是时候换一种方式了，过去的就都让它过去吧，现在我们开始使用 jQuery。jQuery 使得编写 JavaScript 代码更直观有趣，它已经被内置到 Drupal5 里面！在本章，你将学到什么是 jQuery 以及在 Drupal 中如何使用它。最后你将看到一个实际的例子。

什么是 jQuery？

jQuery，由 John Resig 创建，主要用于解决开发者在使用 JavaScript 遇到的常见的困惑和限制。编写 JavaScript 代码是件麻烦和让人头痛的事，通常查找你想操作的特定的 HTML 或者 CSS 元素是很困难的。jQuery 为你提供了在你的文档中查找这些元素的一种简单且快捷的方法。

查找一个对象的技术名字是 DOM traversal（往返移动）。DOM 是 Document Object Model（文档对象模型）的简称。该模型提供了一种树状方式来通过标签访问页面元素，以及通过 JavaScript 访问其他元素，如图17-1所示。

注意，你可以从 jQuery 的官方网站 http://jquery.com 和 http://www.visualjquery.com 学到更多的相关知识。

当编写 JavaScript 代码时，你常常花费大量的时间来处理浏览器和操作系统的不兼容问题。jQuery 替你处理了这些工作。还有，JavaScript 中不存在更高层次的函数。常见的任务比如对页面特定部分的动画特效，四处拖动，或者对于元素的排序，这些在 JavaScript 中都不存在相应的函数。而 jQuery 也解决了这些限制。

和 Drupal 一样，jQuery 的代码很少且很有效，仅有19kb。jQuery 的核心是一个可扩展的框架，JavaScript 程序员可以编写相应的钩子函数，你可以在 http://docs.jquery.com/Plugins 找到数百个 jQuery 插件。

图17-1使用 Firefox 浏览器中的 Mozilla DOM 查看工具看到的 http://jquery.com，页面的 DOM 结构图

旧方式

让我们首先快速的回顾一下纯 JavaScript 方式的 DOM 查找。下面的代码展示了 Drupal 是如何找到一个页面内所有的可伸缩的字段集的，接着就是 jQuery 的对应例子。

而下面则是使用 jQuery 后的代码：

$(’fieldset.collapsible > legend’).each(function() {…});

你可以看到，正如 jQuery 的口号所说“写得少，做得多”。jQuery 处理了使用 JavaScript 操作 DOM 的常见的重复的任务，将其封装成了一种简洁且直观的语法。最终的代码简短，灵活，易读，其简单性有种 Ruby 血统。

jQuery 是如何工作的

jQuery 是一个在结构化文档中查找东西的工具。而 CSS 和 XPath 同样是此类工具。CSS 用于 (X)HTML 文档中，而 XPath 用于 XML 文档中。与其在 JavaScript 中实现另外的依照查找东西的方法，不如使用已有的，jQuery 同时实现了 CSS 和 XPath 查询语法，这就省去了让程序员学习另一种语法的成本。jQuery 的 DOM 操作非常直观，对 CSS1-3 全部支持，并支持基本的 XPath 表达式。

使用一个 CSS ID 选择器

让我们快速的回顾一下基本的 CSS 语法。

假定你要操作的 HTML 如下所示：

Welcome to the World of Widgets

如果你想将段落的背景颜色设置为蓝色，你使用 CSS 在你的样式表中找到特定的段落，这里是用了 #intro ID 选择器，它应该在一个给定页面是唯一的。

#intro {
background-color: blue;
}

使用 jQuery 你也可以完成同样的工作。但是，首先，在这里先简单介绍一下 jQuery 的语法。为了代码保持简洁，jQuery 将 jQuery 命名空间映射为美元符号，代码如下：

//将jQuery变量定义为一个函数
var jQuery = function(a,c) {…}
//将jQuery映射为’$’.
var $ = jQuery;

注意：如果你对 jQuery 引擎如何工作的感兴趣的话，你可以从 http://jquery.com 下载整个的 jQuery 的 JavaScript 文件。Drupal5 中包含的是一个压缩的版本，这使得浏览器加载它的速度更快一些。

下面是使用 jQuery 方式将你的段落的背景颜色设置为蓝色的代码：

$(”#intro”).css(”background-color”, “blue”);

你甚至可以加点 jQuery 特效，慢慢的显示段落文本：