UNIDAD Nº2

jQuery

Asignatura
Desarrollo de Aplicaciones I
Universidad Provincial del Sudoeste

Autor
Lic. Mauricio Andrade
Copyright © 2020 U.P.S.O.
Universidad Provincial del Sudoeste de la Provincia de Buenos Aires

Para citar este documento, en forma completa:

Universidad Provincial del Sudoeste (2020). Materiales didácticos de

la asignatura Desarrollo de Aplicaciones I [Apuntes]. Bahía Blanca,
Argentina: Andrade, M.

Para citar este documento, en forma parcial:

Universidad Provincial del Sudoeste (2020). Unidad N° 2. jQuery. En

Desarrollo de Aplicaciones I [Apuntes]. Bahía Blanca, Argentina:
Andrade, M.

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 1 de 46
 ICONOGRAFÍA DE LOS DOCUMENTOS TEÓRICOS

Importante. Se utiliza para destacar fragmentos,

oraciones o frases.

Ejemplo. Se emplea para ejemplificar y/o contextualizar

los contenidos.

Concepto. Se utiliza para definir algún concepto

específico.

Web. Es una herramienta que se usa para ilustrar o

ampliar el contenido con recursos web (páginas, videos,
etc.).

Recordatorio. Se emplea para hacer mención a

contenidos ya trabajados en documentos anteriores
o que se trabajarán en documentos posteriores.

Actividad. Se emplea para resaltar las actividades

propuestas durante la lectura de los contenidos. Estas
actividades pueden ser de diferentes tipos: ejercicios,
preguntas disparadoras, etc.

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 2 de 46
 DOCUMENTO TEÓRICO

Unidad 2. jQuery
Asignatura: Desarrollo de Aplicaciones I
Autor: Lic. Mauricio Andrade

ÍNDICE DE CONTENIDOS

1. INTRODUCCIÓN ................................................................................................... 5

2. ¿QUÉ ES JQUERY? ............................................................................................. 6

2.1. ¿Por qué jQuery? ......................................................................................................... 6

3. INCLUIR JQUERY ................................................................................................. 7

3.1. Versiones jQuery .......................................................................................................... 9

4. LA FUNCIÓN $() ................................................................................................. 10

5. ESTILOS CSS CON JQUERY ............................................................................. 11

5.1. El método css()........................................................................................................... 14

5.2. Particularidades .......................................................................................................... 15

6. ABM DEL DOM ................................................................................................... 18

7. PROPIEDADES Y ATRIBUTOS .......................................................................... 23

8. DATOS ................................................................................................................ 27

9. RECORRIENDO LA SELECCIÓN ....................................................................... 28

10. EVENTOS............................................................................................................ 30

10.1. Objeto Event ............................................................................................................... 32

10.2. Secuencia de Eventos ............................................................................................... 32

10.3. Misma acción distintos eventos ................................................................................ 33

11. ANIMACIONES ................................................................................................... 36

12. PLUGINS JQUERY ............................................................................................. 38

13. ORDEN DE CARGA DE SCRIPTS ...................................................................... 38

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 3 de 46
14. JQUERY CON CDN............................................................................................. 42

15. ACTIVIDADES DE REPASO ............................................................................... 44

16. WEBGRAFÍA ....................................................................................................... 45

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 4 de 46
 Unidad Nº2. jQuery

1. INTRODUCCIÓN

En la primera unidad se vieron varias APIs nativas de HTML5 y se finalizó notando la

necesidad de incluir código JavaScript para implementar las funcionalidades que se
requerían en el proyecto cuando el navegador no las soportaba. También se vio un
pequeño ejemplo, donde el script cambia dependiendo si se utiliza la API nativa o una
de terceros.

En esta segunda unidad se presenta la librería jQuery, la cual está implementada en

JavaScript, y que brinda funcionalidades para manipular el DOM, realizar animaciones,
modificar estilos, manejar eventos y ofrecer técnicas AJAX, todo sin preocuparse del
cliente (navegador).

En primera instancia se comenzará viendo cómo trabajar con jQuery, su notación y las
funcionalidades que provee. Si bien, para obtener el mejor provecho de esta librería se
requiere un buen manejo de JavaScript, se irá adquiriendo experiencia a medida que
se avance.

Muchas de las funcionalidades que se verán en esta unidad ya fueron

presentadas con HTML5 y JavaScript, la idea de volverlas a ver, es simplemente
mostrar cómo utilizarlas desde jQuery y su rápida codificación, como ser el
manejo de eventos y selección de elementos del DOM.

Siempre se deberá tener presente si lo que se desea realizar con jQuery es posible
realizarlo con JavaScript codificando prácticamente la misma cantidad de código, pues
cada librería que se incluya al sitio hará que este tarde más en cargarse.

Por último, se terminarán viendo varios plugins o librerías que se apoyan en jQuery
para brindar nuevas funcionalidades, facilitando el desarrollo de proyectos más
complejos, evitando pensar cómo implementar algo que ya está hecho, solo habrá que
saber cómo usarlo.

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 5 de 46
2. ¿QUÉ ES JQUERY?

Se puede pensar en jQuery como un framework JavaScript, el cual permite

desarrollar aplicaciones avanzadas al aportar una serie de funcionalidades para
realizar tareas habituales.

Esas tareas habituales, ya testeadas, permiten al desarrollador desentenderse de

funciones básicas y enfocarse en la lógica del programa. Además, si se quiere que la
aplicación triunfe, es necesario que se codifiquen scripts compatibles para todos los
navegadores, tanto para desktops como para móviles. Y aquí, es donde más puede
ayudar jQuery, puesto que implementa una serie de clases (de programación
orientada a objetos) que permiten programar sin preocuparse del navegador, ya que
funcionan igual en todas las plataformas más habituales.

El archivo del framework ocupa unos 90 KB, lo que es bastante razonable y no

retrasará mucho la carga de la página. Además, el servidor lo enviará al cliente la
primera vez que se visite una página del sitio. Para las siguientes páginas, el cliente ya
tendrá el archivo del framework, por lo que no necesitará transferirlo, pues lo tomará
de la caché. Así, la carga de la página solo se verá afectada por el peso de jQuery una
vez por usuario.

Las ventajas a la hora de desarrollo de las aplicaciones, así como las puertas que abre
jQuery compensan extraordinariamente el peso del paquete.

Además, todas estas ventajas son gratis, ya que jQuery tiene licencia para uso en
cualquier tipo de plataforma, personal o comercial. Para ello, simplemente se debe
incluir en las páginas un script JavaScript que contenga el código de jQuery, que se
puede descargar del propio sitio del producto y comenzar a utilizar el framework.

La página oficial de jQuery es https://jquery.com

2.1. ¿Por qué jQuery?

jQuery no es el único framework para facilitar la programación de JavaScript, pero sí el

más ampliamente usado. jQuery tiene una sintaxis particular y está fuertemente
relacionado al DOM, donde rápidamente pueden verse con pocos códigos los
beneficios del lado del cliente.

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 6 de 46
jQuery brinda funcionalidades que facilitan la tarea del desarrollador y permite
implementar códigos concisos (scripts de pequeño tamaño). Sin embargo, su sintaxis
puede hacer dudar a unos cuantos sobre la lógica del script, hay que leer la
documentación del método utilizado o realizar un par de pruebas para entender el
comportamiento.

jQuery agrega un nivel de abstracción que hace que el programador deba entender
cómo funciona más jQuery que el lenguaje JavaScript en sí.

Pero, por otro lado, resulta tener una curva de aprendizaje bastante rápida, ya que no
se mete con toda la potencia de JavaScript. Y, en este punto de la carrera, lo que se
busca, es poder implementar rápidamente una aplicación Web, impidiendo los tiempos
de cursado, conocer a fondo el lenguaje JavaScript.

Una alternativa muy potente y más clara de programar (sintaxis más legible), es el
framework MooTools, pero al requerir un mayor conocimiento de JavaScript
(programadores intermedios y avanzados) y tener una curva de aprendizaje más larga,
queda fuera de alcance por el momento.

El sitio oficial de MooTools es: https://mootools.net, para quién guste

comparar y decidir con cuál programar.

jQuery, por ser el más ampliamente usado, provee más funcionalidades de terceros,
facilitando aún más las tareas de los programadores y una comunidad más grande
dispuesta a colaborar con tutoriales, ejemplos y foros. Solo basta abrir varios sitios al
azar y ver dentro del <head> qué framework están utilizando.

De todas maneras, jQuery se debe tomar como un caso de estudio y luego el

estudiante buscará qué framework le resulta mejor para el desarrollo a implementar,
hay alternativas muy buenas que deben considerarse.

3. INCLUIR JQUERY

Antes de comenzar a escribir los primeros scripts con jQuery, es necesario hacerlo
disponible en la página. Para esto, se debe ir al sitio oficial y descargar el framework.

El sitio ofrece básicamente dos variantes, una de producción con el código minificado
(jquery-3.5.1.min.js) y otra de desarrollo (jquery-3.5.1.js) en un formato más legible

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 7 de 46
pero que ocupa más espacio. La idea es utilizar la versión de desarrollo durante la
implementación del proyecto, lo cual permite acceder a la librería jQuery y observar el
código con fines depurativos o de análisis, y la de producción al momento de realizar
el deploy.

Además, se incluye una alternativa que jQuery denomina slim, que contiene solo las
funcionalidades básicas, dejando fuera los módulos de AJAX y Efectos; también en
sus versiones de producción (jquery-3.5.1.slim.min.js) y desarrollo (jquery-
3.5.1.slim.js).

Observando el nombre se puede saber exactamente qué tipo de copia de jQuery se

está utilizando, además, en cada una se incluye la versión; la 3.5.1 es la última hasta
Julio del 2020.

Luego solo resta incluir el framework descargado en la sección del encabezado:

Hay que tener presente que los scripts se van cargando a medida que se interpreta el
documento Web, por lo tanto, debe estar antes que algún otro script lo utilice.

En la sección 13 se verán otras opciones de orden de carga de scripts.

Otra forma de incluir jQuery sin la necesidad de descargarlo, es hacer referencia al

lugar donde se encuentra alojada la librería:

En el ejemplo se incluye la copia de producción con funcionalidades reducidas.

Para referenciar la copia adecuada hay que visitar el sitio

https://code.jquery.com y luego copiar el enlace.

En los ejemplos se proporcionó el atributo type, en las especificaciones

de HTML5 ya no es necesario aclarar que lo que se incluye es JavaScript, esta
etiqueta puede omitirse.

Esta referencia no es un enlace como cualquier otro, aunque lo parezca, sino que se

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 8 de 46
trata de un CDN (Content Delivery Network), el cual ofrece beneficios de performance
alojando jQuery en servidores ubicados en distintas partes del planeta.

Para profundizar en CDN, ver la sección 14.

3.1. Versiones jQuery

El número de versión que se utiliza de jQuery es tan importante y quizá más que el
tipo de copia (producción, desarrollo o slim). Este número hay que tenerlo presente ya
que el framework evoluciona incluyendo nuevas funcionalidades y optimizando otras.
Además, debe tenerse en cuenta que ciertas funcionalidades nuevas reemplazan a
otras, las cuales dejan de estar disponibles.

Por ejemplo la función bind() quedó obsoleta a partir de la versión 3.0,

proveyendo esta funcionalidad on() desde la versión 1.7.

Una funcionalidad es obsoleta (deprecated) cuando se piensa quitar en

futuras versiones.

Las funcionalidades obsoletas quedan disponibles un par de versiones, pero es un

llamado de atención para los desarrolladores, puesto que prontamente ya no estarán
disponibles.

Una funcionalidad removida ya no podrá utilizarse en esta y ni en futuras

verisones.

Por ejemplo, la función live() quedó obsoleta en la versión 1.7 y

removida en la 1.9, reemplazada por la función on().

De hecho, la función on() terminó reemplazando a tres funciones: live(),

delegated() y bind().

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 9 de 46
Puede ocurrir que una funcionalidad que se utiliza en el desarrollo del sitio ya no esté
en la nueva versión, habrá que analizar si cambiar el código o continuar con la versión
jQuery utilizada hasta el momento.

Para averiguar las funcionalidades que fueron quedando obsoletas por

versión se debe buscar en: https://api.jquery.com/category/deprecated

También se debe considerar el hecho si se utilizan esas nuevas funcionalidades, pues

la librería cada vez es más pesada, y quizá con una versión que contenga lo básico es
suficiente para lo que se requiere, además HTML5 ha incluido muchos elementos que
antes solo estaban disponibles mediante jQuery.

Actualmente, Internet es el mejor recurso para aprender, más con este tipo de
herramientas, pero debe tenerse en cuenta que el código que se está estudiando sea
lo más actual posible, pues puede contener funcionalidades obsoletas o removidas.

4. LA FUNCIÓN $()

La función pesos $() es el corazón de jQuery, se trata de la abreviación de la función

jQuery(), la cual acepta una variedad de tipos de argumentos. Se la utiliza para
seleccionar nodos del DOM, devolviendo un objeto jQuery, sobre el cuál se podrán
llamar métodos o consultar propiedades.

La selección de los elementos HTML puede ser mediante el nombre, tipo, valor o
propiedades de los atributos de los elementos, tiene mucha semejanza con los
selectores CSS. Pero a esta función también se le puede pasar otra función, la cual se
ejecutará cuando el DOM esté listo, o un código HTML para incluir dentro de otro
elemento HTML, como ser un <div>.

Las formas de seleccionar un elemento del DOM son muy variadas, se pueden utilizar
distintas maneras para alcanzar un determinado nodo, y esto afectará al rendimiento
de la página. Utilizar la forma más apropiada lo dará la experiencia y la información
que se tenga del nodo. Por ejemplo, si se cuenta con el valor del atributo id se podrá
acceder directamente al nodo deseado, pero si solo se tiene el tipo de elemento, quizá
haya que buscar entre varios hasta alcanzar el que tenga el valor deseado en alguno
de sus atributos.

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 10 de 46
A medida que se avance en la lectura de este material se irán presentando distintos
selectores y las funcionalidades de $(), pero siempre quedará en el alumno ir por
más.

Selectores provistos por jQuery: https://api.jquery.com/category/selectors

jQuery provee mucho más de lo que se puede ver en este material, además surgen
nuevas funcionalidades todo el tiempo. Este material sienta las bases para poder
comprender y utilizar el framework, analizar códigos implementados por terceros y
utilizar otras API’s basadas en jQuery.

5. ESTILOS CSS CON JQUERY

La API provee distintas funcionalidades para manipular los estilos a un elemento, una
de estas, es agregar o quitar una clase CSS a un elemento HTML.

A continuación, se presenta un sencillo ejemplo, que agrega una clase de estilo a un

nodo del DOM (una caja), con solo posicionar el puntero del mouse encima de otro
elemento (un enlace), y quitar el estilo al sacar el puntero del elemento. Lo importante
del ejemplo no es lo que hace, sino mostrar algunas funcionalidades de jQuery.

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 11 de 46
Se describen las líneas del código:

Línea 11: se observa primeramente que la API jQuery es local, y se trata de una
copia completa de desarrollo. Además, como debe ser, esta se incluye en el
documento antes de usarse.

Línea 13: se selecciona la raíz del DOM y se ejecuta el método ready(), esto
garantiza que lo que está entre los paréntesis se ejecute una vez que se hayan
cargado todos los elementos del DOM. Esta línea se puede reemplazar por una
versión más corta:

La comprobación debería incluirse siempre que el script resida en la sección head,

pues se interpretará antes que existan los nodos DOM; en cambio, si el script reside al
final del body, no es necesario, pues se ejecutará al finalizar el renderizado del resto
de los elementos de la página.

Los script deberían incluirse justo antes de la etiqueta de cierre </body>.

El método ready() lanza el evento que se le pasa como parámetro, que en este caso
se trata de una función anónima, la función se define en el mismo argumento, desde
las líneas 13 a 20.

Esta alternativa es mejor que:

window.onload = function() {
// código JS
};
averiguá por qué.

El objeto window representa la ventana que contiene un documento DOM; la

propiedad document apunta al DOM document cargado en esa ventana. Cada

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 12 de 46
pestaña tiene su propio objeto window, sin embargo algunos métodos y propiedades
pertenecen a la ventana, es decir a todas las pestañas, como ser window.resizeTo.
No se ahondará en este objeto, pero se deja la inquietud para que se investigue de
forma individual.

jQuery permite abreviar $(document).ready(function(){ // código

JS}) en simplemente $(function(){ // código JS}).

Línea 14: el método $() selecciona a todos los elementos de enlace, obsérvese que
se indica entre comillas (simples o dobles), y luego se invoca el método
mouseover(), que define una función. El método referenciado es el nombre de un
evento, que lanza la función al ocurrir una acción sobre le objeto. Nuevamente, la
función es anónima y se define en el mismo parámetro.

La función definida contiene un argumento, no utilizado acá, con el nombre event,

esto permite acceder al evento dentro de la función. En este caso, el evento tendrá
información como qué elemento lo lanzó, qué tipo de evento es, si contiene por
ejemplo un mensaje o código de error, etc.

Para profundizar en eventos con jQuery, leer la sección 10.

Incorporá al script anterior la funcionalidad necesaria para evitar el

comportamiento normal de los enlaces al hacer clic Tip. Deberás utilizar el
parámetro event de la forma event.preventDefault();
Línea 15: nuevamente el selector pesos, pero esta vez accede a un nodo del DOM
identificado como upso. Los identificadores se seleccionan anteponiendo el símbolo
numeral #. A diferencia del selector por tipo de elemento, este devuelve un solo
elemento, pues se sabe que en un docume

nto Web los identificadores son únicos.

El método invocado es addClass(), que como se puede intuir, agrega al elemento

seleccionando una clase, en este caso cool.

El resto de las líneas no hace falta describirlas. Otros métodos que provee jQuery son
toggleClass() y hasClass().

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 13 de 46
5.1. El método css()

Una forma más minuciosa de manipular estilos con jQuery es mediante el método
css(), el cual aplica estilos al elemento seleccionado en una variedad de formas y
permite consultar sus estilos.

Se presenta la siguiente porción de código para analizar:

La sección del encabezado no necesita explicación, tampoco las primeras líneas del
cuerpo, y como se recomienda, el script jQuery figura justo antes del cierre de esta
sección.

Línea 21: En este punto se define una función para el evento click para todos los
elementos div de la página.

Línea 22: en esta línea ocurren varias cosas:

 Primeramente se selecciona al elemento que lanzó el evento (el click), que para
evitar consultar todo el árbol de nodos, se lo referencia con $(this). Esto permite
seleccionar al elemento que se está definiendo.
 Luego se invoca al método css() que realiza una declaración de estilo, cuyo
primer parámetro es la propiedad CSS (margin-top) y el segundo el valor que
tomará.
 Por último, el método css() se utiliza a modo de consulta, y se muestra en consola

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 14 de 46
 el valor de una propiedad. En consola se podrá apreciar que jQuery unifica la
manera en que se muestran los valores, sin importar cómo estén definidos, la salida
tendrá un mismo formato, en este caso como rgb().

5.2. Particularidades

Antes de comenzar a modificar estilos con jQuery es conveniente conocer ciertas

particularidades:

 jQuery admite la notación sin guión para separar palabras, es decir que
css(“margin-top”) es equivalente a css(“marginTop”), nótese la distinción
entre mayúsculas y minúsculas, pues jQuery está programado en JavaScript.

 Al modificar una propiedad de estilo, la notación existente en el elemento puede

cambiar. Esto se puede apreciar en el ejemplo anterior al ver el código cuando se
lanza el evento click.

 Si no se especifica una medida para un valor numérico, se asume px.

 Se puede quitar una propiedad de estilo indicando como valor la cadena vacía,
como ser css(“color”,””). Menos aquellas que se hayan definido en una hoja
de estilos o utilizando las etiquetas <style>. Estas se pueden modificar pero no
quitar.

 jQuery ignora las declaraciones que incluyan la sentencia !important de CSS.

 Los valores asignados a una propiedad pueden ser relativos al valor que ya posee
la propiedad. Por ejemplo, se podría desplazar la caja 5 pixeles hacia abajo en cada
click teniendo en cuenta el margen superior, solo habría que sustituir la línea 22
por: $(this).css("margin-top","+=5");

 El valor, además puede obtenerse de una función. Esto era de esperar en

JavaScript, pues los parámetros pueden ser funciones. Se podría redefinir el evento
click para que el margen superior cambie entre 1 y 100 de forma aleatoria.

En el ejemplo se utilizaron los métodos random() o floor() del objeto Math de

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 15 de 46
JavaScript. El primero devuelve un número al azar entre 0 y 1 (excluyente), mientras
que el segundo retorna la parte entera de un número, redondeando hacia abajo.

La función que retorna el valor para la propiedad indicada en el método css(), puede
tener dos argumentos. El primero hará referencia a la posición del elemento en el
conjunto de elementos seleccionados y el segundo al valor actual de la propiedad
indicada.

Siempre es bienvenido un ejemplo para comprender mejor. Continuando con el

ejemplo anterior de las cajas, se agrega otra funcionalidad que se lanzará al realizar
un doble click sobre cualquier caja. Pero esta funcionalidad cambiará el estilo de todas
las cajas, no solamente de la que recibió el evento, esto pasa por cambiar $(this)
por $(“div”).

El valor que obtendrá el argumento valor, será 5px, pero el valor para índice
variará según el orden del elemento. Como el selector $(“div”) arma un conjunto de
cuatro elementos, índice tendrá los valores 0, 1, 2 y 3 los cuales serán multiplicados
por 50, dejando a las cajas de forma escalonada.

En el navegador se vería como sigue:

 El método css() también puede recibir un arreglo como primer argumento, lo cual
dará al segundo parámetro de la función el valor de cada propiedad.

Suponiendo el siguiente código jQuery:

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 16 de 46
En el navegador, al hacer click sobre alguna de las cajas, se observa en la consola los
distintos valores de las propiedades:

Nótese que la salida del argumento index que figura al comienzo de la consola, es
cero, esto es porque solo se están mostrando los valores de un único elemento, el
referenciado por $(this), el que recibió el click.

 El método css() acepta la misma notación que los estilos, donde el operador de
asignación son los dos puntos :, acá el ejemplo estableciendo estilo con pares de
valores:

Al realizar click sobre la segunda caja, se vería lo siguiente:

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 17 de 46
Se puede apreciar que el código resultante en el navegador asigna la unidad pixeles al
valor numérico 25, mientras que mantiene como em al que se indicó como string.

También se puede ver que la propiedad marginTop no necesita comillas por tratarse
de una sola palabra, mientras que margin-left sí.

Apréciese la notación para establecer las propiedades de estilo, es una manera

conveniente para entender fácilmente el código.

Si se presta atención, lo que está recibiendo css() es la definición de un objeto, es

decir, que se podría definir una variable como objeto y luego pasársela al método
css(). El siguiente código es equivalente al anterior, solo que la variable estilo
podría estar definida en cualquier otro lugar del código:

6. ABM DEL DOM

Además de modificar el estilo de los elementos, jQuery facilita la incorporación o

remoción de elementos del DOM. Simplemente se debe invocar al método html() e
indicar lo que se desee agregar al elemento seleccionado. El siguiente ejemplo,
incluye un texto dependiendo del botón que se presione:

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 18 de 46
Más que incluir un texto, se está sustituyendo el contenido del nodo seleccionado,
haciendo que los botones desaparezcan.

¿Cómo lo modificarías para que cambie el texto del párrafo sin que
desaparezcan los botones? Tip: Podés utilizar el selector de nodo hijo > para
llegar al elemento p.

Nótese que en este caso, el código jQuery, se ha utilizado directamente desde los
elementos HTML, sin la necesidad de definirlos en un script aparte como en los
ejemplos anteriores. Esta práctica no suele utilizarse ya que no separa el contenido,
maquetación y scripts, lo que puede dificultar el mantenimiento del código.

En caso de llamar al método html() sin parámetro, este devolverá el contenido del
elemento.

Por ejemplo, $(‘p’).hrml() devolverá el texto Haz clic en un

botón.

Es posible quitar nodos del DOM, para esto se debe seleccionar el nodo y luego
invocar el método remove(). También se pueden agregar nuevos elementos hijos al
nodo seleccionado mediante append().

El siguiente ejemplo permite incorporar y eliminar ítems en forma de viñetas. La idea

es especificar un producto en una caja de texto, incorporarlo como ítem, y darle la
funcionalidad a ese ítem que al hacer click sobre él, se elimine. Los códigos podrían
ser como sigue:

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 19 de 46
 Código HTML

Código jQuery

Línea 7: se indica que el código jQuery de la función podrá acceder a los nodos del
DOM una vez que todos los elementes se hayan cargado.

Línea 9: se define un manejador (handler) para el evento click que podría ocurrir
en el botón identificado como add-btn. La idea es que al hacer click sobre el botón
Agregar, se incorpore un nuevo ítem.

Línea 10: solo la primera vez que se agrega un ítem debe incluirse el elemento ul y
un texto. El contador, además se utiliza para identificar los ítems que se van
agregando, esto permite luego identificarlos unívocamente.

El método append() permite agregar contenido al final de un elemento, los ítems se

van agregando uno debajo del otro. Para incorporarlos en forma de pila, es decir
agregarlos al comienzo, se debe utilizar el método prepend().

Línea 14: se agrega el ítem mediante el elemento li. Nótese que el ítem se anexa
como hijo de ul. El texto que se coloca en el ítem es el escrito en la caja de texto, al
cual se accede mediante el método val().

Para poder acceder al valor de una variable con la notación ${variable},

la cadena debe definirse entre comillas simples invertidas `cadena`.

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 20 de 46
Línea 15: ahora, solo resta poder eliminar cada ítem, para esto, a cada uno se le
define el evento click. Nótese la utilización del selector $(this), este elemento, el
que recibe el evento es el que se elimina.

Se propone incorporar estilos para que sea más intuitiva la eliminación de

los ítems y eliminar el contenido de la caja de texto una vez agregado el ítem.
Además, hacé que cada ítem se incorpore al comienzo.

También es posible eliminar todos los hijos de un nodo, sin eliminar el nodo en sí, para
esto se puede utilizar el método empty(). Por ejemplo, se podrían eliminar todos los
ítems con la línea $(„ul‟).empty(). Si bien en el ejemplo también funcionaría
$(„li‟).remove(), la diferencia radica que con empty() se eliminan todos los
nodos hijos sin importar el tipo, mientras que con la segunda opción se borran solo los
li.

jQuery es un framework muy rico y es muy difícil conocer todo su potencial si no se

trabaja con él frecuentemente. Además de incorporar nodos de la forma vista, se
puede agregar contenido a la inversa. ¿Cómo es esto? Bueno, en vez de seleccionar
el nodo al cual agregarle contenido, la forma inversa sería indicar el contenido que se
quiera agregar a un determinado nodo. Para esto se utiliza el método appendTo().

Luego, la línea 14 podría reemplazarse por:

Esta funcionalidad agrega el contenido al final, mientras que prependTo() lo agrega

al comienzo. Acá se vió también la versatilidad de la función $(), donde se puede
indicar código HTML para agregar a otro elemento HTML, como ser:

La función $() acepta un nodo del DOM, un elemento HTML o una función
de callback, no se puede indicar solamente texto.

Lo siguiente no da error, pero no hace nada:

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 21 de 46
Otros métodos más sutiles permiten incorporar nodos DOM antes o después de los
elementos seleccionado, mediante before() o after() respectivamente; con la
particularidad que si los elementos ya existen, se mueven, no se crea una copia de
ellos.

El siguiente código intercambia la posición del párrafo por debajo y por encima del
botón.

Código HTML Código jQuery

Se vió que con html() se puede sustituir el contenido de un elemento, pero no es la

manera más elegante de hacerlo, este método se debe utilizar cuando se desea
agregar contenido a un elemento vacío, como ser un párrafo a la espera de un texto.
Para reemplazar contenido HTML, jQuery provee replaceAll() y replaceWith().

El siguiente ejemplo selecciona a todos los elementos que contengan la clase CSS
ítem y reemplaza esos elementos por un texto en itálica.

Código HTML

Código jQuery

En el navegador se vería como sigue:

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 22 de 46
 Antes de presionar el botón Luego de presionar el botón

Luego, el botón Reemplazar ya no funcionaría, puesto que el selector no haría match

con ningún elemento, al dejar de usarse la clase item.

En el ejemplo anterior, se vió otra manera de seleccionar elementos del DOM,

mediante la clase CSS que utiliza, pero aún quedan muchas más formas.

7. PROPIEDADES Y ATRIBUTOS

Muchas veces es preciso modificar los atributos de un elemento, no meramente

agregar o quitar directamente elementos del DOM. Por ahora, lo único que se vió fue
cómo modificar el atributo class o style, pero esto solo permite cambiar el estilo.

Antes de ver los métodos que provee jQuery para la manipulación de atributos, hay
que entender bien a qué cosas llama jQuery atributos y a cuáles propiedades, pues
hasta ahora, si se han mencionado, ha sido de manera indistinta.

 Atributo: cualquier cosa que se tenga en un elemento HTML para personalizarlo.

 Propiedad: cualquier cosa a la que se pueda acceder desde una propiedad de un

objeto nativo JavaScript.

Bueno, realmente no se pretende que lo anterior sea del todo clarificante, pero se
puede aclarar un poco más con una regla nemotécnica, por llamarla de alguna
manera:

Las propiedades serán aquellas que contengan un valor de verdad y sean

nativas del lenguaje JavaScript, mientras que los atributos podrán contener
distintos valores.

Para acceder a los atributos y modificarlos, jQuery implementa el método attr(),

mientras que para las propiedades prop(). Entonces, a modo de resumen:

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 23 de 46
  attr(): se usará para modificar atributos tales como class, id, href,
label, src, title..

 prop(): permitirá modificar propiedades como autofocus, checked, async,

multiple, readonly...

Las propiedades en los elementos HTML son booleanos, obteniendo un valor por
defecto en su ausencia, y otro si están presentes.

Por ejemplo, un elemento está siempre habilitado, al menos que contenga

la propiedad disabled.

Ambos métodos funcionan de la misma manera, si solo se incluye un parámetro, se

consulta el valor del atributo o propiedad indicado, y en caso de existir un segundo
parámetro, este será el valor que se le asigne al atributo, o propiedad. Son muy
similares al método css() para manipular estilos. Por tanto, el segundo parámetro de
prop(), básicamente será true o false, o una función que devuelva eso.

Acá va un ejemplo para ver el funcionamiento de estos métodos y otros relacionados.

Lo siguiente, podría ser parte de un formulario, que muestra ciertas condiciones que
deben aceptarse mediante una caja de chequeo (checkbox), y solo una vez
aceptadas, se habilita el botón que enviará los datos del formulario.

En el ejemplo solo se utiliza el método prop(), primero para verificar el valor de una
propiedad y luego para establecerle un valor.

jQuery provee el método removeProp() para remover una propiedad, y quizá alguien

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 24 de 46
se sienta tentado utilizar removeProp(„disabled‟), pues se sabe que la ausencia
de esta propiedad indica que el elemento está habilitado. Sin embargo, jQuery no
recomienda eliminar propiedades nativas, pues una vez hecho esto no podrán
agregarse; por esta razón debe utilizarse prop().

Sin embargo, está permitido quitar propiedades que se hayan incorporado mediante
prop(). Considérese la siguiente porción de código:

Línea 10: se asigna a una variable el elemento seleccionado.

Línea 11: se hace referencia a un elemento mediante la variable msj, lo cual es una
buena opción cuando la regla de selección es extensa, se debe referenciar varias
veces o puede cambiar en distintas instancias del script.

Línea 12: se establece una nueva propiedad con un determinado valor.

Línea 13: se agrega un nodo hijo (un texto) al elemento seleccionado, donde se
consulta el valor de la nueva propiedad. Aquí es necesario llamar al método prop()
mediante la variable msj, pues se está dentro de otro método, y el ámbito es distinto.

Línea 14: se quita la nueva propiedad personalizada.

Línea 16: la consulta de la nueva propiedad dará un valor no definido. Se destaca el

escape de las comillas simples en la cadena y el punto y coma que finaliza la
sentencia.

En el navegador se tendría:

Obsérvese la notación utilizada para llamar a varios métodos de una selección. Las
llamadas se van sucediendo una a continuación de otra (en cadena), nótese que el

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 25 de 46
punto y coma para finalizar la sentencia está recién al final. Esta forma ahorra código,
y crea una visión más clara, muchas veces suelen incluirse una a continuación de otra
en una misma línea.

La notación en cadena evita llamar repetidas veces a la misma función

jQuery().

Utilizá el depurador y compará el número de veces que se llama a la API

jQuery en el código anterior (utilizando cadena de llamadas) con el siguiente
código:

Mayormente, no se utilizan propiedades personalizadas, sino atributos, ya que esto

choca un poco con la definición de propiedades de los elementos HTML dada por
jQuery. En el ejemplo anterior, simplemente habría que reemplazar el texto prop por
attr para que sea semánticamente más correcto.

A continuación, un ejemplo de modificación de atributos, que el lector sabrá entender:

En el segundo ejemplo de la sección anterior, se utilizó el método val() para acceder

al valor de un elemento, si bien value no deja de ser un atributo, se debe utilizar
val() para consultar y modificar este atributo en particular, y no recurrir a attr().
Tal como se hizo para la modificación de estilos y clases, debe apelarse al método
apropiado.

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 26 de 46
8. DATOS

Es posible almacenar valores en los elementos HTML, pero no valores como un

atributo, sino como un dato, un dato que se asigna a un elemento. Por ejemplo,
teniendo una lista de autos, cada auto puede guardar información como la marca y el
año.

La diferencia entre un atributo y un dato es que el dato no es visible desde el código,

es decir, es accesible desde jQuery solamente y que en un dato es posible guardar
cualquier tipo de dato disponible en JavaScript, es decir, además de texto y números,
también arreglos y objetos.

Para asignar un dato a un elemento seleccionado se utiliza el método data(), si se

indica un único argumento se hará referencia al nombre del dato, y en caso de incluir
dos, el segundo establecerá el valor al dato del primer argumento. Para quitar el dato
de un elemento, se utiliza removeData().

jQuery permite establecer un mismo dato a todos elementos seleccionados, pero esta
asignación es por referencia. Esto quiere decir, que todos los elementos contendrán el
mismo dato, y si este se modifica, se modificará en todos. Entonces, el valor asignado
a un dato puede ser el mismo físicamente a todos los elementos seleccionados.

Considerando el mismo código HTML anterior se presenta el siguiente script:

Línea 23: se define un objeto con dos propiedades y se guarda en la variable info

Línea 27: se crea el dato informacion y se le asigna como valor la variable info
a todos los elementos li contenidos dentro de un elemento ul.

Línea 28: se establece el valor 120 la propiedad precio del objeto info, este
cambio afecta a todos los elementos li contenidos en un ul, pues todos hacen
referencia a un mismo objeto.

Línea 29: al conjunto de elementos li contenidos en el elemento identificado como

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 27 de 46
frut se le reemplaza el contenido del dato informacion con otro objeto, el cual
tiene una única propiedad, variedad con el valor „frutas‟. En este punto, cada
elemento del conjunto cuenta con un objeto diferente.

Línea 30: solo al elemento identificado como v_tom se le asigna un nuevo dato bajo
el nombre precio con el valor 120. Ahora este elemento cuenta con dos datos,
nótese que no se está haciendo referencia a info.precio.

Línea 23: se elimina el dato precio del elemento identificado como v_tom

Ahora, incorporá al script las salidas por consola suficientes para

comprender el funcionamiento del script viendo qué valores van obteniendo los
datos.

9. RECORRIENDO LA SELECCIÓN

A esta altura ya se sabe que la función jQuery devuelve un objeto, que se trata de un
conjunto de elementos HTML, JavaScript implementa este conjunto con arreglos, es
decir que cuenta con un índice numérico.

Este índice se utilizó por primera vez en este material en la sección 5.2 con el
siguiente ejemplo:

Esto permite acceder a una posición determinada del conjunto seleccionado, utilizando
la notación de arreglos de JavaScript:

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 28 de 46
 Analizá el código anterior, y realizá las pruebas suficientes para entender
su comportamiento, notá que el objeto referenciado se mueve de lugar, no se
crea una copia.

Ese índice puede ir variando por lo cual podría accederse a cada elemento con alguna
función iterativa. Pero eso sería meterse con la estructura en como implementa jQuery
al conjunto selección. Para poder manipular mejor estos elementos, el framework
brinda una serie de métodos, tal como los provistos para los arreglos en JavaScript.

Se han visto ejemplos en JavaScript en la Unidad 1 sección 3.

Se presenta un código de ejemplo con algunos de estos métodos y a continuación, el

resultado en el navegador para ayudar su comprensión:

Código HTML Código jQuery

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 29 de 46
Solo se aclarará que si la función definida dentro del each retorna true funciona
como un continue en cualquier otra sentencia de iteración, y si retorna false, es
similar a un break. Esto se puede notar en el subrayado de las verduras.

Para saber cuántos elementos fueron seleccionados, jQuery provee la propiedad

length, por ejemplo $(verduras).length retornará 4.

10. EVENTOS

Los eventos son uno de los elementos más importantes en el desarrollo de

aplicaciones Web enriquecidas del lado del cliente, son la base para crear la
interacción con el usuario, algo tan importante en las páginas que usan jQuery.

A lo largo de los ejemplos se mencionan varios eventos que pueden suceder en un

enlace o botón, pero también pueden ocurrir en cualquier otro elemento HTML y es
necesario definir una función para dicho evento si se quiere lograr alguna acción en
particular cuando ocurran.

Para analizar cómo jQuery define un manejador de eventos (listener en JS), se recurre
al primer ejemplo visto en este material:

Se define un evento sobre todos los elementos de enlace. Luego del selector se indica

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 30 de 46
el tipo de evento, en este caso mouseover().Existen diferentes tipos de funciones
que implementan cada uno de los eventos normales, como click(), dblclick(),
focus(), keydown(), etc.

Como parámetro en la función mouseover() o similares hay que pasar una función,
ya sea su nombre o la definición de la misma, como en el ejemplo

La función que se envía por parámetro con el código del evento, en este caso la
función a ejecutar al pasar el puntero del mouse por encima del enlace, tiene a su vez
otro parámetro que es el propio evento que se está manejando. En el código anterior
se asigna a la variable event el evento que se está ejecutando y a través de esa
variable se tiene acceso a varias propiedades y métodos para personalizar aún más
los eventos.

Por ejemplo, la acción al hacer click sobre un enlace es que el navegador

se redirija a la dirección indicada en el atributo href, para evitar este
comportamiento, en la definición del evento click, se puede llamar al método
preventDefault() del objeto Event evitando esta acción.

En el siguiente código, sin importar a dónde haga referencia el atributo href de

cualquier enlace en la página, solo se contarán la cantidad de veces que se hizo click
y doble click. Particularmente, la función definida para el evento click se lanzará dos
veces con cada doble click, mientras que la definida en el doble click, una vez.

Se pueden definir manejadores para distintos eventos según la fuente de este, como
ser del ratón (click, hover, mouseup, mouseout, etc.), del teclado (keydown.
Keypress y keyup) o de cualquiera de los dos (focus, focusin y focusout).

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 31 de 46
10.1. Objeto Event

El objeto Event es el que se recibe como parámetro en la función que define al

manejador, este objeto provee de utilidades que pueden ser esenciales al momento de
codificar la función.

Como cualquier otro objeto, provee propiedades y métodos, como el ya mencionado

preventDefault() que previene (impide) realizar la acción normal del evento que
se está codificando. Un par de propiedades pueden ser pageX y pageY que
devuelven el desplazamiento en pixeles desde la izquierda y la parte superior,
respectivamente, del lugar en que ocurrió el evento.

El siguiente código muestra la posición del puntero al mover el mouse dentro de la

página:

El objeto contendrá información como qué tipo de evento es (type) y otras que
dependerán del evento ocurrido, por ejemplo en el caso de un evento del teclado,
puede indicar qué tecla se presionó.

10.2. Secuencia de Eventos

Para el caso particular de eventos de teclado, estos se suceden uno a continuación de

otro. Si se pulsa y suelta una tecla, primero se produce un evento keydown, al
presionar la tecla, luego un keypress y por último un keyup al soltarla.

Si se realiza una pulsación prolongada de una tecla este esquema varía, pues se
produce un keydown y luego un keypress. Mientras se mantiene pulsada la tecla en
bucle se van produciendo eventos keydown y keypress, repetidas veces hasta que
finalmente se suelta la tecla y se produce un keyup.

En el caso de las teclas CTRL, Mayúsculas o ALT, se producen múltiples keydown

hasta que se suelta la tecla y se produce un keyup. Es decir, al pulsar una de estas
teclas no se produce el evento keypress.

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 32 de 46
 Averiguá con qué otras teclas no se produce el evento keypress.

Cada tecla tiene un código numérico que la identifica, lo cual permite realizar alguna
acción según la tecla que presionó el usuario.

El siguiente ejemplo muestra el tipo de evento que lanza la tecla presionada:

La salida en el navegador luego de presionar la tecla u y CTRL sería:

10.3. Misma acción distintos eventos

Puede ocurrir, como en el caso anterior, que se desee implementar una misma acción
para distintos eventos. Para esto jQuery provee el método on() que enlaza a uno o
varios elementos una función que implementa un evento.

Esto es similar al método addEventListener() de JavaScript visto en la

Unidad I.

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 33 de 46
La asignación del manejador a los tres eventos del teclado del ejemplo anterior se
pueden resumir en:

Para desligar un manejador a un evento, se utiliza off(). Por ejemplo, para quitar
keyup:

En caso de llamar al método anterior sin parámetro, se desligan todos los

manejadores definidos para los objetos seleccionados.

El manejador solo se enlazará a los elementos actualmente seleccionados,

es decir, que estos deben existir.

En la sección 6 se vió un ejemplo donde se agregaban elemento li y se les asignaba

un manejador para el evento click, que removía dicho elemento. En este ejemplo, se
agrega el mismo evento a cada elemento.

Allí hay dos inconvenientes:

1. En caso que existan muchos hijos, en este caso muchos li o una tabla con cientos
de filas donde a cada una se le asignen un par de manejadores de eventos; se
producirá una sobrecarga, un mismo código para un mismo tipo de elemento.

2. El otro inconveniente es que como se vió hasta ahora, el elemento debe existir en el
DOM.

Para solucionar ambos casos se debe utilizar la delegación de eventos. Esto, lo que
permite es definir el manejador de evento desde un ancestro, indicando que si ocurre
el evento de un elemento, este se propagará a un ancestro.

Volviendo al ejemplo de la sección 6 se podría modificar de la siguiente manera:

Ahora ya no es necesario asignar un manejador para el evento click cada vez que

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 34 de 46
se agrega un ítem. Nótese que la selección no se hace del futuro padre inmediato,
pues en el código original ul no existe aún, y la unión del manejador debe hacerse
con un elemento que exista en el DOM, y en este caso el que existe es el formulario…
el abuelo de los li.

La delegación debe definirse cuidadosamente, pues cada vez que ocurra el evento
este irá subiendo por el árbol DOM hasta encontrar al que define el manejador. En
páginas grandes esto es un gran consumo de recursos y hace lenta la página, siempre
debe definirse el manejador lo más cercano posible al elemento. En el caso anterior,
por ejemplo, se pudo haber creado un elemento ul vacío y utilizar este para crear el
manejador, y no desde el formulario.

Cuando ocurre un evento en un nodo del DOM, el mismo se propaga a sus ancestros.
Si se define un manejador en el nodo para ese evento, se ejecutará esa función y
luego se propagará el evento al ancestro. En caso de no desear que esto ocurra debe
detenerse la propagación. El objeto evento provee el método stopPropagation()
para evitar que el evento se pase a sus ancestros.

El objeto evento también puede contener datos personalizados que luego serán
accesibles mediante la propiedad data dentro de la función que se está definiendo.
Por ejemplo:

Primeramente, lo que llama la atención es que se han definido dos manejadores para
el mismo evento y el mismo elemento, uno identificado como test. Lo que sucede en
estos casos es que se lanzan los dos manejadores, el que se encuentre primero y
luego el otro.

Además, está el objeto que se pasa como argumento a on(), el cual se asigna como
valor a la propiedad data del evento, nótese la referencia e.data.nombre.

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 35 de 46
11. ANIMACIONES

Las animaciones ofrecen al usuario una experiencia más atractiva, muchas de estas
pueden realizarse directamente con CSS, pero jQuery ofrece un mayor control, se
basa en reglas de estilo.

El método más sencillo es toggle(), que permite ocultar o mostrar un elemento

mediante algún efecto. En caso de estar visible lo oculta, y si está oculto lo muestra.

Se presenta el siguiente ejemplo que es una modificación al visto en la sección 7

donde el botón Enviar se habilitaba o deshabilitaba según el estado de una caja de
chequeo. En este caso el botón será visible o no según se tilde o no la caja de
chequeo.

Nótese que inicialmente el botón figura oculto. El parámetro pasado a toggle()

puede ser un string indicando la duración del efecto („slow‟ o „fast‟) o un valor en
milisegundos. Si no se especifica ningún valor, el efecto es inmediato, aparecer y
desaparecer.

Lo interesante, es que al método toggle() se le puede pasar como segundo argumento

una función para que se lleve a cabo una vez que la animación esté completa.

Otro método que provee jQuery es animate(), mediante el cual se permiten

establecer reglas CSS, la duración que lleva la animación, el efecto, una función a
ejecutar y cuando ejecutar dicha función, es decir, al comienzo de la animación,
cuando esta se complete, en cada paso de la animación, etc.

Debe tenerse en cuenta que la función que se especifique se llamará por cada
elemento al que se le aplique la animación. Siempre hay que recordar que jQuery
trabaja con una selección, y si esta involucra varios objetos, el método se llamará
sobre todos ellos.

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 36 de 46
Modificando el ejemplo de la sección 5 de los cuadrados de colores, se podría incluir
una animación. Lo siguiente hace que se bajen todos los cuadrados conjuntamente.
Se coloca una función con un contador que mostrará la cantidad de veces que se
llama a esta función.

A una misma selección se le pueden aplicar varias animaciones:

Sin embargo este método solo puede animar atributos con valores numéricos,
atributos como border y background son ignorados. Para este tipo de animaciones
es necesario utilizar jQuery-Color

Se incluyen en el encabezado las librerías:

Y luego se puede acceder a la animación de las propiedades de color:

Nótese que el método jQuery.Color devuelve un objeto color CSS, y recibe como
argumento un objeto con reglas de estilo.

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 37 de 46
La última animación restaura el color original del cuadrado, que si bien no utiliza al
método jQuery.Color, hace uso del método anímate() de la librería jQuery-Color.

12. PLUGINS JQUERY

jQuery provee muchas otras funcionalidades en formato de plugins, es decir, otras

librerías que se apoyan en jQuery para brindar más funcionalidades.

Un registro de estas librerías separadas por categoría se puede encontrar

en: https://plugins.jquery.com/

Se puede navegar el registro de las librerías por categoría, donde se encuentra la

descripción de lo que aporta, con la opción de ver el funcionamiento online,
documentación sobre la API y descargarse la versión deseada.

Muchas de esas librerías se basan en jQuery UI, la cual brinda diferentes

funcionalidades para trabajar en forma conjunta. Estas funcionalidades están
separadas en categorías:

 Interacciones: agregan comportamientos básicos a cualquier elemento y son

utilizados por muchos componentes (mover, cambiar tamaño, ordenar, etc.)

 Widgets: Controles de interfaz de usuario con todas las funciones: cada uno tiene
una gama de opciones y es totalmente temático (acordeón, botón, menú,
desplazamientos, selectores, diálogos, calendarios, etc.).

 Efectos: muchos efectos listos para usar (clip, drop, explode, shake, size, etc)

Para acceder a esta API: https://api.jqueryui.com

Desde la página se puede descargar la librería completa o solo las funcionalidades

deseadas.

13. ORDEN DE CARGA DE SCRIPTS

Esto no tiene que ver precisamente con jQuery, sino más bien con cualquier script que

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 38 de 46
se quiera incluir en la página. Además, tampoco es una propiedad de los script en sí,
sino del elemento <script>, por ende es de HTML.

Se sabe que los elementos HTML se van interpretando y ejecutando de la primer línea
a la última, en ese orden. Por esto, cuando JavaScript debe acceder a un nodo del
DOM, este debe existir, y la ejecución del script se coloca al final del documento Web
o verificando que el documento se haya cargado por completo. Lo mismo ocurre
cuando un script necesita de una funcionalidad desarrollada en otro script, este debe
cargarse antes que se requiera su uso.

Pero hay situaciones, en que el script puede cargarse en paralelo con otros elementos,
es decir, que la funcionalidad que provee no está ligada a otras. Este tipo de carga se
conoce como asincrónica, y HTML 5 provee el atributo async para esto. La carga de
esta manera permite que el navegador interprete otros elementos sin tener que
esperar la carga del script, este se ejecutará una vez cargado, cuando el navegador
pueda hacerlo.

Como se ve, la propiedad es booleana, su presencia lo establece como verdadero. Sin

embargo, esto solo tiene sentido para los script externos, los que figuren dentro del
documento Web serán ejecutados a medida que se encuentren.

La carga del script de esta manera permite organizar el código del documento Web,
pues en el encabezado se pueden indicar los script sin ralentizar la carga de la página.

Los script con la propiedad async pueden cargarse en cualquier orden, no dependen
unos de otros. Quizá uno se encuentre local en el servidor y otro en un servidor CDN.

La carga asincrónica o en paralelo es ideal cuando se incluyen funcionalidades de

terceros, donde otros script de la página no dependen de ellos ni ellos de otros scripts.

Por ejemplo el que provee Google para analizar el tráfico de un sitio Web:

Otra propiedad booleana es defer, la cual indica que el script externo se ejecutará
luego de analizar todo el documento Web, pero antes de activar DOMContentLoaded.
El documento se considerará cargado por completo y listo cuando todos los script
diferidos estén cargados y ejecutados. Las cargas asincrónicas pueden ocurrir antes o

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 39 de 46
después de lanzarse el evento DOMContentLoaded.

El evento DOMContentLoaded se lanza una vez que el documento Web se

haya cargado y analizado por completo, sin esperar la carga de las hojas de
estilo, imágenes y elementos frame.

A diferencia de async, los script con defer son ejecutados en el orden en que
aparecen en el documento, es decir, que si hay dos scripts externos diferidos, el orden
de carga será el que se encuentre primero de arriba hacia abajo en el código.

Otra codificación que no bloquea el lanzamiento del evento DOMContentLoaded es la

que incluye scripts dinámicos mediante document.createElement('script');
pues estos pueden o no incluirse en el documento Web final, por ejemplo:

Durante la carga de un documento Web se dan tres instancias que se pueden

consultar a través de la propiedad readyState del objeto document, los valores
serán:

 loading: el documento aún se está cargando.

 interactive: el documento finalizó la carga y ha sido analizado, pero los sub

recursos, como imágenes, hojas de estilo y elementos frame aún se están
cargando. En este momento se lanza el evento DOMContentLoaded.

 complete: el documento y todos sus recursos fueron cargados y analizados por

completo. En este momento se lanza el evento load.

Por ejemplo, se podría consultar el estado de carga en un script externo de la

siguiente forma:

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 40 de 46
Se deja el siguiente script como guía y un pequeño análisis del mismo:

Líneas 19 – 21: Se crea la carga del script externo carga_externa.js de forma

dinámica, cuyo código son las cuatro líneas del ejemplo anterior.

Línea 23: se consulta por consola el estado de la carga del DOM (las salidas por
consola se ven más abajo).

Líneas 24 – 36: se define un manejador para cada cambio de estado de carga del
DOM. Se consulta el posible valor y se muestra la salida por consola.

Las salidas por consola serán las siguientes:

Obsérvese que en la línea 27 se solicita la salida por consola en el caso que el estado

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 41 de 46
de carga sea loading, sin embargo el mensaje no se muestra. Esto sucede porque el
manejador para el evento onreadystatechange no ha cambiado, es decir, sigue
siendo loading. Por eso se incluye la línea 23.

Realizá algunas salidas por consola consultando los estados de carga del
objeto document en distintos puntos del documento Web. Incluí otro archivo
JavaScript externo con y sin la propiedad de carga diferida.

14. JQUERY CON CDN

Ya se mencionó cómo usar jQuery con CDN, pero sin saber exactamente qué es un
CDN. Esta tecnología se trata de una red de entrega de contenidos compuesta por
diferentes servidores. Es decir, CDN hace referencia a un conjunto de servidores
ubicados en diferentes puntos geográficos que contienen copias de contenidos
alojados en otros servidores, y es un servicio del que se puede disponer en los
mejores proveedores de hosting. Por consiguiente, busca optimizar el acceso a la
información de Internet, puesto que el usuario llegará a aquellas copias de datos que
se encuentren más próximas a su posición.

La siguiente figura ilustra el servicio tradicional, donde cada cliente accede a una única
copia, en comparación con la opción que cada uno acceda a una copia más próxima a
él.

Figura 1. Sistema tradicional vs. CDN

Fuente: De Kanoha - Trabajo propio, CC BY-SA 3.0,

https://commons.wikimedia.org/w/index.php?curid=7868809

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 42 de 46
 Por ejemplo, si se dispone de un sitio en Argentina, pero se tienen muchos
clientes en España, se podría contratar un servicio de CDN para disponer copias
del sitio alojadas en España.

Los CDN reducen el cuello de botella al evitar que todas las solicitudes se centren en
un solo lugar, además agilizan la navegación, ya que los datos se alojarán en lugares
más cercanos al cliente. Como ventaja adicional, y no menos importante, es la
disponibilidad; pues al existir varias copias, en caso que un servidor no sea accesible,
se podrá recurrir a otra copia en otro servidor. Y todo esto, totalmente transparente
para el usuario, y el desarrollo del sitio en sí.

Los sitios que ofrecen CDN se basan en la ubicación del cliente para localizar el
servidor más cercano que disponga una copia del recurso solicitado.

Algunos ejemplos de empresas que ofrecen CDN son:

 Microsoft Azure - https://azure.microsoft.com/es-es/services/cdn

 Google Cloud - https://cloud.google.com/cdn
 Cloudflare - https://www.cloudflare.com
 Akamai - https://www.akamai.com
 OVHcloud - https://www.ovh.es

Una alternativa, si no se puede contratar un servicio de CDN, es utilizar recursos CDN,

como ser jQuery CDN o APIs de Google, mientras que el sitio permanecerá con una
única copia. Además, no es necesario alojar en estos todo el sitio Web, sino los
recursos que se deseen, por ejemplo, por su importancia o por su tamaño.

El hecho de enlazar un recurso alojado en otro servidor se conoce como hotlinking,

según el caso puede verse como una práctica mal vista.

Por ejemplo, una mala práctica de hotlinking es desde una página enlazar
un video o imagen de otro servidor, esto se considera un robo de ancho de
banda, pues el recurso se estará descargando desde otro lugar.

Sin embargo, lo que se busca con CDN, es precisamente eso, que los diferentes sitios
hagan uso de hotlinking, pero con otros propósitos: disponibilidad y eficiencia en la
transferencia de recursos por Internet.

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 43 de 46
 Google y Microsoft ofrecen recursos mediante CDN para apoyar el
desarrollo de aplicaciones Web ofreciendo varios recursos:
 Google Code: https://developers.google.com/speed/libraries
 Microsoft CDN: https://docs.microsoft.com/en-us/aspnet/ajax/cdn
Para el caso particular de jQuery podrían utilizarse alguno de los siguientes
enlaces:
 https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
 https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js

La utilización de estos CDN agiliza mucho la transferencia de información a tal punto

que quizá ni siquiera haga falta transferir el framework al cliente. Si el cliente ya ha
accedido a un sitio que utiliza alguno de estos CDN, contará con una copia de jQuery
en su dispositivo en la caché de disco, entre los archivos temporales. Por esta razón
es conveniente referenciar los CDN más utilizados y no descargarlos y enlazarlos a
una copia local.

Sin embargo, no todas son ventajas, pues puede suceder que el que provee el recurso
cambie la URL, por ejemplo por un cambio de infraestructura o porque decidió no dar
más soporte a ese recurso. Entonces, es preciso verificar cada cierto tiempo que los
recursos que se utilizan en el sitio aún están disponibles, y una práctica inteligente es
tener una copia local en caso que el recurso no esté disponible.

Para esto último, se debe agregar la siguiente línea luego de la referencia al recurso,
en este caso jQuery, si no se puede descargar se utilizará la copia local:

El segundo script verifica si en el objeto window existe el tipo de objeto jQuery (o

window.$ que es lo mismo), en caso de que sea falso, se incluye en el documento la
copia local.

15. ACTIVIDADES DE REPASO

1) ¿Qué es jQuery?
2) ¿En qué momento influye la carga de jQuery al visitar una página?
3) ¿Qué diferencias hay entre las distintas copias que ofrece jQuery para descargar?

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 44 de 46
4) ¿Cuál es la diferencia entre una funcionalidad obsoleta (deprecated) y una
removida?
5) ¿Para jQuery, qué diferencia hay entre las propiedades y los atributos de un
elemento?
6) ¿Para qué se utilizan los métodos attr(), prop() y val()? ¿Algún otro método
para modificar atributos?
7) ¿Qué diferencias existen entre los atributos y los datos en un elemento HTML?
8) ¿A qué se refiere la propagación de un evento ocurrido en un nodo del DOM?
9) ¿Qué diferencias y similitudes hay entre las propiedades async y defer? ¿Se
pueden usar ambos en un mismo elemento script?
10) ¿Cuáles son los distintos estados de carga de un documento Web?
11) ¿Los scripts dentro del documento Web retrasan el cambio de estado de carga del
documento de interactive a complete?
12) Se mencionó que las imágenes se cargan luego de que ocurre el evento
interactive del documento, entonces ¿es posible acceder a un nodo img
durante la carga?
13) ¿Qué es la tecnología CDN? ¿Cuál es su finalidad?

16. WEBGRAFÍA

 jQuery - https://jquery.com/
 W3Schools - https://www.w3schools.com
 MDN Web docs - https://developer.mozilla.org
 DevCode - https://devcode.la
 Alligator.io - https://alligator.io
 JavaScript,Info - https://javascript.info

UNIDAD N° 2. jQuery
Asignatura: Desarrollo de Aplicaciones I Página 45 de 46