Banco de conocimiento Ciberimaginario

jQuery

Introducción a jQuery

¿Qué es jQuery?

Javascript es relativamente sencillo, pero su escritura es laboriosa. Además, cada navegador presenta sus particularidades manejando javascript.

Para facilitar el trabajo de codificación llegaron precisamente las bibliotecas o librerías, y las APIs.

jQuery es una de ellas (posiblemente la más utilizada) Se trata de una librería que simplifica notablemente la programación con JS.

jQuery es una librería especialmente popular como se puede ver en esta web de estadísticas de librerías.

¿Qué hace jQuery?

Con jQuery podemos interactuar con la página y cambiar su contenido, de forma relativamente simple:

  • Manipulación de HTML/DOM
  • Manipulación de CSS  
  • Manipulación de eventos y métodos HTML  
  • Efectos y animaciones
  • AJAX
  • Utilidades

Y todo ello sin necesidad de recargarla.

¿Como se carga la librería?

Para cargar jQuery en una web podemos:

  1. Descargar el fichero y subirlo a nuestra web
  2. Enlazar desde un CDN (Content Delivery Network) desde Google o Microsoft

Enlazar desde un CDN mejora la carga porque reaprovecha las cargas previas en caché.

Debe enlazarse siempre desde el encabezado.

Sintaxis jQuery

El funcionamiento básico de jQuery es la selección de un elemento html del DOM (consulta o query) para realizar una acción sobre él.

La sintaxis de jQuery es más sencilla que la de javascript y responde a esta idea básica:

  • El símbolo del dólar ($) identifica la llamada a la librería de jQuery.
  • Entre paréntesis () va el nombre del selector html
  • Action marca la acción que se va a llevar a cabo.

Veamos un ejemplo en acción. Si pulsas los textos, verás que desaparecen.

Document Ready Event

Para evitar que el código jQuery comience antes de que se haya cargado el elemento sobre el que debe actuar, se utiliza la expresión $(document).ready()

Se ubica en el <head> después del script de carga de jQuery y antes de las funciones de jQuery que se invoquen.

$(document).ready(function(){

// Los métodos jquery irán aquí

});

Selectores

jQuery trabaja con los selectores de CSS, así que hagamos un breve repaso de estos:

Veamos algunos ejemplos de cómo la función hide actúa de diferente forma en función del selector que apliquemos:

El número de selectores es realmente amplio, lo que da una enorme versatilidad a jQuery.

jQuery en un fichero externo

Cuando hay muchas funciones jQuery puede ser más útil poner todas ellas en un fichero externo enlazado.  

Ejercicio 1

Sobre este ejemplo, usa el selector adecuado para ocultar todos los  elementos de párrafo <p>

[Solución]

Ejercicio 2

Sobre este ejemplo, usa el selector para ocultar el id=“test”.

[Solución]

Eventos y métodos jQuery

La mayoría de eventos DOM tienen un método jQuery equivalente:

Vemos aquí algunos ejemplos:

Efectos jQuery

JQuery permite crear numerosos efectos para incluir interactividad y mejorar la presentación de la información.  

Algunos efectos son:

  • Hide / Show
  • Fade
  • Slide
  • Animate
  • Stop()
  • Callback
  • Chaining

Hide/Show

Tiene diferentes opciones: hide, hide and show, Toogle.

Fade

Tiene diferentes opciones: fadeIn, fadeOut, fadeToogle

Slide

Opciones: slideDown, slideUp, slideToogle  

Animate

Opciones: animate

image_pdfVersión pdfimage_printImprimir