Jquery es una biblioteca de Javascript, creada inicialmente por john Resig, que permite simplificar la manera de 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. Fue presentada el 14 de enero de 2006 en el barcamp NYC.
Vamos a ver una serie de eventos básicos de esta fantástica solución web, dos eventos fundamentales, cuya sintaxis se debe aprender de memoria, son:
1) .click()
La acción se desencadena (trigger) cuando se pulsa (y suelta) un elemento.
- jQuery(«p»).click(function () {
- jQuery(this).css («color», «#900»);
- });
2) .hover
Este es muy útil para cualquier acción relacionada con los rollovers, es decir, con cosas que pasan al pasar el cursor por un elemento. Lleva dos funciones separadas por comas, en la primero se define lo que debe suceder cuando se sitúe el cursor sobre un elemento y en la segundo la que debe pasar cuando lo abandone. Por ejemplo, este script colorearía un párrafo de rojo al pasar sobre el elemento y luego de verde al abandonarlo.
- jQuery(«p»).hover(
- function () {
- jQuery(this).css («color», «#900»);
- },
- function () {
- jQuery(this).css («color», «#090»);
- }
- );
Además, hay otros eventos básicos que se suelen emplear menos:
3) .dblclick
Cuando se pulsa dos veces con el ratón.
- jQuery(«p»).dblclick(function () {
- jQuery(this).css («color», «#900»);
- });
4) .mouseenter / .mouseout
Equivalen a .hover. Con .mouseenter ocurre la acción al entrar el cursor en un elemento y con .mouseout al salir.
- jQuery(«p»).mouseenter(function () {
- jQuery(this).css («color», «#900»);
- });
- jQuery(«p»).mouseout(function () {
- jQuery(this).css («color», «#900»);
- });
5) .mouseup / .mousedown
Son muy parecidos a .click. Con .mousedown la acción se desencadena al pulsar el ratón y con .mousedown al dejar de pulsar.
- jQuery(«p»).mouseup(function () {
- jQuery(this).css («color», «#900»);
- });
- jQuery(«p»).mousedown(function () {
- jQuery(this).css («color», «#900»);
- });
6. .mouseleave
Cuando el cursor abandona un elemento. Es muy parecido a .mouseout, pero se actúa de forma diferente si afecta a un nodo hijo. Es un matiz sobre el que ahora no vale la pena profundizar, pero si alguien está interesado puede consultar el artículo de mkyong Different Between Mouseout() And Mouseleave() In JQuery.