Esta es la última lección de JavaScript necesaria para comenzar a aprender jQuery. Pero no es la última lección de JavaScript que voy a hacer, porque el lenguaje JavaScript es mucho más amplio y tiene mucho más que ofrecer de lo que he cubierto hasta ahora.

En esta lección vamos a ver otro tipo de dato en JavaScript: los objetos. Los objetos se pueden comparar con arrays, cuyos elementos son variables y funciones. Las variables dentro de los objetos se llaman propiedades, y las funciones dentro del objeto se llaman métodos. Puedes leer más sobre objetos en PHP aquí:

¿Qué es jQuery?

jQuery es una excelente biblioteca de JavaScript que permite crear efectos web sorprendentes con solo unas pocas líneas de código. Como se indica en el sitio oficial de jQuery:

“jQuery es una biblioteca de JavaScript cuyo lema es: programar en JavaScript debe ser divertido. jQuery se encarga de las tareas comunes y repetitivas, limpia el diseño y mantiene el código corto, elegante y comprensible.”

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.

En esta lección veremos los selectores y los efectos en jQuery.

Selectores

Entre los selectores, los que más usaremos son clases e ID. Los selectores en jQuery son muy similares a los de CSS, así que si sabes escribir selectores en CSS, también sabrás usarlos en jQuery. Así seleccionamos clases:

$('.class')

Y así seleccionamos un ID:

$('#id')

En este video veremos cómo trabajar con CSS utilizando las capacidades de jQuery.

En esta lección estudiaremos los eventos (events) en jQuery. También conoceremos el método animate(), que permite realizar animaciones. Con la ayuda de eventos y animate(), crearemos un formulario de contacto animado.

En este video aprenderemos a usar jQuery para crear una calculadora en línea. Además, conectaremos el plugin Sexy Uniform para que nuestros botones tengan un diseño atractivo.

En esta lección veremos cómo crear una galería de fotos simple utilizando jQuery.

Seguramente has visto un campo de búsqueda con el texto "Поиск" (Buscar), que al hacer clic desaparece para permitir introducir tu propia consulta. A continuación te muestro un snippet en jQuery para lograr este comportamiento:

Código del archivo:

/sites/all/modules/custom/custom.info

name = custom
description = custom module
core = 7.x

/sites/all/modules/custom/custom.module

<?php

  drupal_add_library('system', 'ui.tabs');

Código CSS:

#tabs {
  border: 0px;
}

.ui-tabs-nav {
  background: none;
  border: none;
}

Código HTML dentro de node-product.tpl.php: