write less do more
Creado por Alvaro José Agámez Licha / https://twitter.com/CodeMaxter
jQuery fue creada por John Resign alrededor de Agosto de 2005, o al menos en ese mes el hizo el primer anuncio de sus intensiones y su trabajo respecto a crear una librería que permitiera una manipulación del DOM y demás funcionalidades necesarias para el desarrollo con JavaScript de manera más fácil y rápida.
Desde entonces (June 30th, 2006 fue el día en que se lanzó la versión 1.0 Alpha), jQuery no ha hecho si no crecer y mejorar, hasta tomarse por asalto la web, convirtiéndose en la librería más usada por los desarrolladores web.
Otro hito importante en la historia de jQuery fue el lanzamiento del módulo de componentes gráficos jQuery UI el 1 de Julio de 2007, algo que definitivamente le dió el último empujón a jQuery para liderar por sobre las demás librerías.
jQuery es una biblioteca de JavaScript ligera, "write less, do more", como versa su enlogan.
El propósito de jQuery es hacer mucho más fácil el usar JavaScript en el desarrollo web.
jQuery toma muchas tareas comunes que requieren muchas líneas de código JavaScript, y las envuelve en métodos que se pueden llamar con una sola línea de código.
jQuery también simplifica mucho las cosas complicadas de JavaScript, como las llamadas AJAX y manipulación del DOM.
jQuery nos da la posibilidad de poder consultar, insertar, modificar y eliminar elementos del DOM, de manera fácil y rápida, dejándo toda la complejidad del código cross browser a la librería y permitiéndonos concentrarnos en crear nuestras aplicaciones.
Este es otro de los puntos fuertes de jQuery, el trabajo con los eventos en todos los elementos de un documento HTML, incluso dejándonos crear nuestros propios eventos. El manejo de los eventos es simple y cross browser.
Nunca está de más darle a nuestras aplicaciones un toque animado o brindar una experiencia de usuario más movida y alegre, y aquí jQuery nos ofrece una colección de opciones a la hora de crear efectos y animaciones, de manera fácil y rápida como de costumbre.
El gran impulsor de JavaScript, la gran revolución en la web, el que en su inicio nos dió muchos dolores de cabeza a los desarrolladores web, jQuery nos lo simplifica y facilita hasta niveles soñados.
jQuery empezó siendo una pequeña -pero poderosa- librería, y con el paso de los años ha ido creando un gran ecosistema a su alrededor, en un inicio a través de multiples plugins creados por entusiastas y empresas dedicadas al desarrollo web, luego fue la librería de componentes visuales jQuery UI, después de un tiempo apareció QUnit, un framework de pruebas unitarias para JavaScript, y por último, pero no menos importante o impactante, jQuery Mobile, un framework con capacidad touch para crear aplicaciones móviles para Smartphones y Tablets.
Y así fue como jQuery tomó por asalto la web y se convirtió en el rey que es ahora.
En esta sección vamos a entrar de lleno en el aprendizaje de las funcionalidades básicas de jQuery, jQuery UI y jQuery Mobile.
Antes de empezar, debo aclarar que jQuery utiliza el símbolo $ como abreviación para acceder a todos sus métodos, aunque como otras librerías también lo usan y en algunas ocaciones es necesario (la verdad no lo recomiendo) usar varias librerías JavaScript al mismo tiempo, podemos usar la la palabra jQuery para acceder a los métodos de la librería y así evitar conflictos con las demás librerías que usen el símbolo $.
jQuery usa como base los selectores CSS, de ahí su nombre, la j viene de JavaScript y Query de selector, así que todo lo que vayamos a hacer, lo haremos usando uno o más selectores CSS.
jQuery nos permite realizar operaciones de creación, consulta, actualización y eliminación de elementos dentro del DOM. A continuación veremos unos cuantos ejemplos de selectores, que aunque no abarcarán la gran mayoría de selectores de los que dispone jQuery, les ayudarán a entender los conceptos básicos, y les permitirán empezar con el apasionante mundo de jQuery.
Para dominar totalmente la librería los invito a estudiar la excelente documentación con que cuenta cada componente del ecosistema jQuery.
Basícamente la sintaxtis para seleccionar elementos del DOM con jQuery es:
var firstName = $("#userForm input[name=firstName]");
var element = $("#userDialog");
var element = $(".error");
var element = $("div");
En el segundo ejemplo podemos ver uno de los selectores que más usaremos, el selector por ID del elemento, y como expliqué anteriormente, se hace con un selector CSS:
El tercer ejemplo nos muestra como podemos usar el selector que hace referencia a un elemento que tiene una clase CSS en concreto.
El cuarto ejemplo nos muestra como podemos usar el selector que hace referencia al nombre de un elemento, en este caso un DIV.
Crear elementos nuevos e insertarlos en el DOM de un documento HTML es realmente simple en jQuery, solo debemos especificar el tipo de elemento que queremos crear, asignarles las propiedades que necesitemos y por último insertarlo donde lo necesitemos.
var field = $("<div/>").text("First new Element").appendTo("#container");
var field = $("<div/>", {"class": "error", "text": "Second new Element"});
En los dos ejemplos anteriores estamos creando dos elementos de tipo DIV, pero estamos usando dos sintaxis diferentes o mejor dicho, dos formas diferentes de obtener el mismo resultado, que es crear dos DIV con un texto dentro y posteriormente agregarlos a un DIV contenedor.
Eliminar elementos del DOM es una tarea trivial en jQuery, y podemos eliminar uno o varios elementos a la vez, o todos los elementos que un elemento tenga asignados:
$("#element").remove();
$("#container").empty();
En los dos ejemplos anteriores estamos eliminando elementos del DOM; el primero elimina el elemento con ID "element", en este caso solo elimina un elemento, pero si usamos un selector que seleccione varios elementos, todos serían borrados.
El segundo ejemplo elimina todos los elementos que sean hijos del elemento con ID "container", esto es especialmente útil en algunos escenarios.
El proceso de actualización de elementos del DOM pasa primero por seleccionar el o los elementos que queremos modificar. Referente a lo que podemos modificar de los elementos del DOM, jQuery nos permite fácilmente acceder a todas las propiedades de los elementos y cambiar sus valores, eliminar o agregar nuevas propiedades.
$("#element").css({
"border": "solid 1px #000",
"color": "green",
"height": "100px",
"width": "150px"
});
$("#element").addClass("error");
$("#element").removeClass("error");
$("#element").attr("name", "firstName");
$("#element").prop("checked", true);
Los anteriores ejemplos nos muestran la facilidad y el amplio rango de métodos que nos ofrece jQuery al momento de actualizar o modificar las propiedades y atributos de los elementos del DOM.
A veces se tiende a pensar que jQuery y jQuery UI son lo mismo, pero no es así. jQuery UI es una librería de componentes gráficos independiente de jQuery, así como hay algunas otras, pero desde el principio han estado unidos y se podría decir que son proyectos hermanos, que conforman el ecosistema jQuery.
jQuery UI nos ofrece un conjunto de intereaciones, componentes visuales, efectos y que podemos ver a continuación:
Draggable, Droppable, Resizable, Selectable, Sortable.
Accordion, Autocomplete, Button, Datepicker, Dialog, Menu, Progressbar, Slider, Spinner, Tabs, Tooltip.
jQuery Mobile es un framework que nos permite crear aplicaciones que luzcan como aplicaciones nativas, pero usando el poder de HTML5, CSS3 y JavaScript. Estas aplicaicones pueden desplegarse en un servidor web y ser servidas al usuario cuando se detecte que este está accediendo desde un dispositivo móvil (teléfono celular, Smartphone o tablet) o también puede servir como base para otras herramientas que nos permiten compilar aplicaciones nativas partiendo de código HTML5, CSS3 y JavaScript, como es el caso de Apache Cordoba o PhoneGap -esta última no es más que una implementación comercial de Apache Cordoba-.