jQuery es una librería que nos ayuda a simplificar la programación en javascript y AJAX. A diferencia de otras librerías de javascript, jQuery nos permite expresar un código muy complejo de la forma más sencilla y corta posible.
La metodología es simple: Encuentra cosas, y actúa sobre ellas. Encontramos los elementos con el objeto jQuery $(), que funciona básicamente como document.getElementById, excepto que no solo soporta ids sino también selectores de CSS y xPath, en vez de retornar solo un elemento, puede retornar un array de elementos.
Aquí una pequeña muestra del impacto que jQuery puede tener en tu código. Para una tarea sencilla como añadir un evento al click en los links de una región en una página, usarías javascript y métodos del DOM asi:
var externos = document.getElementById("links_externos");
var links = externos.getElementsByTagName("a");
for(var i = 0; i <= links.length; i++) {
links[i].onclick = function() {
return confirm(”Vas a visitar ” + this.href);
}
}Con jQuery:
$("#links_externos a").click(function(){
return confirm("Vas a visitar " + this.href);
});Con jQuery vamos directo al punto y nos ahorramos tener que hacer un loop sobre todos los elementos, no hay necesidad de usar múltiples métodos del DOM, solo con un pequeño string tenemos lo que necesitamos.
Cuando este listo … $(document).ready()
Es lo primero que hay que aprender de jQuery. Si quieres que un evento funcione en la página hay que llamarlo dentro de $(document).ready(), todo lo que este dentro de esta llamada, será ejecutado justo cuando el DOM este listo y antes de que el contenido de la página se cargue.
$(document).ready(function(){
// pones todo tu jQuery aquí ...
});La ventaja de $(document).ready() es que se pueden tener tantos llamados a este método como sea necesario, aparte de que se ejecuta antes de que el contenido de la página este disponible, permitiendo que una cantidad de efectos de esconder, mostrar y otros, estén listas inmediatamente cuando el usuario ve por primera vez los elementos de la página.
Añadiendo contenido
Con jQuery tenemos acceso de forma pragmática al Dom, navegar el documento, tomar y modificar los atributos de los elementos y podemos quitar e insertar contenido.
$("<p></p>")
.html("Hola jQuery")
.css("color", "red")
.appendTo("body")
.fadeIn("slow");Este fragmento aparte de mostrar la facilidad para insertar contenido al DOM, un efecto fadeIn, y aplicarle un estilo CSS al nuevo elemento, es un ejemplo de otra de las ventajas de jQuery, el encadenamiento de los llamados a los métodos.
Cada vez que se llama un método de jQuery, esta retorna el mismo objecto jQuery, lo que nos permite volverlo a utilizar sin tener que repetir el selector.
Efectos
jQuery cuenta con un grupo importante de efectos como show(”speed”), hide(”speed”), fadeIn(), fadeOut(), slideUp(), slideDown(), aparte de algunos efectos que sirven para cambiar el estado visible o invisible de un elemento dependiendo de su estado actual toggle().
Cuando son llamados sin el parametro de velocidad los metodos show() y hide(), muestran o esconden inmediatamente el elemento en cuestion. Todos el resto de este grupo de metodos llamados sin parametro de velocidad, usan la velocidad por defecto 400ms.
… Despues de jQuery …
Solo hé tratado una minúscula introducción sobre lo que es posible con jQuery. jQuery es divertido, porque siempre se aprenden nuevos trucos que resultan increíblemente naturales. jQuery simplifica tu código javascript desde la primera vez que lo usas, cada vez que aprendes algo tu código es un poco más simple.
Algunos links importantes: