Fundamentos de jQuery

Fundamentos de jQuery 1
¿Qué aprenderás? 2
Introducción 2
¿Qué es jQuery? 3
Ejemplo de código en JavaScript 3
Ejemplo de código en jQuery 3
Ejemplo de código en JavaScript 4
Ejemplo de código en jQuery 4
Ejercicio guiado: Transformando JavaScript a jQuery 4
Ejercicio propuesto (1) 5
¿Por qué utilizamos jQuery? 6
Integrando jQuery en un Proyecto 6
Primera opción: Utilizar un recurso en un servidor remoto (CDN) 6
Ejercicio guiado: Implementando jQuery mediante CDN 8
Segunda opción: Descargar la librería y añadirla manualmente al proyecto 10

¡Comencemos!

_ 1

www.desafiolatam.com
¿Qué aprenderás?

● Distinguir las características de la librería jQuery para comprender sus ventajas en el

desarrollo web.

● Desarrollar algoritmos transformando código de JavaScript a jQuery para utilizar

correctamente la sintaxis de la librería.

Introducción

Actualmente, el mercado del desarrollo web se ha disparado de forma exponencial, lo que

ha derivado en la creación de herramientas muy potentes basadas en otras ya existentes.
JavaScript, por su parte, al estar completamente integrado en los navegadores web, también
se ha visto afectado por estos cambios y ha impulsado a que las empresas detrás de estas
herramientas busquen como estandarizar el lenguaje.

jQuery nace para facilitar el desarrollo web, reduciendo la cantidad de líneas de código al
programador, permitiendo generar un orden y una estructura al momento de escribir
JavaScript. jQuery como tal, en estos momentos se sigue utilizando de forma
complementaria a otros frameworks de desarrollo web, pero marca las bases para la
evolución web tal y como la conocemos ahora, con una infinidad de opciones, librerías y
formas de aplicación de éstas.

Aprender a utilizar estos recursos es clave para el mundo profesional, puesto que ofrece
herramientas adicionales que facilitan y agilizan los desarrollos, por lo que su manejo es
altamente valorado en las organizaciones.

_ 2

www.desafiolatam.com
¿Qué es jQuery?

jQuery es una librería de JavaScript creada en el año 2006, con una gran capacidad y
adaptación a los cambios, ya que permite crear páginas web dinámicas de forma muy
rápida y con la menor cantidad de código posible en JavaScript. El lema principal de jQuery
es “escribir menos, hacer más”.

Ejemplo de código en JavaScript

document.getElementById('test');

Ejemplo de código en jQuery

$('#test');

Se puede apreciar en el ejemplo anterior que jQuery posee un carácter especial representado
por $, con el cual hace referencia a que se está utilizando un método o función de dicha
librería.

Veamos cómo podemos seleccionar el siguiente elemento HTML utilizando JavaScript y

jQuery:

<div id="identificador" class="mi-clase">

Soy un div
</div>

Con JavaScript el elemento div lo podríamos acceder de la siguiente manera como

revisamos en clases pasadas:

document.getElementsByClassName("mi-clase")[0];

Pero con jQuery podríamos acceder a los elementos utilizando diferentes selectores, por
ejemplo para acceder al elemento div sería:

$('.mi-clase')

En el siguiente ejemplo se observa la diferencia entre la creación de una animación con

jQuery versus trabajar con JavaScript como tal.

_ 3

www.desafiolatam.com
Ejemplo de código en JavaScript
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade() {
(s.opacity-=.1) < 0 ? s.display="none" : setTimeout(fade,40)
})();

Ejemplo de código en jQuery

$('#thing').fadeOut();

La diferencia está a la vista, el bloque de código con JavaScript es complejo de leer y de

entender qué tipo de animación se está generando. Sin embargo, si observamos el trozo de
código escrito con jQuery, se entiende que se genera una animación con un componente de
id="thing"

Gracias a la infinidad de funciones que entrega jQuery, es que la web moderna ha podido
desarrollar de forma mucho más eficiente controladores de eventos, manipulación de
objetos del dominio (de ahora en adelante, conocido como DOM), llamadas a API con AJAX
y una multitud de Plugins creados por la comunidad de forma abierta para la utilización en
múltiples proyectos. De esta forma, transformamos un lenguaje puro como JavaScript,
añadiendo una capa de funcionalidad que permite a los desarrolladores implementar
soluciones complejas de forma mucho más sencilla.

Ejercicio guiado: Transformando JavaScript a jQuery

El siguiente código, escrito con la sintaxis de JavaScript puro, obtiene un elemento con id
‘text’, una vez que el usuario realiza click. Se solicita transformar el código JavaScript con la
librería de jQuery, para evidenciar sus diferencias. El código es el siguiente:

let text = document.getElementById('texto');

text.addEventListener('click', function(){
document.write('click sobre el texto');
});

_ 4

www.desafiolatam.com
Para implementar jQuery en este código y transformar así la nomenclatura de JavaScript, se
debe:

● Paso 1: Llevar la instrucción let text = document.getElementById('texto'); a

jQuery, utilizando el método o símbolo especial “$” que permite abreviar el
document.getElementById, indicando en los paréntesis del método que estaremos
buscando, un selector denominado “texto” el cual es un “id”. Ese resultado lo
guardamos en la variable “text”.

let text = $('#texto');

● Paso 2: Como ya se encuentra el elemento guardado en una variable, se puede

utilizar directamente para asignarle un evento, en este caso, el evento “click” de
JavaScript. El cual, en jQuery viene asignado con una función que se ejecutará
cuando el evento se active y realizará todos los procesos que contenga dentro de
ella. Es decir, el evento “click” pasa a ser un método en jQuery exclusivo para ese tipo
de evento. Quedando el código de la siguiente manera:

let text = $('#texto');

text.click(function(){
document.write('click sobre el texto');
});

Ejercicio propuesto (1)

Transformar el siguiente código de JavaScript a jQuery.

let button = document.getElementById('button');

button.addEventListener('click', function(){
alert('click sobre el botón');
});

_ 5

www.desafiolatam.com
¿Por qué utilizamos jQuery?

jQuery posee una cantidad enorme de ventajas por las cuales los desarrolladores se sienten
atraídos a utilizar sus beneficios. Entre ellos se destacan algunos:

● Licencia MIT y Open Source: Esto quiere decir que su uso no posee ninguna
restricción.
● Soporte: Actualización constante y comunidad activa en todo el mundo.
● Compatibilidad con todos los navegadores web en el mercado.
● Manipulación del modelo de objeto de dominio de forma mucho más natural que
puramente con JavaScript.
● Manipulación dinámica de estilos CSS: Es compatible con CSS3.
● Integración con AJAX abriendo la librería a proyectos complejos con comunicación
con servidores.
● Creación de animaciones de forma intuitiva y sencilla.
● Compatibilidad con una enorme y extensa lista de Plugins creados a partir de jQuery.
● Librería ligera en comparación con su versatilidad.
● Capacidad de optimización de tiempo y orden de código en proyectos de mayor
complejidad.

Todas estas características hacen que jQuery sea uno de los favoritos del mercado, pero es
importante señalar que existen actualmente otros frameworks de desarrollo más potentes y
completos que jQuery como: React JS, Vue JS, Angular JS, entre otros. Hay que tener
presente que jQuery permite trabajar con proyectos de mediana envergadura sin la
necesidad de integrar elementos complejos en proyectos que no necesitan tantos recursos.
En este sentido, jQuery es un equilibrio entre una librería robusta, ligera y sencilla de
aprender.

Integrando jQuery en un Proyecto

Es importante señalar que dependiendo del proyecto en el cual se esté trabajando, se puede
integrar jQuery. En esta sección se explicarán varias formas de integrar la librería.

Primera opción: Utilizar un recurso en un servidor remoto (CDN)

La primera opción es importar la librería jQuery como un <script> en la cabeza del archivo
principal o main de un proyecto, referenciando el recurso de tipo text/JavaScript.

CDN (Content Delivery Network), no es otra cosa que un servicio que nos permite incluir las
librerías de código de jQuery desde los servidores de algunas importantes empresas. En

_ 6

www.desafiolatam.com
este caso, utilizaremos el enlace que nos proporciona Google, tal como se muestra en el
ejemplo a continuación:

<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jQuery/x.x.x/jQuery.min.js"></
script>
</head>
<body>
<div>old content</div>
<script></script>
</body>
</html>

El siguiente código debería ir dentro de las etiquetas <script></script>, pero a modo de

ejemplo las sacamos e incluimos a continuación:

//oculta los divs de la página

$('div').hide();
//actualiza el contenido de todos los divs
$('div').text('new content');
//añade una clase a todos los divs
$('div').addClass("updatedContent");
//muestra todos los divs
$('div').show();

Analicemos en profundidad el script que contiene las interacciones escritas en jQuery. Como
se puede observar, los métodos o funciones de jQuery comienzan siempre con un token de
identificación: $, el cual señala que es una función de jQuery. Es importante, marcar la
diferencia, puesto que JavaScript como tal, puede tener funcionalidades bajo el mismo
nombre que en jQuery, por ende, el no colocar el símbolo $ puede hacer entender al
navegador que estás utilizando una función pura de JavaScript obteniendo errores o
resultados no deseados.

Seguido del identificador, se observa una función que recibe parámetros. En el ejemplo, los
parámetros que recibe para sus 4 acciones son div. Se debe considerar que al entregar
como token de identificación la palabra o string div, jQuery interpretará que todas las
etiquetas HTML de tipo div se verán afectadas por el cambio.

Las funciones reciben una instrucción que es aplicable a todos los div, pero necesitan
adicionalmente recibir qué acción realizará en dicho componente. Es acá donde se

_ 7

www.desafiolatam.com
introduce la función expresada por .func(params). Como se observa en los ejemplos, para
todos los div se aplican funciones de hide, text, addClass y show.

La función hide esconde todos los elementos indicados en la instrucción anterior, es decir,
esconde todos los divs a la vista del usuario. El esconder un componente no quiere decir
que no exista, simplemente que no está a la vista del usuario, pero puede volver a reaparecer
con la función show. Por otra parte, text añade un texto a un componente en el interior de
sus etiquetas como un contenido. Por último, addClass añade una clase a un componente,
en este caso, añade la misma clase a todos los div.

Ejercicio guiado: Implementando jQuery mediante CDN

Implementar la librería jQuery mediante el uso de CDN con el siguiente código, que obtiene
el texto del elemento con id ‘texto’ cuando se recibe el evento click:

let text = $('#texto');

text.click(function(){
document.write('click sobre el texto');
});

● Paso 1: Crear una carpeta en tu lugar de trabajo favorito y dentro de ella crea dos
archivos, un index.html y un script.js.

● Paso 2: En el index.html, escribir la estructura básica de un documento HTML como

se muestra a continuación:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>Este es un documento HTML con JavaScript</h4>
<script src="script.js"></script>
</body>
</html>

_ 8

www.desafiolatam.com
 ● Paso 3: Al código anterior, es decir, en el archivo index.html, preparar el documento
para poder implementar jQuery. Por ende, lo primero es incorporar el enlace o CDN
de jQuery, que nos permita incluir esta librería en nuestro ejemplo. Puedes conseguir
los enlaces en cualquiera de las opciones que facilita la página de jQuery en la
sección de descarga. Para este ejemplo, utilizaremos el enlace que se encuentra con
la versión: 3.x. y será ubicado en la etiqueta <head> del documento HTML. Luego, se
añadirá un id a la etiqueta <h4> con el nombre “texto”, ya que es la variable text,
carga el valor del id en ella.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"><
/script>
<title>Document</title>
</head>
<body>
<h4 id="texto">Este es un documento HTML con JavaScript</h4>
<script src="script.js"></script>
</body>
</html>

● Paso 4: En el archivo script.js, agregar el código dispuesto al inicio del ejemplo para
poder ejecutarlo en el siguiente paso y ver el resultado. El código consiste en
seleccionar un elemento mediante el tipo de selector “id”, guardarlo en una variable y
cuando se haga un clic sobre ese elemento se activa un mensaje que se mostrará en
el documento:

let text = $('#texto');

text.click(function(){
document.write('click sobre el texto');
});

_ 9

www.desafiolatam.com
 ● Paso 5: Ejecutar el código anterior y hacer un clic sobre el título con la etiqueta <h4>,
el resultado en el navegador web será:

Imagen 1. Resultado al hacer clic sobre el texto

Fuente: Desafío Latam

Segunda opción: Descargar la librería y añadirla manualmente al

proyecto
La diferencia con la primera opción es que al momento de subir tu página web, este archivo
debe estar cargado, ya sea en el mismo servidor de la página web, o bien, en otro servidor
propio donde se manejen los archivos. Esta forma, es recomendada para personas que
sepan cómo configurar los entornos de trabajo. Para esta opción es necesario tener
conocimientos de servidores, idealmente conocer lenguajes que permiten renderizar vistas,
como Node.js.

Para esto, descargamos jQuery desde la página oficial y la incluimos en nuestro proyecto,
dentro de assets/js. El código básico de HTML es el siguiente:

<!DOCTYPE html>
<html>
<head>
<script type="text/JavaScript"
src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>old content</div>
<script></script>
</body>
</html>

Para efectos de esta unidad, cargaremos jQuery de forma remota (CDM), aunque le añade
un poco más de tiempo de carga a la página que estamos desarrollando al solicitar un
recurso externo, es mucho más fácil de implementar cuando se está comenzando un
proyecto.

Para seguir profundizando contenidos, nos enfocaremos ahora en entender que es el

modelo de objetos de dominio (DOM) y como manipularlo con jQuery.

_ 10

www.desafiolatam.com