jQuery es una biblioteca rápida y concisa de JavaScript, que simplifica tareas que con JavaScript tradicional son mucho mas difíciles de hacer, como interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.
jQuery está diseñado para cambiar la forma en que escribimos JavaScript. jQuery es software libre y de código abierto, permitiendo su uso en cualquier proyecto. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio. La característica principal de la biblioteca es que permite cambiar el contenido de una página web sin necesidad de recargarla, mediante la manipulación del árbol DOM y peticiones AJAX. Para ello utiliza la función jQuery() o su forma abreviada $().
jQuery consiste en un único fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX. Este archivo (en el momento de escribir esto, la ultima versión de jQuery es la 1.8.0, por lo tanto el archivo es el jquery-1.8.0.js) lo podemos bajar del sitio oficial de jQuery.
Nota: Existen dos versiones del archivo, uno para desarrollo (jquery-1.8.0.js) de 252 KB y otro para producción (jquery-1.8.0.min.js) de 32 KB.
Una vez bajado, para utilizarlo en una página web, debemos referenciarlo en la sección <head> de la página, de la siguiente manera:
<script type="text/javascript" src="jquery-1.8.0.js"/>
Otra alternativa a tener una copia local del archivo jQuery, es utilizar la red de distribución de contenido de Google (CDN, por sus siglas en inglés: Content Delivery Network). Hay maneras diferentes de incluir jQuery utilizando la CDN de Google. Vamos a utilizar la más sencilla ruta basada en agregar el siguiente código:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
Si observa detenidamente el código anterior vemos que en la ruta se hace referencia a una carpeta llamada 1. Con esto Google le dará la última versión, incluso cuando jQuery 1.9 y más allá se liberen! Sin embargo, tenga cuidado: no habrá necesidad de actualizar los archivos HTML, cuando una nueva versión de jQuery es liberada, pero tendrá que estar anuente de cualquier cambio de la biblioteca que pueda afectar una funcionalidad existente. En caso de no querer esta actualización automatica desde Google, podemos utilizar simplemente el siguiente código y asi siempre se usará la versión 1.8.0:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
¿Qué debo usar... La versión comprimida o la descomprimida?
Como vimos más arriba hay dos versiones del archivo jQuery, una comprimida (mínima, para producción) y otra normal (descomprimida o de desarrollo). Tipicamente, querrá usar la mínima en código de producción. Los espacios y los saltos de línea han sido removidos y los nombres de las variables son más cortos. El resultado es exactamente el mismo que si usáramos la versión normal, pero el archivo JavaScript es mucho más chico. Esto es útil para reducir el costo de ancho de banda, y para acelerar la respuesta de una solicitud a la página. La desventaja es la legilibilidad. Si examina el archivo mínimo en un editor de texto, verá que es prácticamente ilegible. Si está interesado en ver cómo jQuery está trabajando verdaderamente, la versión de desarrollo es una versión comentada, legible, y un lindo ejemplo de código JavaScript bien hecho.
Recuerde que jQuery es sólo JavaScript!
Nunca olvide que jQuery es solamente JavaScript! Puede parecer o actuar diferente, pero por debajo, está escrito en JavaScript, y por lo tanto no puede hacer nada que el JavaScript viejo y llano, no pueda hacer.
Con esto ya podemos utilizar la librería en nuesta página. Utilizaremos el siguiente html, para ejemplificar el código que vimos en el artículo "Usando la propiedad innerText en Firefox"
<html>
<head>
<title>Ejemplo de jQuery</title>
<script type="text/javascript" src="jquery-1.8.0.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#elemento').text("miTexto");
});
</script>
</head>
<body>
<span id="elemento">Este texto nunca se mostrará</span>
</body>
</html>
Explicación del código jQuery
La primera cosa que debe aprender de jQuery es que si quiere que un código se ejecute tan pronto como el DOM se cargue y antes que los contenidos de la la página se carguen, debe llamarlo dentro de la función $(document).ready().
En nuestro caso es el código $('#elemento').text("miTexto");
$("#elemento") es un selector que busca el elemento HTML cuyo id sea elemento, en nuesto caso el span al cual le queremos cambiar el texto. Esto es equivalente a la función document.getElementById() que se usa en el javaScript tradicional. Una vez encontrado el elemento, le aplicamos la función text(val), donde val es el argumento de tipo string que en nuestro caso es "miTexto".
Como vimos en el articulo anteriormente mencionado, una ventaja de este método es que funciona en todos los navegadores.
Nota: Como este código se llama dentro de la función $(document).ready(), se ejecuta ni bien el documento está listo y por ese motivo el span, nunca muestra el texto original. En la figura 1 se muestra como se ve la página al cargarla en una navegador web.
 |
Figura 1 - Ni bien el documento está listo, se cambia el texto del span, por lo que nunca se
mostrará el texto original |
Si usted no está muy familiarizado con lo que es el DOM (Document Object Model) podría serle de utilidad el artículo Introducción al DOM