jQuery para principiantes

En este curso paso a paso sobre jQuery veremos los elementos esenciales para poder trabajar con esta hermosa librería.

cursos de programación web html, css, javascript, php desde cero

¿Qué es jQuery?

Según la definición de su página oficial, jQuery es una librería de JavaScript rápida, pequeña y poderosa en funciones. Podemos manejar eventos, manipular el DOM HTML, agregar animaciones, Ajax entre otras cositas.

Ventajas de utilizar jQuery

Para mi las principales ventajas de utilizar jQuery son:

  • Compatibilidad con navegadores antiguos.
  • Fácil escritura y comprensión del código.
  • Es Open Source.
  • Muchos Plugins
  • Facilidad de utilizar AJAX

Ahora lo bonito... comencemos a trabajar con Jquery!

Instalación de Jquery en nuestro sitio web.

Exiten dos métodos que yo recomiendo, el primero y el más fácil de todos es a través de un CDN y el segundo es descargar la libería y crear un nuevo archivo JS con todos sus códigos.

¿Por qué prefiero a través de un CDN?
Las principales ventajas son:

  • Está alojado en muchos servidores en todo el mundo, por lo tanto la probabilidad de que se caiga es bajisima.
  • Y la más importante es que si nuestro usuario ya visitó un sitio web con tu mismo CDN, ya lo tiene en el navegador web, por lo tanto no tendrá que descargarlo nuevamente :)

Estructura de un documento HTML con jQuery CDN

A continuación dejo el sitio web donde podrán utilizar el CDN de jquery: https://code.jquery.com/

Por ejemplo yo utilizaré la versión minificada o comprimida:

See the Pen KeqEzQ by bluuweb ( @bluuweb) on CodePen.

Primeros pasos

Aquí puedes revisar la documentación oficial de jQuery.

Para ejecutar el código jQuery tenemos que esperar que todo el documento HTML esté cargado, para eso llamamos a jQuery con el signo de "$" y seleccionamos el documento y la función .ready

See the Pen qKjwWN by bluuweb ( @bluuweb) on CodePen.

Selectores con jQuery

En este primer ejemplo seleccionaremos una etiqueta, un ID y una clase CSS para manipular el contenido HTML de una etiqueta "h1", además de comparar el código de jQuery con JavaScript.

See the Pen 3-jquery-DOM by bluuweb ( @bluuweb) on CodePen.

DOM (manipulando el documento) con jQuery

En este ejemplo veremos como agregar una clase o bien removerla en jQuery.

See the Pen 4-jquery-addclass by bluuweb ( @bluuweb) on CodePen.

Otras funciones más utilizados son:

Eventos con jQuery

Existen muchos eventos que podemos realizar con jQuery, pero el más utilizado es el evento click, el cual tiene dos opciones.

See the Pen 5-jquery-eventos by bluuweb ( @bluuweb) on CodePen.

Aquí te dejo otro ejemplo con el evento keyup()

See the Pen 6-jquery-keyup by bluuweb ( @bluuweb) on CodePen.

Otros eventos más utilizados son:

Efectos con jQuery

Podemos agregar atractivos efectos muy fácilmente con jQuery, aquí te dejo un ejemplo:

See the Pen 7-jquery-efectos by bluuweb ( @bluuweb) on CodePen.

Otros efectos más utilizado son:

Espero que esta guía sea de utilidad y en el próximo módulo hablaremos de Ajax y jQuery que también es una super herramienta.

No olviden suscribirse en mi canal de Youtube: CLICK AQUÍ