Publicado el 11 de Octubre del 2018
1.021 visualizaciones desde el 11 de Octubre del 2018
190,9 KB
27 paginas
Creado hace 6a (22/03/2018)
jQuery
Escuela Técnica Superior de Ingeniería de Telecomunicación
Universidad Rey Juan Carlos
gsyc-profes (arroba) gsyc.urjc.es
Marzo de 2018
GSyC - 2018
jQuery
1
©2018 GSyC
Algunos derechos reservados.
Este trabajo se distribuye bajo la licencia
Creative Commons Attribution Share-Alike 4.0
GSyC - 2018
jQuery
2
DOM: Document Object Model
jQuery
Introducción
DOM, Document Object Model es un API que permite tratar una
página web con estructura de árbol
Estándar de Internet, normalizado por el W3C
Es el interfaz que emplean los navegadores web internamente
Cuando un navegador carga una página HTML, la procesa
para convertirla en la estructura del DOM. Desde ahí se
representa en pantalla.
Los cambios que pueda tener la página, p.e. desde JavaScript,
se hacen directamente con el DOM, el HTML no se vuelve a
utilizar
GSyC - 2018
jQuery
3
jQuery
jQuery
Introducción
JQuery es una librería JavaScript que permite recorrer un
documento, seleccionar objetos del DOM, hacer animaciones,
manejar eventos, usar Ajax y hacer plugins sobre JavaScript
Creada por John Resig en 2006, es software libre
Aunque se puede procesar el DOM con JavaScript nativo, es
poco frecuente. Es más conveniente y habitual emplear jQuery
También cuenta con una librería similar a Bootstrap,
jQuery-UI
En esta asignatura preferimos Bootstrap a jQuery-UI
Es frecuente preferir Boostrap. jQuery-UI no es tan popular
como Bootstrap
GSyC - 2018
jQuery
4
Modificar el HTML ¿Para qué?
jQuery
Introducción
Programando sobre el DOM se puede hacer prácticamente
cualquier cosa con una página
Normalmente lo que deberíamos buscar es funcionalidad útil
que mejore la experiencia de usuario
Deberíamos evitar los efectos que llamen la atención
gratuitamente, comportamiento no estándar o poco intuitivos,
adornos que acaban molestando, etc
GSyC - 2018
jQuery
5
jQuery
Introducción
Funcionalidad que realmente mejora la experiencia de usuario:
Es normal que una aplicación tenga muchos parámetros,
difíciles de asimilar para el usuario
Ocultar unos y mostrar otros facilita su trabajo
Se puede ocultar y/o marcar como deshabilitado lo que en
cierto momento no se puede hacer
Jerarquizar el interfaz. Por ejemplo modo básico, modo
normal, modo experto
Ofrecer información y ayuda contextual
Presentar la información en distintos formatos o unidades
Validación de formularios
GSyC - 2018
jQuery
6
jQuery
Introducción
Formularios mejorados
Ejemplos
Una entrada donde el usuario indica un porcentaje desplazando
una barra, no introduciendo un número
Una entrada que inmediatamente actualiza otra información.
Si gasta 20 entonces le quedan 80
Información sobre el progreso de lo que el usuario ha pedido.
P.e progress bar en porcentaje, o en unidades de tiempo. O
estimaciones del tiempo restante
Información en tiempo real sobre sucesos diversos
Generación de gráficos
HTML Canvas. (No lo trataremos en esta asignatura)
...
GSyC - 2018
jQuery
7
Uso de jQuery
jQuery
Introducción
Es una librería compuesta por un único fichero
Se puede descargar en el sistema de ficheros local y cargarla
con
<script src="jquery.js"></script>
Se puede usar un CDN. Por ejemplo el de gogle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
JQuery es una única funcion, que a su vez incluye diversas
funciones
Esto es posible porque JavaScript usa funciones de orden
superior, higher-order functions. Nos puede ayudar
considerarlo un objeto con métodos (en JavaScript las
funciones son objetos)
Esta función normalmente recibe el nombre de $
Típicamente recibe como primer argumento un selector CSS
que indica sobre qué debe actuar
jQuery
8
GSyC - 2018
Añadir y quitar clases
jQuery
Introducción
Un patrón habitual en jQuery es
Definir una clase CSS con el aspecto deseado. Por ejemplo
ocultar un elemento
Invocar los métodos removeClass y addClass para añadir y
quitar esa clase cuando se produzca cierto eventeo
<style>
.oculto {
}
</style>
display: none;
[...]
<div id="marco_foto" class="oculto">
<img src="images/foto.jpg" alt="Foto de prueba">
</div>
GSyC - 2018
jQuery
9
jQuery
Introducción
<script>
function mostrar_marcofoto() {
$("#marco_foto").removeClass("oculto")
};
};
function ocultar_marcofoto() {
$("#marco_foto").addClass("oculto")
};
function main() {
$("#boton01").click(mostrar_marcofoto);
$("#boton02").click(ocultar_marcofoto);
$(document).ready(main());
</script>
La función $(document).ready(); acepta la función principal
que se ejecutará cuando acabe de cargase el documento HTML
http://ortuno.es/hola_jquery01.html
GSyC - 2018
jQuery
10
jQuery
Introducción
El ejemplo anterior es correcto pero no es idiomático. Para asignar
un manejador a un evento, lo habitual en JavaScript es usar
funciones anónimas
$(document).ready(function() {
$("#boton01").click(function() {
$("#marco_foto").removeClass("oculto")
});
$("#boton02").click(function() {
$("#marco_foto").addClass("oculto")
});
});
http://ortuno.es/hola_jquery02.html
GSyC - 2018
jQuery
11
jQuery
Introducción
Quitar y poner una clase cuando se recibe un evento es muy
común, así que hay una función para ello: toggleClass()
$(document).ready(function() {
$("#boton01").click(function() {
$("#marco_foto").toggleClass("oculto")
});
});
http://ortuno.es/toggle.html
GSyC - 2018
jQuery
12
jQuery
Introducción
Aunque normalmente es preferible quitar y poner clases, también
es posible modificar las propiedades css directamente
$(document).ready(function() {
$("span").mouseover(function() {
$(this).css("background-color","grey");
});
$("span").mouseleave(function() {
$(this).css("background-color","white");
});
});
GSyC - 2018
jQuery
13
Eventos mouseover, mouseleave
jQuery
Introducción
Cuando el ratón se coloca sobre cierto elemento, este recibe el
evento mouseover
Para tratarlo, le pasamos a una función con el mismo nombre
(mouseover()) el manejador, esto es, la función que se
invocará cuando se reciba el evento
De la misma forma, la retirada del ratón de un elemento es
mouseleave
Ejemplo: Destaquemos el párrafo sobre el que se posiciona el ratón
.destacado {
background-color: LightGrey;
}
GSyC - 2018
jQuery
14
jQuery
Introducción
$(document).ready(function() {
$("p").mouseover(function() {
$("p").addClass("destacado")
});
$("p").mouseleave(function() {
$("p").removeClass("destacado")
});
});
Esto tiene un problema: no estamos destacando el párrafo
seleccionado, sino todos los párrados
http://ortuno.es/eventos_raton01.html
GSyC - 2018
jQuery
15
jQuery
Introducción
Para añadir el manejador al elemento que nos ha devuelvo la
consulta anterior, usamos this
$(document).ready(function() {
$("p").mouseover(function() {
$(this).addClass("destacado");
});
$("p").mouseleave(function() {
$(this).removeClass("destacado");
});
});
http://ortuno.es/eventos_raton02.html
GSyC - 2018
jQuery
16
Modificar el texto de un elemento
jQuery
Introducción
Con el método text() podemos cambiar el texto de un elemento
Como ejemplo, cada vez que se pulse un botón escribiremos la
hora actual dentro de un DIV
La hora estará en formato ISO 8651, para ello usaremos moment,
una librería muy popular para procesar fechas
Podemos descargarla desde su sitio web
https://momentjs.com e incluirla en nuestro directorio
Podemos descargarla desde un CDN y añadirlo en el atributo
src de un elemento script
https://cdnjs.cloudflare.com/ajax/libs/moment.js/
2.19.1/moment-with-locales.min.js
moment().format() devuelve la fecha actual en diversos
formatos. Si no se indica ninguno, por omisión devuelve una
cadena ISO 8651, p.e.
2017-11-11T22:21:17+01:00
GSyC - 2018
jQuery
17
jQuery
Introducción
<button id="boton01">Registrar hora </button>
<p id="text01">--</p>
<script>
$(document).ready(function() {
$("#boton01").click(function() {
$("#text01").text(moment().format());
});
});
</script>
http://ortuno.es/text.html
GSyC - 2018
jQuery
18
Leer el texto de un elemento
jQuery
Introducción
El método text() de jQuery devuelve el texto de un elemento
Esto es un patrón común en los método de jQuery:
Invocados sin argumentos, devuelven un valor
Invocados con argumentos, modifican un valor
Ejemplo: leer una velocidad en m/s desde un elemento
<div id="v_in">
y escribirla expresada en km/h en un <div id="v_out">
$("#boton02").click(function() {
let v_text=$("#v_in").text();
let v=parseInt(v_text,10)
v_out=v*3.6+"Km/h";
$("#v_out").text(v_out);
});
Este programa es un ejemplo de diseño muy deficiente: lógica de
negocio repartida por los botones
GSyC - 2018
jQuery
19
http://ortuno.es/text2.html
jQuery
Introducción
Un diseño mucho más razonable es el que usamos en las prácticas:
$("#boton02").click(function() {
let v_text=$("#v_in").text();
let v_out=calcula_velocidad(v_text, "m/s", "km/h");
$("#v_out").text(v_out);
});
GSyC - 2018
jQuery
20
Añadir contenido
jQuery
Introducción
Una vez seleccionado un elemento o elementos mediante un
selector, podemos modificarlo con los siguientes métodos:
append()
Inserta contenido al final de la selección, dentro de la selección
prepend()
Inserta contenido al principio de la selección, dentro de la
selección
after()
Inserta contenido inmediatamente después de la selección,
fuera de la selección
before()
Inserta contenido inmediatamente antes de la selección, fuera
de la selección
replacewith()
Reemplaza la selección
GSyC - 2018
jQuery
21
jQuery
Introducción
Ejemplo: añadir filas a una tabla
<body>
<button id=boton01>Registrar hora</button>
<table id=tabla_horas>
<th>Hora ISO 8651</th>
<tr>
</tr>
</table>
<script>
});
});
</script
$(document).ready(function() {
$("#boton01").click(function() {
let texto;
texto = ’<tr class="hora"><td>’ +moment().format() + ’</td></tr>’;
$("#tabla_horas").append(texto);
GSyC - 2018
jQuery
Comentarios de: JQuery (1)