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

            译者：老葛 ESKALATE科技公司

使用XPath

 

对类CSS语法的熟悉，使得没有JavaScript经验的人们可以方便的使用JavaScript了。但是这仍然在访问元素的灵活性方面存在局限性。如果你要操作的HTML元素没有ID或者类选择器，那该怎么办呢？使用XPath，你可以创建更灵活的访问规则来查找HTML元素。XPath还具有正则表达式的能力。下面是几个例子：

查找属性target等于lank的所有<a/>元素：

$("a[@target=_blank]")

查找所有的类型为复选框的输入字段：

$("input[@type=checkbox]")

关于XPath表达式在http://docs.jquery.com/DOM/Traversing/Selectors中有更详细的信息。

  现在你对jQuery如何工作应有些理解了，让我们看一下在Drupal中是如何使用它的。

 

Drupal中的jQuery

 

    在Drupal中使用jQuery很简单，这是因为Drupal内置了jQuery。以管理员帐号（用户1）登录到你的Drupal站点，创建类型为Page的新节点。在创建节点的表单上，选择位于“输入格式”下面的“PHP代码”，标题中输入“Testing jQuery”，内容中输入下面代码：

<?php

drupal_add_js(

'$(document).ready(function(){

$("p").fadeIn("slow");

});',

'inline'

);

?>

<p id="one">Paragraph one</p>

<p>Paragraph two</p>

<p>Paragraph three</p>

点击提交按钮，然后重新加载整个页面。你创建的3个段落将慢慢的显示出来。酷吧？刷新页面，再看一遍，让我们进一步学习这一个例子。

 jQuery代码位于misc/jquery.js。并不是访问每个Drupal页面时都需要加载这个文件。只有当调用了方法drupal_add_js（）时，才加载它。drupal_add_js（）这里有两个参数，第一个是一段你希望执行的JavaScript代码，第2个参数“inline”则告诉Drupal将代码写到文档头部的<script></script>里面。

 

注意 这里的drupal_add_js（）用法是比较简单的，从http://api.drupal.org/api/5/function/drupal_add_js中可以找到更多高级的用法。

 

让我们更仔细的看看这段代码。

$(document).ready(function(){

$("p").fadeIn("slow");

});

第一行代码需要详细的解释一下。当一个浏览器显示一个页面时，存在着这样一个点，它接收到了页面的HTML并完全的解析了DOM结构。接下来就是显示DOM，这包括加载额外的本地（可能远方的）文件。如果你在生成DOM以前执行JavaScript代码，那么代码就会抛出错误异常并停止运行，这是因为他想要操作的对象还不存在。JavaScript程序员一般使用下面的代码（或其变体）来处理这种情况：

window.onload = function(){ ... }

使用window.onload的缺点是它需要等待加载完所有的额外资源，有时很浪费时间。另外这种方式的局限性还有，只能使用一个函数在这里。为了解决这两个问题，jQuery有一个你可用的简单语句：

$(document).ready(function(){

// Your code here.

});

在创建了DOM以后，就立即执行$(document).ready()。由于这一原因，你将通常需要把你的jQuery代码封装在上面的语句里面。function()方法定义了一个Javascript匿名函数---在这里，包含了你想要执行的代码。

    好了，让我们看一下代码的实质部分，在这里我们需要对其好好讲解一下：

$("p").fadeIn("slow")；

 

注意：在jQuery里面，通过ID来直接访问一个元素是最快的方法，这是因为将其翻译为地道的Javascript代码就是：document.getElementById("intro").另一种选择$(“p#intro”)就会慢一些，这是因为jQuery首先需要查找所有的段落元素然后再从中选择ID为intro的元素。在jQuery中最慢的方法就是$(“.intro”)，因为它需要在所有的元素中查找类为intro的元素（此时使用$(“p.intro”)会快一些）。

 

 

 

上面的代码查找了所有的段落，并在页面内部渐进的慢慢显示它们。用jQuery俚语，fadeIn()

部分被称为一个方法。

我们可以向jQuery方法之后再追加一系列的方法的原因，是jQuery内部的每一个方法都返回一个jQuery对象（方法链）。让我们像上面的jQuery命令后面再追加一个其它的方法：

$("p").fadeIn("slow").addClass("error");

jQuery方法的调用是从左到右。上面的代码查找了所有的段落，并渐进的慢慢显示它们，然后在段落标签内添加类属性‘error‘。我们还可以这样使用方法链：

$("p").css("background-color", "yellow").wrap("<div class=/'error/'></div>").

fadeIn("slow");

$("p")返回文档中所有的段落元素，然后我们使用css（）方法为每个段落元素设置背景颜色style="background-color：yellow"，由于css（）方法同样返回所有的段落元素，我们有使用了wrap()方法为每个段落元素封装了一个<div>标签。最后使用fadeIn()方法，我们让每一个段落元素渐进的慢慢显示。在这里需要注意的主要模式是，我们首先选择一组元素--$("p")—接着我们对其不断的操作直到达到最终效果。

 

注意：我们将修改所有的段落标签，所以如果你访问一个节点列表页面比如http://example.

com/?q=node，你将发现所有的段落标签，而不仅仅是来自于你测试页面摘要里面的段落，都受到了影响。在我们的例子中，我们可以使用$(".content > p")来对段落标签集进行限制。$(".content > p")将段落元素限制在了类.content的内部。（Drupal主题常常将页面的主要内容封装在标签<div class="content"></div>里面）

 

由于jQuery内部的每一个方法都返回原来的jQuery对象本身，所以你可以使用方法链，这允许你在前面的方法后面追加其他方法。

 

注意：我们常常不加区分的使用术语“函数”和“方法”，严格意义上讲，方法是一个函数，同时是一个类的组成部分，而在jQuery里面，所有的函数都定义在类jQuery里面。