Introducción
Si estás familiarizado con el mundo de la programación, sabes lo importantes que son los lenguajes de programación. Algunos de los más críticos y utilizados con frecuencia incluyen HTML, CSS, y JavaScript. Mientras que HTML y CSS te ayudan a diseñar y estructurar tu sitio web, JavaScript te permite hacerlo interactivo. Hay una serie de bibliotecas de JavaScript que puedes utilizar para añadir características únicas a tu proyecto web. Entre ellas se encuentra la biblioteca jQuery.
jQuery por sí mismo no es un lenguaje de programación. Es una herramienta que puedes utilizar para facilitar el desarrollo web en JavaScript. Esto ayuda a que las tareas sean más sencillas y directas. Está famosamente basado en el concepto de ‘Escribe menos, haz más’. Además de facilitar el desarrollo web, jQuery también te ofrece la ventaja añadida de la compatibilidad entre navegadores. Esto significa que el código se puede representar adecuadamente independientemente del navegador que se utilice para la salida.
Para visualizar mejor cómo jQuery hace las cosas más concisas, considera un ejemplo. Digamos que estamos escribiendo el programa “¡Hola, mundo!”. Así es como aparecería en JavaScript y jQuery respectivamente:
|
1 2 |
JavaScript document.getElementById("demo").innerHTML = "¡Hola, mundo!"; |
|
1 2 |
jQuery $("#demo").html("¡Hola, mundo!"); |
Ambas líneas de código producirán el mismo resultado. Sin embargo, como puedes ver, jQuery hace que la escritura sea más concisa y directa.
En este tutorial, aprenderás todo sobre los conceptos básicos de jQuery. Puedes descargar la herramienta por ti mismo desde este sitio web. Procederemos como si fueras un principiante absoluto sin conocimientos sobre jQuery. Este tutorial te enseñará cómo instalar jQuery y algunos de los conceptos fundamentales asociados con él. Exploraremos algunos de los selectores, eventos y efectos comunes en jQuery. Luego, aprenderás a probar conceptos de desarrollo como API, DOM y CDN a través de ejemplos prácticos. Sigue leyendo para familiarizarte con el mundo de jQuery.
Antes de comenzar
Hay ciertas cosas que jugarán a tu favor si las conoces de antemano. Por ejemplo, tener una comprensión básica de cómo funcionan HTML y CSS te ayudará enormemente. No cubriremos eso en este tutorial. Trabajaremos bajo el supuesto de que sabes cómo configurar un sitio web sencillo como mínimo. También deberías tener una comprensión básica de cómo funciona la programación en general. Eso no significa necesariamente que tengas que ser un experto en JavaScript para continuar. Simplemente tener cierta familiaridad con cosas como la lógica, las variables y los tipos de datos en programación es suficiente.
Cómo configurar jQuery en tu sistema
En primer lugar, veamos cómo puedes configurar jQuery en tu sistema. jQuery está disponible como un archivo JavaScript ya que es una biblioteca de JavaScript. Tienes que vincular este archivo en el código HTML de nuestro sitio web. Hay dos formas de hacer esto. Como mencioné antes, una forma de hacerlo es descargarlo desde aquí. Además del sitio web oficial, también puedes encontrar jQuery en Google Hosted Libraries justo aquí.
Otra forma es utilizar la Red de Distribución de Contenidos o CDN para vincular el archivo. Una CDN consta de un conjunto de servidores que ayuda a entregar contenido web localmente. Alojar un archivo jQuery a través de una CDN permite que el contenido llegue mucho más rápido al usuario. Es por eso que utilizaremos la Red de Distribución de Contenidos a partir de este momento en este tutorial.
En nuestro primer ejemplo, crearemos un proyecto web. Este pequeño proyecto contiene style.css en el directorio css/. script.js se encuentra en el directorio js/. Por último, un index.html está presente en la raíz del proyecto web:
De acuerdo con este proyecto, crearemos un esqueleto HTML. Posteriormente, lo guardaremos como index.html:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> |
Aquí es donde vincularemos el archivo jQuery. Como dije antes, lo vincularemos a través de CDN. Introducirás el enlace de jQuery antes de la etiqueta </body> . Después de eso, puedes agregar tu archivo JavaScript personalizado que era script.js en nuestro ejemplo. Recuerda colocar siempre el archivo JavaScript debajo de la biblioteca jQuery, así:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="en"> <head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> |
¿Qué harías si en su lugar descargaras una copia local de la biblioteca jQuery? En ese caso, tienes que guardar el archivo jQuery en la carpeta js/. Luego puedes vincularlo como js/jquery.min.js.
jQuery: Los fundamentos
Antes de sumergirnos en los detalles, repasemos algunos de los fundamentos de jQuery. El trabajo principal de jQuery es usar el DOM para conectar elementos HTML en el navegador. DOM significa Document Object Model. Es el método que permite a JavaScript interactuar con HTML en un navegador. Puedes visualizar el DOM haciendo clic derecho en tu página web y seleccionando Inspeccionar. El HTML que aparece en las Herramientas de desarrollador es el DOM.
Un nodo es un elemento HTML individual en el DOM. JavaScript puede modificar todos estos objetos o elementos. Puedes imaginar la disposición de estos objetos como una estructura en forma de árbol. <html> se encuentra en la raíz mientras que los elementos se ramifican más allá.
Hacer clic derecho y seleccionar Ver código fuente de la página te mostrará el HTML sin procesar del sitio web. Recuerda que esto no es lo mismo que el DOM. Mientras que el DOM se puede cambiar, el código fuente HTML es completamente estático. Cualquier cambio que realices en JavaScript no afectará a este archivo HTML. Todo el nodo <html> está envuelto en una capa externa llamada objeto document.
A continuación, veremos cómo puedes manipular tu página web y sus características usando jQuery. Sin embargo, antes de hacerlo, debes asegurarte de que la página esté lista.
Escribe lo siguiente después de crear el archivo script.js en el directorio js/:
|
1 2 3 4 5 |
$(document).ready(function() { // todo el jQuery personalizado irá aquí }); |
Ahora, cualquier código que escribas estará envuelto dentro de este código. jQuery detectará si el código está listo. El código dentro de esta función se ejecutará solo cuando el DOM esté preparado.
Volveremos a examinar el script "¡Hola, mundo!" del que hablamos al principio del tutorial. Considera que queremos iniciar este script. Para usar jQuery para imprimir este texto en el navegador, tenemos que aplicar el ID demo a un párrafo vacío a nivel de bloque como este:
|
1 2 3 4 5 6 |
... <body> <p id="demo"></p> ... |
Para llamar a jQuery, tenemos que usar el $ símbolo. Puedes aplicar la sintaxis y los métodos de CSS para acceder al DOM con jQuery. Un ejemplo sencillo es el siguiente:
|
1 |
$("selector").method(); |
Este es el formato que usarás con jQuery. Ya sabemos que el # símbolo representa el ID en CSS. Por lo tanto, puedes acceder al ID demo usando el selector #demo.html() . Este método te permitirá cambiar el HTML presente en un elemento.
El siguiente código nos muestra cómo colocar el programa “Hello, World” en el jQuery del archivo script.js’s ready() wrapper:
|
1 2 3 |
$(document).ready(function() { $("#demo").html("Hello, World!"); }); |
Tienes que agregar esta línea de código al script.js archivo. Guarda este archivo. Después de eso, puedes abrir el index.html archivo en el navegador. Deberías poder ver la salida Hello, World!. Este también es un buen momento para verificar el DOM para mayor comprensión. Haz clic derecho en el texto “Hello, World!”. Selecciona Inspeccionar elemento. El DOM mostrará <p id="demo">Hello, World!</p>. Por otro lado, al hacer clic en Ver código fuente de la página, solo se mostrará el HTML sin procesar. En este caso, eso sería <p id="demo"></p>.
¿Qué son los selectores?
Ahora pasaremos a algunas de las características críticas de jQuery. Entre ellas se encuentran los selectores. Los selectores de jQuery le dicen al programa con qué elementos deseas trabajar o 'seleccionar'. Son muy similares a los selectores que puedes usar en CSS. Aquí está el formato básico de cómo acceder a un selector en jQuery:
|
1 |
$("selector") |
Puedes usar cadenas con comillas simples o dobles, aunque la guía de estilo de jQuery prefiere esta última. Si lo deseas, puedes ver la lista completa de selectores de jQuery en esta página oficial. Para tu información, aquí tienes algunos de los selectores más utilizados:
-
$("*")
Este es el selector comodín (Wildcard). Seleccionará cada elemento de tu página.
-
$(this)
Este es el selector actual (Current). Selecciona el elemento sobre el que estás operando actualmente con una función.
-
$("p")
Este es el selector de etiqueta. Selecciona cada instancia de la <p> etiqueta.
-
$(".example")
Este es el selector de clase. Seleccionará cada elemento que tenga aplicada la clase example clase.
-
$("#example")
Este es el selector de ID. Solo selecciona una única instancia del ID example ID.
-
$("[type='text']")
Este es el selector de atributo. Seleccionará cualquier elemento dado con text aplicado al atributo type atributo.
-
$("p:first-of-type")
Este es el selector de pseudoelemento. Te ayuda a seleccionar el primer <p>.
¿Qué son los eventos?
Hay algunas características de la página web que se cargan tan pronto como se carga la página. Considera el ejemplo de “Hello, World”. En este caso, podríamos agregar el código directamente al HTML de origen. Pero ¿qué sucede cuando la carga de una característica requiere la interacción del usuario? Ahí es donde jQuery resulta útil.
Digamos que queremos que aparezca algún texto después de que el usuario haga clic en un botón. Para agregar esta característica, tienes que agregar un elemento <button> al archivo index.html. Este botón estará escuchando el ‘evento’ de clic:
|
1 2 3 4 5 6 |
... <body> <button id="trigger">Click me</button> <p id="demo"></p> |
Cualquier momento en que el usuario interactúa con el navegador se considera un evento. La interacción puede ser a través del puntero del mouse o del teclado. En el ejemplo anterior, un clic en un botón es nuestro evento. Por eso se llama evento de clic.
A continuación, tenemos que llamar a una función que tenga el código “Hello, World”. Para hacer eso, utilizaremos el método click():
|
1 2 3 |
$(document).ready(function() { $("#trigger").click(); }); |
Como puedes ver, el ID de nuestro elemento <button> se llama trigger. Podemos seleccionarlo usando $(“#trigger"). El propósito de agregar el método click() es hacer que el programa escuche el evento de clic. A continuación, colocaremos la función con el código de texto dentro del método:
|
1 2 3 |
function() { $("#demo").html("Hello, World!"); } |
Nuestro código se verá algo así al final:
|
1 2 3 4 5 |
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); }); }); |
Ahora puedes guardar el archivo script.js. Actualiza el archivo index.html en el navegador para aplicar los cambios. Después de hacer clic en el botón, aparecerá el resultado de la prueba “Hello, World!”.
También existen otros tipos de eventos de jQuery además de click. Puedes ver una lista completa de estos métodos de eventos en este documento oficial. Estos son algunos de los más utilizados con los que te puedes encontrar en ocasiones:
-
click()
El evento click ejecuta el código con un solo clic del ratón.
-
hover()
El evento hover ejecuta el código cuando el puntero del ratón se desplaza sobre un elemento. También puedes especificar si el código se activa al entrar o salir el ratón con mouseenter() y mouseleave() respectivamente.
-
submit()
Enviar un formulario activa el código.
-
scroll()
Desplazarse hacia abajo en la pantalla será el evento que ejecute el código.
-
keydown()
Presionar la tecla hacia abajo en el teclado ejecutará el código.
¿Qué son los efectos?
Efectos de jQuery funcionan junto con los eventos de jQuery. El propósito principal de los efectos, como se entiende por el término, es añadir animaciones a la página. Te permite manipular los elementos para aplicar varios tipos de efectos. Estos efectos pueden activarse mediante ciertos eventos.
Para entenderlo mejor, consideremos un ejemplo. Supongamos que queremos abrir y cerrar una superposición emergente (popup overlay). Una forma de hacerlo sería usar dos IDs diferentes. Uno abriría la superposición y el otro la cerraría. La otra forma de hacerlo es usar una clase para esto. El beneficio de usar una clase es que la misma función puede abrir y cerrar la superposición.
Abre tu archivo index.html. Luego, elimina las etiquetas <button> y <p> del cuerpo (body). Ahora añade las siguientes líneas de código al HTML:
|
1 2 3 4 5 6 7 8 9 10 |
... <body> <button class="trigger">Abrir</button> <section class="overlay"> <button class="trigger">Cerrar</button> </section> ... |
A continuación, veamos nuestro archivo style.css. Aquí, nuestro objetivo es usar el mínimo CSS para ocultar la superposición. Para ello, utilizaremos display: none y la centraremos de esta manera:
|
1 2 3 4 5 6 7 8 9 10 |
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray; } |
Next, we will be using the toggle(). Este método nos permitirá alternar la propiedad display entre none y block. Por lo tanto, la superposición se ocultará y se mostrará cada vez que hagamos clic. Añade este código al archivo script.js:
|
1 2 3 4 5 |
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); }); }); |
Finalmente, actualiza index.html para aplicar los cambios. Ahora podrás alternar la visibilidad del modal. Todo lo que tienes que hacer es hacer clic en los botones. Hay otros efectos de jQuery que puedes usar en combinación con esto. Por ejemplo, puedes cambiar el simple toggle() por slideToggle() o fadeToggle().
A continuación se presentan algunos de los métodos de efectos más utilizados en jQuery:
-
toggle()
Este método te permite cambiar la visibilidad del elemento. Los efectos unidireccionales asociados con él son show() y hide().
-
fadeToggle()
Este método te permitirá cambiar la visibilidad y la opacidad del elemento mediante una animación. Los efectos unidireccionales en este caso son fadeIn() y fadeOut().
-
slideToggle()
Este método te permitirá utilizar efectos de deslizamiento para alternar la visibilidad del elemento. Los efectos unidireccionales en este caso son slideUp() y slideDown().
-
animate()
Este método de efecto te permite realizar efectos de animación personalizados. Utiliza la propiedad CSS del elemento dado.
Conclusión
Esperamos que este tutorial haya sido útil para ofrecer una introducción detallada a jQuery. Es una herramienta increíblemente útil que ayuda mucho a facilitar el desarrollo web y la escritura de código. Esto es especialmente cierto si eres relativamente nuevo en el mundo de la programación.
Exploramos los diversos elementos que componen los fundamentos de jQuery. También aprendimos cómo puedes seleccionar y modificar estos elementos, y cómo dar un buen uso a los eventos y efectos. El dominio de herramientas como jQuery puede ayudarte a crear sitios web llenos de funciones interactivas que ofrezcan una experiencia de usuario atractiva.
Echa un vistazo a algunos recursos de nuestro blog que te ayudarán cuando trabajes con JavaScript:
- Una guía para agregar JavaScript a HTML
- Trabajar con JavaScript: cómo funcionan las clases
- Trabajar con JavaScript: cómo funcionan los prototipos y las herencias
¡Feliz programación!
Comentarios
Aún no hay comentarios. Sea el primero.