43. Introducción a jQuery (Parte 2)

Published: Aug. 26, 2015, 5:07 a.m.

En el podcast anterior ya vimos como seleccionar los elementos de nuestra página web en jQuery y como asociarle un evento. En esta segunda parte vamos a ver como asociarle métodos a a los elementos de nuestra página web con lo que seremos capaces de manipular el DOM, manipular el CSS y realizar efectos y animaciones.

Pero antes de nada ya sabéis que tenemos una cuenta en Twitter y en Facebook donde nos podéis seguir. También hay un formulario de contacto a vuestra disposición para cualquier duda, sugerencia o petición, solo tenéis que rellenar vuestro nombre, el e-mail y la consulta. Por otro lado la lista de distribución está esperando vuestra suscripción.

Los métodos que tenemos para manipular el DOM se pueden utilizar de dos formas, para obtener (get) o para establecer (set). Con lo que podremos, dinamicamente, obtener trozos de nuestro HTML y también podremos modificarlos. Esta librería nos permite añadir y eliminar clases de nuestro CSS como modificar las propiedades de estilo de los elementos de nuestra pagina web.

Otros métodos que nos aporta jQuery podemos realizar efectos y animaciones. Pudiendo hacer que estas tarden n milisegundos en completarse. Otra opción que nos permite es concatenar efectos mediante la técnica del chaining.

Una parte fundamental de jQuery es el método ajax con el podremos realizar peticiones asíncronas al servidor y recoger los datos que necesitemos. Ajax es el método principal que tiene jQuery para utilizar esta librería, pero tenemos otros métodos sobrecargados que son los que normalmente vamos a utilizar (get, post, getJSON, getScript ...).

Al final estos métodos nos simplifican la sintaxis y los utilizaremos dependiendo del tipo de llamada que queramos hacer y los datos que nos devuelva el servidor.

A pesar de jQuery nos ofrece multitud de funcionalidad en ocasiones necesitamos extenderla con algún plugin. jQueryUI es uno de estos plugins pero no el único, existe un enorme repositorio de plugins para jQuery.

Con jQueryUI extendemos la funcionalidad de interfaz de usuario que ya están construidas en este plugin para poder usarlas en nuestra aplicación. Dentro de estas funcionalidades tenemos interacciones, widgets (componentes), efectos y utilidades.

Ejemplo del clásico menú en forma de acordeón.

Podéis descargar la última versión de jQueryUI en jqueryui.com.

Como siempre que hacemos un podcast de programación web os recomendamos que leáis el articulo que le acompaña:

Introducción a jQuery (I)
Introducción a jQuery (II)
Y no olvidéis los fragmentos de código donde podréis practicar con esta librería:

Eventos: JavaScript vs jQuery
Efectos web con jQuery


El recurso del día

JsBin

Hoy os presentamos JS Bin una web open source para depurar el código de nuestro desarrollo web. Con JS Bin podremos testear nuestro código JavaScript, con múltiples frameworks y librerías. También nos permite escribir código HTML y CSS. Uno de sus objetivos es poder compartir código con el resto del equipo fomentando el desarrollo colaborativo.

Muchas gracias a todos por los comentarios y valoraciones que nos hacéis en iVoox, iTunes y en Spreaker, nos dan mucho ánimo para seguir con este proyecto.