Escribe menos y haz más con jQuery

Tal como se indica en su sitio oficial, jQuery es una librería JavaScript rápida y concisa que simplifica las tediosas tareas de recorrer documentos HTML (DOM), manejar eventos, ejecutar animaciones y agregar interacciones con Ajax.

Para utilizar jQuery, solo hay que descargar la librería (un mísero .js de no más de 60Kb en su versión descomprimida) y enlazarlo a nuestras páginas web (<script type=”text/javascript” src=”jquery.js”></script>)

Una de las principales ventajas, además de ahorrarnos la escritura de bastante código, es que permite manipular la página apenas se ha contruido el árbol DOM de la misma, mientras que la función de JavaScript espera a que se carguen todos los elementos de la página (incluyendo todas las imágenes). En definitiva, las aplicaciones con jQuery pueden responder mucho más rápido que las aplicaciones JavaScript tradicionales.

Basta de palabras y veamos algunos ejemplos para empezar a conocer jQuery:


[HTML]



Test jQuery<br />


Ejemplo evento toggle (Activar/Desactivar):

Ejemplo evento change (Text sincronizados):

Efectos visuales:





Efecto visual




[/HTML]


[JS]
/* Equivale a window.onload = function() { ... } */
$(document).ready( function() {
alert("Benvindo!!!");
$("div#efecto").css( { color: "red", background: "blue"} );
}
);

/**
* jQuery añade el evento toggle().
* A este método se le pasan dos funciones, cuya ejecución se alterna, la primera vez
* que se haga clic sobre el elemento (y todas las veces impares), se ejecuta la primera función
* y la segunda vez (y todas las veces pares) se ejecuta la segunda función:
*/
$("input#textActivar").toggle( function() {
//alert("Me acabas de activar");
$(this).val("Desactivar");
} , function() {
//alert("Me acabas de desactivar");
$(this).val("Activar");
}
);

/**
* Mantengo las cajas de texto sincronizadas. El valor de una caja de texto
* siempre es igual al de la otra.
*
*/
$("input#text1").keyup( function() {
$("input#text2").val( $(this).val() );
}
);

$("input#text2").keyup( function() {
$("input#text1").val( $(this).val() );
}
);

/**
* Ejecuto algunos los efectos visuales, con los métodos:
*
* .hide(); // Ocultar un elemento
* .show(); // Mostrar un elemento
* .toggle(); // Si estaba oculto, mostrarlo; si era visible, ocultarlo
* .show("slow"); // Mostrar el elemento con una animación muy suave
* .slideToggle("fast"); // Desplegar/ocultar el elemento con una animación muy rápida
* .fadeOut(); // El elemento desaparece con un fundido muy suave
*
*/
$("input#efectoHide").click( function() {
$("div#efecto").hide();
}
);

$("input#efectoShow").click( function() {
$("div#efecto").show();
}
);

$("input#efectoToggle").click( function() {
$("div#efecto").toggle();
}
);

$("input#efectoShowSlow").click( function() {
$("div#efecto").show("slow");
}
);

$("input#efectoSlide").click( function() {
$("div#efecto").slideToggle("fast");
}
);

$("input#efectoFadeOut").click( function() {
$("div#efecto").fadeOut();
}
);
[/JS]

Estos ejemplos no representan ni una pequeña parte de las bondades de jQuery, pero por más simple que sean, por algo hay que empezar.

Para finalizar, recomiendo esta excelente guía visual.

Vía: MaestrosdelWeb

Tags: , ,


Leave a Reply

Your email address will not be published. Required fields are marked *