Drupal y jQuery. Lección 1. Conectando un archivo con jQuery

jQuery es una herramienta muy útil cuando necesitas ocultar, modificar, mover, estilizar y desaparecer elementos. Es muy práctica y sencilla. Vamos a conectar un archivo JavaScript. Para conectar archivos en un tema, lo haremos a través del archivo con extensión .info de tu tema. Para añadir un archivo, agrega esta línea en el archivo .info de tu tema:

scripts[] = js/custom.js

donde js/custom.js es la ruta al archivo JavaScript dentro de tu tema.

Luego debes asegurarte de que el código jQuery se ejecute después de que la página se haya cargado. En Drupal 6, esto basta:

$(document).ready(function(){
  // código jQuery
});

Pero en Drupal 7, jQuery trabaja en modo noConflict, lo que permite usarlo junto a otras librerías como MooTools. Así que en Drupal 7 debemos usar:

(function($){
  $(document).ready(function(){
    // código jQuery
  });
})(jQuery);

Sin embargo, lo más recomendable en Drupal 7 (y 8/9/10) es usar behaviors:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Aquí escribimos nuestro código JavaScript
    }
  };
})(jQuery);

Para más información sobre behaviors, consulta este artículo:

8.8. Trabajo con JavaScript/jQuery en Drupal 8. ¿Qué son los behaviors?