jQuery: escribe menos, haz más

¡Bienvenidos queridos rooters a nuestro blog una vez más! Tenía muchas ganas de que este rootie llegase. Hoy vengo a hablar de una de las librerías (erróneamente denominado framework) más útiles y que además personalmente más me gustan en el desarrollo web: jQuery (pronunciado yei-cueri o jota-cueri).

Introducción

jQuery es una librería de JavaScript de software libre y código abierto mantenida por la fundación jquery.org. Si bien jQuery ya había aparecido anteriormente en nuestro rootie de Desarrollar una extensión para Chrome, hoy comentaremos en profundidad lo que se puede conseguir con esta fabulosa librería.

Su lema resume muy bien lo que nos aporta esta librería: “write less, do more”. Escribe menos, haz más, y es que esta librería sea probablemente la que más nos facilita la ardua tarea de manipular los elementos del DOM de HTML con respecto a cómo lo hace el lenguaje JavaScript.

Por otra parte, entre sus características podemos destacar la facilidad para manipular el contenido de un documento, la independencia del navegador para gestionar los eventos, la enorme posibilidad que encontramos para añadir atractivos efectos y transiciones y la facilidad en la utilización de la técnica AJAX.

Añadir que la última versión estable es la 3.1.1 (a día de hoy, 21 de febrero de 2017) y podemos encontrarla en la web oficial: https://jquery.com/download/

Características más interesantes de jQuery

Además de las características mencionadas anteriormente, la lista se completaría como sigue:

  • Selección de elementos DOM.
  • Interactividad y modificaciones del árbol DOM, incluyendo soporte para CSS 1-3 y un plugin básico de XPath.
  • Eventos.
  • Manipulación de la hoja de estilos CSS.
  • Efectos y animaciones.
  • Animaciones personalizadas.
  • AJAX.
  • Soporta extensiones.
  • Utilidades varias como obtener información del navegador, operar con objetos y vectores, funciones para rutinas comunes, etc.
  • Compatible con los navegadores Mozilla Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 10.6+ y Google Chrome 8+.

¿Cómo funciona jQuery?

Uno de los puntos fuertes de jQuery es que reduce el número de instrucciones que usaríamos con JavaScript, por lo que nos ayuda a acortar esta sintaxis. La forma de interactuar con el DOM de nuestro HTML es a través de la función $(), un alias de jQuery(), que recibe como parámetro una expresión CSS o el nombre de una etiqueta HTML y devuelve todos los nodos que indique dicho parámetro que llamaremos selector.

Protip: la consola de nuestro navegador es una gran herramienta a la hora de depurar código jQuery.

Veamos un ejemplo. ¿Os acordáis de la primera página que hicimos en HTML5? Le añadiremos alguna funcionalidad con jQuery.

Lo primero que haremos será descargar la librería y añadirla en nuestro código html, justo antes del script que ya teníamos añadido:

A continuación debemos indicar en nuestro script.js que el documento esté preparado para ser tratado:

Bien, ya tenemos nuestro script listo para ejecutar código jQuery. La funcionalidad que vamos a implementar es la siguiente: al pulsar sobre el botón «Item 1» de la barra de navegación van a suceder dos cosas:

  1. El header y el footer de la página se van a ocultar.
  2. El color de fondo del contenedor de los artículos va a cambiar a verde oscuro.

Finalmente ejecutaremos el código. Después de recargar la página y hacer clic sobre el elemento Item 1 obtenemos como resultado que nuestro código hará su efecto y nuestra lucirá así:

Objetivo conseguido, ¡el código funciona! En el siguiente rootie sobre jQuery os hablaré detenidamente de la tecnología AJAX. Podemos utilizar AJAX para desarrollar aplicaciones web interactivas.

¡Que tengáis una buena semana!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *