El principal objetivo de jQuery es facilitar el uso de JavaScript (JS) en tu sitio web. Este es el lenguaje preferido de los desarrolladores cuando se trata de diseñar aplicaciones web. Según SlashData de 2020, este es el código de programación más popular entre los desarrolladores.

El lenguaje fue creado en los años 90 y ha alcanzado mucho espacio entre los profesionales del área de la programación. Fue en este escenario que surgió jQuery, la biblioteca de JavaScript de código abierto, desarrollada por John Resig.

Fue presentado en 2006 en la reunión de BarCamp NYC. El creador estaba buscando una manera de tomar bloques de tareas comunes y repetitivas en JS para reducirlos a “recetas” cortas, inteligentes y comprensibles, llamadas métodos.

Aproximadamente 15 años después de la creación de jQuery, el lema sigue siendo el propósito inicial: “escribe menos, haz más”. Prueba de ello es que grandes marcas, como Twitter, Kickstarter y Uber, utilizan jQuery en sus productos.

Dada la importancia de este método para el desarrollo web, el objetivo de este artículo es presentar jQuery, así como las ventajas, desventajas y principales requisitos para comenzar a trabajar con él.

¿Qué es jQuery?

Para los que se preguntan qué es jQuery: se trata de una biblioteca de JavaScript que se puede agregar a proyectos de codificación. Básicamente, esta herramienta permite a los desarrolladores web conectar recursos JavaScript rutinarios a una página web, y así ellos puedan dedicar más tiempo a centrarse en funciones más complejas que son exclusivas del sitio web.

¿Cuáles son las ventajas de aprender jQuery?

Además de hacer la programación más rápida y eficiente, la biblioteca jQuery simplifica una variedad de operaciones de programación. jQuery ui es de código abierto, lo que significa que cualquier persona puede contribuir o modificarlo, conquistando una gran comunidad de usuarios.

Si estás decidiendo si vale la pena comenzar a estudiar jQuery, ten en cuenta que habrá varias personas que lo apoyarán si tienes alguna pregunta. Finalmente, jQuery tiene una extensa documentación de métodos que funciona en cualquier otra biblioteca JavaScript que puedas usar, y miles de complementos que le permiten ampliar la funcionalidad de jQuery.

¿Cuáles son las desventajas de usar jQuery?

La desventaja más criticada de jQuery es que tiene una gran biblioteca para importar. JQuery es un solo archivo JS que contiene todos los componentes DOM, eventos, efectos y AJAX. Con el tiempo y el desarrollo, el archivo ganó una cantidad significativa de kilobytes.

El usuario interesado en utilizar la biblioteca debe descargarla en su totalidad, lo que requiere más tiempo para abrirse. Otra desventaja de jQuery es que “oculta” las partes complejas de JavaScript, lo que dificulta mucho el aprendizaje de JS.

¿Cuáles son sus principales aplicaciones?

Actualmente, jQuery es la biblioteca JavaScript más popular que funciona en todos los navegadores. El manejo de HTML DOM se ha convertido en una práctica común para desarrollar y modificar páginas web en la actualidad. Por lo tanto, incluso si JavaScript está deshabilitado, se procesa el contenido del navegador. Algunos de los principales usos de jQuery son:

Plugins

Un plugin es un fragmento de código abierto en un archivo JavaScript estándar. Estos archivos proporcionan métodos jQuery útiles, que se pueden utilizar junto a los mecanismos de la biblioteca jQuery. Hay varios complementos en la web que hacen que la creación de efectos especiales sea simple y rápida para los desarrolladores web. Vea algunas muy utilizadas a continuación:

1. Effect: plugin jQuery que le permite asignar una serie de efectos de animación a un elemento en una página web.
2. Taggings: ¿has agregado algún “tag” de categorización a una publicación de blog? Esta característica fue posible con el código JavaScript. Este script le permite agregar un sistema de tagging al sitio, lo que le ayuda a indexar y clasificar los mecanismos de búsqueda, el SEO.
3. Autocomplete: la barra de búsqueda en sitios famosos, como Google, generalmente tiene la función de autocompletar que comienza a ofrecer sugerencias para terminar lo que estás escribiendo. Puedes agregar una de estas funciones de JavaScript a tu propio proyecto con este complemento.
4. Scrollmagic: utiliza el código jQuery para animar los elementos de la página web en función del posicionamiento de la barra de desplazamiento de un usuario (la barra en el lado derecho de la ventana del navegador, que le permite mover la página hacia arriba y hacia abajo).
5. Fine uploader: permite a los desarrolladores web omitir los pasos para crear un nuevo uploader y usar las herramientas jQuery para insertar un menú prediseñado directamente en la página web.
6. Blueimp gallery: galería de imágenes receptiva que se puede controlar tanto con un teclado y mouse de mesa o deslizando un dedo en un teléfono o tablet. Este plugin se puede configurar para mostrar imágenes o videos en formato carrusel o modo lightbox.
7. Slider: controles “deslizantes”, que se utilizan para ajustar el volumen y otros niveles en una página web. Este plugin utiliza la biblioteca jQuery para asignar valores numéricos a una barra horizontal. El control se puede mover hacia arriba y hacia abajo en la barra, usando un mouse o las teclas de flecha en el teclado.

Manipulación DOM

JQuery facilitó la selección, negociación y modificación de elementos DOM, utilizando un mecanismo de selección de código abierto para varios navegadores, llamado Sizzle.

Animaciones y soporte AJAX

JQuery viene con muchos efectos de animación incorporados, lo que ayuda mucho en el desarrollo de un sitio web receptivo y rico en funciones que utiliza la tecnología AJAX.

¿Cuáles son los principales requisitos para usar jQuery?

Antes de descubrir cómo usar jQuery, es importante que tengas un conocimiento muy sólido de HTML y CSS. También debes saber configurar un sitio web simple y qué son los selectores CSS, como ids y clases. Además, el conocimiento en JS es esencial, especialmente las variables y los tipos de datos.

jQuery es una herramienta poderosa que hace que su capacidad en JavaScript sea mucho más efectiva que si codifica cada recurso desde cero. También se refiere a la naturaleza de la codificación, todos los plugins son creados individualmente por desarrolladores web con el objetivo de encontrar formas de maximizar las ganancias de JavaScript y jQuery, compartiendo estos resultados con la comunidad de programación.

Si te preguntas dónde comenzar los estudios, jQuery Learning Center es una buena opción. El repositorio de tutoriales de implementación proporciona una serie de consejos para ayudar a los desarrolladores a familiarizarse con la biblioteca. A medida que mejores tus habilidades, puedes seguir utilizando estos recursos, lo que te brinda la oportunidad de retribuir a la comunidad.

¿Cómo usar jQuery?

jQuery se puede utilizar de dos formas principalmente, una de ellas basada en cómo insertar jQuery en HTML:

• Instalación local: descarga la biblioteca jQuery en tu máquina local e inclúyela en tu código HTML.
• Versión basada en CDN: puede incluir la biblioteca jQuery en tu código HTML directamente desde una red de distribución de contenido.

Content Delivery Network (CDN) es un sistema compuesto por varios servidores que entrega contenido desde Internet según la ubicación geográfica del usuario. Cuando vinculas un archivo jQuery, alojado a través de CDN, llega potencialmente más rápido cuando lo visitas que si lo alojas en tu propio servidor.

Para practicar, te proponemos un ejercicio para crear un pequeño proyecto web. Incluye el directorio style.cssno css/directorio, scripts.jsno js/directorio y, en un index.html principal, en la raíz del proyecto.

project/
├── css/
| └── style.css
├── js/
| └── scripts.js
└── index.html

Para empezar, crea un esqueleto HTML y guárdalo como index.html.

index.html
<!doctype html>

Coloca un link para jQuery CDN justo antes de la etiqueta de cierre </body>, seguido de tu propio archivo JavaScript personalizado scripts.js.

index.html

<!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/scripts.js”></script>

</body>

</html>

Tu archivo JavaScript (scripts.js) debe incluirse debajo de la biblioteca jQuery en el documento, de lo contrario no funcionará. Nota: si descargó una copia local de jQuery, guárdala en su carpeta js/ y crea un link para ella en js/jquery.min.js.

En este punto, la biblioteca jQuery se está cargando en el sitio web y tendrá acceso total a la API jQuery. A continuación se muestra una breve descripción general de algunos de los selectores más utilizados:

$(“*”)- Wildcard: selecciona todos los elementos de la página.
$(this)- Actual: selecciona el elemento actual que está siendo operado dentro de una función.
$(“p”)- Tag: selecciona todas las instancias de

tag.
$(“.example”)- Classe: selecciona cada elemento que posee la clase aplicada.
$(“#example”)- Id: selecciona una única instancia del id único.
$(“[type=’text’]”)- Atributo: selecciona cualquier elemento con texto aplicado al typeatributo.
$(“p:first-of-type”)- Pseudo elemento: selecciona el primer <p>.

Como has notado, jQuery está construido sobre JavaScript, proporcionando toda la funcionalidad. Podemos decir que jQuery es una “versión mejorada de JavaScript”. Los diseñadores web suelen utilizarlo para hacer que sus proyectos sean muy agradables y elegantes.

Minimiza las tareas de los desarrolladores web en gran medida al proporcionar plugins instantáneos. Aún así, la principal ventaja de jQuery es su comunidad, en la que es posible encontrar otros desarrolladores para intercambiar experiencias y responder preguntas.

¿Qué esperas para incorporar jQuery a tus habilidades? ¡Cuéntanos qué te parece este contenido!