Time8网络信息网

philquotes 模块的 hook_block() 实现 (在 philquotes.module 中) 创建了一个如下的 HTML 区块：

<h2 class="title">Pithy Quote</h2>
<div class="content">
  <div id="philquotes-text">
    The only principle that does not inhibit progress is:
    anything goes.
  </div>
  <div id="philquotes-origin">
    P. Feyerabend, Against Method
  </div>
</div>

上面 ID 分别为 philquotes-text 和 philquotes-origin 的两个 <div/>，是模块的主题函数 theme_philquotes_quote() 创建的。

现在我们将开始编写一些 JavaScript 代码。这些代码是我们的模块的一部分，而且这些代码放在自己的文件中。遵循标准的命名约定，文件存储在drupal/sites/all/modules/philquotes/philquotes.js。

我们的 JavaScript 代码要做的第一件事是，在区块末尾插入一个 Next 链接，紧随名言的出处之后。

jQuery提供了一些工具可以简便高效地完成这个工作。使用 jQuery，这需要两个步骤：

1. 找到 philquotes-origin 元素
2. 在元素后插入链接

代码如下：
 

$("#philquotes-origin").after("<a>Next &raquo;</a>");

第一眼看过去，这唯一的一行代码既简洁又令人困惑。因为我们在本章中要多次使用 jQuery，因此我们花些时间看看事情的原委。

上面的一行代码中包含了两个函数调用。第一个函数调用是：$("#philquotes-origin")。这里的函数名是 $()。在 JavaScript 中，美元符号($)用于变量和函数名都是合法的。也就是说在 JavaScript 中 countMy$() 和 give$away() 都是有效的函数名。$()也是如此。默认情况下，jQuery库把这个函数作为访问jQuery对象的方法。（如果你愿意，也可以用较长的版本: jQuery()）。

可以用几种不同的方式调用 $() 函数，但最常见的用法是传递给它一个查询，以 CSS 选择子的形式。(参见 http://docs.jquery.com/Selectors, 这里有一个支持的选择子列表)

当这样调用 jQuery 时，它在当前的 HTML 中搜寻 DOM 树，并返回一个 jQuery 对象，其中包含与查询相匹配的元素列表。

jQuery库有良好的文档。除了完整的 API 文档，还有很多教程。开始学习的最佳地点是 jQuery 官方文档主页：http://docs.jquery.com/Main_Page。

回顾上面我们的代码，$("#philquotes-origin")调用返回一个 jQuery 对象。因为选择子 #philquotes-origin 指向一个元素 ID，它将返回不超过一个元素。按照我们前面的 HTML，它将返回这个元素：

<div id="philquotes-origin">
  P. Feyerabend, Against Method
</div>

因此，我们的第一次 $() 调用返回一个 jQuery 对象。使用 Fluent 接口，我们只要在返回对象上调用 after() 方法：

$("#philquotes-origin").after("<a>Next &raquo;</a>");

after() 方法在参考元素后插入内容。在此例中，它将在上面的 <div/> 元素后插入内容。如果我们在一个带有名言的页面上执行这个查询，结果的 HTML 将如下所示：

<h2 class="title">Pithy Quote</h2>
<div class="content">
  <div id="philquotes-text">
    The only principle that does not inhibit progress is:
    anything goes.
  </div>
  <div id="philquotes-origin">
    P. Feyerabend, Against Method
  </div>
  <a>Next &raquo;</a>
</div>

如果我们不象上面的代码那样使用它，after() 方法也返回一个 jQuery 对象的引用，因此我们可以继续串联下去，如果我们想的话。

提示：用你的浏览器的“查看源码”特性，将能显示出新插入的元素。为了能看到被JavaScript 修改过的源码，你需要 FireBug 或其它 JavaScript 开发工具。

jQuery对象有若干个与 after() 相似的函数。html() 函数在选中的元素内插入HTML。before() 函数在选中的元素前插入 HTML。

提示： Getter 还是 Setter? jQuery的一个起先令人吃惊的方面是，一个方法既可以作为 getter 也可以作为setter（或者既是 accessor 也是 mutator）。这就意味着，html("<br/>")将在当前元素中插入内容并返回一个jQuery 对象，而 html()（没有参数）不会改变任何内容，但将返回元素的内容。

到目前为止，我们完成了在已有文档中插入一小段内容的工作。不过，仅有这个小小的查询是不行的。为什么呢？

有两个原因：

首先，浏览器可能不支持必要的 JavaScript。如果是这种情况，我们根本无法插入元素。

第二，在HTML完成装入之前，浏览器可能就已经执行查询了。在这种情况下，查询可能根本无法找到 philquotes-origin 元素。

在继续进行之前，我们必须修正这两个问题。