Curso de jQuery (1): Introducción

Voy a comenzar con este artículo un curso básico sobre jQuery, la librería de Javascript probablemente más utilizada en la actualidad.

jQuery fue creada inicialmente por John Resig y nos permite de una manera sencilla y eficiente:
- Acceder a elementos en un documento.
- Modificar la apariencia de una web.
- Alterar el contenido de un documento.
- Responder a una interacción del usuario.
- Animar cambios en un documento.
- Recoger información del servidor sin refrescar la página.
- Tareas diversas de Javascript.

Además nos permite hacerlo sin tener que preocuparnos más por las diferencias entre navegadores, como pasa en muchas ocasiones si utilizamos directamente Javascript.

¿Cómo se añade jQuery a nuestra web?

En primer lugar tenemos que bajarnos la versión más actual de jQuery. Esto lo podemos hacer desde la propia web de jQuery haciendo click sobre el botón Download (jQuery). La versión en el momento de escribir este artículo es la 1.3.2

Una vez tengamos el archivo lo podemos poner en la carpeta donde guardemos los archivos de Javascript del proyecto (por ejemplo js). Luego en la cabecera del código de nuestra web añadimos jQuery como lo haríamos con cualquier archivo de Javascript:

Otra forma alternativa de incluir jQuery, preferida por muchos autores, es descargarla directamente de Google. Se haría así:

Si estáis usando WordPress y queréis que no se utilice la versión que incorpora de jQuery y preferís que la cargue desde Google lo único que hay que hacer es añadir estas líneas al archivo functions.php de vuestro tema:

Y una tercera manera de cargar jQuery, siempre la última versión disponible, es descargarlo de su web oficial:

Bueno, ya tenemos la librería jQuery en nuestra web. Pero esto por sí solo no hace nada. Pero ya podemos incluir cualquier código o funciones de jQuery con vistas a realizar cualquiera de las tareas que antes veíamos que se pueden hacer gracias a jQuery.

¿Cómo se añade código de jQuery?

Para explicar cómo se introduce código de jQuery vamos a comenzar con un ejemplo básico. Vamos a añadir la clase “fondo-destacado” a un Div que tiene un id llamado “contenido”.

Tenemos:

Supongamos también que nuestra hoja de estilo default.css tiene la siguiente clase definida:

Para añadir un código de jQuery que se ejecute en cuanto se cargue el documento de nuestra web (y por lo tanto está ya disponible el div con el id “contenido” de nuestro ejemplo) añadimos las siguientes líneas:

Es decir, cuando el documento (document) esté listo (ready) ejecutar la función que sigue a continuación.

Este comienzo es típico de JQuery y lo que dice es que cuando el documento (document) esté listo (ready) se ejecute la función que sigue a continuación. El documento es el DOM (Document Object Model). Merece la pena distinguir esto de la manera tradicional utilizada en Javascript:

Con window.onload lo que hacíamos es que la función no se iba a ejecutar hasta que no se cargara la web completa (no sólo el DOM), es decir, todas las imágenes y recursos externos. Esto implicaba que si había alguna imagen de carga muy lenta cualquier evento gestionado con Javascript no iba a funcionar hasta que no se cargara esa imagen. Este impedimento lo evitamos con el $(document).ready de JQuery.

En nuestro caso las líneas de código necesarias serán estas:

La operación fundamental en jQuery es seleccionar la parte del documento sobre la que se va a actuar. Esto se hace con el constructor$(). Normalmente su parámetro, lo que incluimos entre los paréntesis, es una línea de texto que puede incluir cualquier selector de CSS. En este caso queremos encontrar en el documento un Div con un id llamado “contenido”, es decir: $(‘#contenido’). Esto es lo que se llama un selector.

A continuación gracias al método de jQuery .addClass() añadimos una clase de CSS a la parte de la página que hemos seleccionado anteriormente, es decir al Div con id=”contenido”. Su único parámetro es el nombre de la clase, escrito entre comillas: .addClass(‘fondo-destacado’);

Este simple ejemplo muestra cómo funciona jQuery. No es un ejemplo muy útil para situaciones reales, pero nos sirve para introducirnos en el lenguaje. En el siguiente artículo veremos cómo incluir selectores más complejos que el que hemos creado en ejemplo.

Otros capítulos del curso

Curso de jQuery (2): Selectores, Primera Parte
Curso de jQuery (3): Selectores, Segunda Parte
Curso de jQuery (4): Selectores, Tercera Parte

Lecturas recomendadas

netnuts+: jQuery for Absolute Beginners: The Complete Series
CSSTricks: Intro to jQuery 2
SohTanaka: New to jQuery? Don’t be Scurred…
jQuery.com: Página oficial de jQuery

6 comentarios en “Curso de jQuery (1): Introducción

  1. A mi me gustó mucho leer la primer instrución del menu con el Jquery.
    Yo he buscado en la red una manera para creacion de menu con submenu.
    Ahora creo haber logrado sucesso.
    Gracias.
    Joseb
    Belo Horizonte-Brazil

  2. Me vas a llamar pesado Juan, pero he visto otro pequeño error en el texto del HTML no cierras :

    Esta es una prueba de jQuery en la que vamos a añadir la clase “fondo-destacado” al Div con el id=”contenido”

    Un saludos!

    • Hola Aitor,

      Creo que has puesto el mensaje en una entrada diferente no? Te refieres al menú desplegable con jquery? Si es así verás que hay una pregunta ya contestada al respecto. Si tienes alguna duda pregúnta sin problemas. Gracias

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">