jQuery, Bootstrap & otras

herramientas

Programación Web – Dario Segura

 jQuery

1.0 . 2006
.
Librería JavaScript .
3.6 2021
Appium jQuery

Node.js
https://openjsf.org/projects/
 jQuery
Descarga
https://code.jquery.com/jquery-3.6.0.min.js
Instalación
CDN
https://jquery.com/download/

https://code.jquery.com/

Comandos
$
de jQuery
jQuery

API
https://api.jquery.com/
 jQuery
$(selector)
Selectores
https://api.jquery.com/category/selectors/
$(‘a’) : Seleccionar etiquetas
$(‘p a’) : Seleccionar elementos anidadas
$(‘.myclass’) : Seleccionar por clase
$(‘#miNombre’) : Seleccionar por id
$(“:not(‘a’)”) : Seleccionar por pseudo - clase
$(“a, div”) : Seleccionar multiples
 jQuery

Eventos
https://api.jquery.com/category/events/
$(<selector>).evento(<función>)
$(<selector>).click(<función>)
$(<selector>).change(<función>)
$(<selector>).keypress(<función>)
 jQuery

Efectos
https://api.jquery.com/category/effects/
$(<selector>).efecto(<parámetros>)
$(<selector>).animate(propiedad, duración, efecto, completado)
$(<selector>). fadeIn/ fadeOut(duración,completado)
$(<selector>).show/hide(duración,completado)
$(<selector>). slideUp/slideDown (duración,completado)
 jQuery
• Promesas
Tareas • Llamados AJAX para métodos HTTP
https://developer.mozilla.org/es/
docs/Web/JavaScript/Guide/
Using_promises

https://api.jquery.com/jquery.ajax/ $.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
 jQuery
Awesome 

Ejercicio
Listar Roles
registrados en
una base de
datos
 jQuery
Awesome 

Ejercicio
Listar Usuarios
registrados en
una base de
datos
 jQuery

Ejercicio
Menú desde el cual acceder
a las funcionalidades
• Si está oculto con el
mouse aparece
desplegándose como
emergente
• Cambia entre oculto y
visible al hacer clic en el
icono de las tres líneas
haciendo un efecto
• Muestra cantidad de
usuarios y roles
 jQuery Awesome 

Ejercicio
Permite la adición de
nuevos usuarios:
• Los campos son
obligatorios, si falta
diligenciar alguno de
debe enmarcar en rojo
 Bootstrap
1.0 . 2011
Herramienta para Frontend .
.

5.0 2021
CSS+JS
Uso o Instalación
• Descarga
• CDN
• Manejadores de paquetes

https://getbootstrap.com
https://getbootstrap.com/docs/5.1/getting-started/download/
 Bootstrap

Básicos
• Contenedores
• Grids
• Alineación
https://getbootstrap.com/docs/5.1/layout/
 Bootstrap

Controles
• Básicos
• Validación
• Componentes
https://getbootstrap.com/docs/5.1/layout/
 Bootstrap

https://getbootstrap.com/docs/5.1/layout/
 Bootstrap

https://getbootstrap.com/docs/5.1/layout/
 Otras herramientas

Chart.js

https://www.chartjs.org/ https://datatables.net/
 Otras herramientas

https://developers.google.com/chart https://jsgrids.statico.io/
 Enlaces de interés
Teoría de jQuery
[1] https://developer.mozilla.org/es/docs/Web/HTTP
[2] https://www.w3.org/Protocols/
Teoría de Bootstrap
[3] https://getbootstrap.com/docs/4.0/getting-started/introduction/
Descargas
[4] https://jquery.com/
[5] https://getbootstrap.com/docs/5.1/getting-started/download/