La librería jQuery y sus métodos

La función básica de jQuery y una de las más útiles tiene el mismo nombre que en Prototype, ya que se trata de la “función dolar”: $(). A diferencia de la función de Prototype, la de jQuery es mucho más que un simple atajo mejorado de la función document.getElementById().

La cadena de texto que se pasa como parámetro puede hacer uso de Xpath o de CSS para seleccionar los elementos. Además, separando expresiones con un carácter “,” se puede seleccionar un número ilimitado de elementos.

// Selecciona todos los enlaces de la página
$('a')
 
// Selecciona el elemento cuyo id sea "primero"
$('#primero')
 
// Selecciona todos los h1 con class "titular"
$('h1.titular')
 
// Selecciona todo lo anterior
$('a, #primero, h1.titular')

Las posibilidades de la función $() van mucho más allá de estos ejemplos sencillos, ya que soporta casi todos los selectores definidos por CSS 3 (algo que dispondrán los navegadores dentro de varios años) y también permite utilizar XPath:

// Selecciona todos los párrafos de la página que tengan al menos un enlace
$('p[a]')
 
// Selecciona todos los radiobutton de los formularios de la página
$('input:radio')
 
// Selecciona todos los enlaces que contengan la palabra "Imprimir"
 $('a:contains("Imprimir")');
 
// Selecciona los div que no están ocultos
$('div:visible')
 
// Selecciona todos los elementos pares de una lista
$("ul#menuPrincipal li:even")
 
// Selecciona todos los elementos impares de una lista
$("ul#menuPrincipal li:odd")
 
// Selecciona los 5 primeros párrafos de la página
$("p:lt(5)")

jQuery propone el siguiente código para ejecutar las instrucciones una vez que se ha cargado la página:

$(document).ready(function() {
  ...
});

En realidad, ready() no es más que una de las muchas funciones que componen el módulo de los eventos. Todos los eventos comunes de JavaScript (click, mousemove, keypress, etc.) disponen de una función con el mismo nombre que el evento. Si se utiliza la función sin argumentos, se ejecuta el evento:

// Ejecuta el evento 'onclick' en todos los párrafos de la página
$('p').click();
 
// Ejecuta el evento 'mouseover' sobre un 'div' con id 'menu'
$('div#menu').mouseover();

No obstante, el uso más habitual de las funciones de cada evento es el de establecer la función manejadora que se va a ejecutar cuando se produzca el evento:

// Establece la función manejadora del evento 'onclick' 
// a todos los párrafos de la página
$('p').click(function() {
  alert($(this).text());
});
 
// Establece la función manejadora del evento 'onblur' 
// a los elementos de un formulario
$('#elFormulario :input').blur(function() {
  valida($(this));
});

Entre las utilidades definidas por jQuery para los eventos se encuentra la función toggle(), que permite ejecutar dos funciones de forma alterna cada vez que se pincha sobre un elemento:

$("p").toggle(function(){
  alert("Me acabas de activar");
},function(){
  alert("Me acabas de desactivar");
});

Las aplicaciones web más avanzadas incluyen efectos visuales complejos para construir interacciones similares a las de las aplicaciones de escritorio. jQuery incluye en la propia librería varios de los efectos más comunes:

// Oculta todos los enlaces de la página
$('a').hide();
 
// Muestra todos los 'div' que estaban ocultos
$('div:hidden').show();
 
// Muestra los 'div' que estaba ocultos y oculta 
// los 'div' que eran visibles
$('div').toggle();

Como sucede con Prototype, las funciones y utilidades relacionadas con AJAX son parte fundamental de jQuery. El método principal para realizar peticiones AJAX es $.ajax() (importante no olvidar el punto entre $ y ajax). A partir de esta función básica, se han definido otras funciones relacionadas, de más alto nivel y especializadas en tareas concretas: $.get(), $.post(), $.load(), etc.

La sintaxis de $.ajax() es muy sencilla:

$.ajax(opciones);

Al contrario de lo que sucede con Prototype, la URL que se solicita también se incluye dentro del array asociativo de opciones. A continuación se muestra el mismo ejemplo básico que se utilizó en Prototype realizado con $.ajax():

$.ajax({
  url: '/ruta/hasta/pagina.php',
  type: 'POST',
  async: true,
  data: 'parametro1=valor1&parametro2=valor2',
  success: procesaRespuesta,
  error: muestraError
});

Para desplegar una capa con movimiento

$("div#panel").slideUp("slow");
$("div#panel").slideDown("slow");

Uso de la función setTimeout

setTimeout(function() {
ocloseWindow();
o}, 5000); 

Operaciones con checkboxex y radiobuttons

// RadioButton
//tomar el valor (textGroup sería el nombre del grupo de radiobuttons)
var value = $("input[name=testGroup]:checked").val();
//seleccionar/deseleccionar (donde foo es el nombre del radiobutton)
$('input[name=foo]').attr('checked', false);

// Checkbox
//tomar el valor
var value = $("input:checkbox").attr("checked");
//seleccionar/deseleccionar (donde foo es el nombre del checkbox)
$('input[name=foo]').attr('checked', false);