Monografía - Ventura Bautista Jesus Natividad - Fac

UNIVERSIDAD NACIONAL DE EDUCACIÓN
Enrique Guzmán y Valle

Alma Máter del Magisterio Nacional
FACULTAD DE CIENCIAS
Escuela Profesional de Matemática e Informática
MONOGRAFÍA
JQUERY, AJAX
Definición de jQuery, programar JavaScript con jQuery. Selección de un
elemento del documento mediante el id. Selección de elementos por el
tipo de elementos. Método text ( ), text (valor). Métodos attr (nombre de
propiedad), attr (nombre de propiedad, valor) y removeAttr (nombre de
propiedad). Métodos addClass y removeClass. Método html( ) y html
(valor). Administración de eventos con jQuery. Eventos mouseover y
mouseout. Tipos de eventos, efectos, tipos efectos, iteración, Ajax,
funciones anónimas, ejemplos y aplicaciones
Examen de Suficiencia Profesional Resolución N° 0494-2021-D-FAC
Presentada por:
Ventura Bautista, Jesus Natividad
Para optar al Título Profesional de Licenciado en Educación

Especialidad: Informática
Lima, Perú
2021
ii
MONOGRAFÍA
JQUERY, AJAX
Definición de jQuery, programar JavaScript con jQuery. Selección de un
elemento del documento mediante el id. Selección de elementos por el
tipo de elementos. Método text ( ), text (valor). Métodos attr (nombre de
propiedad), attr (nombre de propiedad, valor) y removeAttr (nombre de
propiedad). Métodos addClass y removeClass. Método html( ) y html
(valor). Administración de eventos con jQuery. Eventos mouseover y
mouseout. Tipos de eventos, efectos, tipos efectos, iteración, Ajax,
funciones anónimas, ejemplos y aplicaciones
Designación de jurado Resolución N° 0494-2021-D-FAC
____________________________________
Dr. Quispe Andia, Adrián
Presidente
_________________________________________
Dr. Morales Romero, Guillermo Pastor
Secretario
_______________________________________
Dra. Vargas Tumaya, Jady Luz
Vocal
Línea de investigación: Tecnología y soportes educativos

iii
Dedicatoria
Dedico el presente trabajo a mi familia, quienes
siempre son cooperantes con mis objetivos
personales, y a la vez a mis padres Juana y Segundo,
quienes son mis progenitores, y están siempre
atentos de mis traspiés y mis logros en el trajinar de
la vida.
iv
Índice de contenidos
Portada .................................................................................................................................... i
Hoja de firmas de jurado ....................................................................................................... ii
Dedicatoria............................................................................................................................ iii
Índice de contenidos ............................................................................................................. iv
Lista de figuras ..................................................................................................................... vi
Introducción ......................................................................................................................... vii
Capítulo I. Principios del jquery ............................................................................................ 9
1.1 Javascript ........................................................................................................................ 9
1.2 Definición de jquery ..................................................................................................... 11
1.3 Programar javascript con jquery ................................................................................... 13
1.4 Selección de un elemento del documento mediante el id ............................................. 20
1.5 Selección de elementos por el tipo ............................................................................... 23
Capítulo II. Métodos del jquery........................................................................................... 27
2.1 Métodos getters y setters de jquery .............................................................................. 27
2.2 Aplicación de los principales métodos de jquery ......................................................... 30
Capítulo III. Administración de eventos con jquery y ajax ................................................ 40
3.1 Administración de eventos con jquery (rappels) .......................................................... 40
3.2 Tipos de eventos ........................................................................................................... 43
3.3 Efectos y tipo de efectos ............................................................................................... 43
3.4 Ajax ............................................................................................................................... 48
3.5 Funciones anónimas ...................................................................................................... 53
Aplicación didáctica ............................................................................................................ 55
Síntesis ................................................................................................................................. 60
Apreciación crítica y sugerencias ........................................................................................ 61

v
Referencias .......................................................................................................................... 62
vi
Lista de figuras
Figura 1. Pantalla de inicio de Jquery ................................................................................. 10
Figura 2. Pantalla de inicio de Ajax .................................................................................... 50

vii
Introducción
JavaScript viene a ser un lenguaje de programación cuya finalidad es hacer páginas
web en forma complementaria al HTML y al CSS, teniendo como objetivo el obtener una
mayor interactividad y dinámica en las páginas web. Su funcionamiento también está en los
propios navegadores y en forma nativa es decir es un lenguaje interpretador y no necesita de
la compilación. Cuando mencionamos a las páginas web hay que recordar que tiene como
lenguajes llamados nativos a HTML (Híper Text Markup Language) en español seria
lenguajes de maracas de hipertexto, es la parte más básica de una página web, que trata
sobre la definición del contenido y la forma estructural de una página web, al CSS
(Cascading Style Sheets) en español seria hojas de estilo en cascada, que permite definir las
apariencia de las páginas web, como los colores, espacios, tipos de fuentes, etc., y
finalmente al JavaScript.
JQuery es una librería, utilizada mayormente y pertenece al JavaScript y permite
que en forma rápida, sencilla, eficaz y poderosa realizar diversas funciones, como la
manipulación el DOM, el manejo de eventos, realizar animaciones y permitir la utilización
de la técnica AJAX en las páginas web, entre otras funciones.
Quizás lo más importante es que es software libre y de código abierto, y permite
realizar muchas funciones en función al JavaScript, permitiendo reducir mucho código,
permitiendo lograr mejores resultados con menor tiempo y espacio.
Esta monografía está separada en tres capítulos, siendo el primero la descripción de
los principios del JQuery, el segundo capítulo trata sobre los diversos métodos que tiene
esta librería y por último en el tercer capítulo describe la administración de eventos con
JQuery y AJAX.
Espero que esta monografía pueda ser utilizada por los estudiantes de la Universidad
viii
Nacional de Educación para fines académicos y además pueda ser mejorada en las futuras
investigaciones que se realicen.

9
Capítulo I
Principios del jquery
1.1 Javascript
“El JavaScript es un lenguaje de programación del lado del cliente, que se ejecuta en el
cliente, es decir, se ejecuta en la persona de la máquina que accede al sitio, no en el
servidor” (Wagner, 2019, p. 7).
Este lenguaje se interpreta y se puede utilizar con HTML y no compilado, ya que el
navegador interpretará los códigos, a medida que se vayan produciendo las acciones del
sitio, como la validación de un formulario.
Wagner (2019) menciona que JavaScript puede controlar el comportamiento del
navegador de varias formas, esto es posible porque hay un intérprete de JavaScript alojado
en el navegador. En otras palabras, el lenguaje de programación JavaScript puedes
controlar el comportamiento del navegador en varios aspectos, como crear ventanas
emergentes, presentar mensajes al usuario, cambiar las dimensiones del navegador,
interferir con la barra de estado, eliminar menús, cerrar y abrir ventanas.
El Javascript apareció en 1995 y hoy es uno de los lenguajes de programación más
utilizados en el mundo. A diferencia de otras tecnologías (como PHP, Java, Ruby y otras),
es del lado del cliente, es decir, se ejecuta en su navegador y no en el servidor web. Su

10
propósito es controlar el HTML para manipular las páginas. Tiene una gran comunidad y
varias bibliotecas que agregan funcionalidad a su uso.
Como curiosidad, podemos agregar que si solo se tiene un navegador con el uso de
Javascript activo en un dispositivo, ya se puede construir un proyecto de sistema en
miniatura simplemente usando la URL de tu navegador, escribiendo JavaScript: alert
(Cuidado) por ejemplo, mostrando bien la importancia y dependencia del idioma
actualmente para navegadores.
Javascript es un lenguaje de programación y JQuery es un marco para JavaScript.
Javascript es muy popular y funciona en casi todos los navegadores. “El desarrollo lleva
más tiempo porque es necesario escribir el código en sí. JQuery es una biblioteca simple y
liviana que facilita el uso de documentos HTML. Desarrollo más rápido, al tener códigos
listos (bibliotecas)” (Wagner, 2019, p. 15).
Figura 1. Pantalla de inicio de Jquery. Fuente: Recuperado de https://www.google.com/urlsa/Fnor.com

11
1.2 Definición de jquery
“JQuery se denomina biblioteca o biblioteca de JavaScript. La función de una biblioteca en
informática es simplificar el uso de un determinado lenguaje de programación
proporcionando un conjunto de código listo para usar” (Reid, 2016, p. 3).
En este caso, la biblioteca JQuery consta de un conjunto de bloques de código
JavaScript prediseñados que generalmente se incluirán en métodos. Entonces solo
necesitamos llamar a estos métodos para ejecutar el código que contienen.
JQuery, por ejemplo, nos proporciona un método hide ( ) que nos permitirá ocultar
elementos en una página.
Nota: sabemos que $ es un sinónimo de JQuery, por lo tanto decir JQuery.AJAX ( )
es lo mismo que $.AJAX ( ).
Ejemplo: En HTML:
< ! DOCTYPE html >
< html >
< head >
< title > Monografía JQuery </title>
< meta charset=” utf-8”>
</head>
<body>
< h1 > Monografía JQuery </h1>
< p id=”p1” >Dar clic aquí</p>
</body>
12
</html>
En JavaScript:
$(document).ready (function ( ) {
$(“#p1”).click (function ( ) {
$(this).hide ( );
});
});
El resultado será:
Monografía JQuery
En el ejemplo anterior, usamos el método JQuery hide ( ) para ocultar el elemento
que tiene el atributo id = "p1" al hacer clic en este elemento.
Se quiere ilustrar cómo jQuery nos permitirá realizar ciertas operaciones de una
manera muy fácil.
Finalmente, debe tenerse en cuenta que jQuery no cubre todos los aspectos de
JavaScript y no ofrece una variedad de métodos para satisfacer todas las situaciones. La
biblioteca jQuery se creó para facilitar la manipulación de HTML, el manejo de eventos, la
creación de animaciones CSS y el uso de AJAX.
Por lo tanto, usar jQuery podrá ser muy ventajoso en dos niveles diferentes: por un
lado, se ahorra mucho tiempo de desarrollo utilizando las herramientas que esta biblioteca
pone a disposición y, por otro lado, estaremos seguros de la validez de nuestro codificado.
De hecho, los creadores de jQuery se encargan de la perfecta validez de su código
para todos los navegadores más utilizados.

13
Al usar jQuery, por lo tanto, ya no hay que preocuparnos por la compatibilidad
entre navegadores y las interversiones de nuestro código, ya que los creadores de jQuery
ya han pensado en este problema.
JQuery no debe verse como una alternativa a JavaScript, sino más bien como una
adición: se usara jQuery junto con el JavaScript clásico en los scripts.
Además, JQuery no reemplaza ni debe reemplazar el aprendizaje de JavaScript o
ser visto como un "atajo" para aprender JavaScript.
Al contrario para aprovechar JQuery, se recomienda tener ya un buen conocimiento
y un buen dominio del lenguaje JavaScript y su funcionamiento general.
Del mismo modo, jQuery tampoco es una solución rápida que hará todo el trabajo.
Esta biblioteca está bien hecha y es una herramienta muy poderosa, pero aún tendrá que
involucrarse y pensar para crear scripts poderosos y bien construidos.
1.3 Programar javascript con jquery
JQuery es una biblioteca de JavaScript, es decir, un conjunto de código listo para
usar. Para utilizar estos códigos, necesitaremos incluirlos de alguna manera en nuestras
páginas.
La primera forma de hacer esto será ir al sitio web oficial de jQuery y descargar la
última versión de JQuery disponible.
En la página de descarga, se le ofrecerán dos tipos de archivos: archivos
comprimidos y archivos sin comprimir.
La copia comprimida de JQuery no contiene espacios entre códigos. El objetivo es
reducir el peso total de la biblioteca para mejorar el rendimiento de su sitio. Esta es la
versión que generalmente colocaremos en nuestro sitio "en vivo" (en producción).
14
Sin embargo, para que funcione, se recomienda la versión sin comprimir, que es
una versión legible de la biblioteca (con comentarios, una buena sangría, etc.).
Esto permitirá estudiar más fácilmente, si lo desea, los scripts que componen la
biblioteca JQuery.
Cada nueva versión de JQuery generalmente solo trae correcciones menores que no
afectan el núcleo de JQuery. Además, las bibliotecas como JQuery siempre implementan
la compatibilidad con versiones anteriores, lo que significa que el código más antiguo
siempre funcionará con una versión más nueva de la biblioteca.
Una vez descargado el archivo, coloque en la misma carpeta que los archivos que
usarán esta biblioteca para mayor simplicidad.
Luego se tendrá que crear un enlace entre nuestro archivo JQuery y los archivos
que lo usarán. Para eso, usaremos un elemento de script con su atributo src.
Creamos inmediatamente un archivo HTML e incluyamos nuestro archivo JQuery
en él (el nombre de archivo JQuery puede ser diferente si descargó una versión diferente o
le cambió el nombre al archivo).
< !DOCTYPE html >
< html >
< head >
< meta charset=”utf-8”>
< script src =”JQuery3.4.1” >< /script >
< script src =”Monografia.JS” async></script >
< /head >
< body >
< h1 > Monografía JQuery</h1>

15
< p > Un párrafo escrito en HTML </p>
< /body >
< /html >
Otra forma de usar jQuery es incluirlo desde un CDN en lugar de descargar y alojar
los archivos jQuery nosotros mismos.
Una CDN (Content Delivery Network) corresponde a un conjunto de servidores
enlazados y, por tanto, formando una red cuya finalidad es dar acceso a contenidos de
forma muy rápida.
Ahora hay muchos CDN que alojan archivos JQuery, incluidos los de Google o
Microsoft. JQuery en sí también tiene su CDN a través de StackPath.
Usar un CDN en lugar de descargar y alojar sus archivos tiene dos ventajas
notables: no tener que almacenar los archivos, pero también optimizar el rendimiento de su
sitio.
De hecho, cuando un visitante busca acceder a una página de algún sitio, su
navegador descargará los recursos necesarios para mostrar la página. Cuantos más recursos
necesite una página para funcionar, más lenta será su visualización.
En el caso de incluir JQuery a través de una CDN, los archivos JQuery provienen
de una URL común (que es la de la CDN) que es potencialmente utilizada por muchos
otros sitios.
Si se ha visitado otro sitio en el pasado usando el mismo CDN para incluir el
mismo archivo, entonces es probable que el archivo todavía esté almacenado en caché del
navegador y, por lo tanto, no tener que descargarlo nuevamente, lo que hará que la página
se muestre más rápido.
Por esta razón, la mayoría de los sitios tienden a favorecer el uso de CDN cuando
se incluyen recursos externos. Por lo tanto, se debe utilizar el CDN que ofrece JQuery.
16
El código jquery, utilizará el sitio codepen.io para compartir diferentes códigos y
para que se pueda ver los resultados de los diferentes ejemplos de inmediato.
Sin embargo, en condiciones "reales", es decir cuando se trabaje en un proyecto
web, se crearan diversos archivos con un editor de texto como Visual Studio Code,
Brackets, Atom, Sublime Text o incluso Komodo.
A la hora de codificar, se considera una buena práctica separar los diferentes
módulos de un proyecto colocándolos en diferentes archivos, porque permite un
mantenimiento mucho más simple del código y porque el proyecto es mucho más
legible para el desarrollador (Firtman, 2016, p. 16).
“JQuery tiene una sintaxis básica relativamente simple, lógica e intuitiva para
personas con un buen dominio de HTML, CSS y JavaScript” (Firtman, 2016, p. 19).
Una vez que la biblioteca jQuery esté incluida en scripts, JQuery creará dos objetos
jQuery y $ que serán propiedades del objeto de ventana global.
Podremos acceder a las diferentes propiedades y métodos de la librería JQuery
usando JQuery ( ) o $ ( ).
Tener en cuenta que las dos propiedades JQuery y $ se denominan alias: esto
significa que podremos usar una u otra de manera completamente intercambiable.
La mayoría de los desarrolladores usan la propiedad $ en su lugar, ya que es más
rápido de escribir que JQuery. En esta monografía, también usaremos $.
Concretamente, por lo tanto, comenzaremos nuestros scripts de JQuery de esta
manera:
a. // Las calificaciones a continuación son todas equivalentes
b. window.jQuery ( ); // Notación con window y usa el objeto JQuery
c. jquery ( ): // Notación usando el objeto JQuery con window implícita
d. window.$ ( ); // Notación que menciona window y usa el objeto $

17
e. $ ( ); // Notación usando el objeto $ con window implícita
El JQuery es entonces un lenguaje de “consultas” de JavaScript. Usaremos JQuery
para realizar acciones en elementos HTML.
Para realizar estas acciones, por lo tanto, ya tendremos que seleccionar nuestros
elementos HTML. Aquí descubriremos una de las grandes fortalezas de JQuery: el uso de
selectores CSS. De hecho, para seleccionar un elemento HTML en JQuery, todo lo que
tenemos que hacer es mencionar el selector CSS asociado con este elemento en nuestro
método $ ( ) (o en el método jquery ( )).
Para seleccionar todos los párrafos de una página, escribiremos $ ("p") mientras
que para seleccionar solo el elemento con un atributo id = "p1", escribiremos $ ("# p1").
Podremos usar cualquier selector de CSS para apuntar a nuestros elementos HTML
en JQuery y, en particular, selectores de CSS complejos o compuestos. Esto nos permitirá
apuntar con mucha precisión a cualquier tipo de contenido HTML de una manera sencilla.
Cuando se usa la sintaxis $ (selector), JQuery en realidad devuelve un objeto
JQuery. Entonces podremos aplicar métodos o propiedades al objeto devuelto para realizar
acciones u obtener información sobre él.
“Para esto, generalmente usaremos una característica de JavaScript llamada método
de encadenamiento. Encadenar es un método simplemente significa aplicar este método
directamente al resultado del anterior. Para encadenar un método, usaremos el operador”
(Reid, 2016, p. 14).
Concretamente, nuestros códigos JQuery se verán así: $ (selector).action ( ). Aquí,
la parte $ (selector) devuelve un objeto al que se aplica el método action ( ).
Código en HTLM:
<! DOCTYPE html >
< html >
< head >
18

< /head >
< body >
< p id="p1" > Un primer párrafo escrito en HTML </p>
< p > Otro párrafo </p>
< /body >
< /html >
Código en JavaScript:
$("p").hide ( );
Resultado: Monografía JQuery
En el código anterior, comenzamos seleccionando todos los p elementos de nuestra
página con $ ("p"). Este código devuelve un objeto JQuery al que aplicamos el método
JQuery hide ( ) que se encargará de ocultar todos los párrafos de nuestra página.
Tenga en cuenta que, por supuesto, podremos encadenar varios métodos en
sucesión con la sintaxis $ (selector) .methode1 ( ). Method2 ( ). Method3 ( )... Sin
embargo, para que este tipo de código funcione, será necesario para asegurar de que cada
método devuelva un objeto para poder aplicar el siguiente método a este objeto devuelto.
La mayoría de las operaciones que se realizan en JQuery serán manipulaciones de
la estructura HTML de la página. Sin embargo, para manipular esta estructura HTML,
debe existir.
Por lo tanto, será necesario asegurarse de que el navegador haya terminado de
cargar la estructura HTML de nuestra página antes de realizar cualquier operación en
jQuery.
Para hacer esto, podemos usar el evento de carga de JavaScript para esperar a que
el documento termine de cargarse antes de realizar nuestras operaciones de JQuery. Sin

19
embargo, este método no es óptimo, ya que a menudo no es necesario esperar a que se
cargue cada elemento del documento para realizar una operación.
Aquí, por lo tanto, usaremos un evento que JQuery pone a nuestra disposición: el
evento ready. Este evento nos permitirá ejecutar nuestro código JQuery tan pronto como el
documento esté listo para ser manipulado.
Podremos utilizar este evento así:
Código en HTLM:
< !DOCTYPE html >
< html >
< head >
< /head >
< body >
< p id="p1" > Un primer párrafo escrito en HTML </p> </p>
< /body >
< /html >
// Tan pronto como el documento esté listo para ser manipulado, ejecutamos el
código dentro de nuestra función anónima
$("p").hide ( );
})
El resultado es: Monografía JQuery
Aquí, enlazamos nuestro evento listo al documento y pasamos una función de
devolución de llamada anónima a este evento.

20
El evento ready se activa tan pronto como el documento está listo para ser
manipulado y luego se ejecuta el código contenido en la función anónima.
Recuerda esta estructura es básica porque es la que usaremos y también es la se
usará a partir de entonces en todos tus proyectos de desarrollo usando JQuery.
También puede notar que jQuery nos proporciona una notación abreviada para $
(documento) ready ( ) en forma de $ ( ). Estas dos notaciones son estrictamente
equivalentes.
a. /* Tan pronto como el documento esté listo para ser manipulado, ejecutamos el código
dentro de nuestra función anónima */
b. $(document).ready (function ( ) {
c. $("p").hide ( );
d. })
e. // El siguiente código es equivalente al anterior
f. $ (function ( ) {
g. //El resultado
h. $ (“p”).hide( );
i. });
La forma corta es más rápida de escribir y generalmente es la preferida por
desarrolladores experimentados.
1.4 Selección de un elemento del documento mediante el id
Ahora, entenderemos por qué JQuery es una opción de elección para las
operaciones de manipulación de DOM HTML y presentaremos las diferentes herramientas

21
que ofrece JQuery para seleccionar, insertar, modificar o eliminar elementos o atributos así
como modificarlos
El DOM (Document Object Model) es una interfaz creada automáticamente por el
navegador cuando se carga una página HTML.
Esta interfaz ofrece una representación estructurada y jerárquica de un documento
HTML presentándolo en forma de árbol (hablamos de árbol DOM) con el elemento html
sirviendo como tronco o raíz, los elementos secundarios de html formando la primera rama
del árbol, y los descendientes de estos elementos formando ramificaciones sucesivas, etc.
El DOM es una interfaz muy interesante para un desarrollador de JavaScript ya que
podremos utilizar esta interfaz en JavaScript para acceder a los diversos contenidos
HTML de un documento y manipularlos. Esto te resultará muy útil en el caso de
que quieras modificar el contenido o la apariencia de una página a raíz de
determinadas acciones de un usuario o eventos (Lujan, 2017, p. 26).
Por ejemplo, queremos darle al usuario la posibilidad de cambiar el color de fondo
de nuestro sitio haciendo clic en un botón, o que queremos ofrecer contenido que se
desplegará colapsará con un clic: todo esto solo se va ser posible manipulando el DOM.
Manipular un documento en JavaScript no suele ser muy complejo pero a veces
puede producir resultados inesperados o, en algunos casos, obligarnos a escribir scripts
relativamente largos.
JQuery tiene como objetivo facilitarnos el acceso al DOM y manipular un
documento proporcionándonos selectores y métodos que demostrarán ser muy potentes y
muy fáciles de usar.
La selección de elementos en JQuery:

22
La forma más fácil de seleccionar elementos HTML en JQuery será usando
selectores CSS. De hecho, se recuerda que JQuery simplifica enormemente la selección de
elementos al admitir todos los selectores de CSS.
Además, JQuery también nos proporciona “pseudo-selectores” que nos permitirán
seleccionar de forma precisa y sencilla determinados elementos específicos de los
formularios HTML. En particular, podremos seleccionar elementos de entrada según el
valor de su atributo de tipo gracias al JQuery: texto ,: password ,: checkbox ,: radio ,:
submit ,: file ,: image ,: button et: reset.
JQuery también nos permite seleccionar ciertos elementos de formulario en función
de su estado. Para eso, usaremos los pseudo-selectores:
• Input para apuntar a todos los elementos de entrada, área de texto, selección y botón;
• Checked para apuntar a elementos marcados o seleccionados para tipo de entrada =
"casilla de verificación", tipo de entrada = "radio" y seleccionar elementos de lista;
• Select para apuntar a elementos de opción seleccionados en una lista de selección;
• Disable para apuntar a elementos de entrada que tienen un atributo deshabilitado;
• Renabled para apuntar a todos los elementos que no tienen el atributo deshabilitado.
Finalmente, JQuery también nos proporciona algunos métodos que nos permitirán
refinar nuestras selecciones. En particular, podemos citar los métodos has ( ), filter ( ), not
( ), first ( ), last ( ) y eq ( ) aquí.
El método JQuery has ( )
El método JQuery has ( ) nos permitirá refinar una selección seleccionando solo los
elementos de una selección inicial que tienen elementos secundarios correspondientes al
selector pasado como argumento de esta función.
Este método devuelve un objeto JQuery que contiene la sub-selección.

23
1.5 Selección de elementos por el tipo
JQuery nos permite seleccionar directamente uno o más elementos usando
selectores CSS o pseudo-selectores JQuery. Una vez realizada nuestra primera selección,
podremos refinarla con los métodos vistos en la lección anterior para seleccionar ciertos
elementos con mayor precisión.
Sin embargo, esta no es la única forma de acceder a un elemento HTML. Después
de una selección inicial, también podremos movernos o "atravesar" el DOM desde el
elemento seleccionado usando un conjunto de métodos JQuery.
Estos métodos se pueden dividir en tres grandes grupos:
• Aquellos que nos permiten llegar al elemento padre o ancestro del elemento
originalmente seleccionado;
• Aquellos que nos permiten llegar a los elementos hijo o descendientes del elemento
originalmente seleccionado;
• Aquellos que nos permiten llegar a elementos “hermanos” del elemento originalmente
seleccionado, es decir, elementos que tienen el mismo padre que este elemento.
Estos métodos pueden resultar muy útiles en el caso de que sea difícil acceder
directamente a un elemento en particular.
Acceder al elemento padre o los antepasados de un elemento en JQuery:
Los métodos parent ( ), parents ( ), parentsUntil ( ) y más cercano ( ) nos permitirán
acceder a los padres y ancestros de un elemento o una colección de elementos.
De acuerdo a H. Deitel y P. Deitel (2012) el método parent ( ) nos permite acceder
al elemento padre (es decir, el antepasado directo) de un primer elemento seleccionado o
cada padre de un conjunto de elementos seleccionados. Podremos pasarle un selector como
argumento que permite filtrar la selección y solo devolver el padre de un elemento si
corresponde al selector. El método parent ( ) proporciona acceso a todos los antepasados

24
de un elemento o grupo de elementos seleccionados. Este método funcionará de la misma
manera que parent ( ) y también aceptará un selector como argumento que servirá como
filtro.
El método parentUntil ( ) también permite acceder a los ancestros de un elemento o
conjunto de elementos hasta el ancestro correspondiente al selector que vamos a pasar
como argumento de este método.
Tener en cuenta aquí: el antepasado correspondiente al selector no se incluirá en los
resultados. Si ningún antepasado coincide con el selector pasado o si no se le da ningún
argumento a parentUntil ( ), se seleccionarán todos los antepasados de los elementos.
Podremos pasar un selector como segundo argumento de parentUntil ( ) que servirá
como filtro (se ignorarán los ancestros en el medio que no correspondan al filtro).
Finalmente, el método closest ( ) nos permitirá seleccionar el primer ancestro
correspondiente al selector que le pasaremos como argumento. Advertencia: este método
inicia su búsqueda a partir del elemento o elementos de la selección inicial. Esto significa
que si estos elementos corresponden al selector pasado en el argumento, serán
seleccionados.
Además de estos cuatro métodos, JQuery también nos proporciona un método
offsetParent ( ) que nos permitirá acceder al primer ancestro de un elemento o conjunto de
elementos que se posiciona, es decir que tiene una propiedad de posición CSS con un valor
que no sea estático.
Este método podrá resultar muy interesante para posicionar elementos en una
página o para crear animaciones que tendrán el comportamiento esperado.
Acceda a los hijos o descendientes de un elemento en JQuery:

25
Los métodos children ( ) y find ( ) nos permitirán acceder a los hijos y
descendientes de un elemento o colección de elementos previamente seleccionados en
JQuery.
El método children ( ) nos permitirá acceder a los elementos secundarios
(descendientes directos) de uno o una colección de elementos HTML. Podremos pasarle un
selector como argumento que nos servirá de filtro para permitirnos seleccionar solo los
hijos correspondientes al filtro.
El método find ( ) nos permitirá seleccionar todos los descendientes (hijos, nietos,
etc.) de un elemento o colección de elementos. Tendremos que pasar un selector como
argumento de este método el cual nos servirá como filtro para permitirnos seleccionar solo
los descendientes correspondientes al filtro.
Para apuntar a todos los descendientes de un elemento usando find ( ), simplemente
páselo el selector universal * como argumento.
Acceder a elementos hermanos de un elemento en JQuery:
JQuery también nos proporciona varios métodos que nos permiten seleccionar los
elementos hermanos de un elemento o una colección de elementos. Dos elementos son
"hermanos" si comparten el mismo padre (el mismo antepasado directo).
Explicare en forma sencilla y breve los métodos más importantes que considero se
utilizan el JQuery, aquellos que son los más utilizados y que a mi parecer son los que
usualmente están presentes en la elaboración de una página web profesional, son: siblings ( ),
next ( ), nextAll ( ), nextUntil ( ), prev ( ), prevAll ( ) y prevUntil ( ).
El método siblings ( ), en primer lugar, devolverá el conjunto de hermanos de un
primer elemento seleccionado o un primer conjunto de elementos seleccionados. Podremos
pasar un selector que actuará como filtro y nos permitirá recuperar solo los elementos
hermanos correspondientes a este como argumento de este método.

26
El método next ( ) nos permitirá recuperar el elemento hermano inmediatamente
después del elemento especificado o conjunto de elementos. También podremos pasarle un
selector como argumento que actuará como filtro: el método solo recuperará el siguiente
hermano si corresponde al selector.
El método nextAll ( ) nos permitirá recuperar todos los elementos hermanos que
siguen a un elemento o una colección de elementos. Podemos pasarle un selector para
filtrar los resultados como argumentos.
El método nextUntil ( ) recuperará todos los elementos hermanos que siguen a un
elemento o una colección de elementos hasta el elemento hermano correspondiente al
selector que se le pasará como argumento y sin incluir este elemento en los elementos
recuperados. También podremos proporcionarle otro selector como segundo argumento
que actuará como filtro.
Los métodos prev ( ), prevAll ( ) y prevUntil ( ) funcionarán de manera similar a
los métodos que se ven arriba, excepto que nos permitirán seleccionar elementos hermanos
que precedan a un elemento o una colección de elementos.

27
Capítulo II
Métodos del jquery
Entonces podremos utilizar diferentes métodos de JQuery para recuperar
información sobre estos elementos y en particular para recuperar su contenido o incluso
realizar todo tipo de manipulaciones sobre estos elementos: modificación del contenido,
estilos y dimensiones CSS o incluso eliminación de estos elementos, reemplazo por otros
elementos o agregando nuevos elementos antes o después de los elementos seleccionados.
2.1 Métodos getters y setters de jquery
En la mayoría de los lenguajes informáticos, las funciones y métodos que obtienen
o establecen información funcionan en pares llamados "getters" y "setters".
“El papel del getter es recuperar información y del setter es definir o actualizar la
información. Por convención, las funciones getter comienzan con el prefijo get, mientras
que las funciones setter comienzan con el prefijo set y permite identificarlos rápidamente”
(Lujan, 2017, p. 43).
Por ejemplo, JavaScript tiene un método getAttribute ( ) que nos permite recuperar
un atributo HTML y un método setAttribute ( ) que nos permite establecer o actualizar el
valor de un atributo para un elemento HTML.

28
JQuery funcionará de manera diferente a este modelo clásico y en la mayoría de los
casos no distinguirá entre getter y setter. De hecho, en JQuery, los métodos que permiten
obtener información también permitirán generalmente definir y actualizar esta información
y, por lo tanto, servirán tanto como getter como como setter. En general, estos métodos
actuarán como captadores cuando no se les da ningún argumento y como definidores
cuando se les da un argumento.
Cabe señalar que en el caso de que se seleccionen varios elementos diferentes a la
vez, todos los elementos de la selección se verán afectados si uno de estos métodos se
utiliza como setter, pero solo se incluirá la información relativa al primer elemento de la
selección devuelto si se usa como un captador, con la notable excepción del método text ( )
que recuperará los valores de todos los elementos de la selección.
Aquí está la lista de os principales métodos:
• html ( ): Obtiene el contenido HTML del primer elemento de una selección o define el
contenido HTML de todos los elementos de la selección;
• text ( ): le permite obtener o definir el contenido textual de todos los elementos de una
selección;
• attr ( ): Se utiliza para obtener el valor de un atributo del primer elemento de una
selección o para definir uno o más atributos para todos los elementos de la selección;
• prop ( ): Se utiliza para obtener el valor de una propiedad del primer elemento de una
selección o para definir una o más propiedades para todos los elementos de la selección;
• val ( ): Se utiliza para obtener el valor (el contenido del atributo de valor) del primer
elemento de una selección o para definir un valor para todos los elementos de la
selección;
29
• css ( ): le permite obtener el valor de una propiedad CSS para el primer elemento de una
selección o definir los valores de una o más propiedades CSS para todos los elementos
de la selección;
• height ( ): Le permite obtener la altura del cuadro de elemento del primer elemento de
una selección o definir esta altura para todos los elementos de la selección;
• innerHeight ( ): Igual que height ( ) pero incluye los mn,.-ññmárgenes internos (relleno)
en el cálculo;
• outerHeight ( ): Igual que height ( ) pero incluye los márgenes interiores (relleno), los
bordes y, opcionalmente, los márgenes exteriores (margen) en el cálculo;
• width ( ): Le permite obtener el ancho del cuadro de elemento del primer elemento de
una selección o definir este ancho para todos los elementos de la selección;
• innerWidth ( ): Igual que width ( ) pero incluye los márgenes internos (relleno) en el
cálculo;
• outerWidth ( ): Igual que width ( ) pero incluye los márgenes interiores (relleno), los
bordes y, opcionalmente, los márgenes exteriores (margen) en el cálculo;
• offset ( ): Se utiliza para obtener las coordenadas actuales del primer elemento de una
selección o para definir las coordenadas de todos los elementos de la selección en
relación con el documento;
• scrollLeft ( ): Se utiliza para obtener la posición actual de la barra de desplazamiento
horizontal del primer elemento de una selección o para definir esta posición para todos
los elementos de la selección;
• scrollTop ( ): Le permite obtener la posición actual de la barra de desplazamiento
vertical del primer elemento de una selección o establecer esta posición para todos los
elementos de la selección.
30
2.2 Aplicación de los principales métodos de jquery
El método JQuery html ( ): El método html ( ) devolverá el contenido HTML del
primer elemento de una selección si se usa sin un argumento o definirá el contenido
HTML de todos los elementos de una selección si este contenido se especifica como
argumento.
Tenemos el siguiente ejemplo:
En HTLM:
<!DOCTYPE html>
<html>
<head>
<title>Monografía JQuery</title>
<meta charset="utf-8">
</head>
<body>
<div class="Contenido">
<h1> Monografía JQuery </h1>
<p id="p1"> Un párrafo escrito en HTML</p>
<p id="p2"> Un segundo párrafo </p>
</div>
</body>
</html>
En JavaScript:
$(document).ready(function( ){
// Usamos html ( ) como getter
let page = $("body").html( );

31
let p1 = $("#p1").html( );
// Mostramos el contenido de nuestras variables en la consola
console.log ("Pág: " + page);
console.log ("p1: " + p1);
//
// Usamos html () como setter
$("#p2").html ("<strong> Nuevo contenido! </strong>");
});
Resultado:
Monografía JQuery
Un párrafo escrito en HTML
Nuevo contenido!
Comenzamos aquí apuntando nuestros elementos corporales y el párrafo con id =
"p1" y usamos el método html ( ) sin argumentos en los dos objetos JQuery devueltos que
representan nuestro elemento body y nuestro elemento p.
El método html ( ) actúa aquí como un captador y recuperará el contenido HTML
del cuerpo de la página y de nuestro primer párrafo. Ponemos los resultados devueltos por
html ( ) en dos variables let page y let p1 y mostramos sus contenidos en la consola de
JavaScript con la instrucción console.log ( ) para asegurarnos de que contienen.
Nota: para mostrar la consola, debe activar las herramientas de desarrollador en su
navegador, luego hacer clic derecho en la página y elegir inspeccionar.
Luego apuntamos al elemento con el atributo id = "p2" y usamos nuestro método
html ( ), esta vez pasándole datos como argumento. El método html ( ) actuará entonces
como un setter y modificará el contenido HTML de nuestro segundo párrafo

32
El método JQuery text ( ): El método text ( ) nos permitirá recuperar o modificar el
contenido textual de todos los elementos de una selección. Tenemos que a diferencia del
método html ( ), solo se podrá recuperar contenido textual y también podremos definir solo
contenido textual en nuestros elementos.
En HTLM:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="Contenidos">
<h1>Monografía JQuery</h1>
<p id="p1">Un párrafo escrito en HTML</p>
<p id="p2">Un<span>segundo</span> párrafo</p>
</div>
</body>
</html>
En JavaScript:
// Usamos text ( ) como getter
let texteP = $("p").text( );
//
// Mostramos el contenido de nuestra variable en la consola

33
console.log("Contenido textual de los párrafos: " + texteP);
//
//Utilizamos text ( ) como setter
//
$("#p2").text("<strong>Nuevo contenido!</strong>");
});
Como puede ver en este ejemplo, el método text ( ) recuperará el contenido textual
(y solo el contenido textual) de todos los elementos de una selección cuando se use como
un captador. Este es un caso único. Cuando se usa text ( ) como establecedor, este método
solo podrá definir contenido textual nuevo. Si intentamos pasarle el marcado HTML como
hicimos en el ejemplo anterior, las etiquetas se desactivarán y se mostrarán como texto.
Hasta ahora, hemos trabajado con elementos HTML y su contenido en JQuery.
También podremos manipular sus atributos y en particular agregar o quitar un atributo.
Método JQuery attr ( ): Permite recuperar el valor de un atributo o definir un
atributo y se utiliza el método attr ( ) para recuperar el valor de un atributo, agregar un
atributo o modificar el valor de un atributo ya existente.
Para recuperar el valor de un atributo, usaremos attr ( ) pasándole el nombre del
atributo cuyo valor queremos recuperar como argumento. Este método actuará entonces
como un captador y devolverá el valor del atributo del primer elemento de nuestra
selección solamente.
Para actualizar el valor de un atributo o definir un nuevo atributo, pasaremos el
atributo en cuestión como el primer argumento de attr ( ) y su valor asociado (nuevo) como
el segundo argumento. Si el atributo ya existía, se actualizará su valor. Si no existiera, se
agregará a cada elemento de nuestra selección.
En HTLM:
34
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="contenido">
<h1> Monografía JQuery</h1>
<p id="p2"> Otro párrafo </p>
</div>
<p> Un párrafo fuera del div </p>
<p>Un <a href="https://www.pierre-
iraud.com">enlace</a> a mi sitio </p>
<span id="valAttr"></span>
</body>
</html>
En JavaScript:
$(document).ready(function(){
// Devuelve el valor del primer id de un párrafo encontrado
let pid = $("p").attr("id");
// Muestra el valor de la identificación recuperada en nuestra identificación de
intervalo ="valAttr"
document.getElementById("valAttr").textContent = "Valor de 1er id de p : "

35
pid;
// Agregue un atributo de destino a nuestro enlace
$("a").attr("target","_blank");
});
Resultados:
Otro párrafo
Un párrafo fuera del div
Un enlace a mi sitio
Valor de 1er id de p : p1
El método removeAttr ( ): Para eliminar un atributo, podremos utilizar el método
removeAttr ( ) pasándole como argumento el nombre del atributo que queremos eliminar.
Del mismo modo, usaremos removeProp ( ) para eliminar una propiedad de una selección
de elementos.
En HTLM:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="Contenido">

36
<p id="p2">Otro párrafo</p>
</div>
<p> Un párrafo fuera del div </p>
<p>Un <a href="https://www.pierre-giraud.com">enlace</a> a mi
sitio</p>
</body>
</html>
En JavaScript:
$("a").removeAttr("href");
});
Resultado:
Monografía de JQuery
Otro párrafo
Un párrafo fuera del div
Un enlace a mi sitio
Finalmente, JQuery nos proporciona una serie de métodos que nos permitirán
manejar específicamente los atributos de la clase.
El Métodos hasClass( ): Permitirá determinar si al menos uno de los elementos de
una selección tiene un determinado atributo de clase o no. Tendremos que pasar el nombre
de la clase que buscamos como argumento de este método. Devolverá verdadero si la clase
se encuentra falsa de lo contrario.
El Métodos addClass( ): Permite agregar una o más clases a una selección de
elementos. Pasaremos las clases para agregar como argumentos.

37
El método removeClass( ): Por el contrario, nos permitirá eliminar una, varias o
todas las clases de cada elemento de una selección. Si usamos este método sin argumentos,
se borrarán todas las clases de los elementos de la selección. Si especificamos una o más
clases como argumento, solo se eliminarán estas clases.
El método toggleClass( ): Permitirá agregar una o más clases a cada elemento de
una selección si estos elementos no tienen estas clases o por el contrario eliminar estas
clases si los elementos las tienen. Toggle significa alternar o alternativo"
En HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="b1"> Cambiar a azul </button>
<button id="b2">Toggle</button>
<div class="Poster">
<p>Un primer párrafo</p>
<p> Un segundo párrafo </p>
</div>
<p id="p3"> Tercer párrafo de div </p>
</body>
</html>
En JavaScript:
38
// Al hacer clic en # b1 ...
$("#b1").click(function(){
//Si #p3 no tiene una clase="azul", agregamos una
If (!$ ("#p3").hasClass("azul")){
$("#p3").addClass("azul");
$(".azul").css("color", "azul");
});
// Al hacer clic en # b2 ...
$("#b2").click (function ( ){
$("div").toggleClass("ocultar mostrar ");
//Aplicamos hide( ) a los elementos que tiene class="cacher"
$(".cacher").hide( );
//Aplicamos show() a los elementos que tienen un class="afficher"
$(".afficher").show();
});
});
Resultados:
Cambiar a azul:
Un primer párrafo
Un segundo párrafo
Tercer párrafo de div
Toggle:
Tercer párrafo de div

39
En el ejemplo anterior, usamos el método jQuery click () que nos permite manejar
el evento del mismo nombre. Al hacer clic en el primer botón, si nuestro tercer párrafo no
tiene una clase azul, agregamos una y cambiamos el color del texto de los elementos con
esta clase.
Al hacer clic en el segundo botón, agregamos las clases ocultar y mostrar al div si
no las tiene o las eliminamos si las tiene. Las dos clases actúan de forma independiente
aquí: si el div tiene solo una, se eliminará y se agregará la segunda. Luego aplicamos el
método hide ( ) a los elementos con una clase hide y show ( ) a aquellos con una clase
display.
40
Capítulo III
Administración de eventos con jquery y ajax
3.1 Administración de eventos con jquery (rappels)
Administración de eventos con JavaScript: Un evento corresponde a una acción
que podremos interceptar y a la que podremos reaccionar. Un evento es una señal que
indica que “algo acaba de suceder”.
Estas acciones generalmente provendrán del propio navegador o de los usuarios.
Los eventos load y DOMContentLoaded, por ejemplo, que se activan cuando se carga la
página completa o cuando se carga el DOM de la página mientras que el evento de clic se
activa cuando un usuario hace clic en un elemento de la página.
Cuando se produce una acción de este tipo, se dice que se activa el evento asociado
con la acción. Entonces podremos "escuchar" o "interceptar" el evento y responder
indicando qué hacer en una función de administrador de eventos.
“La gestión de eventos es una de las características principales y esenciales de
JavaScript, ya que los eventos agregarán dinamismo a nuestras páginas al permitirnos
responder a ciertas acciones” (Joyanes, 2011, p. 48).
En JavaScript, podremos gestionar eventos de tres formas diferentes:
• Usando los atributos de eventos HTML;

41
• Mediante el uso de controladores en línea de tipo "on-event";
• Usando el método addEventListener ( ).
Dependiendo de la situación, preferiremos usar un método u otro, aunque
generalmente es bastante recomendable usar addEventListener ( ) que nos permite manejar
eventos de manera eficiente y que nos ofrece muchas características.
Nuestros controladores de eventos serán devoluciones de llamada, es decir,
funciones (generalmente anónimas) que solo se llamarán cuando se active el evento que
están manejando.
Administración de eventos con JQuery: JQuery simplificará el manejo de eventos
al proporcionarnos una serie de métodos que podemos usar para manejar nuestros eventos.
Estos métodos recibirán el nombre del evento al que reaccionan, como click ( ),
mouseenter ( ), keyup ( ), change ( ), etc. y de hecho son notaciones abreviadas del método
jQuery on ( ) que nos permitirá manejar múltiples eventos dentro de la misma función de
administrador de eventos.
La función del administrador de eventos será una función anónima que pasaremos
como argumento de nuestros métodos. Se llamará cuando el evento (o cuando los eventos)
ocurran (se envíen).
Por ejemplo, podremos administrar un evento de clic en un párrafo cambiando el
texto de este párrafo cuando el evento ocurre así:
En HTLM:
<!DOCTYPE html>
<html>
<head>
<title>Cours jQuery</title>
42
</head>
<body>
<p> Haz clic aquí </p>
</body>
</html>
En JavaScript:
$(document).ready(function( ){
$("p").click(function( ){
$(this).text("Párrafo donde se dio clic ");
});
/* Código equivalente usando en ( )
$("p").on ("click", function(){
$(this).text ("Párrafo donde se dio clic ");
})
*/
*/
});
Tenga en cuenta que a los efectos del manejo de eventos, esto se refiere al elemento
que inició el evento, es decir, el elemento donde se desencadenó el evento. Como puede
ver, usar el método jQuery on ( ) recuerda mucho al método JavaScript addEventListener (
).
43
Tenga en cuenta también que el método on ( ) solo puede crear de forma
predeterminada un controlador de eventos para los elementos que existen cuando se
configura el controlador. Si crea un controlador de eventos con on ( ) y luego crea un
elemento, el controlador de eventos no se aplicará a ese elemento.
3.2 Tipos de eventos
JQuery simplificará el manejo de eventos al proporcionarnos una serie de métodos
que podemos usar para manejar nuestros eventos, los cuales tienen diferentes tipos de
denominaciones.
Estos métodos recibirán el nombre del evento al que reaccionan, como click ( ),
mouseenter ( ), keyup ( ), change ( ), etc. y de hecho son notaciones abreviadas del método
jQuery on ( ) que nos permitirá manejar múltiples eventos dentro de la misma función de
administrador de eventos.
La función del administrador de eventos será una función anónima que pasaremos
como argumento de nuestros métodos. Se llamará cuando el evento (o cuando los eventos)
ocurran (se envíen).
3.3 Efectos y tipo de efectos
JQuery nos proporciona una serie de métodos que nos permitirán crear efectos y
animaciones, a menudo modificando dinámicamente los estilos CSS de los elementos
HTML específicos.
Estos métodos llevan el nombre de los efectos que le permitirán configurar, como
el método hide ( ) para ocultar contenido, veremos los métodos que JQuery nos da para
crear efectos de fondos y slide.

44
Crea efectos de fondo en JQuery: Un "fondo o desvanecimiento" es la desaparición
o aparición gradual de un elemento. Por tanto, es un efecto de la transición de un estado a
otro. JQuery nos proporciona cuatro métodos para crear efectos de desvanecimiento:
• El método fadeOut ( );
• El método fadeIn ( );
• El método fadeTo ( );
• El método fadeToggle ( ).
Estos métodos realmente jugarán con el valor de la propiedad de opacidad del
elemento objetivo, aumentando gradualmente este valor de 1 a 0 (completamente opaco a
completamente transparente) o viceversa. Tan pronto como la opacidad llega a 0, se aplica
un display: none al elemento para que desaparezca por completo de la página. Más
específicamente, el método fadeOut ( ) nos permitirá ocultar los elementos objetivo
haciéndolos progresivamente transparentes mientras que el método fadeIn ( ) producirá el
efecto contrario, es decir, mostrará gradualmente los elementos ocultos haciéndolos
opacos.
El método fadeToggle ( ) nos permitirá invertir el estado de visibilidad de un
elemento, haciendo aparecer gradualmente un elemento oculto al inicio o por el contrario
haciendo desaparecer gradualmente un elemento opaco al inicio con un efecto de
desvanecimiento. El método fadeTo ( ), finalmente, nos permitirá definir un nivel umbral
de opacidad (entre 0 y 1) que el elemento deberá alcanzar de forma paulatina. Si el
elemento es inicialmente más transparente que este nivel, gradualmente se volverá turbio y
viceversa.
Podremos pasar hasta tres argumentos a los métodos fadeOut ( ), fadeIn ( ) y
fadeToggle ( ): la duración de la transición, la función de aceleración que se debe utilizar
para realizar la transición y una función de devolución de llamada que se ejecutará una vez
45
completada la transición. El método fadeTo ( ) podrá admitir hasta 4 argumentos
agregando el nivel de opacidad como segundo argumento.
En cuanto a la duración de la transición, podremos especificar un número de
milisegundos que debe durar el efecto o utilizar las palabras clave lento o rápido. A modo
de información, lento es 600 ms y rápido es 200 ms de tiempo de efecto. La duración
predeterminada del efecto es de 400 ms. Con respecto a la función de aceleración que debe
usarse para lograr el efecto, JQuery solo admite swing, que es el predeterminado y lineal,
lo que creará una transición suave. Ejemplo:
En HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Titulo principal</h1>
<button id="b1">fadeOut()</button>
<button id="b2">fadeIn()</button>
<button id="b3">fadeToggle()</button>
<button id="b4">fadeTo()</button>
</body>
</html>
En JavaScript:
46
// Desaparición del título en 400ms al hacer clic en # b1
$("#b1").click(function(){
$("h1").fadeOut();
});
// Aparición del título en 2 segundos al hacer clic en # b2
$("#b2").click (function ( ) {
$("h1").fadeIn (2000);
});
//*
// Inversión del estado de visibilidad de h1 con efecto de desvanecimiento
// Aparición del título en 2 segundos al hacer clic en # b3
$("h1").fadeToggle (2000);
});
// Desvanecerse a un cierto nivel de opacidad (0.3 aquí)
$("h1").fadeTo (2000, 0.3);
});
});
Crea efectos de diapositiva en JQuery: También nos proporciona métodos que nos
permitirán crear efectos de diapositiva. Por "deslizamiento" entendemos aquí el hecho de
que un elemento se despliega o se pliega gradualmente. Este efecto será interesante en la
creación de un menú desplegable. Para crear este tipo de efecto, podremos elegir entre tres
métodos:
47
• El método slideDown ( );
• El método slideUp ( );
• El método slideToggle ( ).
El método slideDown ( ) nos permitirá "desplegar" un elemento gradualmente
mientras que el método slideUp ( ) tendrá el efecto contrario y nos permitirá "plegar" un
elemento gradualmente. El método slideToggle ( ) nos permitirá desplegar
progresivamente un elemento plegado o por el contrario plegar gradualmente un elemento
desplegado.
Estos tres métodos aceptarán hasta tres argumentos que serán del mismo tipo que
los anteriores: una duración, una función de aceleración y una función de devolución de
llamada que se ejecutará cuando finalice el efecto.
Ejemplo:
En HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Titulo principal</h1>
<button id="b1">slideUp ( ) </button>
<button id="b2">slideDown ( ) </button>
<button id="b3">slideToggle ( ) </button>
</body>
48
</html>
En JavaScript:
$(document).ready(function ( ) {
// Dobla el título en 400ms al hacer clic en # b1
$("h1").slideUp ( );
});
// Despliegue el título en 2 segundos al hacer clic en # b2
$("h1").slideDown (2000);
});
// Despliegue el título si está doblado o dóblelo si está desplegado
$("h1").slideToggle (2000);
});
});
3.4 Ajax
Definamos lo que significa AJAX de acuerdo a mi parecer el autor más relevante:
El término AJAX es la abreviatura de JavaScript y XML asíncronos, AJAX no es
un lenguaje de programación sino que corresponde a un conjunto de técnicas que utilizan
diversas tecnologías para comunicarse con el servidor (en particular enviar y recuperar
datos) de forma asíncrona, es decir sin tener que recargar la página. Antes del uso del
código asincrónico y AJAX, cualquier acción del usuario (enviar o solicitar datos)
49
resultaba en la carga de una nueva página desde el servidor. Este proceso fue ineficiente,
lento y desagradable para el usuario (Wagner, 2019, p. 39).
Esta situación llevó a la creación de un objeto llamado XMLHttpRequest que
permite a los navegadores comunicarse con el servidor sin necesidad de recargar la página.
Este objeto ha estado en el corazón de AJAX durante años y todavía se usa ampliamente
en la actualidad. Cuando se fundó, AJAX utilizó las siguientes tecnologías que le dieron su
nombre:
• XML para intercambio de datos con el servidor;
• El objeto XMLHttpRequest para comunicación asincrónica;
• JavaScript para mostrar datos dinámicamente y permitir al usuario interactuar con
nueva información;
• HTML y CSS para la presentación de datos.
Hoy en día, XML se ha abandonado en gran medida en favor de JSON (JavaScript
Object Notation), que es una notación que permite intercambiar datos de forma
relativamente simple mientras que el objeto XMLHttpRequest está dando paso lentamente
a la nueva API.
“AJAX” o más bien “Ajax” es hoy un término genérico utilizado para designar
cualquier técnica en el lado del cliente (lado del navegador) que permite enviar y recuperar
datos de un servidor y actualizar dinámicamente el DOM sin requerir una actualización
completa de la página.
50
Figura 2. Pantalla de inicio de Ajax. Fuente: Recuperado de https://www.google.com/urlsa/ajax-jquery
Ajax y JQuery: Las solicitudes Ajax se activan mediante código JavaScript: de
manera muy amplia, enviamos una solicitud al servidor y configuramos controladores de
eventos con funciones de devolución de llamada para procesar la respuesta devuelta. Sin
embargo, debido a que Ajax usa tecnologías diferentes, la implementación de un
navegador a otro puede ser diferente y, por lo tanto, el mismo código puede causar
comportamientos diferentes.
JQuery proporciona soporte Ajax aquí que se supone que armoniza estas
diferencias y hace que nuestras consultas se ejecuten de la misma manera en todos los
navegadores. JQuery nos proporciona un método global $.ajax ( ) y métodos como $.get (
), $.getScript ( ), $.getJSON ( ) o $.post ( ) para realizar nuestras diversas operaciones.
Métodos de envío y formato de datos: Los dos métodos más comunes para enviar
una solicitud a un servidor son GET y POST.
Usaremos GET para realizar operaciones no destructivas, es decir, para solicitudes
en las que simplemente recuperamos datos del servidor sin modificarlos.
Por el contrario, utilizaremos POST para realizar operaciones destructivas, es decir,
para solicitudes cuya finalidad sea modificar datos almacenados en el servidor.

51
Al enviar una solicitud, generalmente debe especificar en qué formato desea recibir
la respuesta del servidor. Podremos elegir entre los siguientes formatos:
• text = permite transportar cadenas de caracteres;
• html = le permite transportar bloques de código HTML que se colocarán en la página;
• script = le permite agregar scripts a la página;
• json = permite transportar datos en formato JSON (cadenas, matrices u objetos);
• jsonp = le permite transportar datos en formato JSON desde otro dominio;
• xml = utilizado para transportar datos en formato XML.
Generalmente usaremos JSON (JavaScript Object Notation) porque es el formato
más flexible. JSON es particularmente útil cuando desea enviar HTML y otros datos al
mismo tiempo.
El método JQuery $.ajax ( ): Está en el corazón de la creación de consultas Ajax
con JQuery y, por lo tanto, es importante comprender cómo funciona.
Este método tomará un objeto de configuración como argumento. Este objeto de
configuración debe contener todas las instrucciones (u "opciones") que JQuery necesita
para completar nuestra solicitud, incluida la URL de la solicitud, el tipo de solicitud, el
tipo de datos esperados, etc.
Podremos pasar una gran cantidad de opciones a $.ajax ( ) con el fin de
proporcionar instrucciones más o menos específicas en relación con nuestra solicitud. Las
opciones más utilizadas son:
• url: URL de la solicitud. Única opción estrictamente obligatoria;
• método (valor predeterminado: GET): le permite especificar el método de envío de la
solicitud (GET, POST o, más raramente, PUT, DELETE, etc.);

52
• dataType: el tipo de datos que se espera en respuesta del servidor. De forma
predeterminada, JQuery examinará el tipo MIME de la respuesta si no se especifica
ningún tipo de datos;
• datos: Contiene los datos para enviar al servidor. Si estos datos no están en formato de
cadena, se convertirán en una cadena;
• asincrónica (valor predeterminado: verdadero): se utiliza para indicar si la solicitud
debe devolverse de forma asincrónica (verdadero) o sincrónica (falso);
• caché (valor predeterminado: verdadero a menos que el tipo de datos definido sea script
o jsonp): se utiliza para indicar si se debe usar una respuesta almacenada en caché si
está disponible (verdadero) o no (falso);
• beforeSend: le permite definir encabezados personalizados;
• contexto: se utiliza para especificar el contexto en el que se deben ejecutar las funciones
de devolución de llamada. De forma predeterminada, el contexto es un objeto que
representa la configuración de Ajax utilizada durante la llamada;
• nombre: nombre de usuario que se utilizará en caso de que se realice una solicitud de
identificación HTTP;
• contraseña: contraseña que se utilizará en caso de que se realice una solicitud de
identificación HTTP;
• timeout: tiempo de espera en milisegundos antes de considerar la solicitud como un
error.
Comencemos por hacer una solicitud GET relativamente simple:
En JavaScript:
$.ajax ({
// La URL de la solicitud.
53
url: “une/url/fac/choix”,
// El método de envío (tipo de solicitud)
Method: “GET”,
// El formato de respuesta esperado
dataType : “json”,
});
});
Una vez enviada la solicitud, queremos recuperar la respuesta del servidor y
atender los diferentes casos de éxito o fracaso de esta solicitud. Aquí, debe saber que el
método $ .ajax ( ) devuelve un objeto jqXHR cuyo comportamiento es similar a un objeto
XMLHttpRequest y que implementa la interfaz Promise. Esto nos permitirá encadenar
diferentes manejadores a una solicitud y en particular los manejadores done ( ) fail ( ) y
always ( ).
El método done ( ) generalmente contendrá una función de devolución de llamada
que se ejecutará si la solicitud es exitosa. Esta función recibe los datos de respuesta
(convertidos a un objeto JavaScript si el tipo de datos es JSON),
El método fail ( ) también contendrá una función de devolución de llamada que se
ejecutará si la solicitud no tiene éxito.
3.5 Funciones anónimas
Las funciones anónimas son, como sugiere su nombre, funciones que no tendrán
nombre. De hecho, cuando creamos una función, no tenemos que darle un nombre por sí.
Generalmente, usaremos funciones anónimas cuando no necesitemos llamar a nuestra
función por su nombre, es decir, cuando el código de nuestra función solo se llame en un
lugar de nuestro script y no se reutilice.

54
En otras palabras, las funciones anónimas muy a menudo nos permitirán ahorrar un
poco de tiempo en escribir nuestro código y (aunque esto es discutible) aclararlo al no
contaminarlo con nombres innecesarios.

55
Aplicación didáctica
Sesión de clase N° 01
I.-Datos generales:
Curso : Computación
Tema : Uso del JQuery
Grado y sección : 5to. “B”
Docente : Ventura Bautista, Jesús Natividad
Duración : 60 Minutos
Capacidades Metas
Aprendizajes esperados • Definición de JQuery
• Permite realizar aplicaciones
Actitud • Respeta las normas de seguridad
II.- Tema transversal: Educación para el trabajo
III.- Estrategia metodológica:
Momentos Actividad Método/Técnica Tiempo

Propiciar interés sobre el tema Expositivo/ Narrativo 10 min.
Inicio mostrando páginas web.
Se definen las características

principales del JQuery
Se estructura una página web con Inductivo/ deductivo
JavaScript. 30 min.
Proceso Se realizan aplicaciones interactivas Explicativo/
del JQuery. demostrativo
Los estudiantes realizan aplicaciones Evaluación/practica en 20 min.
Salida como practica calificada. laboratorios
IV.- Evaluación:
Capacidad de área: Ejecución de procesos

56
Indicadores Técnicas Instrumentos

Definición de la librería JQuery.
Realiza páginas web con aplicaciones Evaluación de procesos Prueba escrita
JQuery Ficha de observación
Actitudes y valores Responsabilidad Instrumentos
Cumple las normas de seguridad al
realizar las prácticas.
Demuestra responsabilidad en la Calificación de participación Lista de cotejo
ejecución de las actividades de
aprendizajes
V.- Recursos:
• Computadora
• Instalador de programa JQuery.
• USB
VI.- Bibliografía:
Deitel, H. y Deitel, P. (2004). Como programar en JavaScript y JQuery. Quinta Edición,
Pearson educación
Joyanes, L. (1998). Programación Orientada a Objetos, 1ra. Edición, Mc Graw Hill.

57
Guía de laboratorio
Aplicaciones en jquery
Todos los navegadores web modernos incluyen de forma nativa información para procesar
muchas funciones básicas de JavaScript, que permiten funcionalidades elementales.
JQuery es una librería que contiene otras funcionalidades adicionales, que nos permiten
agregarle a las páginas mucha más interacción y efectos.
Explicare lo más elemental del JQuery y mostrare el código, que también se puede
descargar para experimentar offline.
Como usar JQuery en páginas web:
El primer requisito para usar JQuery es agregar la librería, que podemos cargar desde su
principal repositorio o desde otros CDN de internet.
A continuación debemos de insertar dentro de un elemento SCRIPT, las instrucciones de la
siguiente forma:
<script>
$(function () {
// Instrucciones de JQuery
});
</script>
En esta página mostrare un ejemplo usando el evento (desencadenador) "click" en un
botón.
<button id="c1">Ocultar bloque</button>
También se puede emplear en enlaces, bloques (DIV) o en otros elementos HTML,
siempre que se les agregue un identificador (ID).
Es posible también usar otros eventos como dblclick, hover (posicionar el cursor del
mouse encima), keypress, keyup, focus y otros.

58
La sintaxis básica es la siguiente:
<script>
$("selector inicio").evento (function ( ) {
$("selector destino").funcion o método (atributo)
});
</script>
Donde:
✔ Selector de inicio es quien inicia la acción.
En JQuery se pueden usar como selectores elementos HTML como a (enlaces) h1, h2, etc.
También clases usando (.nombre) e identificadores (#nombre).
✔ Evento puede ser click, hover, etc.
✔ Selector de destino es el que identifica el elemento a modificar.
✔ Las funciones o métodos son quienes finalmente ejecutan la tarea y los atributos son
opcionales en algunos casos.
En la siguiente imagen se puede ver de forma gráfica el uso de cada elemento.

59
Ficha de evaluación
Grado: 5° de secundaria
Profesor:
Conocimiento: Lenguaje de Programación JavaScript con JQuery
Indicadores: Aplica en páginas web librerías JQuery
Realiza aplicaciones
Lista de cotejo
N° Indicadores/Puntaje A B C Nota
de estudiantes 1 2 3 4 1 2 3 4 1 2 3 4
1
2
3
4
5
6
Escala valorativa:
1. Nunca
2. A veces
3. Casi siempre
4. Siempre
60
Síntesis
JavaScript viene a ser un lenguaje de programación cuya finalidad es hacer páginas
web en forma complementaria al HTML y al CSS, teniendo como objetivo el obtener una
mayor interactividad y dinámica en las páginas web. Su funcionamiento también está en
los propios navegadores y en forma nativa es decir es un lenguaje interpretador y no
necesita de la compilación.
Cuando mencionamos a las páginas web hay que recordar que tiene como lenguajes
llamados nativos a HTML (Híper Text Markup Language) en español seria lenguajes de
maracas de hipertexto, es la parte más básica de una página web, que trata sobre la
definición del contenido y la forma estructural de una página web, al CSS (Cascading
Style Sheets) en español seria hojas de estilo en cascada, que permite definir las apariencia
de las páginas web, como los colores, espacios, tipos de fuentes, etc. Y finalmente al
JavaScript.
JQuery es una librería, utilizada mayormente y pertenece al JavaScript y permite
que en forma rápida, sencilla, eficaz y poderosa realizar diversas funciones, como la
manipulación el DOM, el manejo de eventos, realizar animaciones y permitir la utilización
de la técnica AJAX en las páginas web, entre otras funciones.
Quizás lo más importante es que es software libre y de código abierto, y permite
realizar muchas funciones en función al JavaScript, permitiendo reducir mucho código,
permitiendo lograr mejores resultados con menor tiempo y espacio.

61
Apreciación crítica y sugerencias
JQuery es una realidad para muchas personas y lo más importante es que se puede
hacer las cosas de una manera mucho más fácil y estar seguro de que funcionará desde IE7
hasta el Firefox más moderno, y esta seguridad es muy buena para aquellos que no quieren
perder tiempo estudiando.
Los desarrolladores que usan la biblioteca y quieren que sus páginas web sean
accesibles, a menudo buscan soluciones alternativas, como complementos o incluso
versiones modificadas de la biblioteca principal (no oficial) que resuelven tales problemas.
Estos complementos se insertan fácilmente en el código principal, donde la mayoría de las
veces solo necesita importar el código JavaScript y el código CSS.
Para realizar trabajos futuros, se sugiere analizar más elementos de la biblioteca
para obtener un resultado más profundo en cuanto a su accesibilidad, para realizar un
análisis más profundo de los elementos de la biblioteca (verificando el código fuente ),
realizar pruebas utilizando el prototipo creado con usuarios de lectores de pantalla, utilizar
una mayor variedad de lectores de pantalla y sistemas operativos (por ejemplo, Linux y
Mac OS) y finalmente, analizar el funcionamiento de la biblioteca en teléfonos inteligentes
y tabletas, que son plataformas cada vez más utilizado para acceder a las páginas web.
62
Referencias
Breña, R. (2013). Lenguajes Formales y Autómatas. México. Editorial OSCA.
Brian, P. (2015). HTML5 and CSS3 Develop with Tomorrow's Standards Today. USA.
Ed: Pragmatic Bookshelf. Recuperado de http://shop.orelly.com/product/
Brookshear, J. (1998). Teoría de la Computación, Lenguajes formales, Autómatas y
Complejidad Addison. USA. Ed. Wesley Iberoamericana.
Carter, J.(2015). HTML5 Mobile Web Development - Ed: O'Reilly. Recuperado de
http://shop.oreilly.com/product/
Centro de Inteligencia Artificial. (1999). Instituto Tecnológico y de Estudios Superiores
de Monterrey, Campus Monterrey. Capítulos 2, 3, 4, 6, 7.
Deitel, H. y Deitel, P.(2012). Como programar en JavaScript. México. Editorial.
PEARSON Educación. Cuarta edición.
Firtman, M., (2016). JQuery Mobile: Up and Running. – USA. Ed: O'Reilly Recuperado
de http://oreilly.com/catalog/0636920014607
Joyanes, L. (2011). Programación en JavaScript: Metodología, Algoritmos y estructura de
Datos. España. Editorial Mc Graw Hill Segunda edición.
Lujan, S. (2017). Programación en Internet: Clientes Web. Colombia. Ed: Editorial Club
Universitario.
Monreal, J. (2007). El Mundo de la Computación. Madrid, España. Tomo 3 Y 4 Editorial,
Jl OCEANO.
Reid, J. (2016). Manual de JQuery Mobile – Estados Unidos. Editorial O'Reilly
Wagner, G. (2019). Creación de aplicaciones web con JavaScript. México. Editorial
McGraw Hill.

Monografía - Ventura Bautista Jesus Natividad - Fac

Cargado por

Copyright:

Formatos disponibles

Monografía - Ventura Bautista Jesus Natividad - Fac

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Monografía - Ventura Bautista Jesus Natividad - Fac

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD NACIONAL DE EDUCACIÓN

Enrique Guzmán y Valle

Examen de Suficiencia Profesional Resolución N° 0494-2021-D-FAC

Para optar al Título Profesional de Licenciado en Educación

Designación de jurado Resolución N° 0494-2021-D-FAC

Línea de investigación: Tecnología y soportes educativos

Dedico el presente trabajo a mi familia, quienes

siempre son cooperantes con mis objetivos

personales, y a la vez a mis padres Juana y Segundo,

quienes son mis progenitores, y están siempre

atentos de mis traspiés y mis logros en el trajinar de

Hoja de firmas de jurado ....................................................................................................... ii

Índice de contenidos ............................................................................................................. iv

Lista de figuras ..................................................................................................................... vi

Introducción ......................................................................................................................... vii

Capítulo I. Principios del jquery ............................................................................................ 9

1.1 Javascript ........................................................................................................................ 9

1.2 Definición de jquery ..................................................................................................... 11

1.3 Programar javascript con jquery ................................................................................... 13

1.4 Selección de un elemento del documento mediante el id ............................................. 20

1.5 Selección de elementos por el tipo ............................................................................... 23

Capítulo II. Métodos del jquery........................................................................................... 27

2.1 Métodos getters y setters de jquery .............................................................................. 27

2.2 Aplicación de los principales métodos de jquery ......................................................... 30

Capítulo III. Administración de eventos con jquery y ajax ................................................ 40

3.1 Administración de eventos con jquery (rappels) .......................................................... 40

3.2 Tipos de eventos ........................................................................................................... 43

3.3 Efectos y tipo de efectos ............................................................................................... 43

3.4 Ajax ............................................................................................................................... 48

3.5 Funciones anónimas ...................................................................................................... 53

Aplicación didáctica ............................................................................................................ 55

Apreciación crítica y sugerencias ........................................................................................ 61

Figura 1. Pantalla de inicio de Jquery ................................................................................. 10

Figura 2. Pantalla de inicio de Ajax .................................................................................... 50

JavaScript viene a ser un lenguaje de programación cuya finalidad es hacer páginas

propios navegadores y en forma nativa es decir es un lenguaje interpretador y no necesita de

JQuery es una librería, utilizada mayormente y pertenece al JavaScript y permite

manipulación el DOM, el manejo de eventos, realizar animaciones y permitir la utilización

de la técnica AJAX en las páginas web, entre otras funciones.

Quizás lo más importante es que es software libre y de código abierto, y permite

realizar muchas funciones en función al JavaScript, permitiendo reducir mucho código,

permitiendo lograr mejores resultados con menor tiempo y espacio.

Esta monografía está separada en tres capítulos, siendo el primero la descripción de

investigaciones que se realicen.

Principios del jquery

cliente, es decir, se ejecuta en la persona de la máquina que accede al sitio, no en el

servidor” (Wagner, 2019, p. 7).

Este lenguaje se interpreta y se puede utilizar con HTML y no compilado, ya que el

sitio, como la validación de un formulario.

Wagner (2019) menciona que JavaScript puede controlar el comportamiento del

en el navegador. En otras palabras, el lenguaje de programación JavaScript puedes

controlar el comportamiento del navegador en varios aspectos, como crear ventanas

emergentes, presentar mensajes al usuario, cambiar las dimensiones del navegador,

interferir con la barra de estado, eliminar menús, cerrar y abrir ventanas.

El Javascript apareció en 1995 y hoy es uno de los lenguajes de programación más

es del lado del cliente, es decir, se ejecuta en su navegador y no en el servidor web. Su

varias bibliotecas que agregan funcionalidad a su uso.

Javascript activo en un dispositivo, ya se puede construir un proyecto de sistema en

miniatura simplemente usando la URL de tu navegador, escribiendo JavaScript: alert