在Drupal中使用jQuery很简单,这是因为Drupal内置了jQuery,并且在添加JavaScript时会自动加载 jQuery。在Drupal中,通过drupal_add_js()函数来添加JavaScript文件。



Let’s get set up to play with jQuery.

  1. Log into your Drupal site as user 1 (the administrative account).
  2. On the Modules page, enable the PHP filter module.

开启PHP filter模块

  1. Create a new node of type Basic Page, but on the node creation form, be sure to select “PHP code” under the “Input formats” section. Enter Testing jQuery as the title, and add the following to the body section of the form:

创建一个页面,选择PHP code 的输入格式

  1. Click Submit, and reload the page. The three paragraphs you created will slowly fade in. Cool, eh? Refresh the page to see it again. Let’s study this example a little more.

The jQuery code is contained in a file, misc/jquery.js. This file is not loaded for every page within Drupal. Instead, anytime a drupal_add_js() call is made, jquery.js is loaded. Two parameters are passed into drupal_add_js(). The first parameter is the JavaScript code you wish to have executed, and the second parameter (inline) tells Drupal to write the code inside a pair of tags within the document’s element.

jQuery代码包含在文件misc/jquery.js中。并不是为Drupal中的每个页面都加载这个文件。只有在调用了方法 drupal_add_js()时,才加载它。这里向drupal_add_js()传递了两个参数。第一个参数是一段你希望执行的JavaScript 代码,第二个参数“inline”则用来告诉Drupal将代码写入到文档的元素中 的标签里面。 Note:We’re using drupal_add_js() quite simply here, but it has many more possibilities, which you can discover at http://api.drupal.org/api/function/drupal_add_js/7.

drupal_add_js() 更多高级用法参看http://api.drupal.org/api/function/drupal_add_js/7


Note:Accessing an element by ID is one of the fastest selector methods within jQuery because it translates to the native JavaScript: document.getElementById(“one”). The alternative, jQuery(“p#one”), would be slower because jQuery needs to find all paragraph tags and then look for an intro ID. The slowest selector method in jQuery is the class selector jQuery”.foo”), because a search would have to be made through all elements with the .foo selector class. (It would be faster to do jQuery"p.foo”) in that case.)

在jQuery里面,通过ID访问一个元素是最快的选择器方法之一,这是因为它会被翻译为本地的JavaScript代码:document.getElementById(“one “)。替代方案$(“p#one”)就会慢一些,这是因为jQuery首先需要查找所有的段落标签,然后再从中选择ID为one的元素。在jQuery中最慢的选择器方法就是$(".foo”),因为它需要在所有的元素中查找选择器类为foo的元素(在该情况下,使用$(“p.foo”)会快一些)。

方法链(Method Chaining)

We can concatenate a series of jQuery methods because most methods within jQuery return a jQuery object. Let’s chain some methods together in a single jQuery command:

我们可以连接一系列的jQuery方法的原因是, jQuery内部的大多数方法都返回一个jQuery对象。让我们在单个jQuery命令中将多个方法串连起来: // Hide all the p tags, fade them in to visibility, then slide them up and down. jQuery(“p”).hide().fadeIn(“slow”).slideUp(“slow”).slideDown(“slow”); jQuery calls are invoked from left to right. The preceding snippet finds all the paragraph tags, fades them in, and then uses a sliding effect to move the paragraphs up and then down. Because each of these methods returns the jQuery wrapper object containing the same set it was given (all the p elements), we can manipulate the same set of elements over and over again until the final effect is achieved.

jQuery的调用是从左向右进行的。前面的代码片段找到所有的段落标签,并渐进的显示它们,然后使用一个幻灯效果把段落移上去再移下 来。由于其中的每个方法返回的jQuery包装器对象都包含了相同的元素集(所有的p元素),所以我们可以对同一个元素集进行一次又一次的操作,直到达到 最终的效果。

添加或删除一个类(Adding or Removing a Class)jQuery can dynamically change the CSS class of an element. Here, we turn the first paragraph of our example red by selecting it by ID and then assigning Drupal’s error class to it:



The counterpart to the addClass() method is the removeClass() method. The following snippet will remove the error class we just added:



And then there’s the toggleClass() method, which adds or removes a class each time it is called:


jQuery("#one”).toggleClass(“error”); // Adds class “error”. jQuery("#one”).toggleClass(“error”); // Removes class “error”.

jQuery("#one”).toggleClass(“error”); // Adds class “error” again.

包装已有元素(Wrapping Existing Elements) Instead of just adding an error class to the element, let’s wrap that element in a div so that the red will show up better. The following jQuery snippet will do that:


修改CSS元素的值(Changing Values of CSS Elements) jQuery can be used to assign (or reassign) values to CSS elements. Let’s set the border surrounding the first paragraph to solid (see Figure 18-4): jQuery("#one”).wrap(“<div class='error'>”).css(“border”, “solid”); Notice that the css method is still acting on the p element, not on the div element, because the wrap method returned the targeted p element after wrapping it.


Adding JavaScript via a Theme .info File The most convenient but least flexible way to include JavaScript files is to include a line in your theme’s .info file. Let’s add an effect to your site that emphasizes the logo of your site by making it fade out and then fade in again when a page is loaded. Place the following JavaScript code in a file called logofade.js in your current theme. For example, if you are using the Bartik theme, it would be at themes/bartik/logofade.js. 包含JavaScript文件的最方便的方式,就是在你的主题的.info文件中添加一行代码,不过这种方式也有一个缺点,那就是缺乏灵 活性。让我们为你的站点添加一个效果,用来强调你站点的标识语,在一个页面被加载时,先把它淡出,接着再把它渐显出来。把下面的JavaScript代码 放在你主题下的一个名为logofade.js的文件中。例如,如果你使用的主题为Bartik,那么它就位于themes/Bartik/logofade.js。 // Selects the theme element with the id “logo”, fades it out, // then fades it in slowly. jQuery(document).ready(function(){ jQuery("#logo”).fadeOut(“fast”).fadeIn(“slow”); });

The JavaScript file is in place; now we just have to tell Drupal to load it. Add the following line to your current theme’s .info file:


scripts[] = logofade.js

The last step is to make Drupal reread the .info file so that it will see that it needs to load logofade.js. To do that, go to Appearance, temporarily switch to a different theme, and then switch back.


This method of adding JavaScript is useful if the JavaScript will be loaded on every single page of your web site. In the next section, you’ll see how to add JavaScript only when a module that uses it is enabled.



The following module does just that,using jQuery to identify and hide the blocks in the left and right sidebar regions and providing a helpful button that will bring the blocks back. Here’s sites/all/modules/custom/blockaway/blockaway.info: 下面的模块实现了这一点,它使用jQuery来对左右边栏区域中的区块进行标识和隐藏,并提供了一个有用的按钮用来将区块重新显示出来。

name = Block-Away description = Uses jQuery to hide blocks until a button is clicked. package = Pro Drupal Development core = 7.x files[]=blockaway.module

And here’s sites/all/modules/custom/blockaway/blockaway.module:

When you reload your page, you should see that the JavaScript file is now loading. Do you see how these techniques can be useful for substituting your own enhanced JavaScript file in a third-party module or for preventing some JavaScript from loading?


You cannot call drupal_add_js() from inside page.tpl.php or any theme functions that are called in its preprocessing (such as blocks), because they are executed too late in the page building process. See modules/block/block-admin-display-form.tpl.php for an example of a core template file that adds JavaScript.

你不能在page.tpl.php中调用drupal_add_js(),对于其它的一些主题函数,如果是在它的预处理阶段调用的话 (比如区块),那么也不能使用drupal_add_js()。为什么呢?这是因为它们在页面构建流程中执行的顺序过于靠后。核心模板文件是如何添加 JavaScript的,可参看modules/block/block-admin-display-form.tpl.php。