Jquery

Alerta:

Antes de continuar, es absolutamente necesario dejar claro que jQuery no es un lenguaje, sino que una librería de JavaScript. O sea, un compilado de órdenes de JavaScript, por lo que es necesario que manejes y entiendas como funciona y se escribe JavaScript. Básicamente poder identificar 5 elementos:

Funciones

Variables

Condicionales

Matrices

Bucles

Si no estás seguro, te sugiero repasar y estudiar el manual de JavaScript antes de continuar.

Objetivo del capítulo:
Entender el contexto y objetivos de la librería jQuery y su implementación en un proyecto Web.

¿Qué es una librería?

Una librería es un compilado de código, una base para el desarrollo de aplicaciones, que contiene funciones preestablecidas y debidamente documentadas.

En el caso de una librería para Javascript, es un marco de rutinas comunes de los sitios Web, selección y monitoreo de objetos del DOM, eventos, animación y por sobre todo AJAX.

La principal ventaja del uso de librerías es que no es necesario hacer programaciones que distingan su comportamiento según browser, que es una de las trabas históricas en el desarrollo con Javascript puro y que requiere la implementación de muchas líneas de código.

jQuery es un compilado de Javascript para el desarrollo de páginas Web interactivas que nace el 2006 para facilitar la interacción con los elementos del DOM de un documento Web. Es de libre distribución y de código abierto. Es sencillo en su uso, de bajo peso y se han desarrollado una gran cantidad de plugins, extendiendo las capacidades de la libería.

Funciona en todos los navegadores modernos y está enfocado en la programación no obstructiva, o sea, que no interfiere con la estructura del documento, sino que las acciones se generan por el monitoreo de los eventos en los objetos del documento.

El objetivo es simplificar la aplicación de funcionalidades de Javascript que de otra manera requerirían de mucho código y tiempo de desarrollo. De hecho, la bajada de jQuery en su promoción es "write less, do more", literalmente traducido como "escribe menos, haz más".

Tiene una excelente documentación y una comunidad muy organizada y dispuesta a ayudar.

Todas estas características han hecho que jQuery sea una de las librerías de mayor uso en la Web actual, aunque jQuery no es la única librería, hay varias más, cada una con sus ventajas, desventajas y especializaciones, como por ejemplo: Moment.js, Anime.js, Chart.js, Hammer.js, Glimmer.js, D3.js, MathJS.

La gran diferenciación de jQuery con el resto, probablemente tiene que ver con la curva de aprendizaje, la documentación y la comunidad de desarrolladores que permanentemente están aportando mejoras a la librería directamente o a través de plugins.

Objetivo del capítulo:
Entender las 3 preguntas básicas para escribir y usar jQuery en nuestros proyectos, así como conocer las funciones básicas de la librería.

Carga de la librería

Antes de comenzar, necesitamos incorporar a nuetro documento la librería para que podamos acceder a sus funcionalidades.

Hay dos maneras de implementar jQuery en un proyecto Web. Se puede descargar y adjuntarlo en nuestro proyecto de manera local, o podemos vincularnos a una distribución CDN (Content Delivery Network) en línea.

Ya hablaremos de las ventajas y desventajas cuando entendamos las dos opciones.

Descarga

JQuery está actualmente en su versión "3.7.1" y si bien antes se distribuía incluyendo o no versiones obsoletas de browsers (explorer sobre todo) la filosofía del equipo de desarrollo es que ya no es necesario desarrollar y mantener las dos versiones, si no que sacar una totalmente nueva (limpiando bugs y correcciones de las versiones anteriores) pensando sólo en los browser modernos, o sea:

Internet Explorer: 9+
Chrome, Edge, Firefox, Safari: Current and Current - 1
Opera: Current
Safari Mobile iOS: 7+
Android 4.0+.

Se puede descargar la última versión desde la página Web de los creadores: http://jquery.com/download/

En ésta página tenemos una opción antes de descargar: versión para desarrollo o para producción?.

Salvo la relación con el debuger, ambas tienen exactamente las mismas funcionalidades y mismos contenidos, pero la versión de producción elimina las tabulaciones, espacios, y saltos de línea haciendo un archivo más liviano (menos de 87K) y por lo tanto más eficiente para los sitios al aire o en producción. Esta se la puede distinguir rápidamente ya que tiene la extensión "min.js", que viene de "minified", o sea minificado o achicado.

La versión de desarrollo o sin comprimir, por otro lado, pesa casi 267K (entre más pesado, más se demora en bajar al navegar). Tiene por objetivo que podamos ver y entender el contenido de la librería, parte de la filosofía Open Source, abriendo la posibilidad para estudiarlo e incluso, modificarlo si fuera necesario.

Una vez descargada la opción que se ajuste a nuestro proyecto, mi sugerencia es guardarlo en un directorio que se llame "js" en la raíz del sitio, aunque puede llamarse de cualquiera manera, "js" ocupa pocas letras en las rutas de nuestros archivos y queda muy claro su contenido.

Nota:
Sugiero aplicar la misma regla para los otros complementos de nuestra página: css, img, etc.

El siguiente paso es vincularlo en nuestro documento HTML para poder utilizarlo. Para esto vinculamos la librería jQuery que descargamos igual como se vincula cualquier otro archivo externo de Javascript en la cabecera del documento.

Ejemplo:

<html>
<head>
<title>mi página</title>
<script src="js/jquery.min.js"></script>
</head>

Nota:
Hay que recordar que a partir de la aparición de HTML5 ya no es necesario declarar el tipo de contenido del archivo vinculado en los parámetros de la etiqueta "script" como se hacía antes.

Ejemplo:

<script src="js/jquery.min.js"></script>

Vinculación

La segunda manera es vincular a un servidor externo que distribuya jQuery o CDN (Content Delivery Network). Esta opción tiene 3 características ventajosas a considerar:

Uso del caché: Es posible que nuestro usuario haya visitado un sitio que haya hecho la vinculación, por lo que está fresco en memoria caché y el tiempo de reacción es menor ya que lo tiene en local y no de manera remota.
Simultaneidad de conexiones del navegador: Los navegadores Web tienen la característica que permiten la descarga simultánea desde URL de dominios distintos, aumentando la velocidad de bajada de una página (en la mayoría de los Browser más de 2 servidores simultáneos). Por lo que mientras baja la estructura del documento, al mismo está bajando de otro servidor si no lo tiene en Cache.
Ubicación del servidor: Por otro lado, la empresas que ofrecen este tipo de servicio, por lo general, tienen varios servidores dedicados y es probable que uno de ellos esté más cerca de nuestro usuario por lo que el tiempo de respuesta es menor gracias a la proximidad.

Hay varios proveedores de servicio CDN, partiendo por el mismo jQuery.com, pero también se puede optar por el de Google, Microsoft (que se ha acercado mucho a jQuery últimamente) u otros.

Ejemplo:

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Microsoft

Ejemplo:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.js"></script>

Cloudeflare

Ejemplo:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Jsdeliver

Ejemplo:

<script src="/npm/jquery@3.7.1/dist/jquery.js"></script>

Google

Ejemplo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Nota:
Entre los 5 ejemplos anteriores, el servidor de Google parece ser el que tiene más usuarios y mejor tiempo de respuesta.

Ejemplo de uso

Bien, ahora que ya tenemos vinculado a nuestro archivo en desarrollo la librería de jQuery, ya sea local o vinculado a un servidor CDN, necesitamos comenzar a utilizarlo.

jQuery es no obstructivo por definición, esto quiere decir que no vamos a incluir en la estructura HTML los llamados a Javascript, si no que generaremos "observadores" en la memoria RAM sobre objetos de nuestro documento. Por lo tanto, es buen idea poner nuestra programación al final del documento, antes de terminar el </body>., cuando ya se haya terminado de cargar la página:

Ejemplo:

<script>
$(document).ready(function( ){
	alert('hola mundo');
});
</script>

Nota:
Salvo raras excepciones, jQuery siempre comienza con las líneas del ejemplo anterior.

jQuery es básicamente un lenguaje de consulta (query en inglés), donde sea usa el método JQUERY( ) o su alias "$( )" para poder seleccionar o afectar un elemento DOM o CSS de nuestra página Web. Como es un lenguaje de consulta, básicamente necesitamos, casi siempre, despejar 3 preguntas: quién?, cuándo?, qué?.

Sabiendo esto, analicemos un poco el código anterior.

Como el objetivo principal es poder manipular los elementos del DOM de nuestro documento, tenemos que esperar a que todo la estructura haya descargado completamente en el navegador. Por eso se define que: cuando el objeto "$(document)" (documento en inglés), en el evento que esté ".ready( )" (listo), puede comenzar la siguiente "function( )" (función ), y abre un bloque de acción para que pongamos la programación de nuestra acción, en este caso: levantar una ventana de alerta con el texto "hola mundo".

Nota:
Se ocupa ready( ) y no load( ), ya que necesitamos conocer la estructura del documento y no esperar a que termine de cargar imágenes o iframes que estén incrustados en la página, que es lo que pasaba con load( ) y por lo que quedó deprecado en jQuery1.8.

En resumen:

Seleccionamos un objeto (quién?), en este caso el documento document.
Preguntamos por su evento (cuándo?), en este caso cuando esté ready( ).
Le asignamos la acción (qué?), en este caso asignamos una function( ).

Bajo la misma premisa de nuestro primer script, podemos monitorear todos los objetos en el DOM de nuestra página esperando un evento para realizar una acción. Revisemos cada una de estas opciones.

Bien, lo primero es poder seleccionar elementos de nuestro documento, y así como en la vida real hay muchas maneras de llamar la atención de una persona, por su Nombre, por su Apellido, por su género o por su rango, etc., con Javascript lo podemos hacer, también, de muchas maneras, por su ID, por su clase, por su etiqueta, etc.

Si en Javascript seleccionamos un objeto por su ID con la función "getElementById( )"

Ejemplo:

document.getElementById('id_del_objeto');

Con jQuery es más corto ya que partimos preguntando -cuando el document esté ready- por lo que asume que todo lo que pongamos dentro de la "function( )" siempre estará hablando con el documento y no lo tenemos que declarar de nuevo. Y en vez de"getElementBy..." se ocupa simplemente "$( )".

Ejemplo:

$('#id_del_objeto')

Seleccionar por ID

Si te fijas en el ejemplo anterior, el método jQuery sigue las mismas reglas de CSS para hablar con los elementos de una página. De esta forma si queremos seleccionar un objeto por su ID, entonces usamos el carácter gato "#".

Ejemplo:

$("#miID")

Seleccionar por su clase

Si quisiéramos seleccionar uno o más elementos por su clase, entonces usamos el carácter punto "." igual que en CSS.

Ejemplo:

$(".miClase")

Seleccionar por su etiqueta

Si queremos seleccionar uno o varios elementos por su etiqueta, entonces simplemente la enunciamos, por ejemplo, si queremos seleccionar todos los párrafos de nuestro documento usaremos la etiqueta "p".

Nota:
No se agregan los caracteres "<" y ">" ya que asume que se refiere a las etiquetas y no la letra P.

Ejemplo:

$("p")

Seleccionar por su atributo

También, al igual CSS, podemos seleccionar objetos por sus atributos, encerrando entre los caracteres corchete cuadrado "[ ]" el valor del atributo que buscamos. Si queremos seleccionar, por ejemplo, todas los elementos que tiene el atributo "src" (la imágenes).

Ejemplo:

$("[src]")

O si queremos seleccionar de un formulario el input que tiene el "name" apellido.

Ejemplo:

$("input[name='apellido']")

Seleccionar por su pseudo clase

También podemos tomar los elementos por su pseudo clase. Por ejemplo podemos seleccionar el primer párrafo del div con el ID "container".

Ejemplo:

$("div#container p:first")

Seleccionar por especificidad

También podemos seleccionar todos los elementos por su especificidad en la estructura (igual que en CSS). Por ejemplo, si queremos seleccionar todos los elementos de una lista no ordenada que tengan la clase "destacado", pero no otros "destacados" en el documento podemos construir la trayectoria de su anidación como en el ejemplo siguiente.

Ejemplo:

<h2 class="destacado">Subtítulo</h2>
<div id="lista">
 <ul>
 <li>elemento 1</li>
 <li>elemento 2</li>
 <li class="destacado">elemento 3</li>
 <li>elemento 4</li>
 </ul>
</div>

Para agarrar sólo el elemento de la lista que tenga la clase destacados tenemos que construir una cadena con la ruta.

Ejemplo:

$("#lista ul li.destacado")

Si alguna programación requiere aplicarse a 2 o más objetos de la página, podemos llamarlos separándolos por coma, al igual que en css.

Ejemplo:

$("#lista, .destacados, label, input[type='text']")

En jQuery los eventos son de dos tipos: del usuario, cuando él realice alguna acción, o del programador, gatillándose en la línea de tiempo.

Así como en Javascript esperamos un evento del mouse sobre un objeto con "onClick", por ejemplo, o de teclado con "onkeyDown", en jQuery también tenemos el evento "on( )".

Ejemplo:

$("p").on("click", function( ){
 //la programación va aquí.
});

Nota:
Aquí es donde se destaca lo no obstructivo de jQuery ya que no se aplica la programación "en" el objeto, sino que monitorea el objeto y espera por el evento desde la memoria RAM.

Cómo el evento es la segunda gran pregunta de jQuery, además de "on( )", jQuery tiene una serie de alias un poco más fácil de usar ya que simplifica el momento en que queramos que reaccione nuestra programación.

Ejemplo:

$("p").click(function( ){
 //la programación va aquí.
});

Revisemos algunos de los alias los más usados:

Eventos del mouse

Eventos del mouse
Evento	Descripción
`click()`	Enlaza un controlador de eventos para el evento "click" de la tecla derecha del mouse.
`dblclick()`	Enlaza un controlador de eventos para el evento "doble click" de la tecla derecha del mouse.
`mouseenter()` / `mouseleave()`	Enlaza un controlador de eventos para el evento en el que el cursor "entra encima" del objeto o lo abandona.
`hover()`	Enlaza un controlador de eventos para el evento en el que el cursor "pasa por encima" del objeto.

Estos eventos van a reaccionar cuando el usuario interactúa con los elementos de un documento con el mouse.

.click( )

Enlaza un controlador de eventos para el evento "click" de JavaScript, o sea cuando el usuario presiona el mouse sobre el objeto.

Ejemplo:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <p>primera línea</p>
    <p>segunda línea</p>
    <p>tercera línea</p>
<script>

$(document).ready(function( ){
 $("p").click(function( ){
	  alert("Has hecho click sobre la " + $(this).html());
	});
});

 </script>
</body>
</html>

Nota:
$(this) hace referencia al objeto evaluado. Ojo con las anidaciones, ya que el objeto evaluado puede variar.

evento_click

.dblclick( )

Enlazar un controlador de eventos para el evento "onDblClick" de JavaScript, o sea cuando el usuario presiona dos veces el mouse sobre el objeto.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<p>primera línea</p>
<p>segunda línea</p>
<p>tercera línea</p>
<script>

$(document).ready(function( ){
 $("p").dblclick(function( ){
	  alert("Has hecho doble click sobre la " + $(this).html());
	});
});

 </script>
</body>
</html>

evento_dbclick

.mouseenter( ) / .mouseleave( )

Enlaza un controlador de eventos para el evento "onMouseOver" de JavaScript o "onMouseOut", o sea cuando el usuario pasa el mouse sobre el objeto o el mouse ya no está sobre el objeto.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.caja {
	width: 200px;
	height: 200px;
	background-color: #888484;
	border: 8px solid #000;
	margin: 20px;
	cursor: pointer;
	padding: 10px;
	text-transform: capitalize;
	font-size: 24px;
}
</style>
</head>
<body>
<div class="caja"></div>
<script>

$(document).ready(function( ){
 $(".caja").mouseenter(function( ){
	  $(this).html("ahora está");
	}).mouseout(function(){
	  $(this).html("ahora no");
	});
});

 </script>
</body>
</html>

evento_mouseenter-mouseout

Este es un buen ejemplo de el encadenamiento (Chaining en inglés) de eventos sobre un mismo objeto. Si te fijas, en el ejemplo anterior, al elemento "$(".caja")" le amarramos dos eventos, uno después del otro.

.hover( )

Enlazar un controlador de eventos para el evento "onMouseOver y onMouseOut" de JavaScript, o sea reacciona ante los dos eventos, cuando el usuario posa el mouse sobre el objeto y cuando ya no está con el mouse sobre el objeto.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.caja {
	width: 200px;
	height: 200px;
	background-color: #888484;
	border: 8px solid #000;
	margin: 20px;
	cursor: pointer;
	padding: 10px;
	text-transform: capitalize;
	font-size: 24px;
}
</style>
</head>
<body>
<div class="caja"></div>
<script>

$(document).ready(function( ){
 $(".caja").hover(function( ){
	  $(this).html("ahora está");
	},function(){
	  $(this).html("ahora no");
	});
});

 </script>
</body>
</html>

evento_hover

afecta el atributo de la etiqueta html

Estos eventos van a reaccionar cuando el usuario interactúa con los elementos de un documento con el teclado.

Eventos del teclado
Evento	Descripción
`keydown()` / `.keyup()`	Enlazar un controlador de eventos para cuándo una tecla baje o suba.

.keydown( ) / .keyup( )

Enlazar un controlador de eventos para el "onKeyDown" de JavaScript o "onKeyUp", o sea reacciona cuando el usuario presiona una tecla o cuando el usuario suelta una tecla.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<form>
 <input type="text" id="mensaje" disabled>
 <input type="text" name="nombre" id="nombre" placeholder="Escriba su nombre">
</form>
<script>

$(document).ready(function( ){
 $("#nombre").keydown(function(e){
	  $("#mensaje").val("Tecla abajo");
	}).keyup(function(){
	  $("#mensaje").val("Tecla arriba");
	});
});

 </script>
</body>
</html>

evento_keydown-keyup

Eventos de formulario

Eventos de formulario
Evento	Descripción
`submit()`	Enlaza un controlador de eventos para cuando se envía un formulario.
`select()`	Enlaza un controlador de eventos para cuando se selecciona un contenido de campo de formulario.
`change()`	Enlaza un controlador de eventos para el evento en que un campo select de formulario.
`focus()` / `blur()`	Enlaza un controlador de eventos para el evento de tener el cursor en un campo de formulario o cuando deja de tenerlo.
`input()`	Enlaza un controlador de eventos cuando el usuario activa cualquier tecla en un campo de formulario.

Estos eventos van a reaccionar cuando la interacción es con un elemento de formulario.

.submit( )

Enlazar un controlador de eventos para el evento "onSubmit" de JavaScript, o sea reacciona cuando el formulario se envía. Se puede anexar directamente al formulario o al botón submit del formulario.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<form id="miFormulario">
 <input type="text" name="nombre" id="nombre" placeholder="Escriba su nombre">
 <input type="submit" value="enviar">
</form>
<script>

$(document).ready(function( ){
 $("#miFormulario").submit(function(e){
	  e.preventDefault( );
	  alert($("#nombre").val( ));
	});
});

 </script>
</body>
</html>

evento_submit

Nota:
"preventDefault( )" es más eficiente que "return false" para cuando no queremos que se gatille la acción predeterminada del objeto, o sea, el envío de los datos del formulario al servidor en este caso.

.select( )

Enlazar un controlador de eventos para el evento "onSelect" de JavaScript, o sea reacciona cuando se selecciona texto de un campo de formulario.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<form id="miFormulario">
 <input type="text" name="nombre" id="nombre" value="Caperucita Roja">
 <input type="submit" value="enviar">
</form>
<script>

$(document).ready(function( ){
 $("#nombre").select(function(e){
	  alert("Ha seleccionado el contenido del campo Nombre");
	});
});

</script>
</body>
</html>

evento_select

.change( )

Enlazar un controlador de eventos para el evento "onChange" de JavaScript, o sea reacciona cuando se cambia una selección.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<form id="miFormulario">
 <input type="text" name="nombre" id="nombre" value="Caperucita Roja">
 <input type="submit" value="enviar">
</form>
<script>

$(document).ready(function( ){
 $("#nombre").change(function(e){
	  alert("Ha modificado el contenido del campo Nombre");
	});
});

 </script>
</body>
</html>

evento_change

.focus( ) / .blur( )

Enlaza un controlador de eventos para el evento "onFocus" de JavaScript o "onBlur", o sea reacciona cuando se hace foco en el objeto de formulario, o sea al seleccionarlo o cuando el objeto de formulario ya no está a foco o seleccionado.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div id="mensaje">El campo nombre no está a foco</div>
<form id="miFormulario">
 <input type="text" name="nombre" id="nombre" value="Caperucita Roja">
 <input type="submit" value="enviar">
</form>
<script>

$(document).ready(function( ){
 $("#nombre").focus(function(e){
	  $("#mensaje").html("Ha hecho foco en el campo nombre");
	}).blur(function(){
	  $("#mensaje").html("El campo nombre ya no está a foco");
	});
});

 </script>
</body>
</html>

evento_focus-blur

Eventos del documento o ventana

Estos eventos van a reaccionar según el comportamiento del documento o ventana.

Eventos del documento o ventana
Evento	Descripción
`ready()`	Enlaza un controlador de eventos para cuando esté cargado e interpretado el objeto DOM.
`resize()`	Enlaza un controlador de eventos para cuando el objeto cambia de tamaño.
`scroll()`	Enlaza un controlador de eventos para cuando el objeto hace scroll.
`focus()` / `blur()`	Enlaza un controlador de eventos para el evento de tener el cursor en un campo de formulario o cuando deja de tenerlo.

.ready( )

Enlazar un controlador de eventos para el evento "onLoad" de JavaScript, o sea reacciona cuando la página termine de descargar la estructura DOM y no necesariamente todos sus contenidos como ".load( )" lo hacía antes de que lo deprecaran.

Ejemplo:

<script>

$(document).ready(function( ){
 alert("Hola mundo");
});

</script>

evento_ready

.resize( )

Enlazar un controlador de eventos para el evento "onResize" de JavaScript, o sea reacciona cuando se reajusta el tamaño de la ventana de browser.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<p id="mensaje"> Cambie el tamaño de la ventana</p>
<script>

$( window ).resize(function( ) {
 alert("Se ha cambiado el tamaño de la ventana.");
});

 </script>
</body>
</html>

evento_resize

.scroll( )

Enlazar un controlador de eventos que reacciona cuando un objeto usa el scroll.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div id="lipsum" style="width:200px; height:200px; overflow:scroll;">
 <p>Donec neque mauris, ullamcorper eu sapien in, eleifend tempor sapien. Integer sollicitudin, ipsum quis semper rhoncus, 
 nisi augue vehicula dui, eget rutrum libero metus vel nibh. Mauris id gravida dui. Praesent tempus felis ac diam hendrerit, sit 
 met fringilla lorem finibus. Aenean finibus erat varius, consequat nulla eu, fringilla ipsum. Fusce maximus id magna sed malesuada. 
 Nulla augue sem, egestas non molestie ac, facilisis a sapien. </p>
 <br>
</div>
<script>

$(document).ready(function( ){
 $("#lipsum").scroll(function(e){
	  alert("Está desplazando la barra de scroll");
	});
});

 </script>
</body>
</html>

evento_scroll

Nota:
Aquí se han listado los eventos más utilizados, se puede encontrar una lista completa de los eventos en http://api.jquery.com/category/events/

Ahora que ya seleccionamos un objeto y esperamos el evento, necesitamos agregar la acción. Podemos manipular elementos, agregar efectos, recorrer la estructura del documento o para hacer AJAX, entre muchas cosas.

Contenido

Bien, ahora que ya sabemos tomar uno o varios elementos en nuestra página en un evento determinado, lo siguiente es afectar el elemento, ya sea para averiguar su contenido, agregar uno nuevo o modificarlo (ya sea en su contenido o estructura).

En los ejemplos anteriores hemos usado ".html( )" y ".val( )", ahora veamos que significan.

Funciones de Contenido
Función	Descripción
`html()`	Esta función permite obtener el contenido HTML de un objeto, o establecer uno nuevo.
`text()`	Esta función permite obtener el contenido texto de un objeto o establecer uno nuevo.
`val()`	Esta función está orientada en tomar el valor de un campo de formulario o modificarlo.
`attr()`	Esta función permite averiguar o modificar cualquier atributo de las etiquetas HTML.
`removeAttr()`	Esta función permite remover un atributo de las etiquetas HTML.
`data()`	Esta función permite averiguar o modificar cualquier atributo "data" de las etiquetas HTML.

.html( )

Esta función permite obtener el contenido HTML de un objeto, o establecer uno nuevo. Es similar al innerHTML, o sea "escribe entremedio de las etiquetas HTML seleccionadas".

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<p id="este"><a href="#">elemento lista 3</a></p>
<script>

$(document).ready(function( ){
 alert($("#este").html( ));
 $("#este").html("<strong>Este es el nuevo valor</strong>");
});

</script>
</body>
</html>

accion_html

Cuando ejecutamos esta página, al terminar de cargarse el documento, la primera orden es levantar una ventana de alerta con el contenido del elemento "este":

<a href="#">elemento lista 3</a>

La segunda asigna la frase "Este es el nuevo valor" en lugar de "<a href="#">elemento lista 3</a>", en negritas ya que tiene las etiqueta "<strong>" como parte de los elementos a sustituir.

.text( )

Esta función es similar a la anterior, pero no considera las etiquetas HTML al preguntar por su valor. Al asignar un nuevo valor, convierte cualquier etiqueta HTML que pongamos en sus caracteres especiales para ser interpretados. Si seguimos con el mismo ejemplo anterior,

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<p id="este"><a href="#">elemento lista 3</a></p>
<script>

$(document).ready(function( ){
 alert($("#este").text( ));
 $("#este").text("<strong>Este es el nuevo valor</strong>");
});

</script>
</body>
</html>

accion_text

La primera orden de alert muestra sólo el texto "elemento lista 3" sin las etiquetas de anchor o vinculación que hay dentro del párrafo "<a href="#">elemento lista 3</a>".

La segunda acción introduce el texto "<strong>Este es el nuevo valor</strong>", pero a diferencia de la función ".html( )", estas etiquetas las convierte en caracter especial HTML y no las interpreta el browser como tal.

Por ejemplo si queremos ver las etiquetas HTML que componen un párrafo, podemos usar estas dos funciones .html( ) y .text( ) para hacerlo visible.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<p>Este es un párrafo con algunas etiquetas HTML5, tiene <strong>negrita</strong>, <em>italic</em>, <ins>subrayado</ins> y <del>tachado</del></p>
<script>

$(document).ready(function( ){
	let codigo = true;
$("p").click(function( ){
	 if(codigo){
		 $(this).text($(this).html( ));
		 codigo=false;
	 } else {
		 $(this).html($(this).text( ));
		 codigo=true;
	 }
 });
});

</script>
</body>
</html>

accion_html-text

.val( )

Esta función está orientada en tomar el valor de un campo de formulario o modificarlo.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<form id="miFormulario">
 <input type="text" name="nombre" id="nombre" value="Caperucita Roja">
 <input type="submit" value="enviar">
</form>
<script>

$(document).ready(function( ){
 $("#miFormulario").submit(function(e){
	  e.preventDefault( );
	  alert($("#nombre").val( ));
	  $("#nombre").val("Nuevo valor");
	});
});

 </script>
</body>
</html>

accion_val

En este ejemplo primero detenemos la acción predeterminada del "submit( )", que es enviar los datos al servidor, con la función "preventDefault( )". Después, levantamos una ventana de alerta con el valor del elemento que tiene el ID = nombre. Inmediatamente después de cerrar la ventana de alerta, vuelve a buscar el elemento que tiene el ID = nombre y le cambia su valor (el atributo value) por "Nuevo valor".

.attr( )

Esta función permite averiguar o modificar cualquier atributo de las etiquetas HTML en nuestro documento.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<img id="gatito" src="images/gatito.jpg" alt="gatito" width="259" height="194"/>
<script>

$(document).ready(function( ){
 $("#gatito").click(function( ){
	  if($(this).attr("src")=='images/gatito.jpg'){
		  $(this).attr("src",'images/gatito2.jpg');
	  } else {
		  $(this).attr("src",'images/gatito.jpg');
	  }
	});
});

 </script>
</body>
</html>

accion_attr

Nota:
.attr() afecta el atributo de la etiqueta html, mientras que .prop() cambia la propiedad para el elemento en la estructura del DOM una vez interpretado.

En este ejemplo estamos aplicando la doble capacidad de la función "attr( )" de poder preguntar por un valor o poder modificarlo.

Primero preguntamos si el atributo "src" (source) es igual a "images/gatito.jpg'', si es igual, ocupamos la misma función para que la etiqueta "img" apunte su "src" a una nueva dirección. Si no es igual a "images/gatito.jpg", entonces definimos que esa es su nueva dirección. En el fondo estamos alterando una imagen por otra del mismo tamaño.

.removeAttr( )

Esta función permite remover cualquier atributo de las etiquetas HTML en nuestro documento.

Ejemplo:

<!doctype html>
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <style>
        #caja {
         width: 200px;
         height: 200px;
         border: 10px solid #090;
         cursor: pointer;
        }
        </style>
    </head>
    <body>
        <div id="caja" style="background-color: rgb(200, 11, 11); border-color: rgb(11, 11, 200);"></div>
    <script>
    $(document).ready(function( ){
        $("#caja").click(function( ){
            $(this).removeAttr("style");
        });
    });
    </script>
    </body>

</html>

accion_removeAttr

En este ejemplo estamos aplicando removeAttr() para eliminar el atributo "style" del objeto "caja".

Como ya no tiene el estilo en línea que determinaba el color de fondo y el borde, toma los valores definidos en los estilos para el objeto cn el id "caja".

.data( )

Éste método de jquery nos permite interactuar con los atributos "data" de las etiquetas HTML para acceder a su valor

Los atributos "data" de HTML se crearon para poder tener valores en cualquier etiqueta al que se puede acceder con JS. está compuesto por "data-" y el nombre del contenedor que necesitamos

Alerta:
El nombre de los contenedores data no puede tener Mayúsculas.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="caja" data-valorcaja="2" >1</div>
<script>

$(document).ready(function( ){
 $(".caja").click(function( ){
	  alert($(this).data('valorcaja'));
	});
});

 </script>
</body>
</html>

accion_data

En este ejemplo, cuando se haga "click" sobre el elemento con la clase "caja", va a levantar una ventana de alerta con el valor que tiene la caja en data-valorcaja, que es "2".

Ejercicio:

Alimentar dinámicamente, desde un formulario, con opciones y campos libres, el sujeto, los verbos, los adjetivos calificativos, el sustantivo y la idea de la oración presente en el documento: "Juan se sentía solo, volvía a su departamento, y el silencio era el único que lo esperaba. Juan estaba triste, Juan estaba solo, muy solo. Y Juan tuvo una brillante idea: "

Estilos

CSS está presente en JQuery desde los principio, ya lo vimos en la adopción de los caracteres para poder seleccionar los objetos en la página.

Está considerado también en las dos modalidades de su uso: la asignación de clases a los objetos, o a definición de estilos en línea.

Funciones para agregar o eliminar
Función	Descripción
`addClass()`/`removeClass()`	Agrega o elimina una clase al objeto seleccionado.
`toggleClass()`	Agrega o elimina una clase al objeto seleccionado.
`css()`	Afecta los estilos de el objeto seleccionado.

.addClass( ) / .removeClass( )

Estas funciones permiten agregar o remover uno o más clases que hayamos definido en nuestros estilos.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#caja {
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	cursor: pointer;
	margin: 20px;
	padding: 10px;
	float: left;
}
.rojo{
	background-color: #900;
}
.verde{
	background-color: #090;
}
</style>
</head>
<body>
<div id="caja" class="rojo"> </div>
<script>

$(document).ready(function(){
	$("#caja").click(function(){
		$(this).removeClass();
		$(this).addClass('verde');
	});
});

</script>
</body>
</html>

accion_addClass-removeClass

.toggleClass( )

Toggle detecta si la clase señalada existe en el elemento. Si existe la remueve, si no, la agrega como clase.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#caja {
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	cursor: pointer;
	margin: 20px;
	padding: 10px;
	float: left;
}
.rojo{
	background-color: #900;
}
.verde{
	background-color: #090;
}
</style>
</head>
<body>
<div id="caja" class="rojo"> </div>
<script>

$(document).ready(function(){
	$("#caja").click(function(){
		$(this).toggleClass('verde')
	});
});

</script>
</body>
</html>

accion_toggleClass

.css( )

Por otro lado, tenemos la función "css( )" que permite afectar inline con estilos de CSS cualquier objeto seleccionado de nuestro documento.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#caja {
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	cursor: pointer;
	margin: 20px;
	padding: 10px;
	float: left;
	background-color:#900;
}
</style>
</head>
<body>
<div id="caja"> </div>
<script>

$(document).ready(function(){
	$("#caja").hover(function(){
		$(this).css('background-color', '#090');
	},function(){
		$(this).css('background-color', '#900');
	});
});

</script>
</body>
</html>

accion_css

Una característica es que podemos, también, mandar varios parámetros dentro de una matriz.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#caja {
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	cursor: pointer;
	margin: 20px;
	padding: 10px;
	float: left;
	background-color:#900;
}
</style>
</head>
<body>
<div id="caja"> </div>
<script>

$(document).ready(function(){
	$("#caja").hover(function(){
		$(this).css({'background-color':'#090','border-color':'#009'});
	},function(){
		$(this).css({'background-color':'#900','border-color':'#000'});
	});
});

</script>
</body>
</html>

accion_css2

Ejercicio:

Destacar los fondos de el sujeto, los verbos, los adjetivos calificativos, el sustantivo de la oración presente en el documento desde 4 botones: "David se sentía triste, volvía a su escritorio, y el silencio era el único que lo esperaba. David estaba complicado, David estaba solo, muy solo. Y David tuvo una brillante idea: replantear el ejercicio."

Agregar y eliminar elementos

Con jQuery podemos agregar elementos en nuestra página que originalmente no existían o eliminar alguno que exista.

Funciones para agregar o eliminar
Función	Descripción
`append()` / `prepend()`	Agrega contenido al principio del elemento seleccionado o al final del elemento seleccionado.
`after()` / `before()`	Agrega contenido después del elemento seleccionado o antes del elemento seleccionado.
`remove()`	Elimina el elemento seleccionado y todos los hijos en su estructura.
`empty()`	Elimina todos los hijos de el elemento seleccionado.
`clone()`	Genera una copia, o clone, del objeto seleccionado.

.append( ) / .prepend( )

Agrega contenido al principio del elemento seleccionado o al final del elemento seleccionado, pero siempre dentro del objeto seleccionado.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<p>Este es un párrafo.</p>
<script>

$(document).ready(function( ){
	$("p").click(function( ){
		$("p").prepend(" <strong>Este texto va antes.</strong> ");
		$("p").append(" <strong>Este texto va después.</strong> "); 
	});
});

</script>
</body>
</html>

accion_append-prepend

Nota:
Existe la variación de append() y prepend() que permite apuntar hacia un elemento appendTo( ) y prependTo( ) y no sólo desde un elemento. Ej: $("h1").prependTo("section");

.after( ) / .before( )

Agrega contenido después del elemento seleccionado o antes del elemento seleccionado.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<p>Este es un párrafo.</p>
<script>

$(document).ready(function( ){
	$("p").click(function( ){
		$("p").before(" <strong>Este texto va antes.</strong> ");
		$("p").after(" <strong>Este texto va después.</strong> "); 
	});
});

</script>
</body>
</html>

accion_after-before

Nota:
Existe la variación de before( ) y after() que permite apuntar hacia un elemento insertBefore() o insertAfter() y no sólo desde un elemento. Ej: $("h1" ).insertBefore("section");.

.remove( )

Elimina el elemento seleccionado y todos los hijos en su estructura.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div id="lista">
 <ul>
 <li>Elemento de lista 1</li>
 <li class="sobra">Elemento de lista 2</li>
 <li>Elemento de lista 3</li>
 </ul>
</div>
<script>

$(document).ready(function( ){
	$("#lista").click(function( ){
		$("#lista").remove( );
	});
});

</script>
</body>
</html>

accion_remove

.empty( )

Elimina todos los hijos de el elemento seleccionado, pero no el elemento mismo.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div id="lista">
 <ul>
 <li>Elemento de lista 1</li>
 <li class="sobra">Elemento de lista 2</li>
 <li>Elemento de lista 3</li>
 </ul>
</div>
<script>

$(document).ready(function( ){
	$("#lista").click(function( ){
		$("#lista").empty( );
	});
});

</script>
</body>
</html>

accion_empty

.clone( )

Genera una copia, o clone, del objeto seleccionado.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<meta name="author" content="Luis Felipe Ramírez Varela">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
</head>

<body>
<div id="lista">
  <ul>
    <li>Elemento de lista 1</li>
    <li class="sobra">Elemento de lista 2</li>
    <li>Elemento de lista 3</li>
  </ul>
</div>
<div id="caja"></div>
<script>
$(document).ready(function( ){
	$("#lista").click(function( ){
		$("#lista").clone().appendTo("#caja");
	});
});
</script>
</body>
</html>

accion_clone

Ejercicio:

Cada vez que se haga click sobre un botón "agregar" al final de la página, agregar dinámicamente a la página un objeto div de 200x200px de color azul. Agregar un botón "limpiar" que elimine todas los div agregados para poder volver a agregar nuevos (mantener margen entre los div creados para que se puedan diferenciar).

Dimensiones

Todos los elementos en nuestro documento Web tienen alto y ancho en pixeles. Estas medidas se pueden consultar o modificar.

Funciones de dimensión
Función	Descripción
`width()`	obtiene o modifica el ancho de un objeto.
`height()`	obtiene o modifica el alto de un objeto.
`innerWidth()`	obtiene o modifica el ancho interior de un objeto.
`innerHeight()`	obtiene o modifica el alto interior de un objeto.
`outerWidth()`	obtiene o modifica el ancho exterior de un objeto.
`outerHeight()`	obtiene o modifica el alto exterior de un objeto.

.width( ) / .height( )

Obtiene o define el ancho del primer elemento seleccionado o del alto. Esta función maneja unidades en pixeles.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.caja {
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	cursor: pointer;
	margin: 20px;
	padding: 10px;
	float: left;
}
</style>
</head>
<body>
<div class="caja"> </div>
<script>

$(document).ready(function(){
	$(".caja").click(function(){
		let caja = $(this);
		caja.html("Ancho: "+ caja.width() +"px <br> Alto: " + caja.height()+"px");
	});
});

</script>
</body>
</html>

accion_width-heigh

.innerWidth( ) / .innerHeight( )

Obtiene o define el ancho interno y el alto interno del elemento seleccionado en pixeles.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
<div class="caja"> </div>
<script>

$(document).ready(function(){
	$(".caja").click(function(){
		let caja = $(this);
		caja.html("Ancho interno: "+ caja.innerWidth() +"px <br> Alto interno: " + caja.innerHeight()+"px");
	});
});

</script>
</body>
</html>

accion_innerWidth-innerHeigh

.outerWidth( ) / .outerHeight( )

Obtiene o define el ancho externo o el alto externo del elemento seleccionado en pixeles.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.caja {
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	cursor: pointer;
	margin: 20px;
	padding: 10px;
	float: left;
}
</style>
</head>
<body>
<div class="caja"> </div>
<script>

$(document).ready(function(){
	$(".caja").click(function(){
		let caja = $(this);
		caja.html("Ancho externo: "+ caja.outerWidth() +"px <br> Alto externo: " + caja.outerHeight()+"px");
	});
});

</script>
</body>
</html>

accion_outerWidth-outerHeigh

Ejercicio:

Generar una página que, desde un formulario con dos campos, solicite alto y ancho. Con estos datos, modificar los dos ejes de un Div azul de 200x200px iniciales.

Navegación por el DOM

Estas funciones están hechas para poder encontrar elementos HTML de nuestro documento con respecto a otro usando la jerarquía del DOM. En inglés se conoce como "traversing" un modismo para decir paseo o recorrido. Viene muy a mano cuando los elementos de nuestra estructura no tienen de donde agarrarse para ser afectado.

Se basa en entender el DOM como un árbol familiar, donde el contenedor es padre de su contenido y ancestro de cualquier hijo de éste.

Para subir o bajar por la jerarquía preguntamos por el padre (parent) o el hijo (children) y para navegar lateralmente, preguntamos por los hermanos (siblings).

Funciones de negación por el DOM.
Función	Descripción
`parent()`	Etiqueta padre o contenedora de la etiqueta actual.
`parents()`	Cualquier etiqueta contenedora.
`children()`	Etiqueta contenida en la etiqueta actual.
`find()`	Buscar en lo contenido, desde la etiqueta actual.
`siblings()`	Etiquetas con la misma jerarquía a la actual.
`next()`	Siguiente etiqueta.
`prev()`	Etiqueta anterior.
`first()`	Primera etiqueta.
`last()`	Última etiqueta.

.parent( )

Permite recorrer en la estructura del documento y seleccionar el contenedor, o sea seleccionar el padre del objeto al que nos dirigimos.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#conteiner * {
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
	list-style:none;
	cursor:pointer;
}
</style>
</head>
<body>
<div id="conteiner">
 <div style="width:500px;">div (tatara abuelo)
 <ul>
 ul (abuelo)
 <li>li (padre) <span>span</span> </li>
 <li>li (padre) <span>span</span> </li>
 </ul>
 </div>
 <div style="width:500px;">div (abuelo)
 <p>p (padre) <span>span</span> </p>
 </div>
</div>
<script>

$(document).ready(function(){
	$("span").click(function(e){
		$(this).parent().css({'border-color':'#900', 'color':'#900'});
	});
});

</script>
</body>
</html>

accion_parent

.parents( )

Similar al anterior, pero permite seleccionar cualquier objeto padre a partir del objeto seleccionado.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#conteiner * {
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
	list-style: none;
	cursor: pointer;
}
</style>
</head>
<body>
<div id="conteiner">
 <div style="width:500px;">div (tatara abuelo)
 <ul>
 ul (abuelo)
 <li>li (padre) <span>span</span> </li>
 <li>li (padre) <span>span</span> </li>
 </ul>
 </div>
 <div style="width:500px;">div (abuelo)
 <p>p (padre) <span>span</span> </p>
 </div>
</div>
<script>

$(document).ready(function(){
	$("span").click(function(e){
		$(this).parents().css({'border-color':'#900', 'color':'#900'});
	});
});

</script>
</body>
</html>

accion_parents

.children( )

Permite seleccionar el elemento a continuación en la estructura jerárquica del DOM de nuestro documento.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#conteiner * {
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
	list-style:none;
	cursor:pointer;
}
</style>
</head>
<body>
<div id="conteiner">
 <div style="width:500px;">div (tatara abuelo)
 <ul>
 ul (abuelo)
 <li>li (padre) <span>span</span> </li>
 <li>li (padre) <span>span</span> </li>
 </ul>
 </div>
 <div style="width:500px;">div (abuelo)
 <p>p (padre) <span>span</span> </p>
 </div>
</div>
<script>

$(document).ready(function(){
	$("ul").click(function(e){
		$(this).children().css({'border-color':'#900', 'color':'#900'});
	});
	$("p").click(function(e){
		$(this).children().css({'border-color':'#900', 'color':'#900'});
	});
});

</script>
</body>
</html>

accion_children

.find( )

La función ".find( )" permite buscar cualquier elemento descendente desde el objeto seleccionado.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#conteiner * {
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
	list-style:none;
	cursor:pointer;
}
</style>
</head>
<body>
<div id="conteiner">
 <div style="width:500px;">div (tatara abuelo)
 <ul>
 ul (abuelo)
 <li>li (padre) <span>span</span> </li>
 <li>li (padre) <span>span</span> </li>
 </ul>
 </div>
 <div style="width:500px;">div (abuelo)
 <p>p (padre) <span>span</span> </p>
 </div>
</div>
<script>

$(document).ready(function(){
	$("ul").click(function(e){
		$(this).parents().find("span").css({'border-color':'#900', 'color':'#900'});
	});
});

</script>
</body>
</html>

accion_find

.siblings( )

Esta función permite seleccionar todos los "hermanos" de la estructura DOM de nuestro documento a partir del objeto seleccionado.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#conteiner * {
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
	list-style:none;
	cursor:pointer;
}
</style>
</head>
<body>
<div id="conteiner">
 <div style="width:500px;">div (tatara abuelo)
 <ul>
 ul (abuelo)
 <li>li (padre) <span>span</span> </li>
 <li>li (padre) <span>span</span> </li>
 <li>li (padre) <span>span</span> </li>
 <li>li (padre) <span>span</span> </li>
 </ul>
 </div>
</div>
<script>

$(document).ready(function(){
	$("li").click(function(e){
		$(this).siblings().css({'border-color':'#900', 'color':'#900'});
	});
});

</script>
</body>
</html>

accion_siblings

.next( ) / .prev( )

Estas dos funciones nos permiten encontrar el hermano siguiente o anterior con respecto al objeto seleccionado.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#conteiner * {
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
	list-style:none;
	cursor:pointer;
}
</style>
</head>
<body>
<div id="conteiner">
 <div style="width:500px;">div (tatara abuelo)
 <ul>
 ul (abuelo)
 <li>li (padre) <span>span</span> </li>
 <li>li (padre) <span>span</span> </li>
 <li>li (padre) <span>span</span> </li>
 <li>li (padre) <span>span</span> </li>
 </ul>
 </div>
</div>
<script>

$(document).ready(function(){
	$("li").click(function(e){
		$(this).next().css({'border-color':'#900', 'color':'#900'});
		$(this).prev().css({'border-color':'#900', 'color':'#900'});
	});
});

</script>
</body>
</html>

accion_next-prev

.first( ) /.last( )

Estas dos funciones nos permiten encontrar el primer o último de los hijos anidados en la estructura DOM del documento a partir del objeto seleccionado.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#conteiner * {
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
	list-style: none;
	cursor: pointer;
}
</style>
</head>
<body>
<div id="conteiner">
 <div style="width:500px;">div (tatara abuelo)
 <ul>
 ul (abuelo)
 <li>li (padre) <span>span</span> </li>
 <li>li (padre) <span>span</span> </li>
 <li>li (padre) <span>span</span> </li>
 <li>li (padre) <span>span</span> </li>
 </ul>
 </div>
</div>
<script>

$(document).ready(function(){
	$("ul").click(function(e){
		$("#conteiner li").first().css({'border-color':'#900', 'color':'#900'});
		$("#conteiner li").last().css({'border-color':'#900', 'color':'#900'});
	});
});

</script>
</body>
</html>

accion_first-last

Ejercicio:

Teniendo la siguiente estructura:
<!doctype html> <html lang="es"> <head> <meta charset="UTF-8"> <title>cajas</title> <style> .caja{ border: 1px solid #900; width: 200px; height: 200px; text-align: center; margin: 10px; padding: 10px; } </style> </head> <body> <section> <h1>título</h1> <div class="caja"><p>abajo</p></div> <div class="caja"><p>centro</p></div> <div class="caja"><p>arriba</p></div> </section> </body> </html>
Al cargar el documento y utilizando las funciones de traversing, modifique estructuralmente el documento para:
1. Eliminar la caja del centro.
2. Poner el H1 antes de la sección.
3. Subir la tercera caja en primer lugar y cambiarle el color de fondo a negro con texto blanco.

Efectos

La capacidad de combinar CSS con el DOM del documento que tiene jQuery, permite jugar con los objetos y generar la sensación de efectos, para complementar un discurso o para ampliar la interactividad.

Ya que los efectos están inspirados en los de cine y televisión, por herencia, mantiene sus nombres originales.

Funciones para efectos
Función	Descripción
`hide()`	Oculta un objeto.
`show()`	Muestra un objeto.
`toggle()`	Cambia entre mostrar y ocultar un objeto.
`fadeIn()`	Hace aparecer el objeto.
`fadeOut()`	Hace desaparecer el objeto.
`fadeToggle()`	Hace desaparecer o aparecer un objeto dependiendo de su estado inicial.
`fadeTo()`	Permite definir el estado final de opacidad de un objeto.
`slideDown()`	Desliza para abajo un objeto, cómo persiana.
`slideUp()`	Desliza para arriba un objeto.
`slideToggle()`	Desliza para abajo o para arriba un objeto dependiendo de su posición inicial.
`animation()`	Permite animar un objeto entregando su característica final.
`stop()`	Para el proceso de una animación.

Otra cosa que se ve mucho con los efectos son los "Callback" de las funciones ya que en este tipo de funciones se puede controlar el tiempo en que queremos que se ejecute. El llamado posterior (Callback) es una siguiente acción a realizar una vez que haya terminado la que está realizando.

.hide( ) / .show( )

Estas funciones permiten ocultar o mostrar el objeto seleccionado afectando el estilo "display" de CSS. Puede llevar 3 parámetros: Se puede afectar la velocidad que queremos que suceda ya sea como texto (slow, fast) o en milisegundos. Puedes afectar la curvatura de la animación (swing, linear), y por último llamar a otra función a ejecutarse (callback).

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#caja {
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	cursor: pointer;
	/*margin: 20px;*/
	padding: 10px;
	background-color: #900;
}
.botonera {
	padding: 5px;
	background-color: #009;
	border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div id="caja"> </div>
<div class="botonera">
 <button id="hide">ocultar</button>
 <button id="show">mostrar</button>
 <button id="hide_slow">ocultar lento</button>
 <button id="show_slow">mostrar lento</button>
 <button id="hide_show">toggle</button>
</div>
<script>

$(document).ready(function(){
	$("#show").click(function(){
		$("#caja").show();
	});
	$("#hide").click(function(){
		$("#caja").hide();
	});
	$("#hide_slow").click(function(){
		$("#caja").hide('slow');
	});
	$("#show_slow").click(function(){
		$("#caja").show(3000,'linear',function(){
			alert("listo");
		});
	});
	$("#hide_show").click(function(){
		$("#caja").toggle('fast','swing');
	});
});

</script>
</body>
</html>

accion_show-hide

.toggle( )

Al igual que con el "toggleClass( )", esta función permite amarrar, bajo el mismo llamado la opción de origen de la visibilidad del objeto. En este caso, la velocidad de entrada y salida, así como la curvatura de la animación son las mismas.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#caja {
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	cursor: pointer;
	/*margin: 20px;*/
	padding: 10px;
	background-color: #900;
}
.botonera {
	padding: 5px;
	background-color: #009;
	border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div id="caja"> </div>
<div class="botonera">
 <button id="hide_show">toggle</button></div>
<script>

$(document).ready(function(){	
	$("#hide_show").click(function(){
		$("#caja").toggle('fast','swing');
	});
});

</script>
</body>
</html>

accion_toggle

.fadeIn( ) / .fadeOut( ) / .fadeToggle( )

Estas funciones permiten hace fundido del objeto seleccionado. Trabaja sobre la opacidad de 0 a 100% para cerrar con el estilo display del objeto. Al igual que la función anterior se puede afectar la velocidad, pero no la curvatura, además de tener un callback al final de la función.

El "fadeToggle( )" repite el patrón de los otros toggles vistos, donde permite cambiar entre dos estados.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#caja {
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	cursor: pointer;
	/*margin: 20px;*/
	padding: 10px;
	background-color: #900;
}
.botonera {
	padding: 5px;
	background-color: #009;
	border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div id="caja"> </div>
<div class="botonera">
 <button id="fadeIn">fadeIn</button>
 <button id="fadeOut">fadeOut</button>
 <button id="fadeToggle">fadeToggle</button>
</div>
<script>

$(document).ready(function(){
	$("#fadeIn").click(function(){
		$("#caja").fadeIn();
	});
	$("#fadeOut").click(function(){
		$("#caja").fadeOut(2000);
	});
	$("#fadeToggle").click(function(){
		$("#caja").fadeToggle('slow');
	});
});

</script>
</body>
</html>

accion_fadeIn-fadeOut

.fadeTo( )

Esta función es similar a la anterior, pero permite variar en la opacidad a un porcentaje de la que parte. Para eso se agrega un parámetro de porcentaje en decimales como segundo parámetro.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#caja {
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	cursor: pointer;
	/*margin: 20px;*/
	padding: 10px;
	background-color: #900;
}
.botonera {
	padding: 5px;
	background-color: #009;
	border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div id="caja"> </div>
<div class="botonera">
 <button id="fadeTo">fadeTo</button>
</div>
<script>

$(document).ready(function(){	
	$("#fadeTo").click(function(){
		$("#caja").fadeTo('slow',.6);
	});
});

</script>
</body>
</html>

accion_fadeTo

.slideDown( ) / .slideUp( ) / .slideToggle( )

Esta función, similar a la anterior, hace el efecto persiana (de abajo hacia arriba) para terminar afectando el display del objeto seleccionado.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#caja {
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	cursor: pointer;
	/*margin: 20px;*/
	padding: 10px;
	background-color: #900;
}
.botonera {
	padding: 5px;
	background-color: #009;
	border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div id="caja"> </div>
<div class="botonera">
 <button id="slideDown">slideDown</button>
 <button id="slideUp">slideUp</button>
 <button id="slideToggle">slideToggle</button>
</div>
<script>

$(document).ready(function(){
	$("#slideDown").click(function(){
		$("#caja").slideDown();
	});
	$("#slideUp").click(function(){
		$("#caja").slideUp(2000);
	});
	$("#slideToggle").click(function(){
		$("#caja").slideToggle('slow');
	});
});

</script>
</body>
</html>

accion_slideDown-slideUp

.animation( )

La función ".animation( )" permite literalmente animar cualquier objeto seleccionado afecta su posición dentro del documento, opacidad, tamaño, etc.

Acepta varios parámetros de CSS en formato de matriz.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#caja {
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	cursor: pointer;
	position:relative;
	padding: 10px;
	background-color: #900;
}
.botonera {
	padding: 5px;
	background-color: #009;
	border-bottom: 1px solid #000;
}
</style>
</head>
<body><div id="conteiner">
<div id="caja"> </div>
<div class="botonera">
 <button id="animar" style="text-align:right">animar</button>
</div></div>
<script>

$(document).ready(function(){
	$("#animar").click(function(){
		$("#caja").animate({
 right: '250px',
 opacity: '0.3',
		height: '5px',
		width: '5px'
 },2000);
	});
});

</script>
</body>
</html>

accion_animation

.stop( )

Por otro lado, la función stop nos permite detener la animación seleccionada, dejarla en ese punto o darla por terminada. Incluso podemos detener todas las animaciones que se está ejecutando.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#caja {
	width: 200px;
	height: 200px;
	border: 10px solid #000;
	cursor: pointer;
	position: relative;
	padding: 10px;
	background-color: #900;
}
.botonera {
	padding: 5px;
	background-color: #009;
	border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div id="conteiner">
 <div id="caja"> </div>
 <div class="botonera">
 <button id="animar" style="text-align:right">animar</button>
 <button id="parar" style="text-align:right">parar</button>
 </div>
</div>
<script>

$(document).ready(function(){
	$("#animar").click(function(){
		$("#caja").animate({
		left: '90%',
		top: '300px',
		height: '10px',
		width: '10px',
		},5000);
	});
	$("#parar").click(function(){
		$("#caja").stop();
	});
});

</script>
</body>
</html>

accion_stop

Ejercicio:

Utilizando Efectos y Traversing de jQuery, con texto y fotos, contar la "historia de un día" en una página web.

Formularios

Al momento de tener que enviar datos desde un formulario por ajax, es práctico construir un sólo paquete en formato de array.

.serialize( )

Esta función permite convertir los nombres y los valores de elementos de uno o todos los elementos de un formulario en nuestro documento. Su objetivo es poder transmitir fácilmente los datos recogidos por un formulario por AJAX al servidor para ser procesados.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
label {
	width: 80px;
	float: left;
}
input[type="submit"] {
	margin-left: 80px;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post">
 <fieldset>
 <legend>Registro </legend>
 <label for="nombre">Nombre:</label>
 <input type="text" name="nombre" id="nombre">
 <br>
 <label for="email">Email:</label>
 <input type="email" name="email" id="email">
 <br>
 <label for="telefono">Teléfono:</label>
 <input type="tel" name="telefono" id="telefono">
 <br>
 <label for="direccion">Dirección:</label>
 <textarea name="direccion" id="direccion"></textarea>
 <br>
 <input type="submit" name="submit" id="submit" value="Submit">
 </fieldset>
</form>
<div id="mensaje"></div>
<script>

$(document).ready(function(){
	$("#form1").submit(function(e){
		e.preventDefault();
		$("#mensaje").html($("#form1").serialize());
	});
});

</script>
</body>
</html>

accion_serialize

.serializeArray( )

Igual que la función anterior. Permite tomar uno o todos los nombres y valores de un formulario en nuestro documento, con la diferencia que los datos los ordena en una matriz nombre:valor para ser usado como objeto por javascript..

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<meta name="author" content="Luis Felipe Ramírez Varela">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
label {
	width: 80px;
	float: left;
}
input[type="submit"] {
	margin-left: 80px;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post">
  <fieldset>
    <legend>Registro </legend>
    <label for="nombre">Nombre:</label>
    <input type="text" name="nombre" id="nombre">
    <br>
    <label for="email">Email:</label>
    <input type="email" name="email" id="email">
    <br>
    <label for="telefono">Teléfono:</label>
    <input type="tel" name="telefono" id="telefono">
    <br>
    <label for="direccion">Dirección:</label>
    <textarea name="direccion" id="direccion"></textarea>
    <br>
    <input type="submit" name="submit" id="submit" value="Submit">
  </fieldset>
</form>
<div id="mensaje"></div>
<script>
$(document).ready(function(){
	$("#form1").submit(function(e){
		e.preventDefault();
		let matriz = $("#form1").serializeArray()
		$.each(matriz, function(i,campo){
			$("#mensaje").append(campo.name +":"+ campo.value+" "); 
		});
	});
});
</script>
</body>
</html>

accion_serializeArray

Ya aprovecharemos la ventaja de estas dos funciones cuando estemos interactuando con el servidor por AJAX.

Nota:
$.each es un bucle propio de jQuery, similar a for, pero para matrices en cadena. Muy similar al concepto de "foreach( )" de JavaScript.

Ejercicio:

Teniendo una página con 3 DIVs en una fila, con los números 1, 2, 3 respectivamente y un botón de submit desactivado: Cuando el usuario seleccione alguno de los 3 DIVs, agregar el valor del div seleccionado, a un campo de formulario oculto y activar el botón submit del formulario. Enviar por método GET el valor del campo oculto.

Objetivo del capítulo:
Entender la capacidad de extensón de jQuery a través de plugins y dónde encontrarlos.

Los Plugins son la forma de extender las capacidades de jQuery desarrollado, por lo general, por la comunidad de usuarios, y en su mayoría de libre distribución. Hay una gran cantidad de plugins compatible que se pueden encontrar que abarcan casi todas las necesidades de un proyecto Web.

Podemos encontrar un listado completo en: https://plugins.jquery.com/ organizados por su objetivo acción. Casi todos se acompaña de su respectiva documentación y ejemplos para su implementación.

A continuación veamos algunos que pueden ser útiles en nuestro desarrollo.

jQuery Validation Plugin

Este plugin tiene por objetivo validar los elementos de nuestro formulario antes de ser enviados al servidor. Se toma de los atributos del campo de formulario para determinar si es obligatorio o el formato que necesita tener.

Podemos descargarlo desde la página de jQuery: https://plugins.jquery.com/validation/ o desde su distribución liberada en Github https://github.com/jzaefferer/jquery-validation, aunque no siempre está la última versión. También podemos encontrar distribuciones CDN en Microsoft o en jsDelivr.

La última versión y la documentación completa la podemos encontrar en http://jqueryvalidation.org/.

Una vez vinculado, después de nuestro llamado a la librería de jQuery, basta con señalar el formulario que debe monitorear para que se gatille. Una característica de este plugin es que se puede personalizar los mensaje de error en el idioma del navegador del usuario llamando variables desde un archivo externo .js.

Los valores de los elementos a validar están determinados por los atributos de las etiquetas de un formulario. por ejemplo el type="email" va a validar que el email sea verdadero, o si es "required" (requerido), etc.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script src="js/messages_es.js"></script>
</head>
<body>
<form id="form1" name="form1" method="post">
 <fieldset>
 <legend>Registro </legend>
 <label for="nombre">Nombre:</label>
 <input type="text" name="nombre" id="nombre" required>
 <br>
 <label for="email">Email:</label>
 <input type="email" name="email" id="email" required>
 <br>
 <label for="telefono">Teléfono:</label>
 <input type="tel" name="telefono" id="telefono" required>
 <br>
 <label for="direccion">Dirección:</label>
 <textarea name="direccion" id="direccion" required></textarea>
 <br>
 <input type="submit" name="submit" id="submit" value="Submit">
 </fieldset>
</form>
<div id="mensaje"></div>
<script>

$(document).ready(function(){
	$("#form1").validate();
});

</script>
</body>
</html>

jquery-validate

jQuery simpleUpload plugin

Este plugin permite subir archivos por AJAX al servidor, generando un sensación más fluida del proceso. Se puede encontrar la última versión en https://github.com/michaelcbrook/simpleUpload.js y la documentación completa con ejemplos en https://simpleupload.michaelcbrook.com/.

Entre sus características:

Multiples archivos a subir
Prefiltrado por tipo o tamaño de archivo.
HTML5 Ajax upload con respaldo por iframe para browser obsoletos
Subidas simultaneas
Funciona con drag-n-drop
Permite subir archivos Cross-domain
Subida Cancelable

Se porta impecable en la mayor parte de los browser para escritorio o mobile y es de muy fácil manejo. Requiere de un campo de formulario tipo "file" y un receptor de los archivos que se van a enviar al servidor. Vemos el HTML

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>simpleUpload</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 
<script src="js/simpleUpload.min.js"></script>
</head>

<body>
<form class="form-horizontal col-sm-8 col-sm-offset-2" method="post"  enctype="multipart/form-data">
  <div class="form-group row">
    <label class="col-sm-3 control-label" for="telefono">Foto:</label>
    <div class="col-sm-9">
      <input type="file" name="file" id="file" />
    </div>
    <div id="filename"></div>
    <div id="progress"></div>
    <div id="progressBar"></div>
  </div>
  <div class="form-group row text-right">
    <input type="submit" name="registrar" id="registrar" value="registrar" class="btn btn-primary float-right"  />
  </div>
</form>
<script>
$(document).ready(function () {
  $('input[type=file]').change(function () {
    $(this).simpleUpload("upload.php", {
      allowedExts: ["jpg", "jpeg", "jpe", "jif", "jfif", "jfi", "png", "gif"],
      start: function (file) {
        //upload started
        $('#filename').html(file.name);
        $('#progress').html("");
        $('#progressBar').width(0);
      },
      progress: function (progress) {
        //received progress
        $('#progress').html("Progress: " + Math.round(progress) + "%");
        $('#progressBar').width(progress + "%");
      },
      success: function (data) {
        //upload successful
        $("#filename").append('<img src="uploads/' + data.img + '">')
        //$('#progress').html("Success!<br>Data: " + JSON.stringify(data));
      },
      error: function (error) {
        //upload failed
        $('#progress').html("Failure!<br>" + error.name + ": " + error.message);
      }
    });
  });
});
</script>
</body>
</html>

En este caso, descargamos el plugin y la vinculamos en la página, después de llamar a jQuery con <script src="js/simpleUpload.min.js"></script>. Por otra parte, preparamos el campo file que va a gatillar la acción y recoger el archivo del computador local <input type="file" name="file" id="file" />, así como divs que van a recibir interacción y mostrar avances y el archivo subido <div id="filename"></div> <div id="progress"></div> <div id="progressBar"></div>.

En la parte del script, amarramos el observador a que se gatille cuand el campo tipo file cambie: $('input[type=file]').change(function () { y a ese objeto en la página se le aplica la función de simple upload $(this).simpleUpload() pasando como primer parámetro, la página que en el servidor va a procesar el o los archivos recibidos y es la que devuelve la respuesta a mostrar cuando complete el AJAX.

Si nos fijamos en los métodos, ésta función tiene eventos que van a reaccionar de diferente manera según la etapa en la que se encuentra, en los parámetros básicos son 4: start, al inicio de la acción, progress, a medida que lo está procesando, success, una vez que alla terminado de subir el archivo y error, por si el roceso de subir archivos tiene un errror.

Tambien podemos pasar por el array pre restricciones del tipo de archivo, extensión o peso que vamos a aceptar: allowedExts: ["jpg", "jpeg", "jpe", "jif", "jfif", "jfi", "png", "gif"].

Por otro lado, en el servidor necesitamos una programación que reciba el archivo y lo procese. En este ejemplo el archivo que se llama es upload.php.

Ejemplo:

<?php
//echo "<pre>",print_r($_FILES['file'],1),"</pre>";
$destino = "uploads";
$nombre = $_FILES[ 'file' ][ 'name' ];
if ( move_uploaded_file( $_FILES[ "file" ][ "tmp_name" ], $destino . "/" . $nombre ) ) {
  $sucess = 1;
} else {
  $sucess = 0;
}
if ( $sucess ) {
  $output = array( "success" => true, "message" => "Success!", "img" => $nombre );
} else {
  $output = array( "success" => false, "error" => "Failure!" );
}
header( "Content-Type: application/json; charset=utf-8" );
echo json_encode( $output );
?>

simpleUpload

Revisemos la programación de esta página. la Función move_uploaded_file() es la que se encarga de mover el archivo subido, de su dirección tempora ($_FILES[ "file" ][ "tmp_name" ]) a su destino final $destino . "/" . $nombre, variables que fueron definidas al principio.

Si puede mover el archivo, construye un array de salida y si no lo puede mover, construye una array con la respuesta negativa.

Antes de devolver la respuesta en formato JSON con json_encode(), cambiamos la cabecera del documento para que el servidor envíe como parte de la información que es un archivo JSON header( "Content-Type: application/json; charset=utf-8" );.

Esta JSON es la respuesta que recibe el JS en el evento success se lo pasa a data y ahí lo podemos parsear para utilizarlo y reflejar una reacción de la subida de archivo $("#filename").append('<img src="uploads/' + data.img + '">'), en este caso agregar la etiqueta html para mostrar la imagen en la página.

Nota:
Es importante recordar que el directorio de destino de nuestro archivo en el servidor, tiene que tener privilegios para escribir y ejecutar para el anónimo (chmod 777), si no el servidor va a aevitar que se mueva el archivo de su directorio temporal.

jQuery DataTables plugin

Este plugin está orientado para trabajar con los datos de una tabla, nos permite ordenar, buscar, paginar y mucho más.

Para esto carga los datos en memoria RAM permitiéndonos manipular rápidamente todos los elementos de la tabla.

Podemos encontrar la descarga en https://plugins.jquery.com/jdatatable/ aunque la documentación completa y los ejemplos están en: https://www.datatables.net/

Basta con vincularla la librería, después de hacer el llamado a nuestra librería jQuery, para que podamos asignarle la funcionalidad a una tabla.

Requiere de un archivo externo CSS para la presentación y las imágenes para marcar la dirección del orden de la columna.

Nota:
Es buen ejercicio revisar todos los ejemplos de este plugin para entender los alcances y personalizaciones que ofrece.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="js/datatables.min.js"></script>
<link href="js/datatables.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<table id="miTabla">
	<thead>
<tr>
		<th>Nombre</th>
		<th>Apellido</th>
		<th>Email</th>
		<th>Teléfono</th>
		<th>Edad</th>
	</tr>
</thead>
	<tr>
	  <td>Caperucita </td>
	  <td>Roja de feroz</td>
	  <td>caperuza@deferoz.cl</td>
	  <td>987654321</td>
	  <td>18</td>
 </tr>
	<tr>
	  <td>Pedro Pablo</td>
	  <td>Pérez Pereira</td>
	  <td>pobre@pintor.cl</td>
	  <td>876543219</td>
	  <td>30</td>
 </tr>
	<tr>
	  <td>Klark</td>
	  <td>Kent</td>
	  <td>superman@ligadelajusticia.us</td>
	  <td>765432198</td>
	  <td>160</td>
 </tr>
	<tr>
	  <td>Dionisio</td>
	  <td>Tragoalegre</td>
	  <td>Dionis@buenvino.cl</td>
	  <td>654321987</td>
	  <td>55</td>
 </tr>
</table>
<script>

$(document).ready(function(){
	$("#miTabla").DataTable();
});

</script>
</body>
</html>

jquery-dataTable

jQuery RUT plugin

Una pregunta recurrente es la validación del RUN (Rol Único Nacional)/ RUT (Rol Único Tributario) que ocupamos en Chile como número único de identificación.

Este Plugin de jQuery da formateo y validación de RUTs, o sea separa sus partes con puntos y guión para el código validador en su formato XX.XXX.XXX-Y.

El último número, después del guión, es un código validador. Este se obtiene por el algoritmo "Módulo 11" (https://es.wikipedia.org/wiki/Rol_Único_Tributario) que es la formula que implementa Pablo Marambio para este plugin.

Lo podemos descargar de https://github.com/pablomarambio/jquery.rut

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="js/jquery.rut.min.js"></script>
<style>
.error {
	border: 1px solid #900;
	color: #900;
}
</style>
</head>
<body>
<input type="text" id="rut" name="rut">
<button>validar</button>
<script>

$(document).ready(function(){
	$("#rut").rut().on('rutInvalido', function(){ 
 $(this).addClass("error")
 })
 .on('rutValido', function(){ 
 $(this).removeClass("error");
 });
});

</script>
</body>
</html>

jquery-rut

La lista de plugins en http://plugins.jquery.com/ es bastante larga y está ordenada por el objetivo del plugin. Si tenemos un requerimiento especial en un proyecto, es bastante probable que la acción ya esté desarrollada, y nos ahorre costo de desarrollo en nuestro proyecto.

Es recomendable darse el tiempo para revisar la lista completa y probarlos, nunca se sabe cuándo se puede necesitar o puede aportar a un proyecto en estudio.

Todos los plugins son opensource por lo que se puede revisar el código y personalizar si fuera necesario.

JQuery UI

JQuery UI es una extensión de jQuery, desarrollado por los mismos creadores, orientada a la interfaz de usuario, o sea un conjunto de interacciones, efectos, widgets y utilidades que no estaban consideradas en jQuery inicialmente.

Podemos descargar la última versión estable directamente de http://jqueryui.com/ o podemos personalizar nuestra descarga en una interfaz cómoda de opciones en http://jqueryui.com/download/. Esto permite control el tamaño del archivo, por si no necesitamos alguna acción en nuestro proyecto.

jQuery UI necesita de unas clases propias, por lo que necesita una plantilla CSS para la mayor parte de su acciones. En el mismo formulario anterior podemos seleccionar una plantilla de CSS (tiene varias) o personalizar una para nuestro proyecto en http://jqueryui.com/themeroller/.

El directorio que se descarga viene con un directorio de imágenes que necesita en la misma ruta, o sea no hay que moverlas al directorio de imágenes de la raíz de nuestro sitio, si no mantenerla en el directorio "js", además de los archivos JS y CSS en sus dos versiones de desarrollo y producción.

Viene con un archivo "index.html" con la presentación de todos los widgets y efectos según la plantilla seleccionada.

Se vincula a nuestro proyecto como cualquier otro plugin, después de vincular jQuery y ahora podemos acceder a este nuevo grupo de acciones y widgets.

Ejemplo:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de: jQuery - Las 3 preguntas básicas: quién, cuándo, qué.</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="js/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-ui-1.11.4/jquery-ui.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery-ui-1.11.4/jquery-ui.structure.min.css">
<link rel="stylesheet" type="text/css" href="js/jquery-ui-1.11.4/jquery-ui.theme.min.css">
</head>
<body>
<p>Fecha: <input type="text" id="datepicker"></p>
<button>validar</button>
<script>

$(document).ready(function(){
	$( "#datepicker" ).datepicker();
});

</script>
</body>
</html>

jqueryui

Mi sugerencia es revisar la página de Demos (http://jqueryui.com/demos/) que sumamente completa y nos entrega una versión visual de todas las acciones y sus posibles variaciones, así como la capacidad de ver el código involucrado para copiarlo y probarlo en nuestro desarrollo.

Ejercicio:

Incorporar un plugin de jquery o una librería javascript en un proyecto en concreto. Explicar en comentarios la programación y su uso.

La librería jQuery nos permite aumentar la velocidad de desarrollo de nuestros proyectos Web ya que através de 3 preguntas (quién, cuándo, qué) podemos seleccionar en un evento dado y aplicar cualquier acción sobre los elementos de nuestro DOM de manera muy eficiente y rápida y con resultados visuales sumamente eficientes.

Por otro lado, la capacidad de extenderse y tener plugins que se integren con el motor básico de jQuery, permite que encontremos soluciones a nuestros proyectos de manera más eficiente que desarrollarlo de cero en JavaScript duro, sobre todo si tomamos en cuenta las diferentes maneras de interpretar el código según el browser con el que se vea.

Hay muchos usuarios usando jQuery, por lo que si tienes dudas o consultas, es muy probable que alguien más la haya tenido y ya esté la respuesta en los foros de desarrolladores, en las páginas del core o del plugin.

Bibliografía

Aprender jQuery Con 100 Ejemplares Prácticos
Juan Antonio Gómez Gutiérrez
Programación Ajax y jQuery
Andrés Serbat Ocaña

Capítulos

Ejercicios

Introducción

¿Qué es una librería?

Uso de jQuery

Carga de la librería

Descarga

Vinculación

Jquery

Microsoft

Cloudeflare

Jsdeliver

Google

Ejemplo de uso

Seleccionar objetos

Seleccionar por ID

Seleccionar por su clase

Seleccionar por su etiqueta

Seleccionar por su atributo

Seleccionar por su pseudo clase

Seleccionar por especificidad

Eventos

Eventos del mouse

.click( )

.dblclick( )

.mouseenter( ) / .mouseleave( )

.hover( )

afecta el atributo de la etiqueta html

.keydown( ) / .keyup( )

Eventos de formulario

.submit( )

.select( )

.change( )

.focus( ) / .blur( )

Eventos del documento o ventana

.ready( )

.resize( )

.scroll( )

Acciones

Contenido

.html( )

.text( )

.val( )

.attr( )

.removeAttr( )

.data( )

Estilos

.addClass( ) / .removeClass( )

.toggleClass( )

.css( )

Agregar y eliminar elementos

.append( ) / .prepend( )

.after( ) / .before( )

.remove( )

.empty( )

.clone( )

Dimensiones

.width( ) / .height( )

.innerWidth( ) / .innerHeight( )

.outerWidth( ) / .outerHeight( )

Navegación por el DOM

.parent( )

.parents( )

.children( )

.find( )

.siblings( )

.next( ) / .prev( )

.first( ) /.last( )

Efectos

.hide( ) / .show( )

.toggle( )

.fadeIn( ) / .fadeOut( ) / .fadeToggle( )

.fadeTo( )

.slideDown( ) / .slideUp( ) / .slideToggle( )

.animation( )

.stop( )

Formularios

.serialize( )

.serializeArray( )

Plugins