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

在Drupal中使用jQuery

 

译者：老葛         ESKALATE科技公司

 

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的对应例子。

var fieldsets = document.getElementsByTagName('fieldset');

var legend, fieldset;

for (var i = 0; fieldset = fieldsets[i]; i++) {

if (!hasClass(fieldset, 'collapsible')) {

continue;

}

legend = fieldset.getElementsByTagName('legend');

if (legend.length == 0) {

continue;

}

legend = legend[0];

...

}

而下面则是使用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如下所示：

<p id="#intro">Welcome to the World of Widgets</p>

如果你想将段落的背景颜色设置为蓝色，你使用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特效，慢慢的显示段落文本：

$("#intro").css("background-color", "blue").fadeIn("slow");

 

使用一个CSS 类 选择器

下面是使用CSS 类 选择器来代替CSS ID选择器（上节中我们做的）的类似的例子。HTML如下所示：

<p class="intro">Welcome to the World of Widgets</p>

我们的CSS如下所示：

.intro { background-color: blue; }

下面的也可以工作，限定范围更窄一些：

p.intro { background-color: blue; }

下面是对应的jQuery代码：

$(".intro").css("background-color", "blue").fadeIn("slow");

或

$("p.intro").css("background-color", "blue").fadeIn("slow");

在第一个例子中，你让jQuery查找info类的所有HTML元素，而第二个例子则有一点细小的区别。这里你查找info类的所有段落元素。注意后者的速度更快一些，这是因为查找的范围小了很多，使用p.intro将查找的范围限制在了段落元素里面。

 

提示 在CSS中，“.”类选择器在同一文档中可以重复出现，而“#”ID选择器则在同一页面只能出现一次。