Bajo el lema “Escribe menos, haz más.” (Write less, do more) jQuery vino a revolucionar la Web y la forma en que JavaScript se programa hace no más de 5 años. Corria 2006 y John Resig, considerado el Evangelista de JavaScript de Mozilla, presentaba la librería jQuery. Desde ahí en adelante, las cosas se pusieron muy interesantes. Hoy en día, jQuery es una de las librerías más potentes y más utilizadas para desarrollo JavaScript, debido a su robustez, su licencia de código abierto y su simplicidad revolucionando incluso el mundo de los móviles. Veamos ahora cómo funciona a manera de una – muy – básica introducción:
Instalación
Instalar jQuery es muy sencillo. Sólo deben descargarlo desde su sitio oficial pudiendo seleccionar una versión comprimida o una de desarrollo para poder editarla. Yo les recomiendo que si no van a realizar modificaciones en el código o no se van a poner a intrusear mucho, mejor utilicen la versión comprimida, ya que pesa mucho menos.
Luego, pongan el archivo en algún directorio de su sitio con algún nombre. En mi caso, yo llamaré el archivo jquery_min.js y lo guardaré en la carpeta jquery. Entonces, para llamarlo dentro de nuestro html utilizaremos un tag <script> en el head de la siguiente forma:
<script type="text/javascript" src="jquery/jquery_min.js"></script>
Ahora ya tenemos jquery instalado y podemos comenzar a utilizarlo dentro de una etiqueta <script>.
La importancia del signo $
jQuery utiliza el signo $ (dolar) como identificador único para todos sus selectores y constructos. Es por esto que en toda programación de jQuery nos encontraremos con este signo al comienzo. Por ejemplo:
$("a").click(function () { alert("Hicieron click en un vínculo"); });
La mayor utilidad de este signo es poder seleccionar el o los elementos a los que queremos aplicarles o asociarles la programación.
Seleccionando elementos del html
jQuery nos permite seleccionar elementos de nuestro html de manera muy sencilla. Supongamos que queremos realizar una acción cuando el usuario haga algo con un vínculo. Para esto, sólo debemos indicarle que queremos asociar dicha programación a la etiqueta <a>. Esto lo hacemos de la siguiente forma:
$("a")
De esta manera, jQuery sabe que la programación será asociada a cualquier etiqueta <a>. Sin embargo, podemos llegar aún más lejos. Supongamos que queremos afectar sólo aquellos vínculos que tengan aplicada una clase. En el siguiente caso, jQuery comprenderá que la programación está asociada sólo a los vínculos que tengan la clase menu aplicada.
$("a.menu")
También podemos seleccionar elementos sólo por la clase, o bien por id, como se ve en los siguientes ejemplos:
$(".miClase")
$("#miID")
Existen otros selectores predeterminados de JavaScript que podemos utilizar, por ejemplo document o window que utilizaremos como se muestra en el siguiente ejemplo:
$(document)
$(window)
Ahora, entendamos que jQuery utiliza la notación de punto para aplicar los eventos y funciones. De esta forma, si a algún elemento que ya tenemos seleccionado queremos aplicarle alguna acción, deberemos poner un punto luego de la selección y la acción o evento que requiramos. Por ejemplo:
$("a.menu").click(function (){ alert("Hicieron clic en un vínculo con la clase menu aplicada."); });
Usando jQuery con $(document).ready
En muchos casos, necesitaremos realizar acciones cuando el documento se cargue. Para que todos los elementos estén correctamente cargados y podamos trabajar con ellos, jQuery debe esperar a que el documento haya sido descargado completamente. Una forma de realizar esto es con el evento $(document).ready. Veamos un ejemplo:
$(document).ready(function() {
alert("La página se cargó completamente y está lista para ser utilizada.");
});
En este caso, cuando el documento termine de descargarse se lanzará un alert. Como se darán cuenta, utilizamos function() {} dentro de los paréntesis del evento ready() y las acciones dentro de las llaves de dicho function.
Nota: Como recomendación,y como otra forma de asegurarse de que el documento esté cargado, el tag de <script> donde pondremos nuestro jQuery debería ir justo antes del cierre del </body>
Trabajando con eventos
Un evento se gatilla cuando el usuario realiza una acción. Por ejemplo, si el usuario presiona un vínculo, se gatilla el evento click. Los eventos de JavaScript son variados. jQuery simplifica su utilización y nos permite trabajar con ellos de manera mucho más sencilla. Por ejemplo:
$("a").click(function() {
alert("Hicieron clic en un víncilo");
});
En este caso, jQuery estará atento a que hagan clic en cualquier vínculo y cuando este evento suceda realizará el alert.
Otros eventos a los que podemos estar atentos:
- click(): El usuario hizo clic
- hover(): El usuario pasó el mouse sobre el elemento
- focus(): El usuario puso el foco (cursor) en el elemento
- blur(): El usuario sacó el foco del elemento
- change(): El usuario cambió el valor del elemento
- submit(): El usuario envió la información del formulario
- keydown(): El usuario presionó una tecla
- keyup(): El usuario presionó y levantó una tecla
- mousemove(): el usuario movió el mouse
- scroll(): El usuario hizo scroll
Existen muchos eventos más, casi para cualquier acción del usuario o eventos que se gatillan dentro de la misma programación incluso.
Modificar propiedades de estilo CSS
Otra aplicación muy útil de jQuery es la posibilidad de modificar los estilos de CSS de los elementos e incluso aplicar o eliminar clases a éstos. Algunas de las propiedades que podemos afectar:
- css(propiedad, valor): Permite obtener o aplicar propiedades de CSS
- addClass(clase): Permite agregar una clase
- removeClass(clase): Permite eliminar una clase
- height(alto): Permite obtener o asignar el alto
- width(ancho): Permite obtener o asignar el ancho
Así, por ejemplo, el siguiente código aplicará la clase miClase a todos los <div>:
$("div").addClass("miClase");
Efectos
Los efectos son acciones prediseñadas que permiten generar animaciones muy atractivas. Así por ejemplo, algunos efectos con los que nos encontramos son:
- fadeIn(): Realiza una animación donde el elemento aparece de a poco
- fadeOut(): Realiza una animación donde el elemento desaparece de a poco
- hide(): Oculta el elemento
- show(): Muestra el elemento
- slideDown(): Realiza una animación donde el elemento se desliza hacia abajo
- slideUp(): Realiza una animación donde el elemento se desliza hacia arriba
El siguiente ejemplo hará un fadeOut y luego un fadeIn de todos los <div> del documento:
$("div").fadeOut("slow");
$("div").fadeIn("slow");
Pues bien, espero les haya servido como introducción y que tengan un buen jQuerying! A continuación les dejo los archivos del tutorial!
Slds!
