De TW

jQuery es una biblioteca Javascript diseñada para escribir algunas operaciones típicas de manera concisa. Permite expresar programas cross-browser usando unas pocas líneas de código. Además, es una biblioteca de código libre bajo licencia GPL.

Descarga e instalación

La biblioteca se descarga desde jquery.com, ellos ofrecen una versión minificada, es decir sin comentarios ni espacios en blanco, que es lo recomendado para un entorno de producción. Para alguien que quiere meterse en el código de la biblioteca y extenderla, la misma está disponible también en forma extendida.

Para usar la biblioteca en una página, por ejemplo se puede poner en un subdirectorio scripts y usarse como:

<script src="scripts/jquery-latest.min.js"> </script>

La mayoría de las funcionalidades de jQuery se llaman usando la función $. Efectivamente, la biblioteca define una función con este nombre, que es en realidad un alias de la función jQuery. Esta función retorna un objeto de tipo jQuery sobre el que se aplica la función

Búsqueda de elementos en la página

Para encontrar un elemento en una página, la forma habitual de hacerlo usando DOM sería, por ejemplo:

<p id="testp">Párrafo</p>
<script>
var parrafo = document.getElementByID( "testp" );
...
</script>

Esto mismo en jQuery se escribe así:

<p id="testp">Párrafo</p>
<script>
var para = $("#testp");
...
</script>

Cuando a la función $ se le entrega un string, este string es intepretado como un selector CSS normalmente del tipo .clase para identificar una clase, o .id para identificar un elemento único. Una vez que tenemos el objeto jQuery, podemos realizar una operación con él, por ejemplo:

<script>
var para = $("#testp");
alert( para.text() ); // Muestra en una ventana "Párrafo"
para.hide(); // Esconde el párrafo
</script>

Es posible también navegar el árbol XML del documento usando funciones como parent(), children(), next(), prev(), etc. Además, el objeto jQuery puede contener más de un elemento HTML, por ejemplo:

<div class="testc">Div 1</div>
<div class="testc">Div 2</div>
<div class="testc">Div 3</div>
<script>
var divs = $(".testc");  // Podría ser también $("div.testc")
divs.each( function(i) { // i va desde 0 hasta divs.length-1
	$(this).hide();
});
</script>

En este caso para referirse a cada elemento dentro del objeto divs usamos la función each, que recibe como parámetro una función. En el ejemplo esta función es una función anónima dado que no se le asigna un nombre. Dentro de la función, la variable this contiene el elemento, y si usamos $(this) obtenemos un objeto jQuery que envuelve a este elemento.

Cambiar el contenido dinámicamente

Una vez que un elemento está seleccionado, es posible cambiar el HTML que está dentro del elemento arbitrariamente. Lo importante es que lo que se especifique debe ser o bien texto o bien HTML válido. Ejemplos:

<div id="x">Hola</div>
<script>
$("#id").html( "Chao" );
</script>

No es necesario especificar en este caso el elemento div ya que lo que estamos reemplazando es solamente el HTML que está dentro del elemento seleccionado (el innerHTML). Además la función sin parámetros html() retorna el contenido HTML de un elemento, attr("atributo") retorna un atributo, y text() retorna sólo el texto contenido en el elemento.

También es posible agregar contenido antes o después del elemento seleccionado usando before() y after() respectivamente, o agregar contenido por dentro del elemento al principio o al final usando prepend() y append(), o envolver al elemento usando wrap(), entre otras operaciones:

<div id="x">Hola</div>
<script>
$("#x").before( "<p>A</p>" );   // <p>A</p><div id="x">Hola</div>
$("#x").after( "<p>A</p>" );    // <div id="x">Hola</div><p>A</p>

$("#x").prepend( "<p>A</p>" );  // <div id="x"><p>A</p>Hola</div>
$("#x").append( "<p>A</p>" );   // <div id="x">Hola<p>A</p></div>

$("#x").wrap( "<div></div>" );  // <div><div id="x">Hola</div></div>
</script>

Cambiar el estilo dinámicamente

Es posible modificar completamente el CSS de un elemento, agregando algunas propiedades o sobreescribiendo otras, ejemplo:

<div id="x">Rojo</div>
<script>
$("#x").css( { color: "blue" } );
$("#x").css( { color: "blue", fontSize: "120%", backgroundColor: "#ffff00" } );
</script>

Ya vimos que también existen las funciones show() y hide() que básicamente actúan sobre el CSS de un elemento para mostrarlo o ocultarlo. La función toggle() las complementa puesto que muestra un elemento si este está oculto, y lo oculta si está visible.

También es posible usar una animación sobre estas funciones pasando un parámetro con valor "slow", "normal" o "fast", por ejemplo:

<div id="x" style="display: none;">Rojo</div>
<script>$("#x").show("slow");</script>

Otros efectos de animación incluyen fadeOut() que desvanece un elemento haciéndolo transparente, y fadeOut() que lo hace reaparecer. Una función más general para crear una animación es animate() que puede recibir dos parámetros, uno conteniendo un objeto con propiedades CSS para el final de la animación, y el segundo conteniendo la cantidad de milisegundos que debe durar la animación. Este ejemplo agranda un texto y lo desplaza hacia la derecha, demorándose 3 segundos en el proceso:

<div id="x">Texto</div>
<script>
$("#x").animate( {
 color: "#0000ff",
 backgroundColor: "#00ff00",
 fontSize: "3em",
 paddingLeft: "200px"
}, 3000);
</script>

Agregar eventos

Agregar un vento a un elemento es muy fácil y lo mejor es que funciona en todos los browser de la misma manera. Las funciones para agregar eventos incluyen click(), dblclick(), mouseover(), mouseout(), etc. Por ejemplo:

<p id="x">Ejemplo</p>
<script>
$("#x").click( function(ev) {
 alert( "Evento de click: " + ev.toSource() );
}
</script>

Este ejemplo, un poco más complejo, permite editar el contenido de un elemento HTML:

<code>
<p id="x">Editame</p>
<input id="z" value="Editame"/>
<script>
$("#z").keyup( function(ev) {
	var newtext = $(this).attr("value");
	$("#x").text( newtext );
});
</script>

Ajax

jQuery incluye algunas funciones para hacer la programación en Ajax más simple. Enviar datos a un servidor es muy fácil, hay dos funciones $.get() y $.post() que corresponden a los métodos HTTP GET (pasar parámetros en la URL) y POST (enviar parámetros en el cuerpo del request HTTP, útil cuando hay más datos).

Ambas funciones reciben la URL donde está el servicio que se quiere llamar, opcionalmente los datos que se deben entregar y opcionalmente una función que se debe ejecutar si la llamada en Ajax tiene éxito. En este ejemplo asumimos que en el servidor hay un script backend.php que contiene código para recibir los datos que estamos enviando, y que imprime a la salida un mensaje al recibirlos:

$.get( "backend.php",
  { nombre: "Juan", puntos: "3" }, 
  function(msg){
    alert( "Se grabaron los datos: " + msg );
  }
);

Pueden recibirse datos en XML también, e incluso usarse la misma función de selección de $(" ") para seleccionar datos dentro del XML recibido, usando un segundo parámetro:

// El XML en 'datos.xml' contiene:
// <?xml version="1.0">
// <datos>
//   <nombre>Pedro</nombre><puntos>10</puntos>
// </datos>

$.get( 'datos.xml',
 {},
 function(xml) {
  alert( $("puntos",xml).text() );  // Imprime "10"
 });

Más detalles: Using Ajax in jQuery.

Más información

• Documentación de jQuery