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:
- Descargar el fichero y subirlo a nuestra web
- 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:
- $(this).hide() – oculta el elemento actual.
- $(“p”).hide() – oculta todos los elementos <p>
- $(“.test”).hide() – oculta todos los elementos de class=”test”.
- $(“#test”).hide() – oculta todos los elementos con id=”test”.
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
Spanish 
English