¿Qué es jQuery y cómo usarlo?

Imagínate que estás desarrollando un sitio web, necesitas agregar un formulario de comentarios y un botón de compra. Primero, escribes unas 200 líneas de código en JavaScript. Luego debes verificar los campos y asegurarte que los datos se envíen, los recordatorios lleguen, etc. Al final, te toma un par de horas programar y probarlo todo. Si no quieres pasar tanto tiempo haciendo el trabajo rutinario y necesitas optimizar el proceso, te presentamos jQuery.

¿Qué es jQuery?

jQuery es una biblioteca rápida y sencilla de JavaScript, que abarca actividades típicas de programación escritas en un solo comando. Parece un juego de piezas listas con las que puedes ensamblar una aplicación o un sitio web.

Veamos el ejemplo del código escrito en jQuery:

#JavaScript
document.getElementById("demo").innerHTML = "Aprende con EBAC";
#jQuery
$("#demo").html("Aprende con EBAC");

Entre sus funciones se encuentran las siguientes:

• Crea un vínculo rápido entre JavaScript y elementos HTML.
• Trabaja con selectores CSS, hojas de estilo en cascada, que permiten crear páginas web atractivas.
• Implementa funciones de AJAX, el servicio de intercambio de datos de la página con el servidor que permite crear animaciones y efectos visuales.

Ventajas y desventajas

Usar jQuery vale la pena por varias razones:

• Código comprensible. jQuery cuenta con una sintaxis clara. El código en jQuery es corto y fácil de entender. Es de mucha importancia si trabajas con el código de otros desarrolladores.
• Cross-browser. El código escrito en jQuery funciona en cualquier navegador.
• Selección de plugins. Los formularios de suscripción, anuncios emergentes y la captura de números de teléfono están disponibles y listos para usar con un par de comandos. Entre los plugins más populares puedes encontrar:
  • Effect, crea efectos de animación en los elementos de la página web.
  • Taggings, se usa en SEO para clasificar artículos de un blog y facilitar la búsqueda.
  • Autocomplete, permite ofrecer sugerencias al usuario mientras está llenando información.
  • Blueimp Gallery, muestra imágenes o videos en formato carrusel o lightbox. Permite manipularlas tanto con un mouse o teclado en una computadora como con un dedo en un teléfono o una tablet.
  • GridScrolling, te permite navegar en el sitio mediante teclas.
  • Animsition, ayuda a generar el cambio animado de páginas.
  • Slider, ajusta la escala en una página web.

Si estás a punto de usar jQuery, toma en cuenta los siguientes factores que pueden afectar tu resultado:

• Control limitado. Si quieres tener el máximo control de tu sitio web, sería mejor que uses JavaScript sin jQuery. En este caso, tendrás confianza en cómo se comportará tu página y no dependerás del código ajeno.
• Redundancia de datos. Conectar una biblioteca completa por un solo efecto no es la mejor idea. A veces es más fácil dedicar cinco minutos adicionales y hacer lo mismo en JavaScript que arrastrar kilobytes adicionales de código.
• Bajo rendimiento y carga lenta. Las páginas escritas con jQuery pueden tardar más en cargarse, y el código puede ser más lento que cuando se utilizan las funciones del lenguaje JavaScript.

¿Cómo se usa jQuery?

Entre las habilidades principales que necesitarás para usar jQuery están:

• Conocimientos básicos de HTML y CSS para poder configurar un sitio web y entender cómo funcionan los selectores CSS.
• Habilidades básicas de programación. Puedes trabajar con jQuery sin conocer mucho JavaScript, pero debes entender conceptos como variables y tipos de datos.

Para empezar a usar JQuery, puedes descargar la librería en dos versiones: la versión completa y la comprimida. La versión completa ocupa unos 60 KB, soporta AJAX y algunos efectos adicionales. Estos efectos no son necesarios para todos los sitios, y a menudo es suficiente instalar la versión comprimida, que ocupa solo 20 KB. Es la opción ideal para el servidor de producción, ya que minimiza el tiempo de carga de una aplicación.

Al descargar el archivo de instalación, tienes que editar tu página de HTML y poner el siguiente código:

<script type="text/javascript" src="/jQuery-2.1.4.js"></script>

Debes elegir la función ready, ya que se ejecuta automáticamente después de que los elementos del DOM (Document Object Model, o la estructura del documento HTML) estén cargados. Se verá de la siguiente manera:

$(document).ready(function() {
// aquí va el código
});

Puedes crear la función anterior directamente en la página utilizando los tags <script> o definirla en un archivo js aparte. Ahora puedes empezar a usar las funcionalidades de jQuery.

Para comprobar si tu página y jQuery funcionan correctamente:

1. Crea un botón en la sección Body:

<button id=”MiBoton” type="button">Dale Clic</button>

2. Define la acción a realizar en la función ready:

$(document).ready(function() {
$('#MiBoton').on('click', function (e) {
alert("Funciona!");
});

Funciones de jQuery

La biblioteca jQuery cuenta con una extensa selección de funciones, con las que puedes crear animaciones en tu sitio web. Entre las más usadas se encuentran:

Función hide()

Sirve para ocultar un elemento HTML. Puedes elegir una velocidad predeterminada para ocultar los elementos o establecer la tuya en milisegundos:

$('#theDiv').hide('slow');
$('#theDiv').hide('fast');
$('#theDiv').hide(2000);

Función show()

Te permite mostrar un elemento oculto. Al igual que en el caso de hide(), puedes elegir la velocidad que le indica a JQuery qué tan rápido se debe mostrar el elemento:

$('#theImg').show('slow');
$('#theImg').show('fast');
$('#theImg').show(2000);

Función toggle()

Cambia la visibilidad de un elemento HTML. En otras palabras, el elemento oculto se mostrará, y viceversa. También se puede establecer la velocidad:

$('#theDiv').toggle('slow');
$('#theDiv').toggle('fast');
$('#theDiv').toggle(2000);

Función fadeIn()

Con la función fadeIn(), un elemento HTML oculto aparece gradualmente. Al igual que con las funciones show() y hide(), puedes determinar la velocidad como parámetro de la función.

$('#theDiv').fadeIn('slow');
$('#theDiv').fadeIn('fast');
$('#theDiv').fadeIn(2000);

Función fadeOut()

La función fadeOut() hace desvanecer un elemento HTML visible. También se establece la velocidad como parámetro de la función:

$('#theDiv').fadeOut('slow');
$('#theDiv').fadeOut('fast');
$('#theDiv').fadeOut(2000);

Función fadeToggle()

Funciona de la misma manera que la toggle() con la única diferencia de que agrega el efecto gradual.

$('#theDiv').fadeToggle('slow');
$('#theDiv').fadeToggle('fast');
$('#theDiv').fadeToggle(2000);

Función animate()

Puedes animar elementos CSS en tu página con la función animate(). Aunque no todos los atributos pueden ser animados, la función solo se aplica a los atributos CSS numéricos. Puedes animar parámetros como la anchura, altura, tamaño, opacidad y otros.

El valor que un atributo CSS tenía antes cambia gradualmente a lo que especifica la función animate():

$('#theDiv').animate({"height" : 300}, 'slow');
$('#theDiv').animate({"width"  : 200}, 'slow');

Al colocar más valores en el parámetro del objeto, puedes animar más de una propiedad a la vez. Veamos un ejemplo que modifica el ancho y el alto al mismo tiempo:

$('#theDiv').animate({"height" : 250, width:250 }, 'slow');

Camel Case

Nota que algunas de las propiedades CSS están escritas en mayúsculas y minúsculas. Es porque las propiedades del objeto de JavaScript no pueden incluir guiones. Para encerrarlas entre guiones, debes usar una combinación de letras mayúsculas y minúsculas:

$('#theDiv').css({ borderWidth : 1 });

También puedes indicar el nombre de la propiedad entre comillas:

$('#theDiv').css({ "border-width" : 1 });

Función stop()

Puedes parar una animación usando la función stop():

$('#elDiv').stop();

Esta función te va a servir si estás a punto de iniciar una nueva animación y no quieres que las dos animaciones se ejecuten al mismo tiempo.

Conclusión

jQuery se usa para crear animaciones y efectos visuales en páginas y aplicaciones web. Resulta muy útil en Front End, para desarrollar la parte visible, y en Full Stack, para crear sitios web desde cero. También es popular entre los desarrolladores con poca experiencia en programación. Pueden usar jQuery para agregar una funcionalidad avanzada a sus proyectos.

En nuestro curso online de Diseñador Full Stack aprenderás a dominar las herramientas de jQuery, JavaScript y React con la finalidad de simplificar la navegación, hacer tus proyectos funcionales e interactivos. Trabajarás con HTML, CSS y frameworks para crear interfaces más inteligentes. Durante el curso, pondrás lo aprendido en práctica y desarrollarás un proyecto profesional que enriquecerá tu portafolio.