在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选择器则在同一页面只能出现一次。