Introducción a JQuery.

Vuelvo de nuevo con una pequeña guía de JQuery, que se puede denominar como una extensión simple de Javascript que cambia la forma en la que escribimos las cosas, haciendo todo mucho mas sencillo, es decir, como bien dice su eslogan, «write less, do more».

Además, el codigo JS será compatible con la práctica totalidad de los navegadores web del momento, con lo que no tenemos que rompernos la cabeza con incompatibilidades entre los mismos, especialmente al emplear la técnica de desarrollo web AJAX.

En esta introducción veremos que cambios ocasiona el uso de JQuery y cómo realizar las tareas más comunes que veniamos realizando con Javascript, incluyendo llamadas asíncronas (AJAX).

1.- Selección de elementos

Comunmente, en JS utilizábamos sentencias tipo «document.getElementById(‘id_elemento’)» para obtener un elemento concreto y posteriormente realizar tareas sobre el mismo u obtener un valor concreto.

Con JQuery esto es muchisimo mas sencillo:

• Seleccion por id: $(«#id_elemento»)
• Seleccion por class: $(«.clase»)
• Seleccion de todos los elementos de un tipo: $(«p»), $(«img»), $(«input»)
• Seleccion con filtro por valor de atributo: $(«input[name=’username’]») (selecciona todos los input cuyo atributo name sea igual a «username»).
• Podemos combinarlos: $(«input.clase[name=’username’]»)

Guia de selectores de JQuery
Todos estos selectores nos devolveran un objeto de tipo Array, por lo tanto podremos recorrelo con un «.each(function() {})» pudiendo hacer referencia a cada objeto usando el selector «$(this)» u obtener un objeto de JS estandar con un «.get(int)».

2.- Atributos , Clases y Estilos CSS

En JS estandar accedemos a los mismos como «element.attribute», sin embargo en JQuery podremos actuar directamente sobre el array devuelto por el selector, aunque solo sobre el primer elemento del mismo.

• Obtener valor de atributo: $(selector).attr(«attr_name») (devuelve un string).
• Establecer valor: $(selector).attr(«nombre_atributo», «valor»)
• Eliminar atributo: $(selector).removeAttr(«nombre_atributo»)
• Añadir clase (class): $(selector).addClass(«nombre_clase»)
• Eliminar clase: $(selector).removeClass(«nombre_clase»)
• Obtener valor (value): $(selector).val()
• Establecer valor (value): $(selector).val(«valor»)
• Establecer valor de estilo CSS: $(selector).css(«elemento», «valor») ( pj: .css(«display», «none») )
• Obtener valor de elemento CSS: $(selector).css(«elemento»)
• Establecer tamaño CSS: $(selector).width(anchura), $(selector).height(altura)
• Obtener tamaño CSS: $(selector).width(), $(selector).height()

Guia de manipulación de atributos en JQuery
Guia de CSS en JQuery

3.- Manipulación de contenido

• Obtener contenido HTML: $(selector).html()
• Establecer contenido HTML: $(selector).html(«contenido»)
• Añadir contenido al principio: $(selector).prepend(«contenido»)
• Añadir contenido al final: $(selector).append(«contenido»)

Guia de manipulación de contenido en JQuery

4.- Eventos

• Función de click, se llama al hacer click sobre el elemento: $(selector).click( fn ).
• Función de focus, se llama al hacer focus en un elemento: $(selector).focus( fn ).
• Función de submit (típica de un formulario, se llama cuando este se envia): $(selector).submit( fn ).

Las funciones indicadas como «fn» se pueden haber definido antes como «var fn = function() { … }» o bien se puede escribir de forma implicita, pj, «$(selector).click(function() { alert(«Me han pulsado :-D»);  })». Al igual que en casos anteriores podemos utilizar «$(this)» para referenciar al objeto pulsado.

Guía de eventos en JQuery

5.- Efectos

Llegamos a una de las partes mas sorprendentes de JQuery, ya que con muy poco código podremos realizar animaciones complejas sin despeinarnos. Veamos algunos de los efectos mas comunes:

• Esconder/Mostrar un elemento: $(selector).hide(), $(selector).show() Esto esconderá/mostrará un elemento al momento, pero podremos animarlo con un simple .hide(velocidad), donde «velocidad» puede ser un string de entre «slow», «normal» y «fast» o bien un valor numérico en milisegundos que durará dicha animación. Ademas podremos añadir una parámetro más en el que definiremos una función que se llamará cuando finalice la animación, ideal para componer animaciones ( .show(«slow», function(){…})).
• Efecto slide (cortina): $(selector).slideUp(velocidad) $(selector).slideDown(…).
• Efecto desvanecimiento: $(selector).fadeIn(velocidad), $(selector).fadeOut(…)
• Parar animación en curso: $(selector).stop()

Además, podemos crear nuestros propios efectos de animación de forma simple:

• $(selector).animate(opciones, duracion) donde «opciones» será una serie de parámetros, por ejemplo:
• $(selector).animate({width: «100px», height: «100px»}, 500): Haremos una animación que dure medio segundo y que vaya cambiando el tamaño actual del elemento a un tamaño de 100×100 pixels.

Guía de efectos en JQuery

Nada mas, espero que haya ayudado a conocer y comprender el funcionamiento de JQuery, al menos para las operaciones más básicas. No he comentado nada de la parte de AJAX, ya que esto lo dejo para otra ocasión, en la que entraré con más detalle en el uso de AJAX con JQuery, utlizando XML como respuesta de las llamadas asíncronas.

🙂

Enlaces relevantes:

JQuery