Guía rápida de introducción a jQuery
jQuery es una librería muy útil para desarrollos web, y sobre todo para evitar reinventar la rueda al usar javascript, ya que nos ahorra muchos problemas de compatibilidad entre navegadores, carencias o limitaciones del lenguaje, etc.
A pesar de su gran documentación online o los libros sobre la librería publicados, puede que su sintaxis resulte un tanto extraña para un novato, además de no saber muy bien cuáles son las posibilidades reales de jQuery. Para ello, es muy útil este artículo de DotNetStacklers (es la primera parte, espero que pronto publiquen la segunda). Y por cierto, los desarrolladores en .NET pueden aprovechar para darle una oportunidad a jQuery ahora que se integrará con el Intellisense en Visual Studio...
Usa Javascript para resolver 12 problemas comunes del diseño web
En Noupe han hecho una útil lista de doce problemas típicos que se suelen dar en el diseño web, cada uno con su correspondiente solución usando Javascript. Las soluciones dadas se basan en plugins de jQuery, por la potencia y sencillez que ofrece este framework, pero podrían portarse a otros frameworks o desarrollarlos con javascript puro y duro (otra cosa sería aspectos como portabilidad, rendimiento, etc.).
Los problemas que han recopilado son los siguientes:
- Establecer alturas iguales.
- Solución al problema de IE6 con los PNG transparentes.
- Cambiar clases CSS con Javascript
- Selectores basados en el navegador en CSS (tan simple como:
$('html').addClass($.browser);) - Dar soporte a alturas y anchos mínimos/máximos
- Centrar elementos (vertical y horizontalmente)
- Mostrar etiquetas Q en Internet Explorer
- Aumentar el tamaño de los elementos clickeables (en los enlaces)
- Carga perezosa
- bgiframe: alivia el problema de trabajar con los z-index en Internet Explorer.
- ieFixButtons: arregla el comportamiento lleno de bugs de los botones en Internet Explorer (6 y 7)
- Arreglar el "overflow"
Sin duda, un post que conviene tener a mano.
Ultra-encadenamiento con jQuery
Una de las posibilidades más interesantes que ofrece jQuery es la de encadenar funciones, que permite aplicar al mismo objeto una serie de métodos en una sóla instrucción (que al final equivale a una sola línea). Uno de los puntos donde esto se cumple en menor medida es, dentro de funciones, al tener que usar el objeto this para hacer referencia al objeto desde el que se inició el evento que realizó la llamada a la función. Con este código se ve más claro:
jQuery("div").hide("slow", function(){
jQuery(this)
.addClass("done")
.find("span")
.addClass("done")
.end()
.show("slow", function(){
jQuery(this).removeClass("done");
});
}); |
Tras unas modificaciones realizadas a modo de prueba por el equipo de desarrollo de jQuery, el código anterior se transformaría en el siguiente, sin ser necesario hacer mención explícita al objeto this:
jQuery("div").chain("hide", "slow")
.addClass("done")
.find("span")
.addClass("done")
.end()
.chain("show", "slow")
.removeClass("done")
.end()
.end(); |
A Jonh Resig no le acaba de gustar, porque pasa como argumento una cadena a la segunda función, porque no le convence el nombre del método ("chain") y por último, porque si modifican jQuery para que acepte este "ultraencadenamiento", se pierde la posibilidad de invocar a funciones nativas de Javascript, como en este ejemplo:
jQuery(this).html( jQuery(this).attr("href") ) |
Así que, de momento, la modificación se está debatiendo. A mi sí me gusta, porque puedes seguir accediendo a las funciones de Javascript mediante funciones de jQuery, y entiendo que ahorraría más líneas de código de las que costaría usarlo, pero en cualquier caso coincido con John Resig en que es un hack bastante interesante...
Vía | Blog de Jonh Resig.