Ud 3

Módulo 3. JQUERY.
Unidad 6. Introducción e historia a JQUERY.

Unidad 7. Formularios, CSS3, AJAX y efectos.
Unidad 8. JQUERY UI y plugins.
Unidad 6: Introducción e historia a Jquery
1. Introducción.
Con los conocimientos de los módulos anteriores podríamos realizar nuestras aplicacio-
nes web, sabríamos usar los elementos HTML5 y le aplicaríamos un diseño concreto a nuestra
web, usando CSS3. Pero en determinadas ocasiones necesitamos realizar un procesamiento aún
más avanzado de las etiquetas de HTML y la aplicación web en general.
Como hemos podido comprobar en determinadas circunstancias hemos usado un len-

guaje llamado JavaScript; el primer y más sencillo script que usamos fue abrir una ventana al
310
pulsar un botón, si recuerdas era éste:
<script type="text/javascript">
function muestraVentana() {
alert('Soy una ventana!');
</script>
Con JavaScript, suplíamos la interacción con el usuario gracias a que podemos procesar
mucha información en el navegador del cliente, para ello teníamos el DOM (Document Object
Model) que trabaja la página web como un conjunto de objetos (etiquetas) que se iban selec-
cionando y modificando. El problema que existía con este modelo, era que JavaScript no podía
interactuar con el servidor directamente, sino que en determinadas ocasiones teníamos que
mandar una petición al servidor, esperar que el servidor nos devuelva una respuesta y mostrar
los datos, por ejemplo para saber si un usuario y contraseña son correctos en el sistema. Debido
a que este tráfico generado no era muy eficiente, ya que el usuario que se ha logueado tiene
que cargar toda la página entera (con las imágenes, textos, etc), ¿qué se hacía? Se empezó a usar
AJAX (Asynchronous JavaScript and XML), que precisamente nos permitía hacer eso entre otras
muchas cosas.
Posteriormente a JavaScript y a AJAX nació jQuery, creado por John Resig, y el se centró
en la interacción entre el DOM, JavaScript, AJAX, HTML y CSS. Para ello creo un framework libre
M3. JQUERY
y Open Source.
Muchas de las empresas de informática más importantes reconocen la calidad y utilidad

de este framework, desde Google a Microsoft están incorporándolo sino a sus proyectos, sopor-
tando sus versiones y agregándolos a sus entornos de desarrollo.
2. JavaScript y jQuery.
JavaScript accedía a los elementos del DOM para interactuar con ellos, si teníamos la
siguiente etiqueta:
<div id="deporte" name="mideporte">…..</div>
Si queríamos acceder podíamos acceder a ella usando:
getElementById:
Cogeríamos el elemento con el id buscado, p.e. id="deporte".
getElementByName:
Cogeríamos el elemento con el name buscado, p.e. name="mideporte".
getElementByTagName.
311
Cogeríamos el elemento con el nombre buscado, p.e. tag="div".
Como supongo habrás supuesto, depende del navegador puede ser que tenga una es-
tructura concreta del DOM, ya que cada browser ha intentado sacar novedades y modificacio-
nes, pero todos los navegadores deben respetar este diseño de DOM:
¿Qué quiere decir este esquema? Este esquema es la representación de la organización

del documento HTML según unas jerarquías, etiquetas, atributos y propiedades concretas. Como
podemos ver, la etiqueta principal sería Document, y a partir de ahí ya iríamos accediendo a
cualquier elemento, seleccionándolo por etiqueta, nombre, etc.
Puedes ver la definición del DOM por ejemplo de Mozilla Firefox
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
El problema surge cuando el diseñador quiere acceder mediante a JavaScript a los atri-
butos y otras propiedades de estilo, acción que con jQuery se puede acceder de una forma muy
sencilla a todo usando el selector correcto.
Aula Mentor
jQuery sería una versión avanzada para tratar las páginas web, usando como lenguaje
JavaScript, haciendo más dinámica la interacción con el documento, que además, gracias a todo
el desarrollo que hay detrás cada vez más jQuery se está volviendo más compatible con el resto
de navegadores.
3. Introducción a la programación en JavaScript.

Como hemos comentado anteriormente jQuery usa como lenguaje JavaScript, por lo que
necesitamos saber programar JavaScript, para poder programar con jQuery, ya que si no tene-
mos una base en JavaScript, no vamos a sacarle el rendimiento que puede dar jQuery.
3.1. Definición.
Para ello vamos a explicar de forma resumida y simplificada la programación de JavaS-

cript, empezando con la declaración en nuestros documentos HTML, se pueden hacer directa-
mente en el propio documento dentro de las etiquetas <script></script>.
<head>
….
….
312
// Código JavaScript
</script>
</head>
O también podemos hacer igual que hacíamos con nuestros archivos CSS y enlazarlos
("linkarlos") a un archivo externo donde estén los script de JavaScript, una buena forma sería
crearnos una carpeta llamada js y agregar en el interior nuestros script. Posteriormente debemos
recordar que debemos llamarlos desde el <head></head> de nuestro documento, por ejemplo
si el archivo que contiene nuestro script se llama miarchivo.js y está alojado dentro de la carpeta
js podíamos crear el siguiente enlace:
<head>
….
….
<script type="text/javascript" src="js/miarchivo.js"></script>
</head>
M3. JQUERY
3.2. Variables.
Cuando estamos programando vamos a necesitar poder definir variables, en ellas vamos
a definir diferentes formatos: un valor numérico entero (1, 2,3…) un valor numérico decimal o
float (1.2, 3.4, 5.5...etc), un valor de texto ("texto y palabras…"), un valor booleano (verdadero
o falso, true o false), otras variables, etc.
Para definir una variable en JavaScript no es necesario definir el tipo, ya que la misma
variable puede tomar en un momento dado del programa un valor numérico, otro de texto o
nulo. Las definiciones de variables se hacen así:
var nombre_variable = 'valor'
Ejemplos:
var miVariable1 = 34;
var miVariable2 = "Hola Mundo";
var miVariable4 = miVariable1;
…etc.
Además, estas variables tendrán un nombre único, el cual debemos definir intentando
facilitar la comprensión del código. Por ejemplo si me creo una función que cada vez que el 313
usuario haga click en el ratón me salte un contador, y éste va incrementando en uno en cada
interacción, lo más normal sería llamar a esa variable declarada:
var contador = 1;
Debemos tener en cuenta que en JavaScript se distinguen entre mayúsculas y minúsculas

(case-sensitive), por tanto la variable contador es distinta de la variable Contador y distinta de la
variable ConTaDor.
Cuando estamos usando operaciones aritméticas, debemos tener cuidado y respetar el

orden de los operadores y los paréntesis:
Es decir, obtendremos resultados distintos en los siguientes ejemplos:
var a = 2;
var b = 5;
var c = 7;
var operacion1 = a + b * c;
var operacion2 = (a + b) * c;
var operacion3 = a + (b * c);

Aula Mentor
3.3. Funciones.
Las funciones o function van a ser bloques de código que van a realizar alguna acción
y una vez finalice puede devolver un resultado o simplemente ejecutarse. Si recordamos en el
ejercicio 3 de la unidad 2 abríamos una ventana usando el siguiente código:
function muestraVentana() {
alert('Soy una ventana!');
</script>
En este caso la función muestraVentana() no tiene ningún parámetro de entrada ni de-

vuelve ningún valor, pero podríamos tener otro tipo de funciones, por ejemplo queremos crear-
314 nos una función que reciba dos parámetros a y b y nos devuelva un valor resultado, la suma de
a+b.
function suma(valorA, valorB) {
var miSuma = valorA + valorB;
return miSuma;
</script>
Las funciones en JavaScript también se pueden definir directamente en la creación de

una variable, por ejemplo, podíamos hacer siguiendo con el ejemplo anterior lo siguiente:
M3. JQUERY
var resultadoSuma = function suma(valorA, valorB) {
var miSuma = valorA + valorB;
return miSuma;
Si recordamos en el modo Depurador o avanzado de los navegadores (F12) puedes ver

una pestaña que pone console, si quisiéramos mostrar mensajes por ahí podríamos hacerlo
usando el siguiente comando:
console.log(resultadoSuma(5,4));
Y aparecerá en él el valor 9. De esta forma podemos depurar nuestro programa, pero

también podemos usar ventanas emergentes, para el fujo del programa, o hacer una depuración
con el propio navegador.
3.4. Operadores básicos. 315
En JavaScript podemos crear programas para resolver nuestro algoritmos, y para ello,
debemos pensar que al igual que nosotros si tuvieramos que usar un papel y un boli, tenemos
que tener unos signos para poder realizar operaciones matemáticas, éstos son los operadores
básicos que disponemos en JavaScript:
x+y Suma dos valores numéricos o concatena dos cadenas.
x-y Resta dos valores numéricos.
x*y Multiplica dos valores numéricos.
x/y Realiza la división de dos valores numéricos.
x%y Calcula el resto de una división (módulo)
x++ Incrementa en uno el valor numérico.
x-- Decremente en uno el valor numérico.
x=y Asigna a x el valor de y
x+=y Asigna a x el valor de x+y. ~(x = x + y)
x-=y Asigna a x el valor de x-y. ~(x = x - y)

Aula Mentor
x*=y Asigna a x el valor de x*y. ~(x = x * y)
x/=y Asigna a x el valor de x*y. ~(x = x / y)
x%=y Asigna a x el valor de x*y. ~(x = x % y)
3.5. Operadores lógicos.
En los algoritmos encontraremos situaciones que debemos hacerle preguntas al progra-

ma, del tipo: ¿es la variable a mayor que la variable b? o ¿es el valor del contador igual a 7? Y
muchas preguntas de tipo lógico entre varias variables. Para ello disponemos de los siguientes
operadores lógicos:
x>y Comprobamos si x es mayor que y.
x<y Comprobamos si x es menor que y.
x>=y Comprobamos si x es mayor o igual que y.
x<=y Comprobamos si x es menor o igual que y.
x==y Comprobamos si x es igual a y, pudiendo ser cadenas o números.
x===y Comprobamos si x es igual a y, pudiendo ser cadenas o números pero

316 además comprobamos que el tipo de datos sea igual.
x!=y Comprobamos si x es distinto a y, pudiendo ser cadenas o números.
x!==y Comprobamos si x es distinto a y, pudiendo ser cadenas o números pero

además comprobamos que el tipo de datos sea igual.
x&&y Concatena comparaciones, devolviendo true o verdadero si se cumplen

las dos a la vez.
x||y Concatena comparaciones, devolviendo true o verdadero si se cumplen

alguna de las dos condiciones.
3.6. Control de flujo del programa.
En un script o algoritmo que diseñemos, siempre vamos a tener sentencias condicionales

y acciones repetitivas que van a crearnos un flujo concreto de programa. Para ello, vemos el
siguiente flujograma y sobre él vamos a sentar las base de la metodología de la programación. Si
has visto antes programación puedes saltarte este esquema e ir directamente al siguiente apar-
tado.
M3. JQUERY
317
Es una forma muy simplificada de la metodología de la programación, pero para empe-
zar está bien. Analicemos este diagrama de flujo:
Inicio:
Cuando inicia el programa, puede ser cuando hacemos una llamada a la función.
Parámetros de entrada:
En algunas ocasiones tendremos 1 o varios parámetros de entrada con los que nuestro
algoritmo operará.
Sentencias condicional:
Cuando en el programa nos encontramos con una toma de decisiones según un pará-
metro usamos una sentencia if – else. En el ejemplo estaría representada por el rombo y la
pregunta, ¿es A=B?, y según si es verdad esta pregunta (true) o si es falsa (false) se tomará una
decisión u otra.
En programación es una de las sentencias más usadas, siempre se pregunta sobre los
parámetros o condiciones exactas del programas. En JavaScript al igual que en el 98% de los
lenguajes se realiza con las sentencias if - else:
Aula Mentor
if (condición){
//Acciones a realizar si la condición es verdadera
}else{
//Acciones a realizar si la condición es falsa.
También se pueden volver hacer nuevas preguntas y encadenar estas sentencias las ve-
ces que necesitemos, usando la sentencia else if por ejemplo:
if (condición1){
318
//Acciones a realizar si la condición es verdadera
}else if(condición2){
//Acciones a realizar si la condición es falsa.
Un ejemplo puede ser:
if(a=b){
Muestro_mensaje('El parámetro a es igual a b');
}else if (a<b){
Muestro_mensaje('El parámetro a es menor que b');
}else{
M3. JQUERY
Muestro_mensaje('a no es igual que b, y a no es menor, entonces a es mayor que b');
Si nos fijamos en el diagrama de flujo, en la rama de la derecha, cuando en la pregunta

¿es A=B? el programa ha comprobado que NO se inician dos nuevas sentencias varC y varD, por
ejemplo, varC en este caso la vamos a usar como variable contador y ejecutar un número fijo de
veces una acción. Este tipo de acciones se llama buclés o acciones interativas porque se van a
ejecutar un número de veces dependiendo de una condición.
Para ello JavaScript, y la mayoría de los lenguajes nos ofrecen tres formas de ejecutar un
código un número de veces:
for
Los bucles for se definen de la siguiente forma:
for( [expresionInicial] ; [condición] ; [incremento o decremento]){
//acciones a realizar
Si nos fijamos en nuestro ejemplo, tenemos una expresión incial que es varC = 10, ini-
ciamos a 10 el contador, posteriormente preguntamos si cumple la condición ¿es varC=0?, y 319
miestras que no sea 0 vamos haciendo nuestras acciones, en nuestro caso sumar el valor del
contador, más el valor de la variable varC. Ésto se podría representar de la siguiente forma:
for(varC = 10; varC > 0; varC--){
varD+= varC
Este ejemplo iría restando varC hasta llegar a varC = 0, cuando se cumpla la condición,
dejaría de utilizarse y pasaría a la siguiente rama. Normalmente, si ves código fuente de algún
lenguage, verás que casi siempre utilizan una variable para hacer los bucles, i o j, el nombre
es realmente lo de menos, pero lo que si se hace es declarar un nombre que sea sólo para los
bucles y una vez termine el bucle se elimina automáticamente, ésto es por el ámbito de las va-
riables que veremos en el apartado siguiente:
Ejemplos de bucles for:
//Decrementando el valor de i
for(var i=0; i > 0; i--){
varD+= varC
}
Aula Mentor
//Aumentando el valor de i
for(var i=0; i < 10; i++){
varD+= varC
//Definiendo el final en la expresión inicial.
//Hay que darse cuenta que usamos " , " para las expresión inicial y " ; " para el siguiente bloque.
for(var i=0, limite=10, i < limite; i++){
varD+= varC
while
Los bucles while es similar a la anterior, es más, siempre podemos elegir for o while
mientras se elija bien las expresiones iniciales y las condiciones finales, para ello debemos de-
clarar la expresion incial antes de la condición, la traducción de while y el uso sería:
320 mientras(condición){
//Acciones a realizar
En determinadas situaciones va a ser más conveniente usar while, podríamos decir que
el for, leyendo la cabecera sabemos el número de veces que se va a ejecutar el bloque, y while
estaría más indicado cuando no sabemos cuántas veces se va a ejecutar pero sí sabes cuando va
a salir del bucle, por ejemplo:
var valorSalida = 24;
mientras(temperatura != valorSalida){
if(temperatura < valorSalida)
sube_temperatura;
else
baja_temperatura;
M3. JQUERY
Si te fijas después del if no he usado las llaves para abrir " { " y cerrar " } " ya que cuando
sólo hay una sentencia se puede omitir, mi consejo, por ahora, usarlo siempre para evitar erro-
res, y conforme te encuentres más cómodo programando ve haciendo pruebas.
var varC=10;
while(varC > 0){
varD+=varC;
do-while
Los bucles do-while son muy parecidos a los bucles while, sólo que con este tipo de
bucle nos aseguramos que al menos ejecutamos una vez nuestro conjunto de acciones ya que
la condición la comprobamos al final y no al inicio.
do{
}while(condicion) 321
Un ejemplo puede ser:
var varC=0;
do{
alert('Hola voy abrir una ventana al inicio y si todo va bien no aparezco más');
}while(varC > 0)
Si te fijas antes de ejecutar el bucle, sabíamos que la condicón ¿es varC >0? Era falsa, pero
independientemente se ha ejecutado las sentencias que había dentro.
3.7. Ámbito de las variables.
Como hemos visto anteriormente en los programas muchas veces declaramos variables
sólo para unas acciones, un contador para un bucle, o una función. El ámbito de las variables,
también llamado scope pueden ser de dos formas.
Local: Serán válidas y accesibles sólo en el ámbito de la función que la define.

Aula Mentor
Global: Serán válidas desde cualquier parte del código, para ello sólo tenemos que de-
finirlas fuera de las funciones, y éstas se podrán usar desde cualquier sitio.
Ejemplo de variable local:
function muestraNombre(){
var nombre = 'Mi nombre es Miguel Ángel';
alert(nombre);
El ámbito de la variable nombre es sólo a la función muestraNombre(), una vez finalice

la función se elimina, si quisieramos mostrar posteriormente un alert con el nombre, éste sería
vacío, ya que no existe la variable nombre fuera de la función.
alert(nombre);
}
322
muestraNombre();
alert(nombre);
Ejemplo de variable global:
alert(nombre);
muestraNombre();
alert(nombre);
En este caso, la variable nombre está siendo visible y accesible desde dentro de la fun-
ción, aunque no hayamos declarado, como fuera de la misma.
Un ejemplo más para poner de manifiesto las variables globales y locales, usando los dos
ámbitos sería el siguiente:
M3. JQUERY
var nombre = 'Mi nombre es Antonio';
alert(nombre);
alert(nombre);
muestraNombre();
alert(nombre);
La salida de este ejemplo sería:
Mi nombre es Miguel Ángel
Mi nombre es Antonio
Aunque se defina una variable local con el mismo nombre, siempre prevalecerá la varia- 323
ble local a la global, por lo que debes tener cuidado ya que puedes tener un resultado totalmen-
te diferente, sólo por haber puesto var delante de la variable nombre dentro la función (error
común).
//actualizo el valor de la variable nombre por otro texto
nombre = 'Mi nombre es Antonio';
alert(nombre);
alert(nombre);
muestraNombre();
alert(nombre);
Aula Mentor
3.8. Arrays.
Los array son listas donde vamos almacenar elementos, por ejemplo, los nombres de los
alumnos de una clase, numerándolos desde el índice 0, pero ¡ojo!, no empiezan en el 1, sino el
0. Si queremos un arrays con 5 elementos, tendríamos que el primer elemento sería el 0 y último
en el 4:
0 Luis
1 María
2 Francisco
3 Emilio
4 Antonio
Para definir nuestro array/lista en JavaScript tendríamos que usar la siguiente sintaxis:
var miLista = ['Luis','María','Francisco','Emilio','Antonio'];
Si queremos mostrar algún elemento concreto podemos nombrarlo usando directamente

324 el índice:
alert(miLista[3]);
Mostraría el nombre de Emilio. Si queremos saber la longitud o número de elementos de

un array, tenemos la propiedad .length
alert('El nombre seleccionado entre los '+miLista.length+' participantes es '+miLista[3]);
3.9. Objetos.
Uno de los elementos más importantes a la hora de la programación es poder realizar

Programación Orientada a Objetos (POO), y JavaScript nos ofrece la posibilidad de crear nuestro
objetos, darle sus propiedades y métodos, pero ¿qué es un objeto? ¿Qué es realmente la POO o
OOP ( Object Oriented Programming) ?
La programación orientada a objetos es un paradigma de programación que utiliza la

abstracción para crear modelos basados en el mundo real, es decir, si queremos crear un pro-
grama donde vamos a usar personas, éstas como tal no se pueden representar tal cual en un
ordenador, por lo que se crea un modelo para poder realizar las operaciones que deseemos con
él, por ejemplo:
[Objeto = Prototípo]{
[ Propiedad = Variable ]
M3. JQUERY
[ Método = Funcion ]
Imaginemos que queremos modelizar a las personas:
function Persona( parametros )
// Codigo
};
Como vimos antes se podía declarar también de la siguiente forma:
var Persona = function (parametros) {
/* Codigo*/
Y ahora le podemos agregar propiedades a la persona, por ejemplo:

325
var Persona = function (nombre, apellidos, edad, colorOjos) {
this.nombre = nombre;
this.apellidos = apellidos;
this.edad = edad;
this.colorOjos = colorOjos;
Ya hemos creado un modelo para nuestra aplicación web que va a ser Persona, la cual va
a tener un nombre, apellidos y edad concreta, se podrían añadir todas las propiedades que qui-
sieramos. Si nos fijamos hemos usado this.propiedad, con ésto nos estamos refiriendo a este
elemento en concreto. Ahora para poder crearnos objetos de ese tipo, podemos usar la palabra
reservada new y el objeto que vamos a crear:
var Antonio = new Persona('Antonio', 'González Martínez', '23', 'Azules');
Y ya podemos hacer con la nueva Persona Antonio lo que quisieramos, mostrar mensaje,
calcular otros datos o por ejemplo mostrarlo por pantalla, para ello, nos creamos un párrafo con
un id llamada "textoSalida" y le agregamos los datos hemos creado:
Aula Mentor
document.getElementById("textoSalida").innerHTML =
"<br>Nombre : "+Antonio.nombre +
"<br>Apellidos : " + Antonio.apellidos +
"<br>Edad : "+Antonio.edad +
"<br>Color de Ojos : "+Antonio.colorOjos;
El resultado sería éste:
Otro punto importante de usar objetos es que pueden contener cualquier tipo de valor:
un número, una cadena, un array, una función o incluso otro objeto. Podemos crear por tanto
en la definción del objeto todo lo que necesitemos para en un futuro poder usarlo, por ejemplo
vamos agregarle un método a nuestro objeto Persona donde nos devuelva el nombre completo,
el nombre más los apellidos:
var Persona = function (nombre, apellidos, edad, colorOjos) {
this.nombre = nombre;
326
this.apellidos = apellidos;
this.edad = edad;
this.colorOjos = colorOjos;
function nombreCompletoPersona(){
return nombre+" "+apellidos;
this.nombreCompleto = nombreCompletoPersona();
Si ahora cogemos y declaramos nuevamente nuestro objeto, tendríamos:
var Antonio = new Persona('Antonio', 'González Martínez', '23', 'Azules');
document.getElementById("textoSalida").innerHTML =
"<br>Nombre : "+Antonio.nombre +
M3. JQUERY
"<br>Apellidos : " + Antonio.apellidos +
"<br>Edad : "+Antonio.edad +
"<br>Color de Ojos : "+Antonio.colorOjos +
"<br>Nombre completo: "+Antonio.nombreCompleto +
"<br>Nombre erróneo: "+Antonio.nombreCompletoPersona;
Y nos mostraría por pantalla el siguiente resultado:
Si nos fijamos cuando hemos intentado acceder directamente a la función nombreCom-

pletoPersona nos ha dado undefined y no hemos podido acceder, y si probamos a acceder con:
Antonio.nombreCompletoPersona();
Nos dará un error el script entero y si accedemos en modo depurador del navegador F12,
dentro de la pestaña Consola, tendremos el siguiente error:
327
Uncaught TypeError: undefined is not a function
Otra forma que también permite sería usar dentro del objeto la siguiente definición:
this.nombreCompleto2 = function () {
return this.nombre+" "+this.apellidos;
};
Y para acceder debemos usar corchetes en este caso, porque estaríamos accediendo a la
función y no a la propiedad:
Antonio.nombreCompleto2();
Este error es difícil de detectar y aunque a veces el navegador en modo depurador nos
da información si pulsamos en la pestaña consola, otras veces hay que revisar y ser muy metó-
dico en la programación, sino en grandes proyectos será muy difícil detectar donde se ha pro-
ducido el error.
Otra forma de tener métodos o proporcionar nuevas características es crear métodos

prototypados de los objetos, usando la palabra resevada prototype.
Aula Mentor
Persona.prototype.nombreCompleto3 = function () {
return this.nombre+" "+this.apellidos;
};
Y para acceder a ella, podemos hacerlo como en el caso anterior con el doble corchete
después del nombre asignado ().
Antonio.nombreCompleto3();
Pero no sólo podemos agregar métodos a nuestros objetos creados, podemos hacerlo
también a funciones propias de JavaScript, como por ejemplo:
Array.prototype.contarRepetidos = function(palabraBuscada){
var contador = 0;
for (var i = this.length - 1; i >= 0; i--) {
if(this[i] == palabraBuscada)
328 contador++;
};
return contador;
var miLista = ['Luis','María','Francisco','Luis','Emilio','Antonio','Luis'];
document.getElementById("textoSalida2").innerHTML = "Lista : ";
for (var i = miLista.length - 1; i >= 0; i--) {
document.getElementById("textoSalida2").innerHTML+= miLista[i];
if(i!=0) //para que en el último elemento no muestre una coma
document.getElementById("textoSalida2").innerHT-
ML+=" , ";
};
M3. JQUERY
document.getElementById("textoSalida2").innerHTML+=
"<br>El número de veces que aparece Luis en la lista es: "+miLista.contarRepetidos('Luis');
Si ejecutamos este script, nos mostrará por pantalla el siguiente mensaje:
Puedes visitar el ejemplo1-javascript/
4. Empezando a trabajar con jQuery.

jQuery es una librería que podemos usar gratuitamente y poder usar online o directa-
mente descargarla e incorporarla a nuestro servidor directamente. Como hemos comprobado en
el apartado anterior, jQuery está íntimamente ligado a JavaScript y usándolo pretendemos los
siguientes objetivos en nuestras aplicaciones web:
- Acceder al DOM y etiquetas y propiedades más fácilmente.
- Modificar la apariencia de nuestra web dinámicamente alterando el documento.

329
- Podemos interactuar aún más con el usuario facilitando el uso de eventos.
- Simplificar tareas comunes de JavaScript acelerando el desarrollo web.
- Realizar animaciones y efectos en un documento sin el uso de Flash.
Llegados a este punto, y como estamos acostumbrados cuando se habla de software,

framework o conjunto de script, siempre hay versiones y cada versión tendrá unas características
concretas, las cuales se podrán adaptar o no a nuestras necesidades. Hemos decidido usar la
última versión existente a fecha de la creación del manual, y queremos resaltar que es posible
que cuando accedas a descargarte la última versión exista otra diferente, en principio podrías
utilizarla sin problemas, pero te aconsejo si nunca has trabajado jQuery uses la versión del curso,
está en la sección de recursos.
Todavía se da soporte y puedes descargarte las últimas versiones de la 1.11.x, aunque

ya está la nueva versión 2.1.x. Esta última a diferencia de la 1.11.x da soporte a los navegadores
antiguos, ya que en la propia documentación de jQuery 2.1.x nos indica que no soporta la ver-
siones de Internet Explorer 6, 7, or 8. Han eliminado las adaptaciones y código existente para
intentar mantener la apariencia, cosa que ha reducido el código acelerando la web, pero hemos
perdido mantener al máximo porcentaje la compatibilidad con estos navegadores.
Según la plataforma Netmarketshare el uso de Internet Explorer 8, a día de hoy ocupa el

21,19% de la población mundial:
Aula Mentor
http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0
En el gráfico se muestra que a día de hoy, sigue siendo el navegador más usado y no hay
ningún navegador que supere la cuota de éste y más de un 20% sobre el mercado creo que es
importante como para tenerlo en cuenta, y lo que es peor, un navegador tan antiguo como es
Internet Explorer 6.0 tiene una cuota del 4.08% que es muy superior a otros navegadores más
actuales como es FireFox.
Se ha decidido por tanto basarnos todo el curso en la última versión que soporta a esos
navegadores lo máximo posible la 1.11.1, pero ¡ojo! lo máximo posible, puede ser que haya ca-
sos excepcionales que tengamos problemas.
De todas formas, a lo largo del curso iremos haciendo pruebas con la última versión
y veremos los resultados obtenidos. Y si han sacado alguna versión posterior a la 1.11.1 en la
sección de recursos del curso tendrás la misma versión para que no tengas problemas.
Para empezar a trabajar nos vamos a la web oficial:

330
http://jquery.com/download/
M3. JQUERY
Vamos a descargarnos a la carpeta js de nuestro servidor el archivo:
Esta versión está pensada para programadores, y por eso está uncompressed, ya que esta
versión viene con documentación, comentarios de código, y está tabulada para su fácil lectura. Si
elegimos la versión compressed estaría sin ningún comentario, ni tabulada y ocuparía lo mínimo
posible para agilizar nuestro navegador, esta versión es la que debemos descargar cuando vaya-
mos a poner online nuestra web, y mientras trabajamos, por si tenemos alguna duda, usamos la
versión de desarrollador o descomprimida.
Versión sin tabuladores, comentarios…etc.

Tamaño 94KB
331
Versión tabulada y comentada. Etc. Tamaño 277KB
Para poder usar este archivo jQuery sólo tenemos que añadirlo a nuestro archivo HTML
en el <head></head> pero para enlazarlo usaremos la siguiente sentencia, si el archivo que nos
hemos bajado se llama jquery-1.11.1.js:
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
O también podemos cargarla directamente desde la web de jquery:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
O incluso otra opción interesante es desde los servidores de Google:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.

js"></script>
Básicamente podemos usar el fichero de forma remota o de forma local, dependiendo

del caso puede ser mejor una u otra. Por ejemplo si estas haciendo una web para un almacén y
en él tienes problemas de internet, no se aconseja la remota, ya que no se cargará el archivo y
no funcionará correctamente.
Pensamos que queremos hacer una aplicación donde vamos a tener tres botones y que
dependiendo de donde haga click el usuario nos muestre un texto u otro.
Aula Mentor
¿Cómo harías esto con HTML5 y CSS3? Este es un ejemplo muy sencillo y aunque haya-
mos usado funciones de JavaScript, realmente por si solo, no podríamos hacer ésto. Tienes la
solución en el siguiente link:
Puedes visitar el ejemplo2-jquery-empezando/
Y el código usado es:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />

332
<title>Módulo jQuery</title>
<link rel="stylesheet" type="text/css" href="css/miestilo.css">
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
<article>
<p id="mensaje">Aquí se mostrarán los mensajes</p>

M3. JQUERY
</article>
<article>
<form>
<input type="button" value="Opcion A" onclick="$('#mensaje').html('Ha elegido la opción A')">
<input type="button" value="Opcion B" onclick="$('#mensaje').html('Ha elegido la opción B')">
<input type="button" value="Opcion C" onclick="$('#mensaje').html('Ha elegido la opción C')">
</form>
<article>
</section>
<footer>
</footer>
</body>
333
</html>
¿Qué hay de nuevo en este código? Bueno, asignar un id a un párrafo, lo hemos reali-
zado muchas veces, le hemos asignado al párrafo un texto cualquiera para mostrar que se está
iniciando:
<p id="mensaje">Aquí se mostrarán los mensajes</p>
Y posteriormente lo que vamos hacer es que cuando el usuario haga onclick sobre el
botón, voy a usar la función html() y le voy a pasar un texto, en concreto con la opción que ha
elegido.
onclick="$('#mensaje').html('Ha elegido la opción A')"
Si en vez de coger el archivo jquery-1.11.1.js cogemos el archivo jquery-2.1.1.js obser-

varemos que no nos afecta por lo que realmente en este caso y muchos más que iremos co-
mentando en el curso. Si en nuestra web usamos estas funciones, nos interesaría usar la versión
anterior y así daríamos más soporte a los navegadores antiguos.
Pero sin embargo, en Internet Explorer 6, no funciona con la versión jquery-2.1.1.js

Aula Mentor
Y sin embargo si cargamos la versión 1.11.1 funcionaría sin ningún problema:
334
Volviendo al código del ejercicio, analicemos un poco más la sentencia que hemos usa-
do:
$('#mensaje')
En jQuery la función principal es jQuery( ) o en su forma corta $( ) y con ello estamos

diciendo que vamos a cargar algún elemento de la página, en este caso, queremos acceder al id
#mensaje, te debe recordar a cuando usabamos selectores en CSS3. No te resultarán muy difíci-
les usar selectores en jQuery, ya que se basan en características muy similares. Cuando usamos
#mensaje, estamos seleccionando el elemento HTML del documento que tiene ese identificador
(id), en nuestro caso <p id="mensaje"> .
Posteriormente vamos a usar una función que puede agregar texto HTML en donde esté
la etiqueta, por ejemplo si usamos .html(textoHtml), añadiremos al párrafo en este caso, el
texto que hemos seleccionado, html('Ha elegido la opción …') por eso, sustituye el texto que
había antes en la etiqueta y nos muestra el que hemos seleccionado con la función.
M3. JQUERY
Si no has entendido muy bien este último párrafo no te preocupes, se ha usado para que
podamos probar nuestro primer ejercicio de jQuery, y corresponde algunas funciones a leccio-
nes futuras, se ha usado para poder ver cómo interactuamos con el documento. Ahora lo que
importa es que sepas cómo debes llamar a tu fichero jquery desde tu fichero HTML y más ade-
lante iremos viendo más ejercicios y volveremos a retomar la edición del texto dinámicamente
entre otras muchas cosas más.
5. Selectores y filtros en jQuery.

Como hemos comentado, jQuery facilita la lectura del documento HTML para poder
acceder a sus elementos, y una vez que ha accedido, ver sus propiedades, modificarlas y añadir
otras en tiempo real. Aquí al igual que pasaba en el módulo de CSS3, tenemos que tener una
forma concreta y exacta de seleccionar el elemento correcto, por lo que jQuery nos facilita una
serie de selectores similares a los de CSS3.
Si recuerdas en JavaScript vimos unos métodos para acceder a los elementos del docu-
mento (DOM), getElementById Y getElementByTagName, etc. Con jQuery se han transformado
para poder acceder a los mismos elementos pero de una forma más sencilla, por tanto tendría-
mos los siguientes selectores:
5.1. Selector de Etiqueta.
Al igual que en CSS3 cuando queremos acceder al identificador podemos hacerlo lla-
mándo directamente sobre las etiquetas que queremos actuar:
335
$("etiqueta")
Por ejemplo si queremos acceder a la etiqueta lista, seleccionando todas las etiquetas del
documento que sean listas no ordenadas, podíamos usar la siguiente sintaxis:
$("ul")
5.2. Selector de Id.
Para seleccionar los identificadores de nuestra web, podemos usar el caracter #, y al igual
que pasaba en CSS3 debes recordar que debe existir sólo una definición del identificador, en
caso que existan más, no se aplicarán a todas, sino como vimos en CSS3 a la primera etiqueta
que encuentre al leer el documento.
$("#identificador")
Imagina que has creado un identificador llamado miboton, tendremos que usar la si-
guiente sintaxis para seleccionarlo:
$("#miboton")
5.3. Selector de Clase.
Para seleccionar nuestra clases definidas en nuestro documento podemos usar el selector
de clase de jQuery, y éste si puede estar definido en varios sitios del documento:
Aula Mentor
$(".clase")
Si tenemos una clase que se llama ocultarme y queremos seleccionar todos los elemen-
tos que tengan esa clase, podremos usar:
$(".ocultarme")
Veamos un ejemplo usando selectores de etiqueta, id y de clase, supongamos el siguien-

te código HTML:
<p>Dependiendo de que botón eligas, se ocultarán varios o todos los elementos de la lista </p>
<ul>
<li class="ocultame">Elemento 1</li>
<li>Elemento 2</li>
<li class="ocultame">Elemento 3</li>
</ul>
336 <button id="muestraLista">Muestra Lista</button>
<button id="ocultaLista">Oculta Lista</button>
<button id="ocultaItem2">Oculta Item 1 y 3</button>
Tendremos los siguientes elementos HTML:
Etiqueta: <p> <ul> <li> <button>
Id: muestraLista, ocultaLista, ocultaItems
Clase: ocultame
Veamos un ejemplo completo y sólo adelantaremos una propiedad que podemos usar
sobre las etiquetas HTML que es para ocultar una etiqueta seleccion.hide() o para mostrar selec-
cion.show(). Más adelante veremos muchos más métodos y eventos; ahora centrémonos en la
selección de elementos.
1. <script type="text/javascript">
2. $(document).ready(function(){
3.
4. $("#muestraLista").click(function(){
M3. JQUERY
5. $("ul").show();
6. $(".ocultame").show();
7. });
8. $("#ocultaLista").click(function(){
9. $("ul").hide();
10. });
11. $("#ocultaItems").click(function(){
12. $("ul").show();
13. $(".ocultame").hide();
14. });
15.
16. });
17. </script> 337
Puedes visitar el ejemplo3-selectores/
Las líneas 1 y 17 es la forma de decir al navegador que vamos a insertar texto de tipo
javascript o jQuery, aunque se puede omitir y dejar exclusivamente con <script></script>.
La línea dos es una de las principales y más importantes de jQuery, ya que en ella, esta-
mos diciendo que hasta que no se lea el documento no esté accesible el script, ésto es porque si
una página no ha terminado de cargar los elementos y nosotros en nuestro script, seleccionamos
una etiqueta que no está, y a lo mejor toda nuestra aplicación o parte depende de ese elemento
o etiqueta, fallará y el usuario no comprenderá que ha pasado.
Esta forma de llamar al documento, se puede decir de varias formas, por si en algún ma-
nual o documentación lo encuentras definido de otra forma, ten presente que son otras formas
de decir lo mismo:
$(function(){
alert('Se ha cargado el documento');
});
Pruébalo y ya verás como cuando termine de cargar el documento aparece una ventana
emergente indicándote el mensaje. De todas formas, aún existiendo esta función abreviada, te
recomiendo que al inicio uses la otra denominación.
Aula Mentor
En las líneas 4, 8 y 11 estamos usando el selector de identificador (ID) que hemos asig-
nado a cada botón, y una vez que lo hemos seleccionado podemos interactuar con él, en este
caso, hemos aplicado el evento .click y creamos una función para ocultar o mostrar el elemento
según me interese.
En las líneas 5,9 y 12 estamos usando un selector de etiqueta, en este caso el de la lista
<ul> y dependiendo de nuestro programa, mostramos o ocultamos el contenido.
En las líneas 6 y 13 estamos usando un selector de clase, llamando a todos los elementos
que tiene esa clase asignada, como son los ítems 1 y 3 de la lista definida en el HTML.
Bien, ahora es cuando tenemos que hacer nuestro algoritmo para interactuar con los
elementos web según queramos. ¿Qué queremos hacer? ¿Cómo nos planteamos el ejercicio?. El
80% de todo el trabajo en los algoritmos es el análisis del programa, los parámetros de entrada
que vamos a tener y cuál es la mejor forma de procesar los datos y hacer sobre todo lo que
tengamos planeado. El resto, es como se suele decir en el argot "teclear código".
5.4. Conjunto completo de selectores.
Una vez entendido la idea de que son los selectores, y habíendonos parado en los más
comunes, entendiendo que es una forma de filtrar, seleccionar las etiquetas y elementos de un
documento html, vamos a exponer los selectores más comunes en jQuery y aunque se repiten
las tres iniciales, los adjuntos todos en una tabla y seguidos para que los tengas todos centrados
y te sea fácil buscar el selector o filtro que necesites en cada situación:
338
Selector Ejemplo Conjunto de elementos o
acción
* $("*") Todos los elementos
#id $("#identificador") El elemento con identificador
id="identificador"
.class $(".miclase") Todos los elementos con
que pertenezcan a la clase
class="miclase"
.class,.class $(".miclase1,.miclase2") Todos los elementos con la
clase "miclase1" o "miclase2"
element $("p") Todas los elementos de la eti-
queta HTML <p>
el1,el2,el3 $("h1,div,p") Todos los elementos que ten-
gan las siguiente etiquetas
<h1>, <div> y <p>
:first $("p:first") El primer elemento HTML, en

este caso, la primera etiqueta
<p>
:last $("p:last") El último elemento HTML, en
este caso, la última etiqueta
<p>
M3. JQUERY
:even $("tr:even") Selecciona las líneas pares

con índice JavaScript 0, 2 y 4,
usada para crear tablas con fi-
las de color dispar.
:odd $("tr:odd") Selecciona las líneas impares
con índice JavaScript 1, 3 y 5.
:first-child $("p:first-child") Todos los elementos <p> que

son el primer hijo de su padre.
:first-of-type $("p:first-of-type") Todos los elementos <p> que
son el primer elemento <p>
de su padre.
:last-child $("p:last-child") Todos los elementos <p> que
son el último hijo de su padre
:last-of-type $("p:last-of-type") Todos los elementos <p> que
son el último elemento <p>
de su padre
:nth-child(n) $("p:nth-child(2)") Todos los elementos <p> que
son el número de hijo de sus
padres, en este el segundo.
:nth-last-child(n) $("p:nth-last-child(2)") Todos los elementos <p> que
son el número de hijo de sus
padres, en este el segundo
contando desde el final 339
:nth-of-type(n) $("p:nth-of-type(2)") Todos los elementos <p> que
son el segundo elemento <p>
de su padre
:nth-last-of-type(n) $("p:nth-last-of-type(2)") Todos los elementos <p> que
son el segundo elemento <p>
de su padre, a contar desde el
último hijo
:only-child $("p:only-child") Todos los elementos <p> que
son el único hijo de su padre.
:only-of-type $("p:only-of-type") Todos <p> elementos que son
la única hijo, de su tipo, de
sus padres
parent > child $("div > p") Todos los elementos <p> que
son un hijo directo de un ele-
mento <div>
parent descendant $("div p") Todos los elementos <p> que
son descendientes de un ele-
mento <div>
element + next $("div + p") El elemento <p> que están al
lado de cada uno de los ele-
mentos <div>
Aula Mentor
element ~ siblings $("div ~ p") Todos los elementos <p> que

son hermanos de un elemento
<div>
:eq(index) $("ul li:eq(3)") Seleccina un elemento con-

creto con el valor del índice,
en este caso el tercer elemen-
to de la lista.
:gt(no) $("ul li:gt(3)") Seleccionala los elementos
con un valor superior al valor
dado, en este caso 3.
:lt(no) $("ul li:lt(3)") Seleccionala los elementos
con un valor inferior al valor
dado, en este caso 3.
:not(selector) $("input:not(:empty)") Excluye de la selección todos
los elementos que responden
al criterio que especifica el se-
lector. En este caso todos los
elementos que no están va-
cíos.
:header $(":header") Devuelve todos los elementos

de título, <h1>, <h2> ...
340 :animated $(":animated") Selecciona todos los elemen-
tos animados.
:focus $(":focus") El elemento que tiene el foco
o atención en ése momento.
Por ejemplo para formularios
el campo actual que está edi-
tando el navegador.
:contains(text) $(":contains('Hello')") Todos los elementos que con-
tiene el texto "Hola".
:has(selector) $("div:has(p)") Todos los elementos <div>
que tienen un elemento <p>
:empty $(":empty") Todos los elementos que es-
tán vacíos.
:parent $(":parent") Todos los elementos que son
uno de los padres de otro ele-
mento.
:hidden $("p:hidden") Todos los elementos ocultos,
en este caso todos los <p>
que estén ocultos.
:visible $("table:visible") Todos los elementos visibles,
en este caso, todas las tablas
visibles.
M3. JQUERY
:root $(":root") Selecciona el elemento raíz.

Una vez que esté podemos
hacer lo que deseemos, por
ejemplo, cambiar el fondo:
$(":root").css("background-
color","blue");
:lang(language) $("p:lang(es)") Todos los elementos <p> con
un valor de atributo lang co-
menzando con "es"
[attribute] $("[href]") Todos los elementos con el

atributo href
[attribute=value] $("[href='obras.htm']") Todos los elementos que ten-
gan el atributo en href igual a
"obras.htm"
[attribute!=value] $("[href!=' obras.htm']") Todos los elementos con un
valor de atributo href no es
igual a "obras.htm"
[attribute$=value] $("[href$='.jpg']") Todos los elementos con un
valor de atributo href que ter-
mina con ".jpg"
[attribute|=value] $("[title|='miweb']") Todos los elementos con un
valor de atributo de título 341
igual a 'miweb', o que empie-
zan con 'miweb' seguido de
un guion
[attribute^=value] $("[title^='Mig']") Todos los elementos con un
valor de atributo de título que
empieza con "Mig"
[attribute~=value] $("[title~='miweb']") Todos los elementos con un
valor de atributo de título que
contiene la palabra "miweb"
específica
[attribute*=value] $("[title*='miweb']") Todos los elementos con un
valor de atributo title que con-
tienen la palabra "miweb"
:input $(":input") Todos los elementos input

:text $(":text") Todos los elementos del
tipo="text" type="text"
:password $(":password") Todos los elemen-
tos del tipo="password"
type="password"
:radio $(":radio") Todos los elementos del
tipo="radio" type="radio"
Aula Mentor
:checkbox $(":checkbox") Todos los elemen-

tos del tipo="checkbox"
type="checkbox"
:submit $(":submit") Todos los elementos del
tipo="submit" type="submit"
:reset $(":reset") Todos los elementos del
tipo="reset" type="reset"
:button $(":button") Todos los elementos del
tipo="button" type="button"
:image $(":image") Todos los elementos del
tipo="image" type="image"
:file $(":file") Todos los elementos del
tipo="file" type="file"
:enabled $(":enabled") Todos los elementos input
enabled
:disabled $(":disabled") Todos los elementos input di-
sabled
:selected $(":selected") Todos los elementos input se-
lected
:checked $(":checked") Todos los elementos input
checked
342 Como puedes ver, hay muchas formas de seleccionar y cambiar los elementos de forma
masiva, selectiva o jerárquica. Como ya hemos visto en CSS3 una vez que tenemos el elemento
correcto aplicamos las propiedades que queremos a ese elemento, aquí podemos hacer exac-
tamente lo mismo e incluso como veremos en apartados posteriores aplicar estilos CSS desde
jQuery. Eso no quiere decir que lo sustituye, en absoluto, lo complementa, al poder modificar
las propiedades dinámicamente, podrías por ejemplo cambiar de fondo o de color de letra cada
segundo, ocultar elementos o mostrar elemento como en el ejemplo 4 de la lista.
Existen muchos selectores que están indicados, o mejor dicho, se suelen usar para deter-
minados componentes de la web, uno muy útil es el de los formularios, donde tenemos acceso
a <input type="text"… type="button"…etc, con él podemos seleccionar todos los elementos y
tratar dinámicamente el texto que está introducciendo. Otros elementos están muy indicados
para las tablas, :first, :last, :even, :odd, que podríamos decir: la primer fila de la tabla (cabecera),
la última (resumen de tabla), las filas pares de un color y las filas impares de otro.
Hay un punto muy importante que poco a poco debes de ir comprendiendo, para sa-
carle realmente el partido a HTML5, CSS3 y jQuery; has de hacer un estudio y diseño previo
concienzudo, es más, incluso no debemos dejar de lado usar eficazme los nombres, y me refiero
a nombres lógicos que en un futuro me pueden ayudar, por ejemplo:
Tenemos un menu horizontal, un menu lateral y un menu inferior, si usamos los nombres
de clase o identificador, por ejemplo, en vez de usar:
<div id="horizontal">…</div>
<div id="lateral> … </div>

M3. JQUERY
<div id="inferior>… </div>
Sería mejor usar
<div id="menu-horizontal">… </div>
<div id="menu-lateral>… </div>
<div id="menu-inferior>… </div>
Y si estamos usando un tipo de letra concreto para los menús, o un estilo concreto, po-
dríamos hacer uso del selector $("[div|='menu']") y podemos acceder de golpe a los elementos
anteriores y una vez seleccionados aplicar las propiedades o acciones que tengamos pensadas.
Si el nombre no hubiera sido precedido por la palabra menu, se podría hacer, pero tendríamos
que ir uno por uno, que al final es más líneas de código, más complejo, más posibilidad de error
y peor para futuros cambios.
6. Eventos.
El usuario tiene varias formas de interactuar con las aplicaciones web, y jQuery tiene
muchos mecanismos para facilitar que sean dinámicas y respondan a cierto eventos. También se
podría usar JavaScript, como hemos dicho anteriormente, jQuery es un motor que usa en defini-
tiva JavaScript sólo que remodelado para facilitar el trabajo al desarrollador. Veamos los eventos
que disponemos en jQuery, para ello vamos a ver eventos referidos a varios actores respecto a
nuestro documento:
343
6.1. Eventos del ratón.
Evento .click()
Descripción Enlaza un controlador de eventos para el
evento "click" con JavaScript o desencadena
ese evento en un elemento.
Ejemplo $("miseleccion").click(function(){
//Mis acciones
});
Evento .dblclick()
evento "dobleclick" con JavaScript o desenca-
dena ese evento en un elemento.
Ejemplo $("miseleccion").dblclick(function(){
//Mis acciones
});
Aula Mentor
- Este evento también está presente en los eventos de teclado.
Evento .focusout()
Descripción Enlaza un controlador de eventos al evento
"focusOut" de JavaScript. Este evento se dis-
para cuando el elemento pierde el foco, por
ejemplo en un formulario cuando estamos en
un campo y le damos al tabulador para pasar
al siguiente campo, este llamaría al evento .fo-
cusout.
Ejemplo $("miseleccion").focusout(function() {
//Mis acciones
})
Evento .hover()
Descripción Enlaza uno o dos controladores a los elemen-
tos coincidentes, y se ejecutará cuando el pun-
tero del ratón entra y sale de los elementos.
Ejemplo $("miseleccion").hover(function() {
//Mis acciones
344
})
Evento .mouseup()
Descripción Enlaza un controlador de eventos al even-
to "mouseup" de JavaScript. Este se activará
cuando se ha presionado el ratón al soltar la
presión sobre el ratón.
Ejemplo Bind an event handler to the "mouseup" JavaS-
cript event, or trigger that event on an element.
Evento .mousedown()
"mousedown" de JavaScript. Este se activará
cuando se ha presionado el ratón hasta llegar
a activar el click del ratón, (sin tener que soltar
la presión sobre el ratón este se activará).
M3. JQUERY
Ejemplo $("miseleccion").mousedown(function() {
//Mis acciones
})
Evento .mouseenter()
Descripción Enlazar un controlador de eventos para ser
disparado cuando el ratón entra en un ele-
mento, es muy similar al evento .hover, pero
no son iguales.
Ejemplo $("miseleccion"). mouseenter(function() {
//Mis acciones
})
Evento .mouseleave()
Descripción Enlaza un controlador de eventos para ser dis-
parado cuando el ratón sale de un elemento.
Ejemplo $("miseleccion"). mouseleave(function() {
//Mis acciones 345
})
Evento .mouseout()
"mouseout" de JavaScript. Se activa cuando el
ratón sale fuera del elemento.
Ejemplo $("miseleccion"). mouseout(function() {
//Mis acciones
})
Evento .mouseover()
evento "mouseover" de JavaScript. Se activa
cuando el ratón pasa por encima del elemento
Ejemplo $("miseleccion"). mouseover (function() {
//Mis acciones
})
Aula Mentor
Evento .mousemove()
"mousemove" de JavaScript. Se activa cuando
el ratón se mueve, además podemos sacar las
coordenadas del mismo.
Podemos acceder para ello a las variables:
event.pageX e event.pageY. Para la distan-

cia del ratón a la esquina superior izquierda
del documento.
event.clientX e event.clientY. Para la distan-

cia del ratón a la esquina superior izquierda
del la ventana visible que tiene el cliente ac-
tual. Es decir, si minimizas la ventana un 50%,
y te situas en la parte del centro de un div, la
distancia de event.page, será la misma inde-
pendientemente, con event.client será diferen-
cia ya que es relativa a la ventana actual del
cliente. Ver el ejemplo donde sobre eventos
para saber distinguir: Ejemplo5-eventos-mou-
se/
Ejemplo $("miseleccion"). mousemove(function() {
346
//Mis acciones
})
6.1.1. Ejemplo: .click().
Este evento asocia una función al evento "click" del ratón sobre los elementos de la selec-
ción. Normalmente esta asociado a botones, pero pueden ser otros elementos ya que en nuestra
web muchas veces no todo es lo que parece y lo que parece que sea un botón, puede ser una
lista con unas propiedades determinadas, como vimos en los ejemplos de los menús.
Puedes visitar el ejemplo5-eventos-mouse/
Una forma para depurar errores, ya que suele ser muy común escribir el nombre equi-
vocado o no aplicarle el evento correcto es utilizar el modo depurador del navegador F12, pero
esta vez, si usamos Google Chrome, en la pestaña Elements, en el apartado de la derecha pin-
chamos en EventListener (Escuchadores de eventos) podremos comprobar que tenemos activo
M3. JQUERY
el evento .click en el párrafo.
En el ejemplo anterior tendríamos las siguientes definiciones:
Artículo dentro del html
...
<article>
<p>EVENTOS: click() </p>
<ul>
<li>Elemento 1</li>
347
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<button id="muestraLista">Muestra Lista</button>
<button id="ocultaLista">Oculta Lista</button>
<p class="cambiacolor">Soy un párrafo y si haces click sobre mí cambio de color </p>
</article>
...
Parte de jQuery
$(document).ready(function(){
$("#muestraLista").click(function(){
$("ul").show();
Aula Mentor
});
$("#ocultaLista").click(function(){
$("ul").hide();
});
$(".cambiacolor").click(function(){
// Acceso a la propiedad color del párrafo
var coloractual = $(".cambiacolor").css("color");
//Compruebo si es rojo, y si lo es lo pongo azul,
//en caso contrario lo pongo rojo
if(coloractual == "rgb(255, 0, 0)")
$(".cambiacolor").css("color","blue");
else
348 $(".cambiacolor").css("color","red");
});
});//fin de la lectura del documento
</script>
Y en la parte de CSS tenemos una clase para asignar un color inicial:
<style type="text/css">
.cambiacolor{
color: red;
</style>
Conforme vayamos haciendo click en el párrafo, obtendremos un color, rojo o azul, se-
gún el color actual del texto.
M3. JQUERY
6.1.2. Ejemplo: .dblclick.
Podemos capturar el evento "doble click" sobre algún elemento HTML, similar a click,
pero esta vez tendremos que usar dos click seguidos, siguiendo con el ejemplo anterior podría-
mos tener:
Artículo dentro del HTML
<p>EVENTO: dblclick() </p>
<hr>
<p class="cambiacolor2">Soy un párrafo y si haces dos clicks sobre mí cambio de color </p>
Código jQuery
$(".cambiacolor2").dblclick(function(){
// Acceso a la propiedad color del párrafo
var coloractual = $(".cambiacolor2").css("color");
//Compruebo si es rojo, y si lo es lo pongo azul, 349
//en caso contrario lo pongo rojo
if(coloractual == "rgb(255, 0, 0)")
(".cambiacolor2").css("color","blue");
else
$(".cambiacolor2").css("color","red");
});
});

Aula Mentor
6.1.3. Ejemplo: mouseover vs …out/enter/leave.
Puede resultar un poco confusa las definiciones sobre los eventos del ratón que hemos
comentado anteriormente. Para aclarar ésto, puedes usar el siguiente ejemplo para entender
cómo se comporta nuestra aplicación con los eventos del ratón, aunque agregaré el código, te
recomiendo que empieces por ejecutar el archivo en tu ordenador y posteriormente leer el có-
digo.
En el html tendríamos:
….
350
<article>
<br><hr><br>
<p>EVENTOS: mouseover vs mouseout vs mouseenter vs mouseleave </p>
<br><hr><br>
<div class="out overout">
<p>Mueve tu ratón</p>
<div class="in overout"><p>Mueve tu ratón</p><p>0</p></div>
<p>0</p>
</div>
<div style="margin: 30px"></div>
<div class="out enterleave">
<p>Mueve tu ratón</p>
M3. JQUERY
<div class="in enterleave"><p>Mueve tu ratón</p><p>0</p></div>
<p>0</p>
</div>
</article>
….
Y en el jQuery:
var i = 0;
$("div.overout")
.mouseover(function() {
$( "p:first", this ).text( "mouse over" );
$( "p:last", this ).text( ++i );
})

351
.mouseout(function() {
$( "p:first", this ).text( "mouse out" );
});
var n = 0;
$( "div.enterleave" )
.mouseenter(function() {
$( "p:first", this ).text( "mouse enter" );
$( "p:last", this ).text( ++n );
})
.mouseleave(function() {
$( "p:first", this ).text( "mouse leave" );
});
Aula Mentor
6.1.4. Ejemplo: .mousemove().
Con este evento capturamos la posición exacta del usuario de nuestro ratón y podemos
obtener los valores numéricos respecto al documento y la ventana del cliente. Supongamos que
tenemos una caja donde vamos a detectar la posición exacta del ratón:
Tendríamos en el fichero html:

352
...
<p>EVENTO: mousemove, fíjate que los valores even.page y even.client no coincide, reduce el tamaño de
la ventana y comprueba como afectan los valores</p>
<br><hr><br>
<p>
<span>Mueve el ratón por la caja azul.</span>
<span> </span>
</p>
<div id="detectaRaton"></div>
...
En el fichero CSS:
#detectaRaton {
width: 400px;
M3. JQUERY
height: 400px;
margin: 10px 50px 10px 10px;
background: blue;
border: 2px groove;
En el jQuery tendríamos:
...
$("#detectaRaton").mousemove(function( event ) {
var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";
var clientCoords = "( " + event.clientX + ", " + event.clientY + " )";
$( "span:first" ).text( "( event.pageX, event.pageY ) : " + pageCoords );
$( "span:last" ).text( "( event.clientX, event.clientY ) : " + clientCoords );

353
});
...
6.1.5. Ejemplo: .mouseup / .mousedown.
Otro evento que podemos capturar del usuario de nuestra web es cuando en un click ha
pulsado y soltado la tecla. Debemos pensar que cuando hacemos click en cualquier link real-
mente ocurren dos eventos:
Mousedown: Has presionado el botón del ratón sobre el elemento.
Mouseup: Has soltado el botón del ratón.

Aula Mentor
En el fichero html tendríamos:
...
<br><hr><br>
<p>EVENTO: mouseup vs mousedown</p>
<br><hr><br>
<p class="textoMouseUpDown">Haz click sobre este cuadrado y comprueba en qué momento esta el "click"
del ratón</p>
<div id="controlClick"></div>
...
En el CSS solo le hemos dado un ancho, alto y color de fondo:
#controlClick{
width: 200px;
height: 200px;
354
background-color: blue;
En el fichero js donde tenemos nuestro código jQuery tendremos:
...
$( "#controlClick" ).mousedown(function( event ) {
$( ".textoMouseUpDown" ).text("Mouse Down. Has pulsado sin soltar el botón");
});
$( "#controlClick" ).mouseup(function( event ) {
$( ".textoMouseUpDown" ).text("Mouse Up. Has soltado el botón");
});
...
M3. JQUERY
6.2. Eventos del teclado.
Evento .focusout()
"focusOut" de JavaScript. Este evento se dis-
para cuando el elemento pierde el foco, por
ejemplo en un formulario cuando estamos en
un campo y le damos al tabulador para pasar
al siguiente campo, éste llamaría al evento .fo-
cusout.
Ejemplo $("miseleccion"). focusout(function() {
//Mis acciones
})
Evento .keydown()
"keydown" de JavaScript, parecido al evento
.mousedown pero esta vez en el teclado.
Ejemplo $("miseleccion"). keydown(function() {
//Mis acciones
355
})
Evento . keyup()
Descripción Enlaza un controlador de eventos al even-
to "keyup" de JavaScript, parecido al evento
.mouseup pero esta vez en el teclado.
Ejemplo $("miseleccion"). keyup(function() {
//Mis acciones
})
Evento . keypress()
"keypress" de JavaScript. Este evento se acti-
vará cuando ocurra el keyup y keydown en el
mismo evento, por ejemplo, si pulsamos una
tecla en un campo de un formulario y nos va-
mos a otro campo con el ratón (sin soltar la
tecla y si no repite la tecla en tiempo) no se
llamará a este evento.
Aula Mentor
Ejemplo $("miseleccion"). keypress(function() {
//Mis acciones
})
Veamos varios ejemplos:
Ejemplo .focusout()
356
Puedes visitar el ejemplo6-eventos-teclado/
Tendríamos en el html:
...
<div class="unaCaja">
<h3>.focusout()</h3>
<h5>Ve pasando de un a otro campo ya sea con el TAB o con el ratón y captura el evento
.focusout()</h5>
<label>Nombre</label>
<input type="text" name="nombre" value="" class="misInput">
<label>Apellidos</label>
<input type="text" name="Apellidos" value="" class="misInput">

M3. JQUERY
<label>Teléfono</label>
<input type="text" name="" value="" class="misInput">
<p id="textoSalida1">focusout activado: 0 veces</p>
</div>
...
En el CSS:
.unaCaja{
width: 250px;
height: 250px;
border-width: 1px;
border-style: solid;
border-color: blue; 357
text-align: right;
h3, h5{
text-align: center;
En nuestro archivo jQuery:
var focus = 0;
$( ".misInput" )
.focusout(function() {
focus++;
$( "#textoSalida1" ).text( "focusout activado: " + focus + " veces" );

Aula Mentor
});
Ejemplo .keydown, .keypress y .keyup
Vamos a ver un ejemplo muy interesante en el que sacaremos muchas conclusiones y

además comprobaremos que podemos capturar que está haciendo el usuario en cada momento,
además, el orden que el navegador ha detectado en cada momento, no siempre sera el mismo,
por ejemplo, si pulsas una tecla y no la sueltas, se escribirán muchas letras, pero no se activará
el keyup:
Puedes visitar el ejemplo6-eventos-teclado
En la parte de html podríamos tener el siguiente código:

358
...
<h3>.keypress(),.keyup(),.keydown()</h3>
<h5>Escribe una letra o varias, pero observa el Orden y el número de veces que se
activa.</h5>
<p id="textoSalida2">(ORDEN: <span></span>)keydown activado: 0 veces</p>
<p id="textoSalida3">(ORDEN: <span></span>)keypress activado: 0 veces</p>

M3. JQUERY
<p id="textoSalida4">(ORDEN: <span></span>)keyup activado: 0 veces</p>
</div>
...
Y en la parte de jQuery tendríamos:
var keypress = 0;
var keydown = 0;
var keyup = 0;
var posicion = 0;
$( ".misInput" )
.keydown(function() {
posicion++;
keydown++;
359
$( "#textoSalida2" ).text( "(ORDEN: "+posicion+")keydown activado: " + keydown + " veces" );
})
.keypress(function() {
posicion++;
keypress++;
$( "#textoSalida3" ).text( "(ORDEN: "+posicion+")keypress activado: " + keypress + " veces" );
})
.keyup(function() {
posicion++;
keyup++;
$( "#textoSalida4" ).text( "(ORDEN: "+posicion+")keyup activado: " + keyup + " veces" );

Aula Mentor
});//¡OJO! EL ";" Indica al navegador cuando dejamos de escuchar eventos de $( ".misInput" )
Debes fijarte que podemos "escuchar" diferentes eventos sobre el mismo selector, en este
caso, para ahorrar código se puede usar seguidos uno detrás del otro, y finalizaremos cuando
pongamos el punto y coma. Es un fallo típico poner el ";" antes y no se ejecutarán las capturas de
eventos que hayamos declarado a continuación, deberemos declarar nuevamente el selector $(
"seleccion" ).evento en el mejor de los casos, pero lo normal es que nos dé un error de Script
y no funcionará nada de ese bloque.
Te aconsejo que hagas la siguiente prueba, cambia el ";" que hay al final del evento .ke-
yup e insertalo en el evento anterior key.
.keypress(function() {
posicion++;
keypress++;
$( "#textoSalida3" ).text( "(ORDEN: "+posicion+")keypress activado: " + keypress + " veces" );
}); // <-- Pon aquí el punto y coma
360 .keyup(function() {
posicion++;
keyup++;
$( "#textoSalida4" ).text( "(ORDEN: "+posicion+")keyup activado: " + keyup + " veces" );
})// <-- Quita de aquí el punto y coma
Si ejecutamos nuestro script, no funcionará nada, y si usamos el modo depurador del

navegador y nos vamos a la pestaña console nos indicará en Google Chrome el error que nos
dá:
Incluso nos dice más, a la derecha nos dirá el nombre del archivo y la línea donde ha co-
menzado a tener el error o ha detectado un error de patrón, en este caso, ha detectado el token
. que para el navegador es que ha terminado de leer los eventos y no entiende a qué elemento
le estamos escuchando el evento, ya que no corresponde con la sintaxis correcta $( "seleccion"
).evento.
Podemos saber cuándo ha pulsado o escrito un carácter el usuario, y también podemos saber el
número de caracteres que tiene un campo, podremos pasar al siguiente campo cuando se haya
rellenado, por ejemplo el dni o número de teléfono tiene un número fijo de caracteres, cuando
M3. JQUERY
lleguemos a su tope, podemos pasar al siguiente campo, ahorrando al usuario incluso que tenga
que pulsar el tabulador TAB.
6.3. Eventos de formularios.
Otro de los eventos que nos son muy útiles en nuestras páginas web es el control sobre
los formularios, es decir, escuchar y detectar los estados diferentes del formulario y poder inte-
ractuar con ellos una vez que el usuario los ha lanzado.
A continuación vamos a ver los difirentes eventos que podemos detectar.
Evento .blur()
"blur" de JavaScript, El evento blur se dispa-
ra cuando pierde el foco de control. Indica-
do para los formularios: text, textarea, button,
checkbox, fileupload, password, radio, reset y
submit.
Ejemplo $("miseleccion"). blur(function() {
//Mis acciones
})
361
Evento .change()
"change" de JavaScript, Con este envento po-
dremos detectar entre otras cosas cuando el
usario ha cambiado el estado de alguna selec-
ción multiple.
Ejemplo $("miseleccion"). change(function() {
//Mis acciones
})
Evento .focus()
"focus" de JavaScript, detectando cuándo el
elemento en cuestión tiene el foco del nave-
gador.
Ejemplo $("miseleccion"). focus(function() {
//Mis acciones
})
Aula Mentor
Evento .focusin()
Descripción Detectaría cuándo el elemento ha cogido el
foco del navegador.
Ejemplo $("miseleccion"). focusin(function() {
//Mis acciones
})
Evento .select()
"select" de JavaScript, detectando si el usuario
ha realizado alguna selección en el formulario
Ejemplo $("miseleccion"). select(function() {
//Mis acciones
})
Evento .submit()
"submit" de JavaScript, detectando cuándo el
362 usuario ha realizado submit en un formulario.
Este evento es muy utilizado para confirmar
y detectar si el usuario ha rellenado correcta-
mente los datos de un formulario, por ejemplo,
no lo dejaremos pasar hasta que haya escrito
el texto, Entiendo y acepto las condiciones.
Ejemplo $("miseleccion"). submit(function() {
//Mis acciones
})
Vemos algunos ejemplos:
.focusout vs .blur vs .focus vs .focusin
Debido a las similitudes de algunos métodos, vamos a realizar un ejemplo, donde los
vamos a enfrentar y ver, qué elemento se coge antes y en qué momento correcto se activaría.
FocusIn se activa justo al inicio de coger el foco del elemento cuando estamos en un
campo de texto, pero si se trata de un elemento dentro de otro, el elemento padre, tomará el
focusIn, pero nunca cogerá el focus, lo hará el elemento hijo. Para ello, fíjate en el ejemplo
que hay dos partes, una donde se muestra los eventos que hay cuando nos movemos dentro
de nuestro formulario, y otra donde mostramos los valores respecto del div. Es muy importante
tener claro ésto porque podemos detectar que dependiendo del caso, nunca se llega a ejecutar
el evento que deseamos sobre el elemento.
M3. JQUERY
Puedes visitar el ejemplo7-eventos-form/
Respecto al html tendríamos lo siguiente:
...
<p>Respecto a nuestra caja o div</p>
<p id="textoSalida5">(ORDEN: )Focus activado: 0 veces. Color -> Rojo</p>

363
<p id="textoSalida6">(ORDEN: )FocusOut activado: 0 veces. Color -> Verde</p>
<p id="textoSalida7">(ORDEN: )FocusIn activado: 0 veces. Color -> Vainilla</p>
<p id="textoSalida8">(ORDEN: )Blur activado: 0 veces. Color -> Azul</p>
<h3>.focusout() vs .blur</h3>
<h5>Ve pasando de un a otro campo ya sea con el TAB o con el ratón y capta el evento
.focusout()</h5>

Aula Mentor
<p id="textoSalida1">(ORDEN: )Focus activado: 0 veces</p>
<p id="textoSalida2">(ORDEN: )FocusOut activado: 0 veces</p>
<p id="textoSalida3">(ORDEN: )FocusIn activado: 0 veces</p>
<p id="textoSalida4">(ORDEN: )Blur activado: 0 veces</p>
</div>
...
Respecto al jQuery
//Variables para dentro de la caja
364 var focus = 0;
var focusout = 0;
var focusin = 0;
var blur = 0;
//Variables para la caja
var midivfocus = 0;
var midivfocusout = 0;
var midivfocusin = 0;
var midivblur = 0;
M3. JQUERY
//Contadores para ver el orden de llamada
var midivposicion = 0;
var posicion = 0;
$( ".misInput" )
.focus(function(){
$(this).css("background-color","lime");
posicion++;
focus++;
$( "#textoSalida1" ).text( "(ORDEN: "+posicion+")Focus activado: " + focus + " veces" );
})
.focusout(function(){
$(this).css("background-color","#ffffff");
posicion++; 365
focusout++;
$( "#textoSalida2" ).text( "(ORDEN: "+posicion+")FocusOut activado: " + focusout + " veces" );
})
.focusin(function(){
posicion++;
focusin++;
$( "#textoSalida3" ).text( "(ORDEN: "+posicion+")FocusIn activado: " + focusin + " veces" );
})
Aula Mentor
midivfocusout++;
$( "#textoSalida6" ).text( "(ORDEN: "+posicion+")FocusOut activado: " + midivfocusout + " veces.

Color -> Verde" );
})
$(this).css("background-color","#FFFFCC");
midivposicion++;
midivfocusin++;
$( "#textoSalida7" ).text( "(ORDEN: "+posicion+")FocusIn activado: " + midivfocusin + " veces.

Color -> Vainilla" );
})
.blur(function(){
$(this).css("background-color","blue");
366 midivposicion++;
midivblur++;
$( "#textoSalida8" ).text( "(ORDEN: "+posicion+")Blur activado: " + midivblur + " veces. Color ->
Azul" );
});
Y como CSS:
M3. JQUERY
.unaCaja{
width: 270px;
height: 360px;
border-width: 1px;
border-color: blue;
text-align: right;
margin-top: 30px;
h3, h5{
text-align: center;
Experimenta con el archivo y comprueba cuando se activa cada evento. 367
Ejemplo .change(), .submit() y .select()
Vamos a ver un ejemplo usando los tres eventos, change, submit y select, ambos muy
usuales en los formularios, como son un select con varias opciones, donde mostraremos si ha
existido algún cambio de la selección original, además tendremos un textarea donde obligare-
mos al usuario a que escriba un texto concreto "He leido y acepto las condiciones" muy útil para
los formularios que requieran confirmar que el usuario ha leído y acepta las condiciones. Por
último comprobaremos que todo está correcto y si es así, enviaremos el formulario, en nuestro
caso, mostraremos un alert indicando al usuario que se va a enviar el formulario.
Puedes visitar el ejemplo8-eventos-form2/
En el archivo html tendríamos:

Aula Mentor
<form action="javascript:alert( 'SE ENVIARÁ EL FORMULARIO!' );">
<input id="txtNombre" type="text" name="nombre" value="">
<br>
<label>¿Qué sabes para hacer aplicaciones web?</label>
<br>
<select name="web" multiple="multiple">
<option>HMLT5</option>
<option selected="selected">CSS3</option>
<option>JQUERY</option>
<option selected="selected">JQUERY MOBILE</option>
368 </select>
<label>Seleccionado en tiempo real .change()</label>
<p id="textoSalida1"></p>
<textarea id="condiciones" rows="5" cols="30" placeholder="Debes escribir [ He

leído y acepto las condiciones ] para poder enviar el formulario"></textarea>
<br>
<input type="submit" name="enviar" valor="Enviar Formulario">
</form>
<p id="textoSalida2">Debes escribir que aceptas las condiciones para continuar y escribir tu
nombre</p>
</div>
En el CSS tendríamos:
M3. JQUERY
.unaCaja{
width: 270px;
height: 400px;
border-width: 1px;
border-color: blue;
text-align: right;
margin-top: 30px;
select{
width: 250px;
369
h3, h5{
text-align: center;
Y en el jQuery:
//----------------------------------------------------------------------
// Para ayudar al usuario a saber en que seccion esta escribiendo
$("div")
.focusout(function(){
$(this).css("background-color","white");
})
Aula Mentor
$(this).css("background-color","#FFFFCC");
});
//----------------------------------------------------------------------
// Controlamos cuando realizamos algún cambio en el select
$( "select" )
.change(function () {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " | ";
});
370 $( "#textoSalida1" ).text( str ).css("color","blue");
});
//----------------------------------------------------------------------
//Controlamos que el usuario haya aceptado las condiciones
$( "form" ).submit(function( event ) {
if ( $( "#condiciones" ).val() === "He leido y acepto las condiciones" && ($( "#txtNombre" ).val().
length > 0)) {
$( "#textoSalida2" ).text( "Has aceptado las condiciones, se enviará el formulario" ).show();
return;
}
M3. JQUERY
$( "#textoSalida2" ).text( "Repito: Debes escribir 'He leído y acepto las condiciones' para continuar
y escribir tu nombre" );
event.preventDefault();
});
});//fin de la lectura del document
En este caso hemos usado varias cosas nuevas, una muy importante y que se va a usar
mucho cuando tengamos varias opciones, o mejor dicho un conjunto de datos devuelto, como
es el caso de la selección múltiple es la función .each, donde iterará con cada uno de los ele-
mentos devueltos. Ésto se suele usar mucho para iterar cuando se realiza una selección amplia
de elementos en jQuery y queremos iterar por ellos.
Otro elemento nuevo usado es event.preventDefault() que veremos más adelante pero
adelantamos que lo podemos usar cuando deseamos cancelar o evitar el comportamiento por
defecto del navegador frente a un determinado evento, como en este caso para el formulario.
6.4. Eventos de documento.
También tenemos un evento que nos informa que se ha leído correctamente el docu-
mento y a partir de ese momento podremos hacer nuestros acciones con jQuery. Realmente ya 371
lo hemos usado anteriormente, sería el evento:
.ready()
Vemos un sencillo ejemplo, y así nos sirve de repaso. En el ejemplo3-selectores/
Mostrábamos una alerta indicando al usuario que ya se había leído el documento y po-
díamos trabajar con él, en esta ocasión vamos a mostrar un texto para ser menos intrusivos y
hacer una navegación más fluida. Sólo tendremos que hacer lo siguiente:
$( document ).ready(function() {
$( "p" ).text( "El DOM ha sido cargado y ahora podemos trabajar con él." );
});
Y el fichero HTML tendría que tener un aspecto como éste:
..
<body>
<p>Todavía no está disponible el DOM, por favor espera</p>

Aula Mentor
</body>
..
Es posible que veas por internet otros métodos asociados al documento .load y .unload, estos
métodos han sido decrapted a partir de las versión 1.8, por lo que no debes usarlo y aún menos
si usas la versión 2.x.
El método .ready da problemas de incompatibilidades cuando se usa <body onlad="…"> por lo

que debes evitar usar este último y hacerlo todo desde el método .ready de jQuery.
6.5. Eventos del navegador.
El propio navegador o Browser nos da información sobre si el usuario ha interactuado

con él, cambiando el tamaño de la ventana o actuando sobre el scroll. Tendríamos por tanto dos
eventos:
Evento .resize()
"resize" de JavaScript, detectando cuando el
usuario ha realizado un cambio de tamaño de
la ventana del navegador
Ejemplo $("miseleccion"). resize(function() {
372
//Mis acciones
})
Evento .scroll()
"scroll" de JavaScript, detectando cuando el
usuario ha interactuado con el scroll
Ejemplo $("miseleccion"). scroll(function() {
//Mis acciones
})
Ejemplo .resize()
Supongamos que necesitamos saber el tamaño actual que tiene el navegador del usuario
o si ha redimensionado el tamaño del mismo, podríamos usar el evento .resize() para tal acción:
M3. JQUERY
Puedes visitar el ejemplo9-eventos-navegador/
En el fichero html tendríamos:
<p> Cambia el tamaño de la ventana del navegador y te mostrare sus dimensiones.</p>
<p id="tam"><p>
373
Y en el archivo jQuery:
$( window ).resize(function() {
$( "#tam" ).text($( window ).width() + "(ancho) x " + $( window ).height() + "(alto)");
});
Ejemplo .scroll()
Vamos hacer un pequeño script para detectar cuando el usuario ha usado el scroll, para
ello vamos a escribir varios párrafos y vamos a cambiar el tamaño de la ventana, para forzar que
aparezca el scroll por la cantidad. Una vez que se active, cuando movamos éste, pondremos un
detector.
Puedes visitar el ejemplo9-eventos-navegador/

Aula Mentor
En el archivo html tendríamos:
...
<p id="miscroll">SENSOR: <span>Detectado Movimiento Scroll</span><p>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
...
En el CSS:
374 span {
color: red;
display: none;
font-size: 18px;
Y el script en jQuery sería:
$( window ).scroll(function() {
$( "span" ).css( "display", "inline" ).fadeOut( "slow" );
});
6.6. El objeto Event.
El objeto Event es pasado a todos los eventos que se lanzan, y como era de esperar, al
igual que en los otros eventos podemos usar algunos atributos que nos van a venir muy bien
para nuestras aplicaciones web.
M3. JQUERY
Atributo .event.currentTarget
Descripción Devuelve el elemento actual sobre el que se
ha lanzado el evento. Muy parecido al this en
la Programación Orientada a Objetos.
Ejemplo $( "p" ).click(function( event ) {
alert( event.currentTarget === this ); // true
});
Ejemplo10-event/index.html#event.cu-
rrentTarget
Resumen En este ejemplo, seleccionaríamos el párrafo y
cuando hagan click sobre el, comprobamos si
el atributo event.currentTarget es igual al ob-
jeto this, el cual nos da true, por lo que pode-
mos referirnos a él de ambas formas.
375
Atributo .event.data
Descripción Devuelve los datos que hayamos podido pasar
al evento cuando se asocia con .bind. (En el
siguiente apartado vemos el evento .bind)
Aula Mentor
Ejemplo …..
…..
$(".misParrafos").each(function(i){
$(this).on("click",{x:i},function(event){
alert("El indice del DOM es: " + $(this).

index() + ". y este párrafo tiene el siguiente
dato: " + event.data.x);
});
});
…..
…..
<p class="eventData">Párrafo 1</p>
376 <p class="eventData">Párrafo 3</p>
Ejemplo10-event/index.html#event.data
M3. JQUERY
Explicación En este caso hemos usado varias funciones

que no habíamos visto, como es
.on( events [, selector ] [, data ], handler )
En vez de detectar el evento de la forma: se-

leccion.click(… ) se pueden pasar el evento
.click y todos los demás eventos de la forma
expuesta anteriormente. Donde events es el
evento que va a buscar, data el conjunto de
datos, y handler el controlador o lo que va-
mos hacer nosotros con ese evento.
En este ejemplo hemos cogido el evento click,

los datos x e i, y en la función usamos una
función en la cual mostraremos los datos que
deseemos. En este caso, vamos a usar un nue-
vo método que nos devuelve el índice de un
elemento dentro de la selección, en este caso,
sería del elemento $(this).index(), pero en el
siguiente ejemplo se entenderá más fácilmen-
te:
<ul>
<li>Elemento 1</li> 377
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
(Recuerda que las listas siempre empiezan en

0 no en 1) Podríamos hacer:
$(document).ready(function() {
$('ul li').click(function() {
var i = $(this).index();
Aula Mentor
alert('Has seleccionado el elemento

número: '+i);
});
});
Atributo .event.preventDefault()
Descripción Como hemos usado en varias situaciones (for-
mularios, ondragover…) si llamamos a este
método dentro de un evento, la acción pre-
determinada que se ejecutaría será cancelada.
Ejemplo ….
….
$( "#mipreventDefault" ).click(function( event

){
378
$( "<div>" )
.append( "Evento: " + event.type + " cance-

lado. Muestro un texto" )
.appendTo( "#log" );
});
….
….
<a id="mipreventDefault" href="http://www.

google.es">La acción por defecto es abrir una
ventana</a>
<div id="log"></div>
….
….
Ejemplo10-event/index.html#event.preven-
tDefault
M3. JQUERY
Resumen En este ejemplo tenemos un enlace a una pá-

gina web, y el uso normal de los enlaces o
link, es cuando se pulsa sobre ellos, llama-
mos al evento click y posteriormente cogemos
los datos y mandamos una orden al navega-
dor que abra esa ventana. ¿Cómo podemos
cambiar o modificar ésto? Podemos detener
su acción por defecto y hacer otras acciones,
en este caso, usamos un método para aña-
dir elementos HTML, como puede ser texto
.append y conforme vamos haciendo click, se
van añadiendo elementos.
Atributo .event.isDefaultPrevented()
Descripción Devuelve true o false si ha sido lanzado el
método preventDefault() o no.
Ejemplo ….
….
$( "#esMipreventDefault" ).click(function(
event ) {
379
alert( "No he abierto el enlace sino una venta-
na: El valor de isDefaultPrevented es: " event.
isDefaultPrevented() ); // true
});
….
….
<a id="esMipreventDefault" href="http://www.

google.es">Haz click y te mostraré cuando he
cancelado el evento</a>
Ejemplo10-event/#event.isDefaultPrevented
Aula Mentor
Resumen En este ejemplo tenemos un enlace a una pá-

gina web, y el uso normal de los enlaces o
link, es cuando se pulsa sobre ellos, llamas
al evento click y posteriormente cogemos los
datos y mandamos una orden al navegador
que abra esa ventana. ¿Cómo podemos cam-
biar o modificar ésto? Podemos detener su ac-
ción por defecto y hacer otras acciones, en
este caso, usamos un método para añadir tex-
to .append y conforme vamos haciendo click,
se van añadiendo elementos.
Atributo .event.stopPropagation()
Descripción Previene que se ejecute cualquier evento que
pudiera estar asociado a los padres del ele-
mento dentro del árbol DOM. Muy útil para
evitar las propagaciones jerárquicas entre ele-
mentos del evento en cuestión.
380
M3. JQUERY
Ejemplo ….
….
<a name="event.stopPropagation"></a>
<h3><a href="#event.stopPropagation">event.
stopPropagation (Activado en el div)</a></
h3>
<div id="midiv">
Elemento div, mi caja.
<p id="mip">Esto es un elemento p, den-

tro de un div. <br><span id="mispan">Esto
es un elemento span dentro de un párrafo.</
span>
</p>
</div>
….
381
….
$("#mispan").click(function(event){
event.stopPropagation();
alert("El elemento span ha sido clic-

keado.");
});
$("#mip").click(function(event){
alert("El elemento p ha sido clickea-

do.");
});
Aula Mentor
$("#midiv").click(function(){
alert("El elemento div ha sido clic-

keado..");
});
Ejemplo10-event/#event.stopPropagation
Resumen En este ejemplo vamos a detener la propaga-

ción del elemento click por los componentes
jerárquicos. Tenemos un <div> que contie-
ne un párrafo <p> que a su vez contine un
<span>. Si hacemos click en el <div> nos mos-
trará un mensaje indicado que ha sido clickea-
do, si lo hacemos en el párrafo, nos aparece-
rá dos alerta, el del <p> más el de su padre
<div>. Para evitar que se propague los eventos
jerárquicamente a los elementos ascendentes,
usamos event.stopPropagation(); en este caso
si lo ponemos en el elemento más interno,
el <span> vemos que se ejecuta el evento
.click() pero que no se propaga a sus padres,
abuelos, etc.
382
Atributo .event.isPropagationStopped()
Descripción Devuelve si el método anterior stopPropaga-
tion() ha sido llamado.
M3. JQUERY
Ejemplo ….
….
<button id="mibutton">Púlsame</button>
<div id="midiv3"></div>
….
….
function estaParadaLaPropagacion(
event ) {
var msj = "¿Está para la propa-

gación?";
$( "#midiv3" ).append( "<div>"

+ msj + "</div>" );
if ( event.isPropagationStop-
ped() ) {
msj = "Si lo está."; 383
} else {
msj = "No lo está.";

+ msj + "</div>" );
$( "#mibutton" ).click(function(event) {
estaParadaLaPropagacion( event );
Aula Mentor
$( "#midiv3" ).append( "<div>" + msj + "</

div>" );
$( "#mibutton" ).click(function(event) {
$( "#midiv3" ).append( "<div>" +

"Paramos la propagación con el método
<i>stopPropagation()</i>" + "</div>" );
});
Puedes visitar el ejemplo10-event/#event.is-

PropagationStopped
En este ejemplo nos creamos un botón me-
diante <button>, entonces lanzamos el evento
Resumen .click. Además, nos hemos creado un función
384 para ayudarnos a saber cuál es el estado actual
del evento, estaParadaLaPropagacion( event ),
éste sólo hace lo siguiente:
- 1) Muestra mensaje "¿Está para la propaga-

ción?"
- 2) Compruebo si ha sido llamado stopPropa-

gation().
- 3) Muestro mensaje indicando el resultado.
Posteriormente llamo al evento stopPropaga-

tion() y vuelvo a llamar a mi función estaPara-
daLaPropagacion para comprobar su estado.
Atributo .event.pageX , .event.pageY

Estos dos métodos los vimos en el ejemplo del
método .resize(), y se pueden utilizar juntos o
Descripción por separados, se han unificado debido a la si-
milud y relación. Con event.pageX tendríamos
la posición relativa del ratón del lado o es-
quina izquierda del documento, y con event.
pageY tendríamos la posición relativa del ra-
tón respecto al lado o esquina superior del
documento.
M3. JQUERY
Ejemplo ….
http://localhost/MOD3.JQUERY/U6/Ejem-
plo5-eventos-mouse/
….
Resumen Ejemplo visto anteriormente, donde obtene-
mos las coordenadas del ratón dentro de un
rectángulo azul.
Atributo event.stopImmediatePropagation()
Descripción Previene que se ejecuten otras acciones que
estén asociadas al evento.
Ejemplo ….
<div id="midiv4"><p>Soy un texto dentro de

un div, pero tengo el evento .click, ¡Púlsame y
lee los mensajes!</p></div>
<p id="mip4">Soy otro texto, pero tengo el

evento .click, ¡Púlsame y lee los mensajes!</
p></div>
…. 385
….
$("#midiv4").click(function(event){
alert("Evento 1 ejecutado antes de llamar a

stopImmediatePropagation(), solo me ejecuta-
ré yo");
event.stopImmediatePropagation();
});
alert("Evento 2 ejecutado, No podrás verlo

porque he llamado antes a stopImmediatePro-
pagation, si comentas la llamada, me mostra-
ré");
….
});
Aula Mentor
alert("Evento 3 ejecutado, No podrás verlo

porque he llamado antes a stopImmediatePro-
pagation, si comentas la llamada, me mostra-
ré");});
$("#mip4").click(function(event){
alert("Otro ejemplo donde si funciona y voy

a parar");
});
$("#mip4").click(function(event){
alert("Este mensaje si podrás verlo porque este

código está por debajo del primer .click y no
tiene ninguna llamada más al evento click por
debajo de él. ");
});
Resumen En este ejemplo vamos a usar dos veces el
evento en situaciones diferentes para com-
386 prender mejor su funcionamiento. Vamos a
tener un identificador midiv4 que vamos a
llamar varias veces con el evento .click, vere-
mos que si tenemos comentada la llamada al
evento event.stopImmediatePropagation(); se
ejecutarán los tres eventos seguidos uno de-
trás de otro y en ese orden. Si en el prime-
ro realizo event.stopImmediatePropagation();
solo se ejecutará el primer click. Si lo pongo
en el siguiente click se ejecutará hasta ahí.
Vamos a usar nuevamente el evento event.sto-

pImmediatePropagation(); pero esta vez en la
última llamada del evento click, y como vere-
mos no tiene ningún efecto y se ejecutarían
todas las llamadas anteriores al evento.
Atributo .event.isImmediatePropagationStopped()
Descripción Devuelve si el método anterior stopImmedia-
tePropagation() ha sido llamado.
M3. JQUERY
Ejemplo ….
….
<button id="mibutton5">Púlsame</button>
….
….
function estaParadaLaPropagacionIn-
mediata( event ) {
var msj = "¿Está parada la pro-

pagación inmediata?";

+ msj + "</div>" );
if ( event.isImmediatePropaga-
tionStopped() ) {
msj = "Si lo está."; 387
} else {
msj = "No lo está.";

+ msj + "</div>" );
$( "#mibutton5" ).click(function(event)
{
estaParadaLaPropagacionInmediata( event );
Aula Mentor
$( "#midiv5" ).append( "<div>" + "Pa-

ramos la propagación inmediata con el méto-
do <i>stopImmediatePropagation()</i>" + "</
div>" );
estaParadaLaPropagacionInmediata(
event );
});
Puedes visitar el ejemplo10-event/#event.isIm-

mediatePropagationStopped
Resumen Al igual que comprobamos con el evento is-
PropagationStopped(), realizamos varias prue-
bas y mostramos al usuario si está parada o no
la propagación inmediatamente.
Atributo .event.target
Descripción Se refiera al elemento DOM que inició el
evento
388
M3. JQUERY
Ejemplo ….
….
<div id="midiv6">
Soy una etiqueta div
<p id="mip6">
Soy una etiqueta p
<strong id="mistrong6">Soy una

etiqueta Strong
<span id="mispan6">Soy
una etiqueta un span
</span>
</strong>
</p>
</div> 389
….
….
$( "#midiv6" ).click(function( event ) {
alert( "El elemento sobre el que has

hecho click ha sido: " + event.target.nodeNa-
me );
});
Puedes visitar el ejemplo10-event/#event.tar-

get
Resumen En este ejemplo tenemos varios elementos
unos dentro de otros, le activamos el evento
.click y usamos el el .target.nodeName para
saber que elemento es el que ha disparado el
evento.
Aula Mentor
Atributo .event.timeStamp
Descripción Número en milisegundos desde el 1 de ene-
ro de 1970, desde que el evento fue lanzado.
Muy útil para comprobar tiempos de ejecu-
ción de nuestros script.
Ejemplo …
<div id="midiv7">
<button id="mibutton7">Haz click

para iniciar contador.</button>
<button id="mibuttonReset7">Resetear
temporizador y
vueltas.</button>
</div>…
var tiempo, diferencia, vuelta = 0;

390
var iniciadoTemporizador = false;
$( "#mibutton7" ).click(function( event ) {
if ( tiempo ) {
diferencia = event.timeStamp - tiempo;
$( "#midiv7" ).append( "<p

class='cuentaVueltas'>Vuelta: " + vuelta +
" Diferencia:" + diferencia + "</p>" );
} else {
$( "#midiv7" ).append( "<br>Iniciado

temporizador!!.<br>" );
vuelta++;
if(!iniciadoTemporizador){
M3. JQUERY
alert("INICIADO TEMPORIZA-
DOR");
tiempo = event.timeStamp;
$( "#mibutton7").text("Pulsa
aquí para contar vuelta");
iniciadoTemporizador = true;
});
// Si el usuario hace click en el botón de la

pantalla reiniciamos el contador y el número
de vueltas
$( "#mibuttonReset7").click(function(event){
tiempo = event.timeStamp;
vuelta = 0;
$( ".cuentaVueltas").remove(); 391
});
/* Con .remove() eliminamos las etiquetas

html que tenga el selector */
Puedes visitar el ejemplo10-event/#event.ti-

meStamp
Aula Mentor
Resumen En este ejemplo usamos el evento .timeStamp

para crearnos un pequeño temporizador y
contador de vueltas. Para ello tenemos va-
rias variables, donde almacenaremos el tiem-
po actual, la diferencia, si hemos lanzado el
temporizador por primera vez y el número de
vueltas.
Cuando lanzamos el evento .click sobre el

boton mibutton7 lo que hacemos es iniciar
el temporizador, informar al usuario con una
ventana de alerta y cambiar el texto del botón
al Pulsa aquí para contar vuelta y a partír de
ahí cada vez que entre porque el usuario lan-
ce de nuevo el evento click mostraremos el
tiempo que lleva y el número de vueltas.
Cuando el usuario haga click sobre el botón de

reset, lanzará su evento .click y realizaremos
varias acciones, poner el número de vueltas a
0, eliminar todos los textos que hemos escrito
anteriormente y tomar de nuevo el tiempo.
Debes entender este ejercicio completamen-

te, ya que es un ejemplo completo de todo
392 lo que se puede hacer con jQuery. Si tuvie-
ras dudas, saca el diagrama de flujo del pro-
grama e intenta ver la secuencia y toma de
decisiones que tiene en cada proceso. Pen-
semos que cada inicio de algoritmo lo lanza
el evento y a partir de ahí, se mete en el
flujo de nuestro script. Cualquier duda que
tengas al respecto coméntaselo a tu tutor.
Atributo .event.which
Descripción Cuando estamos usando evento de entrada
(teclado o ratón), con event.which podemos
detectar qué botón ha sido pulsado, si es del
ratón, el botón derecho, el izquierdo o el có-
digo de la tecla del teclado.
M3. JQUERY
Ejemplo …
<label>Introduce una letra y te devolveré su

código</label>
<input id="miinput8" value=""

placeholder="Introduce una letra"
maxlength="1">
<div id="milog8"></div>
<label>Pulsa los botones de tu ratón

por encima del recuadro
</label>
//Detecto el botón pulsado del ratón 393
if(event.which == 1)
$("#midiv8").append("<br>Has pre-
sionado el botón izquierdo: " +
event.which);
else if (event.which == 2)
sionado el botón
central/ruedaderecho: " +
event.which);
else if (event.which == 3)
sionado el botón derecho: " +
Aula Mentor
event.which);
else
sionado otro botón de tu
raton: " + event.which);
//Detecto la tecla pulsada del teclado
$( "#miinput8" ).on( "keydown", function(

event ) {
$( "#milog8" ).append("<br>" + event.

type + ": " + event.which );
});
394
Puedes visitar el ejemplo10-event/#event.
which
Resumen En este ejercicio nos creamos un input de
máximo un carácter para ver que código es el
que corresponde. Debemos recordar que cada
tecla corresponde a un código y este código
es el que indicará al sistema operativo qué
tecla ha pulsado. Usamos para ello el even-
to .keydown en la forma .on("keydown"….
Como vimos en otras ocasiones y añadimos el
mensaje a un div que me he creado para mos-
trar el resultado, podíamos usar otra etiqueta
y otra forma.
Con el ratón me he creado una zona de ejem-

plo donde voy a detectar qué botón ha pulsa-
do del ratón, y dependiendo del valor que me
devuelva event.which, indico al usuario qué
botón ha presionado.
Podía haber usado este evento no

sólo para midiv8, sino para toda la
pantalla sólo con usar $("body").
mousedown(function(event)… en vez de
$("#midiv8").mousedown(function(event)…
M3. JQUERY
6.7. Gestor de eventos.
Además de tener los eventos anteriormente comentados, para controlar el documento,

controlar las entradas del usuario (teclado/ratón), eventos de formularios, etc. tenemos unos
métodos para poder controlar los eventos, y aunque ya hemos usado algunos en alguna ocasión,
entre los más destacados tendríamos los siguientes:
.bind()
Este método es uno de las más importantes de jQuery, ya que podemos asociar fun-
ciones a eventos de elementos tanto del DOM como del navegador, en principio puede dar la
sensación de hacer lo mismo y en parte tiene el mismo resultado, lo bueno que nos facilita una
opción que de la otra forma no podíamos usar, y es asociar eventos simultáneamente, pasar
parámetros a eventos o lanzar nuestros propios eventos.
Veamos un ejemplo, para asociar el evento .onclick a un elemento HTML podíamos usar:
$("miseleccion").click(function(event){
//Mis acciones
});
Por ejemplo:
395
alert("Has hecho click sobre el elemento.");
});
Si queremos que cuando el usuario pase el ratón por encima del elemento, al hacer click
o doble click, realice unas acciones; en este caso mostrar una ventana, podemos usar la lista de
eventos como primer parámetro seguido de espacio y todos ellos entre comillas:
$("#midiv9").bind("click dblclick mouseover", function(event){
alert("Has pasado el ratón por el elemento, click o doble click sobre él.");
});
Puedes visitar el ejemplo10-event/#.bind
Dado el ejemplo mostrado, para poder realizar click o doble click, debemos cerrar la
ventana con el teclado y no con el ratón, sino no podremos detectar el evento click o doble click
al salirnos del área del elemento y activar nuevamente el evento mouseover.
.unbind()
Aula Mentor
Con este método podemos desenlazar un evento del elemento que deseemos. Por ejem-
plo, si queremos dejar de ejecutar cierto evento en algunas circunstancias podemos hacerlo.
Puede ser muy útil cuando queramos evitar que el usuario realice algunas acciones sobre nues-
tros elementos HTML y tener el control de cuándo se puede o no se puede lanzar un evento.
Vamos a ver el siguiente ejemplo, donde vamos a tener tres botones, un botón que mos-
trará una ventana miButton y otros dos para activar/desactivar el evento click del primer botón,
en el HTML tendríamos:
...
<label>Cuando actives el evento Click y pulses sobre el botón, aparecerá una ventana</label>
<br>
<button id="miButton">Desactivado evento .click</button>
<button id="activaClick">Activa evento Click</button>
<button id="desactivaClick">Desactiva Click</button>
...
En el CSS:
396
#activaClick{
background-color: lime;
#desactivaClick{
background-color: orange;
Y en el jQuery :
M3. JQUERY
function funcionClick() {
alert("Has podido hacer click sobre el botón.")
$( "#activaClick" ).click(function() {
$( "#miButton" )
.bind( "click", funcionClick )
.text( "Puedes hacer Click sobre mí" );
});
$( "#desactivaClick" ).click(function() {
$( "#miButton" )
.unbind( "click", funcionClick ) 397
.text( "Desactivado evento .click" );
});
Puedes visitar el ejemplo10-event/#.unbind
.on( events [, selector ] [, data ], handler )
Como vimos anteriormente en un ejemplo, podemos usar esta definición para manejar
los eventos de nuestros elementos, en vez de dotar al elemento HTML del evento de la forma:
seleccion.click(… ). Se pueden pasar varios eventos de la forma anteriormente comentada.
Siguiendo con la definición de .on tendríamos:
Events: son los eventos que se buscan asociar al conjunto de elementos selecciona-
dos. Se pueden pasar una lista de eventos.
Selector: especifica los descendientes de los elementos seleccionados que dispararán

el evento. Se trata de un parámetro opcional.
Data: indica cualquier tipo de datos que se necesite pasar al manejador cuando s e
dispara el evento. Es también un parámetro opcional y, por lo general, se corresponde con
un objeto jQuery.
Aula Mentor
Handler: se corresponde con el callback o acción a realizar después de que el

evento se dispare.
De esta forma podemos usar en el HTML:
<p id="mip10">Soy un párrafo, pero tengo el evento .click</p>
Y en el jQuery tendríamos lo siguiente:
function miaccion() {
alert("Has podido hecho click sobre el párrafo.");
$( "#mip10" ).on( "click", miaccion );
Y funcionará igual que si lo hubieramos realizado de está forma:
$( "#mip10" ).click(function( event ) {
});
398
Una ventaja de usar el método .on() entre otras cosas es que podemos agregar varios
eventos de una vez, especificándolos de una vez:
$( "#mip10" ).on( "click dblclick", miaccion );
Y también al igual que pasaba con otros métodos, es una buena práctica separarlos y si
hubiera que hacer acciones diferentes poder hacerlo separando los eventos por llaves y comas,
si por ejemplo tuvieramos el evento click y el evento dblclick, de una selección específica #miI-
dentificador y .miclase tendríamos:
$('#miIdentificador .miclase').on({
click: function() {
},
dblclick: function() {
}
M3. JQUERY
});
Puedes visitar el ejemplo10-event/#.on
.off( events [, selector ] [, handler ] )
Al igual que con .on podemos agregar eventos, podemos usar este nuevo evento para
eliminar los eventos que tenga nuestro elemento html.
Podemos pasar también una lista de eventos al igual que pasaba con el anterior, un ejem-
plo puede ser agregar un botón auxiliar donde eliminemos los eventos que antes le hayamos
proporcionado:
<label>Presta atención en el siguiente párrafo</label>
<br>
<p id="mip11">Tengo activado el evento .mouseover y el evento .click</p>
<label>Si ahora pulsas sobre el botón eliminaré los eventos</label>
<br>
<button id="miButton11">Púlsame para eliminar los eventos .mouseover y .click del parrafo anterior.</
button> 399
En el jQuery podríamos tener:
$('#mip11').on({
mouseover: function() {
$(this).css("background-color", "lime");
},
click: function() {
});
//Ahora preparamos todo para que al pulsar el botón eliminemos los eventos
$('#miButton11').click(function() {
$('#mip11').off("click mouseover");
Aula Mentor
$('#mip11').css("background-color", "#F3E2A9");
});
Puedes visitar el ejemplo10-event/#.off
.one( events [, data ], handler )
Con este evento podemos controlar la ejecución de nuestro script una sola vez, y aunque
el usuario o el navegador intentara volver a ejecutarlo, no tendría ningún efecto. Veamos un
ejemplo sencillo donde al pulsar un botón mostramos mensaje; aunque el usuario pulse poste-
riormente el mismo botón no tendrá ningún efecto.
En el HTML podemos tener:
<button id="miButton12">Púlsame las veces que quieras, yo solo me ejecutaré una vez.</button>
Y en el jQuery:
$('#miButton11').one("click",function(){
alert("Has podido abrir una ventana, ya no podrás ejecutar más este evento en el elemento ");
});
400
Ahora veremos un ejemplo un poco más complejo pero más divertido, muchas veces
podemos "jugar" con los eventos para crear al usuario algo divertido y crear un juego, aunque
debemos pensar también en las aplicaciones que podrían tener para nuestras aplicaciones web.
Debes estar muy atento a este ejemplo, ya que tocamos muchos aspectos, CSS, HTML,
selectores, eventos, jQuery, etc y uniéndolo todo podemos crear una aplicación mucho más
compleja. Supongamos que queremos crear el siguiente juego.
Vamos a usar algunas funciones especiales que nos ofrece JavaScript, como es la gene-
ración de números aleatorios con el método Math.random(), este método nos genera un nú-
mero aleatorio, en nuestro ejemplo, vamos a crear un tablero donde aleatoriamente aparecerán
elementos con mina o sin mina. Tengo que adaptar un poco el método random() ya que me
genera un número decimal comprendido entre 0 y 1, por ejemplo si usamos la siguiente función
obtendremos un valor booleano (verdadero/falso o true/false) aleatorio, que es exáctamente lo
que queremos. Otro punto importante que vamos a usar en este ejemplo es la visualización,
seguimiento o depuración de nuestro programa, para ello nos vamos a ayudar de mensajes por
consola. Para ello, usamos dentro de nuestro código console.log("texto"), y así podemos ir
realizando una traza y comprobar que con que datos o variables está funcionando nuestro script:
//función para devolver aleatoriamente SI o NO para poner minas aleatorias
function aleatorioBoleano(){
var valor = Math.random()*100;

M3. JQUERY
if(valor <= 50){
//Para ver que número está generando por consola
console.log("NUMERO GENERADO : "+valor+" -> TRUE");
return true;
}else{
console.log("NUMERO GENERADO : "+valor+" -> FALSE");
return false;
Ejemplos si lanzamos varias veces seguidas esta función:
401
Ahora debemos crearnos un tablero, para ello vamos a usar en este ejemplo <div></div>
con una sintaxis concreta, dos tipos de cajas, unas ConMina y otras SinMina para ello vamos a
tener los siguientes elementos:
<div class='midiv13-mini-Sin'></div> <div class='midiv13-mini-Con'></div>
También tendremos que tener unas variables para controlar el número de errores, en
principio se ha puesto un número fijo de 7, pero se podría pedir por un <input type="text", etc.
Para generar el tablero hemos decidido crear un sitio donde indicar al usuario el número
de errores actuaesl, y nos tendremos que crear un tablero de 6x6, es decir 36 elementos posible
donde podrá hacer click el usuario:
Aula Mentor
En el HTML5 tendríamos solamente el siguiente código:
...
<label>Algunas valdosas tienen una mina, haz click y si salen de color verde no te preocupes puedes
continuar</label>
402
<p id="mensaje13">ERRORES ACUMULADOS: </p>
<div id="tablero"></div>
...
En el CSS3 tendríamos por tanto:

M3. JQUERY
#tablero{ color: white;
border:1px solid black; float: left;
background-color: orange; margin: 2px;
width:600px; }
height:600px; .midiv13-mini-Sin {
color: white; border:1px solid black;
} background-color: #F3E5A9;
.midiv13-mini-Con { width:94px;
border:1px solid black; height:94px;
background-color: #F3E5A9; color: white;
width:94px; float: left;
height:94px; margin: 2px;
} 403
Una de las ventajas de usar jQuery es crear elementos dinámicamente en tiempo de eje-
cución, por lo que no es necesario crear 36 <div> uno a uno escribiendolo en el código, pode-
mos crearnos una función que genere un número aleatorio, y devuelva verdadero o falso (true/
false) en cada interacción y crear en ese momento nuestro elemento que va a ser una mina o
sin mina. Para ello usamos como hemos usado en otras ocasiones el método .append que nos
añade HTML desde jQuery y en vez de crearlo manualmente, que sería lo mismo que insertar el
código en el HTML, llamamos mejor a una función que nos creará el código automáticamente
en cuestión de milisegundos:
function creaJuego() {
for (var i = 0; i < 36; i++) {
if(aleatorioBoleano())
$(this).append("<div class='midiv13-mini-Sin'></div>");
else
$(this).append("<div class='midiv13-mini-Con'></div>");
};
}
Aula Mentor
$('#tablero').append(creaJuego);
Simplemente hemos creado un bucle for, donde creará 36 elementos, en cada interac-
ción llamo a la función que nos devolvía un valor aleatorio aleatorioBoleano() y dependiendo
de si es verdadero o falso, creo un elemento <div> de una forma u de otra. Hemos usado <div>
pero debemos saber a estas alturas, que podríamos agregar las etiquetas que creamos conve-
nientes, o usar <article>, <section>, etc.
Ya tenemos los elementos y el tablero creado, ahora debemos darle la interacción con
el usuario (eventos), para ello, nos vamos a crear el evento .click por ejemplo, se podría usar
.mouseover para hacerlo más dinámico o rápido, o cualquier otro que deseemos. Lo importante
de este ejemplo es que queremos usar el evento .click sólo una vez, por lo que debemos usar
el evento .one() y así nos aseguramos que el usuario sólo puede pulsar una vez sobre nuestro
elemento. Para ello, buscamos los elementos para su clase y los dotamos de los eventos .click
y dependiendo de si el elemento "tiene Mina" o no, lo ponemos de un color u otro. Para ello,
vamos a modificar los elementos CSS desde jQuery, aunque más adelante veremos más cosas, a
modo introductorio sería modificar las propiedades descritas de elemento HTML dinámicamente,
tendríamos por tanto:
$('.midiv13-mini-Sin').one("click",function(){
});
404 $('.midiv13-mini-Con').one("click",function(){
$(this).css("background-color", "red");
errorUsuario();
});
Hemos usado .one y cambiamos el color para indicar al usuario si ha acertado (lima-
lime) o no (rojo-red). En caso que haya hecho click debemos ir contando los errores que va
cometiendo el usuario con la función errorUsuario(), para ello, nos hemos creado unas variables
con un límite de errores y con los errores acumulados. Por tanto tendríamos:
var errores_acumulados = 0;
var limite_errores = 7;
function errorUsuario(){
errores_acumulados++;
$("#erroresAcumulados").text("ERRORES ACUMULADOS: "+errores_acumulados);
if(errores_acumulados >= limite_errores){

M3. JQUERY
alert("GAME OVER, no te puedes equivocar más de siete veces");
reiniciaJuego();
En esta función sólo vamos aumentando el valor de la variable erroresAcumulados y

cambiamos el texto del elemento que tenga el id #erroresAcumulados que sinos fijamos en el
HTML es el párrafo que hay justo antes del tablero.
Además, vamos comprobando constantemente, en cada error que cometa el usuario si el

número de errores_acumulados es mayor o igual (>=) limite_errores y cuando se cumpla esta
condición, hacemos varias cosas:
- Informamos al usuario mediante un alert.
- Llamamos a una función para reiniciar el juego reiniciaJuego().
La función reiniciaJuego() realiza varias acciones muy interesantes, que aunque ya he-
mos visto anteriormente, aquí podemos ver un ejemplo más en una aplicación real.
function reiniciaJuego(){
405
//Ponemos a cero los errores acumulados
errores_acumulados = 0;
//Modificamos el texto donde informamos al usuario
$("#erroresAcumulados").text("ERRORES ACUMULADOS: "+errores_acumulados);
//Borramos todos los elementos de la clase correspondiente
$(".midiv13-mini-Sin").remove();
$(".midiv13-mini-Con").remove();
//Creamos de nuevo las etiquetas dinámicamente
//Volvemos a crear los eventos sobre los nuevas etiquetas
});
Aula Mentor
$('.midiv13-mini-Con').one("click",function(){
errorUsuario();
});
Hemos decidido borrar todos los elementos con el método .remove(), poner el contador
de errores a 0, modificar el mensaje que mostraba los errores a 0 y volvemos a crear todo de
nuevo, lo debemos hacer porque si no añadimos esto:
No nos crea las valdosas o elementos <div>. Y si añadimos lo anterior pero no añadimos:
});
406 $('.midiv13-mini-Con').one("click",function(){
errorUsuario();
});
Crea las valdosas o elementos <div> de forma aleatoria y todo, pero no escuchamos el
evento .click de cada elemento, por lo que no podríamos interactuar con los elementos que
hemos creado nuevo. Debemos pensar que hemos empezado desde 0 con el juego y tenemos
que asegurarnos de poner las variables y los elementos como al principio.
Tienes el ejemplo completo en:
Puedes visitar el ejemplo10-event/#.one
Repasa todos los conceptos y elementos y asegúrate de entender todo antes de conti-
nuar, ya que es un ejemplo muy completo de todas las cosas que podemos hacer con los mó-
dulos vistos hasta ahora HTML5, CSS3 y jQuery.
7. Atributos.
Como hemos visto hasta ahora, con jQuery podemos seleccionar de forma masiva o de
forma concreta los elementos de nuestra aplicación web. Ahora una forma de darle más dinanis-
mo es el uso de atributos, modificando, añadiendo o eliminando según nos interese. Es decir,
M3. JQUERY
podemos modificar los elementos y los atributos de estos, eliminar o añadir nuevas clases o
permutarlas.
7.1. Operaciones sobre Clases.
7.1.1. Añadir Clases.
Podemos añadir nuestras clases a los elementos en tiempo real, por ejemplo imaginemos
que tenemos nuestro archivo CSS3 donde tenemos una clase que se llama colorPreferido y, en
ella, tenemos un color de fondo que se usará cuando el usuario haga mouseover sobre el ele-
mento. Para ello usamos:
.addClass(función(índice, clase actual))
Función Especifica una función que devuelve uno o varios nombre de clases que
se desea añadir.
Índice (Opcional) es la posición del índice del elemento seleccionado.
Clase Actual (Opcional) es el nombre de la clase actualmente presente.
Veamos un ejemplo, en el HTML vamos a tener:
<p id="addMiClase">Pasa el ratón sobre mí y cambiaré mi fondo</p>

407
En el CSS tendremos nuestra clase:
.miColorPreferido{
background-color: lime;
Y en jQuery tendríamos:
$('#addMiClase').mouseover(function(){
$(this).addClass('miColorPreferido');
});
Bueno, aunque a simple vista pensarás, ¡vaya! Pero si esto lo sé hacer, he de decirte que
llevas en parte razón. El efecto para el usuario puede ser igual que haber utilizado directamente
desde CSS el evento hover, o tantas otras formas. Debemos entender lo siguiente, en tiempo de
ejecución de nuestra aplicación web he añadido una clase a la selección de los elementos de mi
documento. Inicialmente esa clase no existe en el documento CSS, y esto me da mucho más
Aula Mentor
dinamismo ya que puedo hacer cambios mientras se ejecuta la aplicación web.
7.1.2. Eliminar Clases.
Al igual que hemos realizado anteriormente, podemos eliminar una clase a un elemento
en tiempo de ejecución de la aplicación.
.removeClass
Siguiendo con el ejemplo anterior, podríamos eliminar la clase una vez que el usuario
realice el mouseout del elemento HTML. Tendríamos por tanto el mismo código en el HTML y en
el CSS, pues si estamos trabajando de forma estructurada la mayoría de las veces sólo debemos
cambiar el jQuery.
$('#addMiClase')
.mouseover(function(){
$(this).addClass('miColorPreferido');
})
408 .mouseout(function(){
$(this).removeClass('miColorPreferido');
});
Para apreciar realmente qué está haciendo el navegador debemos usar el modo depura-
dor (F12), buscar el elemento y ver los estados que pasan sobre él:
Inicialmente sin añadir la clase:
Al pasar el ratón por encima y lanzar el evento .mouseover de la selección en este caso,
con id="addMiClase" me cambia al siguiente código HTML:
M3. JQUERY
Hemos decidido en nuestro script jQuery, eliminar la clase cuando se active el evento
mouseout, el cual me elimina la clase asignada y vuelve a tener los valores que tuviera por de-
fecto el elemento HTML:
Vamos a recordar nuevamente el uso de las propiedad this en jQuery, refiriendose al

elemento concreto que lanza el evento. Si por ejemplo tenemos varios párrafos, si usamos el 409
elemento this o no lo utilizamos, supongamos el siguiente ejemplo usando el mismo archivo CSS
y teniendo más ambigüedad en el HTML:
<p>1.Pasa el ratón sobre mí y cambiaré mi fondo</p>
Y si tenemos en el script lo siguiente:
...
$('p')
.mouseover(function(){
$('p').addClass('miColorPreferido');
})
.mouseout(function(){
Aula Mentor
$('p').removeClass('miColorPreferido');
});
...
El efecto al pasar el ratón será sobre todos los elementos que contengan el elemento:
Si en vez de usar directamente 'p' usamos this se activará sólo en el elemento que esté
llamando al evento en cada momento:
410
7.1.3. Permuta de Clases.
En algunas situaciones varios métodos permitirán desencadenar unas acciones u otras,

podríamos decir que existirán unas permutación de las clases. Este efecto de permutación se
llama toggle y nos permitirá además de ahorrar código, hacer efectos. Tenemos varias formas de
usar permutaciones de clase:
toggleClass(clase)
Añadimos la clase especificada si no existe, o la elimina si no está presente.
Un Ejemplo puede ser:
$(p).toggleClass("clase1): Aplica la clase "clase1" a los párrafos, si no existe. Si

existe la elimina.
toggleClass(función(índice, clase actual), [conmutador])
Se puede hacer este efecto pasando unos parámetros:
Función: Especifica una función que devuelve el nombre de la clase que se tiene
que permutar.
Índice: (opcional) es la posición del índice del elemento seleccionado.

M3. JQUERY
Clase actual: (opcional) nombre de la clase actual.
Conmutador: Valor booleano (true/false) que determina si la clase se tiene que añadir o
elminar.
Ejemplo de toggleClass
En el fichero html tendremos:
...
<p class="txtBlue">Click para permutar</p>
<p class="txtBlue bkgOrange">Texto azul y fondo naranja</p>
...
En el CSS vamos a poner el fondo naranja y el texto azul:
.txtBlue{
color: blue;
}
411
.bkgOrange{
background: orange;
En jQuery tendríamos:
...
$( "p" ).click(function() {
$( this ).toggleClass( "bkgOrange" );
});
...
Inicialmente tenemos un estado en cada elemento y, posteriormente, vamos permutando

la clase bkgOrange cambiando el background del elemento si no está activo y activando en caso
contrario.
Aula Mentor
7.2. Leer.
Ahora debemos pensar que con la lectura de atributos de las etiquetas HTML podemos
acceder al valor usando la siguente sintaxis:
$("selección").attr("atributo_a_leer")
Un ejemplo podría ser el campo de un formulario:
...
<input type="text" id="nombreUsuario" value="miValor">
<button id="dimeValor">Dime valor del atributo</button>
<div id="resultado"></div>
...
Y en el fichero jQuery podríamos acceder de forma dinámica al valor del campo de la

siguiente forma:
412
...
$( "#dimeValor" ).click(function() {
var valorCampoUsuario = $( "#nombreUsuario" ).attr("value");
$("#resultado").append("<br>Valor texto : "+valorCampoUsuario);
});
...
Y a partir de cada pulsación en el botón Dime valor del atributo siempre nos dará el mis-
mo resultado, independientemente del texto que haya escrito en el <input> del formulario, este
punto es el que debemos entender, estamos accediendo a los atributos que hay en la etiqueta.
En el caso de que la selección sea múltiple, ya sea porque estemos seleccionando un

elemento de tipo .class o existan varios elementos, jQuery nos devolverá un objeto con los
elementos seleccionados. Para recorrer estos elementos debemos usar la función .each() como
pasaba en los formularios con las selecciones múltiples.
Supongamos el siguiente ejemplo:

M3. JQUERY
...
<br><a class="miEnlace" href="#add_remove_Class" title="add_remove_Class" >Ir a .addClass() y .remo-

veClass()</a>
<br><a class="miEnlace" href="#toggleClass" title="toggleClass" >Ir a .toggleClass</a>
<br><a class="miEnlace" href="#leerAtributos" title="leerAtributos" >Ir a .leerAtributos</a>
<div id="resultado2"></div>...
Si leyésemos el atributo seleccionando el elemento por id="miEnlace":
$('.miEnlace').each(function(i){
var misTitulos = $(this).attr("title");
$("#resultado2").append("<br>Valor "+i+" del atributo title : "+misTitulos);
});
Nos mostraría todos los título de la selección creada:
413
Puedes visitar el ejemplo11-atributos/#leerAtributos
7.3. Editar.
Además de poder leer los atributos, podemos editarlos, consiguiendo así interaccionar
con los elementos más todavía, para realizarlo debemos usar una función que sobreescribe el
método .attr en este caso con dos parámetros:
$('miSeleccion').attr("atributo", "valor");
Un ejemplo puede ser el siguiente:
...
<a class="modificaAtributos" href="http://www.aulamentor.es" target="_blank" >Enlace 1 a página web...</

a><br>

a><br>
Aula Mentor

a><br>

a><br>

a><br>...
Tenemos una aplicación web donde tenemos muchos link a una página, pero en este
momento nos han comunicado que por problemas en el servidor no va a estar operativa, y claro,
queda muy mal tener una web con los enlaces "rotos", por lo que vamos a coger en todos los
sitios donde tenemos enlace a esa web, y sustituirla por otra, sin tener que ir link por link. Con
jQuery podemos hacerlo sin tocar el código HTML y todo de golpe:
$(".modificaAtributos").attr("href","http://www.mentoremprende.es");
Si ejecutas la aplicación, verás que has modificado todos los enlaces a páginas web por
el nuevo, sin tener que saber ni siquiera cuantos hay y donde están. Como puedes ver jQuery es
una herramienta muy potente, por ejemplo si quisieramos cambiar de una vez todos los enlaces
para que en vez de abrirse en una pestaña nueva con el atributo target="_blank" se abriera en
la misma página, con usar:
$(".modificaAtributos").attr("href","http://www.mentoremprende.es");
414
$(".modificaAtributos").attr("target","_top");
Se pueden modificar los atributos de forma seguida como acabamos de realizar, pero
jQuery nos proporciona una forma más limpia para este caso y es pasar parejas de atributos/
valor separados por comas y con el siguiente formato:
$('miSeleccion').attr( { "atributo1" : "valor1", "atributo2" : "valor2"});
Se pueden pasar muchas parejas de atributo/valor, en este caso sólo hemos pasado dos,
pero se podrían pasar muchos más. Quedando el ejemplo que estamos realizando de la siguien-
te forma:
$(".modificaAtributos").attr({"href":"http://www.mentoremprende.es", "target":"_top"});
Puedes visitar el ejemplo11-atributos/#modificarAtributos
7.4. Añadir.
Hemos comprobado que con jQuery podemos leer los atributos de los elementos HTML,
modificarlos, pero existirán casos que debamos añadir atributos, y claro está podemos hacerlo
simplificando mucho el código, para ello podemos usar el método .attr pero esta vez pasándoles
dos parámetros, el primero con el nombre del atributo que queremos añadir y como segundo
parámetro la función que debe devolver el valor a asignar dicho atributo.
M3. JQUERY
$("miseleccion").attr("atributo", function(indiceArray){ })
Imaginemos que tenemos nuestros formularios y tenemos varias clases creadas, por
ejemplo para los campos que son de texto, queremos agregarle el atributo placeholder y un
texto orientativo, por ejemplo, introduce un texto. Además tenemos otros campos de tipo fecha,
el cual vamos a rellenar con la fecha actual para facilitar al usuario rellenar el campo, para ello,
vamos a añadirle el atributo value con la fecha actual. Como veremos, no tenemos que saber
donde está en el código, ni a cuantos elementos va a afectar, ya que como he estructurado muy
bien la web puedo hacer todo este tipo de acciones de un vez.
<br><label>Introduce tu nombre</label>
<input type="text" name="Nombre" class="campoTexto">
<br><label>Introduce tu primer apellido</label>
<input type="text" name="Apellido1" class="campoTexto">
415
<br><label>Introduce tu segundo apellido</label>
<input type="text" name="Apellido2" class="campoTexto">
<br><label>Introduce la fecha de inscripción</label>
<input type="text" name="FechaHoy" class="campoFecha">
Ahora vamos a añadir los atributos placeholder y value a nuestros elementos, para ello
podemos realizar el siguiente código:
$(".campoFecha").attr("value", function(indiceArray){
//indiceArray va a contener el índice del elemento en el objeto jQuery
var miFecha = new Date();
return miFecha.getDate()+"/"+ (miFecha.getMonth()+ 1) + "/" + miFecha.getFullYear();
});
$(".campoTexto").attr("placeholder", function(indiceArray){
Aula Mentor
//indiceArray va a contener el índice del elemento en el objeto jQuery
var miTexto = "Rellena este campo";
return miTexto;
});
El resultado sería el que esperábamos:
Hemos usado los métodos siguientes para obtener el día, mes y año respectivamente:
.getDate, .getMonth() y .getFullYear() los cuales los hemos asociado a una fecha variable de tipo
Date() y hemos tenido que crear un objeto nuevo, por ello hemos usado new Date().
Puedes visitar el ejemplo11-atributos/#addAtributos
7.5. Eliminar.
Para eliminar atributos podemos usar el método siguiente:

416
$("miSeleccion").removeAttr("atributo")
Imaginemos ahora que hemos agregado una sugerencia de texto indicando al usuario
qué campos de un formulario son obligatorios, y por algún motivo debemos eliminarlos direc-
tamente:
<br><label>Introduce tu nombre</label>
<input type="text" name="Nombre" placeholder="Obligatorio" class="miFormulario">
<br><label>Introduce tu primer apellido </label>
<input type="text" name="Apellido1" placeholder="Obligatorio" class="miFormulario">
<br><label>Introduce tu segundo apellido</label>
<input type="text" name="Apellido2" placeholder="Obligatorio" class="miFormulario">
<br><label>Introduce la fecha de inscripción</label>
<input type="text" name="FechaHoy" placeholder="Obligatorio" class="miFormulario">

M3. JQUERY
Podemos hacer lo siguiente y eliminaremos el atributo de todos los sitios de mi selec-

ción:
$(".miFormulario").removeAttr("placeholder");
Puedes visitar el ejemplo11-atributos/#removeAtributos
El resultado sería que nos ha eliminado en una sola línea todos los atributos placeholder
del documento, quedando de la siguiente forma.
Desde jQuery elimino el atributo placeholder
$(".miFormulario").removeAttr("placeholder");
417
8. Resumen.
- jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite sim-
plificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, mane-
jar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.
- JavaScript (abreviado comúnmente "JS") es un lenguaje de programación interpretado (no

es necesario compilar el código). Se define como orientado a objetos, basado en prototipos,
imperativo, débilmente tipado y dinámico. Como cualquier lenguaje, se pueden definir va-
riables, funciones, operadores básicos y lógicos, bucles, arrays y objetos.
- Con jQuery tenemos también un conjunto de selectores y filtros para elegir a qué elementos
del documento van a afectar nuestras acciones. Tendremos por tanto los selectores de eti-
queta o elemento, identificador y clase, entre otros muchos más de tipo parental y de posición
respecto a otras etiquetas.
- Para interactuar con el usuario jQuery proporciona "eventos" que serán disparados o detec-
tados por diferentes circunstancias. Podemos capturar eventos de los siguientes elementos:
del ratón, del teclado, de los formularios, del documento o del propio navegador.
Aula Mentor
El objeto .event es aquel que tendrán todos los elementos que han sido lanzados. Éste además
de poder capturar sus propiedades y datos, podremos modificar el evento definido por defecto
con .event.preventDefault().
Para gestionar los eventos, tenemos los siguientes métodos.
.bind(): Asociamos funciones a eventos de elementos.
.unbind(): Desasociamos eventos de los elementos.
.on(): Asociamos varios eventos a la vez.
.off(): Desasociamos varios eventos a la vez.
.one(): Forzamos que el evento se ejecute sólo una vez.
Otra funcionalidad que podemos hacer con jQuery en tiempo de ejecución es añadir, eliminar
o permutar clases y atributos, para ello tenemos:
.addClass: Añade una clase.
.removeClass: Elimina una clase.
toggleClass( ): Permuta una clase o función.

418
Y respecto a los atributos, también podemos leer, editar, añadir o eliminar:
.attr("atributo_a_leer") Lee un atributo.
.attr("atributo", "valor") Modifica el valor del atributo.
.attr("atributo", function(indiceArray){ }) Añade al atributo la funcion a

devolver declarada en el segundo parámetro.
.removeAttr("atributo") Elimina el atributo dado.

Unidad 7. Formularios, CSS3, Ajax y efectos
En el módulo anterior hemos visto que con jQuery podemos seleccionar los elementos del do-
cumento HTML según nos interese, detectar los eventos que el usuario ha realizado y añadir,
modificar y eliminar nuevas propiedades y atributos a los elementos ya existentes. En esta uni-
dad vamos a ver ver cómo podemos interaccionar con los formularios que rellenen los usuarios
en nuestras aplicaciones Web con jQuery, y además seguir viendo más posibilidades de CSS3,
añadir más efectos y el uso de Ajax, Asynchronous JavaScript And XML ( JavaScript asíncrono y
XML).
1. Formularios. 419
Aunque en HTML5 tenemos muchas formas para poder revisar y controlar el contenido
que el usuario nos introduce en los formularios, tenemos que tener presente que con jQuery
podemos usar muchas más restricciones personalizadas y ayudas para evitar que introduzcan
datos erróneos o de carácter mal intencionados, pero éstas no eximen por parte del servidor
realizar las comprobaciones pertinentes. Podríamos decir que con jQuery vamos a ayudar
al usuario a rellenar el formulario con datos correctos en una primera instancia y le podemos
aconsejar, revisar y comprobar si cumplen alguna característica (por ejemplo si la letra del DNI
es correcta, ha introducido número o letras, etc).
Pero si no hicieramos ninguna comprobación posterior en el servidor, ¿qué pasaría si

un usuario tiene desactivado JavaScript, o no soporta HTML5?. Se saltaría todas las normas que
hemos intentado solventar, ¿qué solucion hay?. Inicialmente sería comprobar si tiene activado
HTML5 y JavaScript como vimos en capítulos anteriores, y dependiendo del carácter del formu-
lario, incluso obligar a que el usuario active o use un navegador con la configuración correcta.
1.1. Selección de elementos.
En unidades anteriores vimos cómo podemos acceder a nuestras propias clases o iden-
tificadores:
$("#identificador").xxx, $(".miclase") , $("mielementoHTML")…etc.
Debemos pensar que con los selectores de jQuery podemos elegir con qué elementos
del documento HTML vamos a trabajar, y en el caso de los formularios, siempre podemos selec-
cionar qué tipo de elementos, por tanto tenemos además unas etiquetas que realizan un filtro
Aula Mentor
más adaptado a los formularios:
Seleccionamos los elementos que tengan relación

con los formularios, aquellos que empiecen por
<input…, <select…, <textarea... o <button… por
ejemplo si queremos seleccionar todos los elemen-
tos del formulario, usaríamos:
:input $( ":input" ).
Y habríamos elegido todos los elementos del si-

guiente formulario:
<form>
<input type="button" value="Mi botón ">
<input type="checkbox">
<input type="file">
<input type="hidden">
<input type="image">
420
<input type="password">
<input type="radio">
<input type="reset">
<input type="submit">
<input type="text">
<select>
<option>Opcion 1</option>
<option>Opcion 2</option>
</select>
<textarea></textarea>
<button>Button</button>
M3. JQUERY
</form>
:submit Seleccionamos los elementos del formulario que

sean del tipo submit, por ejemplo aquellos ele-
mentos que sean declarados de la siguiente forma:
input[type="submit"], button[type="submit"].
:text Seleccionamos los elementos del formulario que
sean del tipo text, por ejemplo <input type="text">.
:password Seleccionamos los elementos del formulario que
sean del tipo password, por ejemplo aquellos ele-
<input type="password">
:radio Seleccionamos los elementos del formulario que
sean del tipo radio, por ejemplo aquellos elemen-
tos que sean declarados de la siguiente forma: <in-
put type="radio">
:checkbox Seleccionamos los elementos del formulario que
sean del tipo checkbox, por ejemplo aquellos ele-
<input type="checkbox">
:checked Seleccionamos los elementos del formulario que
sean del tipo checked, por ejemplo aquellos ele- 421
<input type="checked">
Aula Mentor
:selected Seleccionamos los elementos del formulario que

sean del tipo selected, por ejemplo aquellos ele-
<select name="tuscolores" multiple="multiple">
<option>Amarillo</option>
<option selected="selected">Azul</option>
<option>Verde</option>
<option selected="selected">Naranja</op-
tion>
<option>Gris</option>
<option>Blanco</option>
</select>
Con $( "select option:selected" ) nos estaríamos re-

firiendo a los elementos:
422 <option selected="selected">Azul</option>
<option selected="selected">Naranja</op-
tion>
:disabled Seleccionamos los elementos del formulario que
sean del tipo disabled, por ejemplo aquellos ele-
<input name="nombre" disabled="disabled">
Apto para los siguientes elementos: <button>, <in-

put>, <optgroup>, <option>, <select>, and <texta-
rea>
:enabled Seleccionamos los elementos del formulario que
sean del tipo enabled, por ejemplo aquellos ele-
<input name="nombre" > o no disabled
Apto para los siguientes elementos: <button>, <in-

put>, <optgroup>, <option>, <select>, and <texta-
rea>
:button Seleccionamos los elementos del formulario que
sean del tipo button, por ejemplo aquellos ele-
"button, input[type='button'].
M3. JQUERY
:image Seleccionamos los elementos del formulario que

sean del tipo image, por ejemplo aquellos elemen-
tos que sean declarados de la siguiente forma: <in-
put type="image">
:focus Seleccionamos el elemento del formulario que
tiene el foco del navegador en ése momento, un
ejemplo usual, es cambiar el fondo y fuente de
texto del elemento que tiene el foco en cada mo-
mento para ayudar al usuario a saber cuál es el
elemento actual a rellenar.
:file Seleccionamos los elementos del formulario que
sean del tipo file, por ejemplo aquellos elemen-
tos que sean declarados de la siguiente forma:
input[type='file'].
:reset Seleccionamos los elementos del formulario que
sean del tipo reset, por ejemplo aquellos elemen-
tos que sean declarados de la siguiente forma:
input[type='reset'].
1.2. Validación de formularios.
En otras ocasiones del curso hemos comprobado que podemos acceder al valor de los
elementos de un formulario y realizar determinadas comprobaciones, por ejemplo: comprobar
si ha rellenado los campos antes de poder enviar el formulario. Si no queremos usar HTML5, y
preferimos usar jQuery (con la versión que da soporte a versiones antiguas de Internet Explorer 423
IE6, IE7 o IE8) tendremos que realizar nuestras propias validaciones con script propios. Siempre
tenemos esa opción "bajo la manga" pero muchas veces, se emplea demasiado tiempo en la
validación de datos que al fin y al cabo son tareas comunes en la mayoría de las web del tipo:
comprueba que el campo sea numérico, que no este vacío, si es un correo electrónico válido
(letras@letras.3letras), etc.
Con jQuery podemos usar un plugin que nos trae jQuery para la validación, que en de-
finitiva es un archivo de tipo js ( JavaScript) donde están creadas las validaciones:
http://plugins.jquery.com/validation/1.11.1/
Aula Mentor
Como podremos observar existe ya una nueva versión de validación 1.13.1. Cada dos
meses aproximadamente hay una nueva versión de jQuery ya que hay muchos desarrolladores
detrás haciendo mejoras. En la documentación de la web tenemos los requerimientos para poder
usar el plugin, en concreto para ésta hay que tener jQuery, y ha sido probado en las versiones
1.6.4, 1.7.2, 1.8.3, 1.9.1, 1.11.1 siendo ésta última la que estamos realizando en el curso.
Este tipo de archivo al igual que pasaba con el jQuery es una buena práctica tenerlo en
local o en un servidor que tenga mucha velocidad, ya que sino relantizaremos la comprobación
del formulario y el usuario podría pensar que es por problemas de la página. En nuestro caso,
nos vamos a descargar la versión y vamos alojar en nuestro servidor en la carpeta js/ donde te-
nemos los demás script.
Voy a explicar los pasos intermedios, porque es importante de donde ha salido la fuente
de todo y cómo hemos ido navegando hasta encontrar nuestro archivo, tal y como avanzan y
cambian las web, es mejor tener claro el proceso seguido, a dejar el link directo y pasados unos
meses y éste ya no funcione. De todas formas, en los recursos del curso, obtendrás los archivos
con los que se ha desarrollado el mismo, sino lo encontraras, pregunta a tu tutor.
Después de pinchar en Download now, nos aparecerá otra página web http://jqueryva-
lidation.org/ donde tendremos que seleccionar nuevamente Download y se nos descargará un
archivo con ejemplos, demos y los códigos fuentes. Y también nos podremos descargar exclusi-
vamente los archivos de validación.
Existen varios archivos de validación que nos podemos descargar:
424 Archivo jquery.validate que usaremos para validar los formularios cuando estemos reali-
zando el desarrollo de la aplicación web:
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js
Idem anterior pero en su versión mínima, sin espacios, tabuladores, comentarios etc,
para usar cuando tengamos la aplicación definitiva:
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js
Métodos adicionales donde podremos comprobar y validar más datos, por ejemplo, que
el número del banco sea correcto, que el código de IBAN que ha introducido el cliente corres-
ponde a un número correcto, formato de código postal, número de telefóno, etc. Esta versión
viene con comentarios, tabulaciones y saltos de página, por lo que es la que debemos usar
cuando estemos en la fase de desarrollo.
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.js
Idem anterior pero en su versión mínima, sin espacios, tabuladores, comentarios etc,
para usar cuando tengamos la aplicación definitiva:
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js
Para usar este plugins de validación de formularios tendremos que hacer lo que hemos
realizado en varias ocasiones, linkarlo o enlazarlo desde nuestro documento, a la ruta donde
esté el archivo, en nuestro caso nos creamos una carpeta js, donde teníamos todos los script
almacenados. Debemos usarlo después de haber enlazado el fichero jQuery, en nuestro caso
M3. JQUERY
tendremos que tener:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.va-

lidate.min.js"></script>

<script type="text/javascript" src="js/jquery.validate.js"></script>
Y si queremos usar los métodos adicionales deberémos añadir:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-

methods.min.js"></script>
O de forma local:
<script type="text/javascript" src="js/additional-methods.js"></script>
Existen diferentes métodos que podemos usar para validar nuestros formularios, entre 425
los que destacamos:
email: Devuelve true si el campo es un email válido.
url: Devuelve true si el campo tiene una url válida.
date: Devuelve true si el valor es una fecha válida. Para comprobar si la

fecha es válida, sólo el formato debe ser válido, no si corresponde con
la fecha actual.
dateISO: Devuelve true si el valor del campo es una fecha ISO válida, recordemos
que la fecha ISO corresponde al siguiente formato: AAAA/MM/DD. Don-

de AAAA es el año, MM el mes y DD el día.
number: Devuelve true si el valor contiene un número decimal válido.

Aula Mentor
digits: Devuelve true si el valor contiene sólo dígitos.
creditcard: Devuelve true si el valor es un número de tarjeta de crédito válida.
Nota: El algoritmo utilizado no puede comprobar la validez del número;

es sólo una comprobación de integridad. Al igual que con cualquier otra
validación del lado del cliente, hay que realizar la comprobacion perti-
nente en el lado del servidor.
minlength: Devuelve false si el elemento es:
- Entrada de texto y su valor es demasiado corto.
- Un conjunto de casillas de verificación que no tiene suficientes

casillas marcadas.
- Una selección de elementos y no tiene suficientes opciones

seleccionadas.
426
maxlength: Devuelve false si el elemento es:
- Entrada de texto y su valor es demasiado largo.
- Un conjunto de casillas de verificación tiene demasiadas casillas

marcadas.
- Una selección de elementos y tiene demasiadas opciones seleccionadas.
rangelength: Devuelve false si el elemento es:
- Entrada de texto y su longitud es demasiado corto o demasiado larga.
- Un conjunto de casillas de verificación que no tiene lo suficiente, o tiene

demasiados casillas marcadas.
- Una selección que no tiene suficientes, o tiene demasiadas opciones

seleccionadas.
min: Número mínimo de caracteres requeridos.

M3. JQUERY
max: Número máximo de caracteres requeridos.
range: Número mínimo y máximo de caracteres requeridos.
equalTo: Requiere el elemento sea igual a otro.
remote: Solicita un recurso externo para comprobar el elemento de validez.
Y cuando usemos los métodos adicionales, tenemos otros tantos métodos, en los que
vamos a destacar:
alphanumeric: Requiere que sea alfanumérico.
427
bankaccountNL: Valida un número de banco con el formato:
123456789 or 12 34 56 789
bic: Valida el código Bank Identifier Code.
cifES: Valida Cif de España, con el formato
nieES: Valida si es un Nie (identificador válido para extranjeros).
creditcardtypes: Valida el tipo de tarjeta de crédito.
iban: Nuevo código bancario internacional International Bank Account
Number, valida que sea un número correcto:

Aula Mentor
ip4: Valida si es una dirección ip4 correcta.
ip6: Valida si es una dirección ip6 correcta.
Existen muchas comprobaciones y validaciones más indicadas para otros paises, (núme-
ro de teléfono de US, de UK, códigos postales, etc) y cada vez más se van realizando nuevas
incorporaciones, pero lo importante es saber que la mayoría de los datos que nos introduzca
el usuario podemos usar el plugin de jQuery-validate o usar sólo la parte necesaria en nuestra
aplicación web. Así, nos ahorramos programar algo que ya está programado y sobre todo com-
probado para no entrar en conflicto con otras partes de jQuery.
Ahora veamos un ejemplo de formulario y cómo usar algunas validaciones que nos pro-
porciona el pluging de jQuery: jquery-validate.js
Supongamos que queremos usar un formulario para que el usuario nos introduzcan sus
datos, por ejemplo el siguiente:
428
Deberíamos usar entonces un documento HTML5 (omitiendo las comprobaciones pro-

pias que usa HTML5 como vimos en el módulo 1) parecido al siguiente:
...
...
<div id="miformulario">
<form action=''>
<div>
<label for="name">Nombre:</label>
<input type="text" name="nombre" id="nombreId">
</div>
<div>
M3. JQUERY
<label for="surname">Apellidos:</label>
<input type="text" name="apellidos" id="apellidosId">
</div>
<div>
<label for="email">Email:</label>
<input type="text" name="email" id="emailId">
</div>
<div>
<label for="banco">Cuenta bancaria (IBAN):</label>
<input type="text" name="banco" id="bancoId">
</div>
<div>
<label for="web">Página Web:</label> 429
<input type="text" name="web" id="webId">
</div>
<div>
<label for="password">Contraseña:</label>
<input type="text" name="password" id="passwordId">
</div>
<div>
<label for="observaciones">Comentarios:</label>
<textarea name="observaciones" id="observacionesId"></textarea>

Aula Mentor
</div>
<div>
<input type="submit" value="Enviar">
</div>
</form>
</div>
...
...
Para poder usar el plugin de validación debemos llamar al método validate después de
realizar la selección, y posteriormente la opción que vayamos a comprobar, (email, url, etc).
También debemos decirle las reglas ("rules") utilizadas para validar los datos introducidos por el
usuario.
$('miseleccion').validate( {
430
rules:{
nombre1:{
//opciones
},
. . .
. . .
nombreN:{
//opciones
},
messages:{
nombre1:{
M3. JQUERY
//opciones y mensajes
},
. . .
. . .
nombreN:{
//opciones y mensajes
},
success:{
//Acciones si esta validad correctamente
});
Existen más opciones que se pueden usar con validate y al igual que messages y success 431
son opcionales, la más importante sería rules ya que define nuestras reglas sobre los elementos.
Estos han de estar definidos con el atributo name para poder referirnos a él posteriormente, si
nos fijamos hemos distinguido a modo de ejemplo el nombre del campo del nombre de identi-
ficador para no confundir qué elemento va a llamar y usar el método validate.
Vamos a empezar con el primer campo a validar:
<input type="text" name="nombre" id="nombreId">
Si queremos que este campo sea requerido y el usuario lo rellene para poder enviar el
formulario deberíamos de hacer:
$('#miformulario form').validate({
rules:{
nombre:{
required: true,
}
Aula Mentor
});
Debemos ser muy meticulosos, ya que el 90% de los errores cuando no funcionan las
validaciones es por uso incorrecto de la sintaxis o el uso de la selección de los elementos. Con
este ejemplo, se selecciona aquel documento HTML que tenga un identificador "miformulario" y
sea formulario "form". Una vez que tengas esos elementos, vamos a validarlo .validate para com-
probar las siguientes reglas rules: comprueba el siguiente nombre de entrada de texto nombre
y ahora quiero que este campo nunca este vacío, lo que es lo mismo, sea requerido para poder
enviar el formulario. Si pulsamos el botón enviar sin escribir nada en el campo de nombre nos
aparecerá un mensaje global como podemos ver en la siguiente imagen:
Este mensaje "This field is required" nos indica que el campo en cuestión es requerido,
432 pero podemos elegir nosotros nuestros propios mensajes, para ello debemos añadir más cosas
a nuestro archivo jQuery, por ejemplo si queremos decir en Español "*Introduce tu nombre, este
campo es obligatorio" debemos usar:
rules:{
nombre:{
required: true,
},
messages:{
nombre:{
required: '*Introduce tu nombre, este campo es obligatorio',
}
M3. JQUERY
});
Y si ahora le damos al botón enviar y el formulario de validación nos devuelve false nos
aparecerá el siguiente mensaje:
Y como ya sabemos CSS3, puede añadirle un poco de estilo, para hacer más llamativo el
mensaje al usuario. Para ello, podríamos usar el siguiente código:
. . .
required: '<span class="mierror">*Introduce tu nombre, este campo es obligatorio</span>'
. . .
Y en mi archivo CSS:
.mierror{
color: red;
433
Y ahora cada vez que mostremos un error, al usuario le aparecerá el texto de color rojo,
como se puede ver a continuación:
Sigamos con las validaciones de nuestro formulario, por ejemplo para el campo Apellidos
vamos a obligar que también sea obligatorio, pero que tenga al menos 3 caracteres. Se puede
concatenar validaciones poniéndolas dentro de las validación del elemento:
rules:{
nombre:{
required: true,
},
apellidos:{
minlength: 3,
required: true
Aula Mentor
},
messages:{
nombre:{
required: '<span class="mierror">*Introduce tu nombre, este campo es

obligatorio</span>',
},
apellidos:{
required: '<span class="mierror">*Introduce tus apellidos, este campo es

obligatorio</span>',
minlength: '<span class="mierror">*Debe ocupar al menos 3

caracteres</span>'
}
434
});
Debemos tener en cuenta que hemos añadido una coma a continuación para poder se-
guir llamando elementos del formulario, y para añadir más validaciones que también las hemos
separado por comas. En este ejemplo, en el campo apellidos estamos realizando dos validacio-
nes: una que sea required en el campo y sea rellenado obligatoriamente y otra que tenga un
mínimo de 3 caracteres minlength. Por tanto tenemos la posibilidad de mostrar dos mensajes,
uno para cada validación.
A partir de ahora me voy a centrar sólo en las validaciones del elemento en cuestión y
no mostraré las demás para facilitar el aprendizaje y no repetir código pues tienes el ejemplo
completo y resuelto en los recursos del curso, sólo debemos aprender a usar las validaciones
ya que es recomendable que intentes realizar desde cero la validación de un ejemplo similar al
propuesto sin usar el código resuelto, y posteriormente si tuvieras dudas, usar el código como
apoyo.
Para el campo email:
<div>
<label for="email">Email:</label>
<input type="text" name="email" id="emailId">
</div>
M3. JQUERY
Si queremos comprobar que sea un email, tendremos que usar:
rules:{
email:{
email: true,
},
messages:{
email:{
email: '<span class="mierror">*Introduce un email válido</span>',
});
Para validar el número de iban que nos ha introducido, debemos usar: 435
rules:{
banco:{
iban: true,
},
messages:{
banco:{
iban: '<span class="mierror">*Introduce un IBAN válido</span>',
});
Aula Mentor
Para validar una página web, que comience por http://.... o ftp://...podríamos usar:
rules:{
web:{
url: true,
},
messages:{
web:{
url: '<span class="mierror">*Introduce una URL válido</span>',
436 });
Para validar una contraseña con un número máximo y mínimo:
rules:{
password:{
rangelength: [6,12],
required: true,
},
messages:{
password:{
rangelength: '<span class="mierror">Debe contener entre 6 y 12

caracteres</span>',
required: '<span class="mierror">*Este campo es obligatorio</span>',

M3. JQUERY
});
Y por ejemplo si tenemos un textarea donde hemos limitado el número de caracteres

a 140 y queremos indicar al usuario cuántos caracteres restantes le quedan, y cuando llegue
al límite cambiar el color del texto a rojo; podemos usar varias formas para resolverlo, en este
caso no vamos a usar el método validate de jQuery, sino que vamos hacer un script por nuestra
cuenta para comprobar que se pueden usar ambos métodos conjuntamente.
En el documento HTML podríamos tener:
. . .
<textarea name="observaciones" id="observacionesId"></textarea>
<span id="caracteresRestantes">140 Caracteres restantes</span>
. . .
Y en el jQuery:
var caracteresOcupados = 0; 437
var valorMaximo = 140;
function actualizaCaracteres(valorMaximo, caracteresOcupados){
caracteresRestantes = valorMaximo - caracteresOcupados;
if(caracteresRestantes <= 0){
$('#caracteresRestantes').text(caracteresRestantes + " Caracteres

restantes").css("color", "red");
}else{
$('#caracteresRestantes').text(caracteresRestantes + " Caracteres restantes");

Aula Mentor
console.log(valorMaximo - caracteresOcupados + " Caracteres restantes");
$('#observacionesId').keydown(function(e){
caracteresOcupados = $('#observacionesId').val().length;
actualizaCaracteres(valorMaximo, caracteresOcupados);
});
Es una forma aproximada para indicar al usuario cuántos caracteres le queda, si nos
fijamos, sólo hemos usado el evento .keydown del textarea para detectar que ha presionado la
tecla, y en cada pulsación, calculamos la longitud, para ello usamos $('#observacionesId').val().
length y llamamos a otra función que nos hemos creado que se llama actualizaCaracteres(val
438 orMaximo, caracteresOcupados) y en ella, actualizamos el número de caracteres restantes que
nos quedan y comprobamos si el valor es positivo o negativo, y dependiendo de él ponemos el
texto de color rojo.
Puedes visitar el ejemplo 01-formularios/
2. CSS3.
El uso de CSS3 y jQuery en las aplicaciones web, nos permite modificar, añadir y eli-
minar propiedades de estilo y tener un control no sólo del documento HTML como tal, sino
también de diseño del mismo. Algunas propiedades las hemos visto en apartados anteriores,
para facilitar y enriquecer los ejercicios; ahora veremos como acceder a las propiedades y qué
métodos son los más usuales para trabajar jQuery y CSS.
2.1. Acceder a las propiedades.
Para acceder a las propiedades de CSS se usa la siguiente estructura,
$('miseleccion').css('propiedad')
M3. JQUERY
De esta forma si tenemos un archivo CSS con nuestras propiedades definidas, podemos
acceder a todas ellas desde jQuery. Imaginemos que tenemos una hoja de estilo con las siguien-
tes definiciones de propiedades:
.mitexto{
color: blue;
background-color: white;
Un archivo html con el siguiente contenido:
<div class="mitexto">
<p id="mitexto">Este es un texto con unas propiedades definidas en CSS3. ¿Cuáles?</p>
</div>
Si en nuestro script jQuery quisiéramos acceder a alguna de ellas, podemos hacerlo de

la siguiente forma:
. . .
439
var mipropiedad1_CSS = $(".mitexto").css('color');
var mipropiedad2_CSS = $(".mitexto").css('background-color');
//Mostramos los datos que hemos leido al usuario
$('#mitexto').append("<br>color: "+mipropiedad1_CSS+"<br> background-color: "+ mipropiedad2_CSS);
. . .
Y el resultado sería el siguiente:
Si nos damos cuenta no nos ha devuelto la palabra que esperábamos blue, pero si nos
ha devuelto el mismo significado con otra notación, recuerda que en módulos anteriores tenía-
mos varias formas de indicar al navegador los colores. Hay en internet diversas formas y script
realizados para transformar de unas notaciones a otras, lo importante es que hemos accedido a
las propiedades de nuestra hoja de estilo desde jQuery.
Hemos seleccionado el elemento del documento y posteriormente la propiedad, y nos

ha devuelto el valor que usa el navegador según la propiedad dada.
Aula Mentor
2.2. Modificar las propiedades.
En el curso hemos modificado en determinadas ocasiones las propiedades CSS, te re-

cuerdo que para hacerlo solamente había que usar la siguiente notación:
$('miseleccion').css('propiedad', 'valor')
Siguiendo con el ejemplo anterior, vamos a cambiar las propiedades, en concreto; vamos
a cambiar el color azul, por naranja y el color de fondo blanco, por gris. Como la forma de traba-
jar que estamos adquiriendo, no tenemos que modificar ni el archivo HTML, ni el CSS, sólo con
modificar nuestro script se hará todo automáticamente, estaríamos accediendo a las propiedades
CSS, y al documento HTML directamente para interactuar con él según necesitemos.
//Modifico el valor original de las propiedades
$(".mitexto").css('color','orange');
$(".mitexto").css('background-color','gray');
//Muestro los valores leidos nuevamente, ¡OJO! No modifica el valor del archivo CSS, solo del //navegador
$('#mitexto').append("<br>VALORES NUEVOS<br>color: "+$(".mitexto").css('color')+"<br> background-co-

lor: "+ $(".mitexto").css('background-color'));
440 2.3. Dimensiones y posicionamiento.
En ocasiones necesitamos saber el tamaño de los objetos y las posicion dentro de una
página. Pensemos que tenemos una caja o capa (<div>) y queremos saber el tamaño que tiene,
tanto interno como externo (contando padding y bordes) para poder modificarla accediendo a
sus propiedades en CSS y saber dónde está situada respecto a la página, existen varios métodos
que nos ayudarán, estos son:
innerWidth(): Develve las dimensiones internas (anchura) del primer elemento que
haya en dicho objeto jQuery. Contando el padding pero no el borde.
innerHeight(): Devuelve las dimensiones internas (altura) del primer elemento

que haya en dicho objeto jQuery. Contando el padding pero no el borde.
outerWidth(): Devuelve las dimensiones externas (anchura) del primer elemento

que haya en dicho objeto jQuery. Contando el padding y el borde.
outerHeight(): Devuelve las dimensiones externas (altura) del primer elemento

que haya en dicho objeto jQuery. Contando el padding y el borde.
M3. JQUERY
offset(): El método establece o devuelve las coordenadas de desplazamiento de

los elementos seleccionados, en relación con el documento.
position(): El método establece o devuelve las coordenadas de desplazamiento de

los elementos seleccionados, en relación con el elemento padre.
- La posición siempre nos la devuelve con dos atributos "top" y "left" respecto de la esquina
superior izquierda.
Vamos a ver un ejemplo donde obtengamos todas esas medidas de un elemento, para
ello, tendremos dos elementos html, para facilitar el aprendizaje vamos a usar dos cajas una
dentro de la otra, definida de la siguiente forma:
<h3>Tamaño y posicionamiento de elementos HTML</h3>
<hr>
<div id="cajaPadre">
<div id="cajaHija">
</div>
441
</div>
<p id="valoresCajas"><p>
Y en nuestro archivo CSS tenemos definidas los siguientes identificadores, una para la
caja Padre y otro para la caja Hija:
#cajaPadre{
width: 400px;
height: 400px;
Aula Mentor
background-color: #EBEC99;
border: 4px solid black;
position: relative;
#cajaHija{
width: 200px;
height: 200px;
background-color: #DF9449;
position: absolute;
top: 50%;
left: 50%;
442 height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
Y ahora vamos sacar todos los datos de nuestros elementos HTML, en este caso nuestro
<div> cajaPadre y cajaHija. Para ello, vamos a usar el siguiente código en jQuery:
. . .
. . .
var anchoCajaPadre = $("#cajaPadre").innerWidth();
var altoCajaPadre = $("#cajaPadre").innerHeight();
var anchoCajaHija = $("#cajaHija").innerWidth();
var altoCajaHija = $("#cajaHija").innerHeight();

M3. JQUERY
var anchoTCajaPadre = $("#cajaPadre").outerWidth();
var altoTCajaPadre = $("#cajaPadre").outerHeight();
var anchoTCajaHija = $("#cajaHija").outerWidth();
var altoTCajaHija = $("#cajaHija").outerHeight();
var posicionOffsetCajaPadre = $("#cajaPadre").offset();
var posicionPositionCajaPadre = $("#cajaPadre").position();
var posicionOffsetCajaHija = $("#cajaHija").offset();
var posicionPositionCajaHija = $("#cajaHija").position();
$('#valoresCajas')
443
.append("RESULTADOS")
.append("<hr>")
.append("<br>CAJA PADRE")
.append("<br>innerWidth: "+anchoCajaPadre)
.append("<br>innerHeight: "+altoCajaPadre)
.append("<br>outerWidth: "+anchoTCajaPadre)
.append("<br>outerHeight: "+altoTCajaPadre)
.append("<br>offset (top): "+posicionOffsetCajaPadre.top)
.append("<br>offset (left): "+posicionOffsetCajaPadre.left)

Aula Mentor
.append("<br>position (top): "+posicionPositionCajaPadre.top)
.append("<br>position (left): "+posicionPositionCajaPadre.left)
.append("<hr>")
.append("<br>CAJA HIJA")
.append("<br>innerWidth: "+anchoCajaHija)
.append("<br>innerHeight: "+altoCajaHija)
.append("<br>outerWidth: "+anchoTCajaHija)
.append("<br>outerHeight: "+altoTCajaHija)
.append("<br>offset (top): "+posicionOffsetCajaHija.top)
.append("<br>offset (left): "+posicionOffsetCajaHija.left)
.append("<br>position (top): "+posicionPositionCajaHija.top)
.append("<br>position (left): "+posicionPositionCajaHija.left)
444 . . .
. . .
Realmente en este ejemplo no sería necesario crear las variables para luego mostrarlas,
pero es una buena práctica que nos acostumbremos a usar variables en nuestros script, aquellas
veces que tengamos que usarlas varias veces o quede más claro el código, y facilite el posterior
mantenimiento/modificación del mismo por una tercera persona.
Puedes visitar el ejemplo 02-css/
El resultado que obtenemos suponiendo que el elemento cajaPadre está dentro del
documento sería el que muestra la siguiente imagen. Debemos observar sobre todo los valores
respecto del documento, respecto del padre y las posiciones con y sin borde:
M3. JQUERY
Cuando tenemos un elemento scroll también podemos obtener la posición de los ele-
mentos respecto a este scroll, para ello disponemos de los siguientes métodos:
scrollTop() Método que obtiene o establece la posición vertical de la barra de
desplazamiento para el elemento de destino.
scollLeft() Método que obtiene o establece la posición horizontal de la barra de

desplazamiento para el elemento de destino.
Al igual que en otros métodos, si le pasamos un parámetro, en vez de obtener el valor,

creamos el scroll con ese valor dado:
Veamos un ejemplo:
<h3>Posicionamiento en un Scroll</h3>
<hr>
<p>Mueve el scrollbar y obtén la posición del scroll vertical y horizontal en cada momento.</p>
<p id="valoresScroll">Posición ScrollHorizontal: 0, ScrollVertical: 0<p>
445
<div id="miScroll">
<img src="img/jquery_logo.png">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><br>
En el CSS, tendríamos:
Aula Mentor
#miScroll{
border:1px solid black;
width:250px;
height:250px;
overflow:auto;
Y en el jQuery tendríamos:
$("#miScroll").scroll(function() {
var scrollVertical = $("#miScroll").scrollTop();
var scrollHorizontal = $("#miScroll").scrollLeft();
$("#valoresScroll").text("Posición ScrollHorizontal: "+scrollHorizontal +",

ScrollVertical: "+scrollVertical);
});
446
El resultado sería el siguiente, nótese que hemos agregado una imagen con un tamaño
superior al ancho del scroll para poder ver el scroll horizontal:
3. AJAX.
Una de las innovaciones que ocurrió en el desarrollo de aplicaciones web fue la apari-
ción de AJAX, aunque realmente es una forma de desarrollar aplicaciones con una técnica con-
creta y que existía hace mucho tiempo antes, usando el método XMLHttpRequest de JavaScript
para realizar peticiones asíncronas al servidor. Últimamente ha habido un gran aumento y uso
de la misma, ya que la tecnología en sí lleva mucho tiempo usándose por desarrolladores web.
Ajax requiere un gran estudio del mismo y en este curso no vamos a poder profundizar debido
a la extensión y complejidad del mismo. Eso sí, vamos a ver una introducción del mismo, usar
algunas características con jQuery comprendiendo que también podemos interactuar con él y
coger una base por si queremos profundizar en otro momento mediante AJAX.
M3. JQUERY
3.1. Introducción.
A pesar de que el término «Ajax» (Asynchronous JavaScript And XML) fue creado en
2005 por Jesse James Garrett, en la historia de las tecnologías se remonta varios años antes con la
iniciativa de Microsoft en el desarrollo de Scripting Remoto (tecnología que permite a los scripts
que se ejecutan dentro de un navegador web intercambiar información con el servidor).
Las aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mien-

tras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es
posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interacti-
vidad, velocidad y usabilidad en las aplicaciones.
Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan
al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento
de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente
se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza me-
diante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es
necesario que el contenido asíncrono esté formateado en XML.
Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas
operativos y navegadores dado que está basado en estándares abiertos como JavaScript y Docu-
ment Object Model (DOM). JQuery usaba de por sí varios métodos AJAX, uno que podemos ver
es el método .load(url, parámetros, callback), facilitando la tarea de enviar y recoger peticiones
asíncronas al servidor.
Supongamos un caso práctico, el navegador del cliente carga una página de mucho 447
"peso", es decir, tiene muchas imágenes y contenidos que ralentizan la carga del mismo, una
vez que ha conseguido cargarla en el navegador, supongamos que queremos hacerle una con-
sulta de nuevo al servidor, pensemos que nuestra web está compuesta por muchas secciones,
artículos y queremos sólo actualizar una sección, o una caja, o sólo una parte. ¿Tendríamos que
recargar nuevamente toda la página con el coste en tiempo y peticiones web al servidor y el
tráfico que generaría nuevamente al usuario?. Es una de las opciones que nos resuelve AJAX,
imaginemos el siguiente esquema web:
Aula Mentor
En un formulario, cuando pulsamos ACTUALIZAR, si usámos los formularios tal y como

los hemos estado usando anteriormente mandaríamos el formulario al servidor y con las opcio-
nes o variables que tengan. El servidor procesaria las variables de entrada y nos devolvería de
nuevo toda la información, deberá cargar todas las secciones de la página y las correspondientes
imágenes, texto, etc, en definitiva mucho tiempo y más tráfico (MegaBytes).
Si por ejemplo queremos mandar una variable al servidor para actualizar una sección,
pero sin tener que tocar nada de lo demás, tendremos que usar otros métodos y emplear AJAX
para resolverlo.
448
Navegador del cliente
1. El servidor del cliente ha realizado una petición, en este caso el cliente quiere actualizar la
sección de las redes sociales.
2. El servidor procesa la información que le ha venido del cliente, (actualizar las redes sociales)
y depende de la acción puede necesitar hacer: consultar a bases de datos, a otros servidores,
páginas web, o resolver por si misma la petición porque tenga todos los datos para realizarlo.
3. El servidor finalmente manda los datos actualizados de esa sección al navegador del cliente,
pero no se han modificado, ni actualizado las demás secciones.
Una vez que tenemos claro qué es AJAX, podemos seguir con las tecnologías implicadas
para una aplicación con AJAX, estas serían:
1. JavaScript, para capturar las interacciones con el usuario o los eventos que deseemos aplicar,
ya sea el navegador, el ratón, etc. todos los eventos que podemos capturar del usuario.
M3. JQUERY
2. El objeto XMLHttpRequest, para permitir que las peticiones se realicen al servidor sin inte-
rrumplir otras tareas del navegador.
3. Archivos XML en el servidor u otros formatos de datos. Normalmente se suele usar HTML,
JSON, etc.
4. Nuevamente JavaScript, para recibir los datos que nos ha mandado el Servidor Web y mos-
trarlos correctamente en nuestra página.
jQuery proporciona soporte para Ajax, permitiendo abstraer las diferencias que pueden
existir entre navegadores, para ello tenemos los siguientes métodos: $.get(), $.getScript(), $getJ-
SON(), $.post() y $().load().
3.2. Preámbulo.
Debemos tener muy claros los siguientes conceptos para entender correctamente el uso
de los métodos anteriores:
3.2.1. Métodos GET y POST.
En el módulo de HTML en la sección de formulario, vimos que podíamos usar formula-

rios y usar los métodos GET y POST para enviarle la información al servidor:
Con GET, lo podemos usar cuando estemos obteniendo datos del servidor, pero no
estamos interactuando con él, son peticiones del tipo "Dame o coge", Dame este dato, Dame lo 449
que encuentres de esta página, etc. Las solicitudes GET pueden ser almacenadas en la caché del
navegador, pudiendo conducir a un comportamiento impredecible si no se tiene en cuenta.
Con POST, se puede usar cuando estemos interactuando con el servidor, y ésta pueda
requerir agregar o modificar datos. Son peticiones del tipo "Recibe" estos datos, y dependiendo
del caso si por ejemplo es un alta de un usuario, los daremos de alta en nuestro servidor (inte-
ractuando con la Base de Datos, registros log, etc).
3.2.2. Tipos de datos.
Podemos usar muchos tipos de archivos de datos diferentes, entre los que se encuentran:
- Texto. Para el envío de las cadenas de caracteres. Si recordamos cuando en los formularios
mandábamos varias variables, estas se enviaban en formato de texto plano.
- Html. Para transportar los trozos de código HTML que serán insertados/ubicados en la pá-
gina.
- Script. Fichero con código JavaScrip, por ejemplo añadir script nuevo o funciones nuevas
a nuestra página.
- Json. Para transportar información en formato JSON, incluyendo más información (cadenas
de caracteres, array y objetos). JSON, es un formato muy estándar y usado para el intercam-
bio de información, tanto de aplicaciones web, como de aplicaciones de dispositívos móvi-
les. http://es.wikipedia.org/wiki/JSON
Aula Mentor
- Jsonp. Para transportar información JSON de un dominio a otro.
- XML. Para transportar información en formato XML. Junto con JSON, son dos formatos muy
extendidos, usados a nivel web y de intercambio de información. Por ejemplo entre un ERP
(Enterprise Resource Planning) o incluso la tendencia en los bancos para comunicarnos con
ellos es usar archivos XML, como son los cuadernos que envían las empresas, como puede
ser la SEPA:
http://docs.oracle.com/cd/E39564_01/doc.91/e39169/fields_sepa_pay_file_appx.
htm#EOAEL00518
3.2.3. Sincronismo/Asincronismo.
Hemos hablado de solicitudes asíncronas, y vamos hacer un poco hincapié en resolver

este concepto, ya que es importante entender a qué se refiere AJAX con asíncrono.
Si tenemos varias llamadas de Ajax de modo asíncrono podemos tener varias peticiones
al servidor de manera paralela por lo que nos puede ayudar a cargar la información más rápida,
o podemos estar interactuando con varios elementos y cada elemento tardará el tiempo que
necesite en dar su respuesta o resultado.
En caso de que el llamado al Ajax estuviera en modo síncrono entonces la petición al

servidor se realizaría de uno en uno y se tardaría más en cargar información. La parte que más
nos interesa es usarla de forma asíncrona por lo que aunque no lo usemos en este manual es
bueno que sepas que se puede usar.
450
3.2.4. Métodos AJAX en jQuery.
3.2.4.1. $.get()
La sintaxis que podemos usar con jQuery para hacer consultas es la siguiente:
$.get(url[, datos][,función][,tipo])
Para ello utiliza la consulta HTTP GET siendo los parámetros siguientes:
url: Una cadena de caracteres que contiene la URL del archivo que se
quiere cargar.
datos: (opcional). Lista expresada en pares en forma de clave/valor que

se enviarán como datos al servidor.
función: (opcional). La función que se debe ejecutar si la consulta trascurre

correctamente.
tipo: (opcional). Cadena de caracteres que especifica el tipo de datos

que se van a transmitir: xml, script, json, jsonp, text o html.
El metodo nos devuelve un objeto XMLHttpRequest.

M3. JQUERY
3.2.4.2. $.post()
La sintaxis que podemos usar con jQuery para hacer consultas es la siguiente:
$.post(url[, datos][,función][,tipo])
Para ello utiliza la consulta HTTP POST siendo los parámetros siguientes:
url: Una cadena de caracteres que contiene la URL del archivo que se
quiere cargar.
datos: (opcional). Lista expresada en pares en forma de clave/valor que

se enviarán como datos al servidor.

correctamente.
tipo: (opcional). Cadena de caracters que especifica el tipo de datos

que se van a transmitir: xml, script, json, jsonp, text o html.
3.2.4.3. $getScript()
La sintaxis que podemos usar para cargar un script usando el método HTTP GET y eje- 451
cutarlo sería el siguiente:
$.getScript(url[,función])
Donde:
url: Sería una cadena de caracteres que contiene la URL del script que
se quiere cargar.

correctamente. Aunque la mayoría de las veces no es necesaria ya que
el script se ejecutaría si todo va bien y ahí meteríamos nuestras
acciones, pero si queremos independizar la ejecución del script de la
llamada al método, podemos usarla.
3.2.4.4. $.ajax()
De los métodos existentes en jQuery para trabajar con AJAX, este es el que comprende
los demás métodos por lo que es una buena práctica el uso del método $.ajax en lugar de los
otros ya que ofrece más características y está al igual que las demás funciones jQuery para un
uso más comprensible.
Para configurar el método $.ajax lo haremos a través de un objeto, el cual contiene todas
las instrucciones que necesita jQuery para completar la petición. Se pueden especificar acciones
Aula Mentor
en caso que la petición haya tenido éxito o no, además, al estar configurado como un objeto, es
posible definir sus propiedades de forma separada, haciendo un código más legible, reutiliza-
ción de código y un mantenimiento más optimo.
La lista de opciones de configuración completa siempre la podemos consultar desde la

documentación oficial:
http://api.jquery.com/jQuery.ajax
Entre las opciones de configuración más importantes tendríamos las siguientes:
async De forma predeterminada el valor es true, y establece si la petición

se va a realizar de forma asíncrona o no. Si recordamos es un punto
muy importante y si usamos la opción a false la petición bloqueará
la ejecución de otros códigos hasta que dicha petición haya finalizado.
cache Establece si la petición será guardada en la caché del navegador,

de forma predeterminada es true para los dataType excepto para script
y jsonp. Cuando posee el valor false, se agrega un cadena de
caracteres anti-caché al final de la URL de la petición.
complete Establece una función de devolución de llamada que se ejecuta

cuando la petición está completa/finalizada, aunque haya fallado o no.
La función recibe como argumentos el objeto de la petición en crudo y
el código de estado de la misma petición.
452
context Establece el alcance en que la/s función/es de devolución de llamada se
ejecutarán. De manera predeterminada será this, haciendo referencia al
objeto originalmente pasado al método $.ajax.
data Establece la información que se enviará al servidor. Puede ser objeto o

cadena de caracteres.
dataType Establece el tipo de información que se espera recibir como respuesta

del servidor, en caso de no especificarse ningún valor, se revisa el MIME
que posee la respuesta.
error Establece una función de devolución de llamada a ejecutar en caso de

que exista algún error en la petición. Dicha función recibe como argu
mentos el objeto de la petición y el código de estado de la misma.
jsonp Establece el nombre de la función de devolución de llamada a

enviar cuando se realiza una petición JSONP. De forma predeterminada
es "callback".
success Establece una función a ejecutar si la petición ha sido satisfactoria.

Dicha función recibe como argumentos la información de la petición, el
estado de la misma y el objeto de la petición.
timeout Establece un tiempo máximo de ejecución para considerar una petición

como fallida o errónea. Expresada en milisegundos.
M3. JQUERY
traditional Establece si se usa el estilo de serialización de datos, su valor por

defecto es true.
type Establece el tipo de petición, por defecto su valor es GET, pero se

puede usar otros tipos como PUT y DELETE. Debemos tener en cuenta
que este parámetro no está soportado por la mayoría de los navegadores.
url Establece la URL donde se realiza la petición. Es obligatoria para poder

usar el método $.ajax.
Por último comentar que existen muchos más métodos como ajaxSetup(parámetros)
o serialize() que nos ayuda en las consultas y en la serialización de datos. La serialización de
datos es muy importante para transformar todos los campos y parámetros de un formulario de
forma contínua en una cadena de caracteres. Por ejemplo en el siguiente caso, se enviaría al
servidor la siguiente cadena:
single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
AJAX y jQuery como vemos están integrados para poder funcionar conjuntamente en
nuestras aplicaciones web, no te preocupes si este apartado no lo has comprendido totalmente,
ya que solamente es una pequeña introducción y si nunca has usado AJAX, debes pensar que
son métodos nuevos y necesitaríamos más tiempo para poder comprenderlos. Si has usado antes 453
AJAX puedes profundizar en la documentación oficial y sacarle aún más provecho a tu manejo
de jQuery, si es la primera vez quédate con la idea principal y cuando dispongas de tiempo
siempre puedes retomarlo.
3.2.5. Posicionamiento (SEO) con AJAX.
No debemos olvidar que el posionamiento de una página es hoy en día uno de los fac-
tores más importantes de cualquier aplicación web, ya que al existir muchas y crecer día a día
en número, es vital salir por delante en las búsquedas de las web competidoras, así los usuarios
eligirán antes la web que salga en los primeros resultados.
Pensemos que mucha información con AJAX sea cargada de forma asíncrona, cuando los
robots de los buscadores, por ejemplo de google pasaban a leer la información, no estan leyen-
do directamente el fichero como tal, ya que existen una cantidad de peticiones y respuestas para
completar la web en paralelo. Antiguamente no se indexaban correctamente y las web realizadas
en AJAX siempre salían detrás de las web no realizadas con AJAX.
Por todo esto, es muy importante pararnos y tener en cuenta este punto sobre AJAX,
puesto que tenemos que estudiar muy bien los casos en los que sería necesario, y en el caso
de usar AJAX, seguir unos métodos y pautas que existen para que no afecten a la indexación y
posicionamiento en los buscadores. Ya que si no los tenemos en cuenta, tendrémos una página
muy dinámica y rápida pero muy mal posicionada.
Aula Mentor
4. Efectos.
Un punto muy importante que no debemos olvidar al usar jQuery es el uso de efectos y
animaciones en nuestras aplicaciones web. Antíguamente cuando se veía una página web con
animaciones siempre se asociaba a Macromedia Flash Player, debido a que permitían un gran
abanico de efectos, animaciones y posibilidades. Hoy en día con jQuery podemos usar las ani-
maciones y efectos más típicos usados en las webs sin tener que obligar al usuario tener instala-
do la última versión de Adobe Flash Player. Este punto que a priori puede no tener importancia,
cuando estamos hablando de dispositivos móviles, sobre todo los Iphone a no ser que se instalen
aplicaciones externas no pueden ver las páginas web con Flash, con la consecuente pérdida de
usuarios que usan estos dispositivos.
4.1. Ocultar/mostrar elementos.
Con estos métodos de jQuery .show() y hide(), podemos hacer aparecer y desaparecer
elementos HTML, pudiendo crear efectos ante el usuario muy interesantes. La sintaxis sería la
siguiente:
$(selección).show( velocidad, función a la que llama)
Muestra el/los elemento/s seleccionados en caso de estar ocultos.
$(selección).hide( velocidad, función a la que llama)
454 Oculta el/los elemento/s seleccionados en caso de estar ocultos
La velocidad expresa la velocidad en aplicar el efecto, es un parámetro opcional y pue-

de ser slow, normal o fast, aunque también se puede expresar en milisegundos.
La función a la que llama (callback) es la función que se va a ejecutar cuando termine

el efecto y este parámetro también es opcional.
Ejemplos:
$('p').show()
$('.claseMostrar').show()
$('.claseMostrar').show('normal')
$('.claseMostrar').show('slow')
$('.claseMostrar').show('fast', function(){ alert("He terminado el efecto");})
$('p').hide()
$('.claseOcultar').hide()
$('.claseOcultar').hide('normal')
M3. JQUERY
$('.claseOcultar').hide('slow')
$('.claseOcultar').hide('fast', function(){ alert("He terminado el efecto");})
Si por ejemplo tenemos el siguiente código HTML,
. . .
<p>A continuación, bloque con la clase OCULTAR</p>
<hr>
<div class="ocultar">
<p class="mostrar"> Texto1 de la clase mostrar </p>
<p class="ocultar"> Texto3 de la clase ocultar </p>
<p class="ocultar"> Texto6 de la clase ocultar </p> 455
</div>
<hr>
<p>A continuación, bloque con la clase MOSTRAR</p>
<hr>
<div class="mostrar">
Aula Mentor
</div>
<hr>
<button id="btnMostrar">Mostrar</button><button id="btnOcultar">Ocultar</button>
456 . . .
Si en el script de jQuery tenemos:
. . .
var contador = 0;
$('#btnMostrar').click(function(){
//Mis acciones
contador = 0;
$('.ocultar').show('fast', function(){contador++;console.log("Mostrando "+contador+"

elemento.");});
});
$('#btnOcultar').click(function(){
//Mis acciones
M3. JQUERY
contador = 0;
$('.ocultar').hide('slow', function(){contador++;console.log("Ocultado "+contador+"

elemento.");});
});
. . .
Y en el CSS:
.ocultar{
background-color: #F3E5A9;
.mostrar{
background-color: #F3E5A9;
El efecto será que dependiendo del botón que pulsemos, Mostrar u Ocultar, realizará una
acción u otra. Si nos fijamos la clase .mostrar no hace realmente nada en este script, ya que sólo 457
ponemos oculto/visible los elementos HTML que pertenezcan a la clase .ocultar. Es una buena
práctica aprovechar y utilizar los nombres cuando realmente tengan un sentido semántico, por-
que en un futuro, si necesitamos en vez de mostrar los elementos con la clase .ocultar queremos
ocultar los elementos que pertenezcan a la clase .mostrar tenemos la opción de hacerlo, porque
ya hemos dotado el código con la posibilidad de algún cambio.
Si este código estuviera en una gran aplicación web, y no lo hubieramos declarado

inicialmente, no tendríamos una forma de seleccionar exactamente esos elementos que no son
.ocultar, en tal caso, tendríamos que buscar dentro del código del archivo todas las etiquetas a
las que le queremos añadir la clase .mostrar. En resumen se podría decir que hay que intentar
asignar correctamente los nombres a los elementos que son susceptibles de posibles cambios
futuros como ya vimos en otras unidades.
Un ejemplo muy usado en las web con estos dos efectos, es el típico botón de leer más,
en el que al pulsar sobre él, muestra el contenido completo del párrafo. Para ello se puede
hacer de varias formas, por ejemplo si cogemos los datos de una base de datos agregamos dos
párrafos, por ejemplo, el primer párrafo con las primeras 50 palabras, o 100 caracteres, y el se-
gundo párrafo que estará oculto con el resto. Centrándonos en la parte de ocultar/mostrar texto
podríamos hacer los siguiente en el fichero HTML:
. . .
<a name="leer_mas"></a>
<h3><a href="#leer_mas">EFECTOS con jQuery: .hide() y .show(). Leer más</a></h3>

Aula Mentor
<p class="encabezadoArticulo">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmo-
dtempor incididunt ut labore et dolore magna aliqua.
<br>
<button class="leerMas">Leer mas...</button>
</p>
<p class="restoArticulo">Ut enim ad minim veniam,
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<button class="leerMenos">Leer menos...</button>

458
</p>
. . .
En el CSS ocultamos inicialmente el resto del artículo:
.restoArticulo{
display: none;
Y en el script hacemos lo siguiente:
. . .
$('.leerMas').click(function(){
//Mis acciones
contador = 0;
$('.restoArticulo').show();
M3. JQUERY
//Ocultamos el botón para que de la sensación de continuidad
$('.leerMas').hide();
});
$('.leerMenos').click(function(){
//Mis acciones
contador = 0;
$('.restoArticulo').hide();
//Mostramos el botón para que el usuario pueda extender el artículo
$('.leerMas').show();
});
. . .
Puedes visitar el ejemplo 03-efectos/#leer_mas 459
Debemos tener en cuenta que en determinadas ocasiones tendremos que usar efectos
combinados, como por ejemplo en el ejemplo anterior que cuando mostramos el texto, oculta-
mos el botón de leerMas.
4.2. Fundidos.
Hacer fundidos de los elementos con jQuery es posible gracias a los métodos de fading
que disponemos. Este método interacciona sobre los elementos HTML a través del cambio de la
propiedad opacity de CSS.
Recordando que con Opacity podemos variar el fundido con valores entre 0 (totalmente
transparente) y 1 (totalmente opaco). Existen los siguientes métodos para trabajar con los fundi-
dos:
fadeOut() Con este método conseguimos que el elemento que lo recibe desaparezca de la
página a través del cambio de su opacidad, haciendo una transición suavizada
con tendencia al valor de opacity cero.
fadeIn() Con este método conseguimos que el elemento que lo reciba aparezca en la
página a través del cambio de su opacidad, haciendo una transición suavizada
con tendencia al valor de opacity 1. Para poder apreciar este método el
elemento sobre el que estamos trabajando, debe estar con un valor inferior a 1,
es decir, que esté parcial o totalmente transparente.
Aula Mentor
fadeTo() Permite hacer cualquier cambio de opacidad, desde cualquier valor y a

cualquier valor. Este método recibe la duración deseada, el valor de la opacidad
al que queremos llegar y una posible función callback.
Veamos un ejemplo donde pongamos en práctica estos métodos:
. . .
<button id="desapareceT">FadeOut-Desaparece</button>
<button id="apareceT">FadeIn-Aparece</button>
<button id="aumentaFade">Desvanecimiento (+0.1)</button>
<button id="disminuyeFade">Desvanecimiento (-0.1)</button>
<div id="miCaja"><img src="img/jquery_logo.png" alt="milogo" id="miImagen">
. . .
En el script jQuery tendríamos lo siguiente:
460 . . .
$('#desapareceT').click(function(){
$('#miImagen').fadeOut();
});
$('#apareceT').click(function(){
$('#miImagen').fadeIn();
});
var opacidadActual = 1;
var incrementoOpacidad = 0.10;
$('#aumentaFade').click(function(){
if(opacidadActual >= 1){

M3. JQUERY
alert("Ya no puedes aumentar más porque el valor es el máximo");
}else{
opacidadActual=(parseFloat(opacidadActual)+parseFloat(incrementoOpacidad)).
toFixed(2);
$('#miImagen').fadeTo( "fast", opacidadActual);
});
$('#disminuyeFade').click(function(){
if(opacidadActual <= 0){
alert("Ya no puedes disminuar más porque el valor es el mínimo");

461
}else{
opacidadActual=(opacidadActual-incrementoOpacidad).toFixed(2);
$('#miImagen').fadeTo( "fast", opacidadActual);
});
. . .
Y debemos ver en el navegador algo parecido a esto:
Si hemos llegado al valor inferior en el desvanecimiento y posteriormente pulsamos en

el botón FadeIn-Aparece no se debe mostrar la imagen con su máximo valor. Al estar definido
como transparente previamente, lo está mostrando, pero con un fundido transparente. Es decir,
con FadeOut hacemos que desaparezca el objeto, y con FadeIn aparece, pero con el valor previo
que tenga definido con FadeTo.
Aula Mentor
Hemos usado parseFloat(número) para indicar a JavaScript que no queremos que conca-
tene los valores número 1 y número 2, ya que si recordamos en JavaScript teníamos el operador
+, y dependiendo del caso debemos asegurarnos que estamos trabajando con números sino
tendremos resultados inesperados. Existen muchos métodos que nos ayudarán para asegurarnos
que estamos trabajando o queremos convertir al tipo que deseemos, entre los más importantes:
eval(), isFinite(), isNaN(), Number(), parseFloat(), parseInt(), String().
También hemos usado el método toFixed(2) que reduce el número de decimales a dos,
porque en este caso no necesitamos más decimales. Es recomendable usar siempre mensajes en
la consola para ayudarnos en la depuración del programa, del tipo console.log("Mensaje : "+va-
riable). Te recomiendo que modifiques la línea del script:
opacidadActual=(parseFloat(opacidadActual)+parseFloat(incrementoOpacidad)).toFixed(2);
Por esta:
opacidadActual=opacidadActual+incrementoOpacidad;
Observa en la consola que es lo que pasa cuando vamos interactuando con los botones. ¿Y si
además quitamos el método toFixed(2)?
Puedes visitar el ejemplo 03-efectos/#fundido
4.3. Desplazamientos.
462
Existen unos métodos que van a ayudarnos a crear efectos de desplazamiento sobre
nuestra página, realmente lo que hacen es modificar dinámicamente la altura de un elemento,
normalmente se aplica a una capa/caja de tipo <div></div>.
slideDown( velocidad, función a la que se llama) Desplaza hacia abajo (down)
slideUp( velocidad, función a la que se llama) Desplaza hacia arriba (up)
El parámetro velocidad es opcional y se puede expresar en milisegundos o con las

palabras reservadas "normal", "slow" o "fast".
La función a la que se llama también es opcional e indicaríamos con el parámetro la

función que se tiene que ejecutar cuando termine el efecto.
Veamos un ejemplo donde usemos ambos métodos:
<div>
<button id="desplazamiento">Pulsa para desplazar</button>
</div>
<div id="midesplazamiento"></div>
M3. JQUERY
#midesplazamiento{
height: 100px;
width: 100px;
background-color: #A0A0A0;
Y en el script de jQuery tendríamos:
$('#desplazamiento').click(function(){
//slideDown pone la propieda display: none
//Comprobamos si está oculto el elemento para mostrarlo
if($("#midesplazamiento").is(":hidden")){ 463
$("#midesplazamiento").slideDown("slow");
}else{
$("#midesplazamiento").slideUp("slow");
});
El resultado lo puedes ver en el ejemplo de los recursos del curso:
Puedes visitar el ejemplo 03-efectos/#desplazamiento

Aula Mentor
4.4. Animaciones.
En jQuery podemos usar el método animate() y aplicar las propiedades necesarias en

CSS para crear la animación. Con este tipo de animaciones podemos modificar las propiedades
y crear efectos. La sintaxis sería la siguiente:
.animate( Propiedades, [ Duración], [ Función de animación ], [ Callback ] )
Propiedades: Este es el único parámetro que se debe indicar obligatoriamente y sirve

para indicar qué atributos CSS queremos actualizar, con los nuevos
valores que adoptará el objeto. Se tiene que indicar en notación de
objeto, de manera similar a como se puede indicar en el método css()
de jQuery y sólo permite el cambio de propiedades CSS que tengan
valores numéricos.
Duración: Sirve para indicar la duración de la animación, en un valor numérico en

milisegundos, o palabras clave normal, slow o fast.
Función de animación: Esta función sirve para indicar cómo se realizará la animación, si
más suave al principio y rápida al final, o igual de rápida todo el
tiempo. Es decir, la velocidad con la que se realizará el cambio de
valores en diferentes puntos dentro de la animación. En principio, los
dos posibles valores son "swing" (por defecto) y "linear".
Callback: Ofrece la posibilidad de indicar una función a ejecutarse cuando se ha

464 terminado totalmente de producir el efecto. Es decir, una función que se
invoca cuando se ha llegado al valor final de los atributos CSS que se
solicitaron cambiar.
Veamos un simple efecto donde vamos a cambiar el tamaño de letra de un texto:
. . .
<p class="miAnimacion">Este texto será animado cambiando sus propiedades al pulsar el botón</p>
<div>
<button id="creaAnimacion">Anima el elemento</button>
<button id="restableceAnimacion">Restablece valores iniciales CSS</button>
</div>
. . .
En nuestro CSS podríamos tener:

M3. JQUERY
.miAnimacion{
color: blue;
font-size: 12pt;
Debes entender que no todas las propiedades pueden ser animadas, por ejemplo, colo-
res y aquellas que no tengan un valor que pueda ir creciendo o disminuyendo. Con este método
podemos modificar las propiedades de CSS, controlar el tiempo que va a tardar en aparecer la
animación y todo ello de una forma sencilla. En este ejemplo hemos usado solo el tamaño de
fuente, si quieres ver más ejemplos de animación en el siguiente enlace http://api.jquery.com/
animate/.
4.5. Cola de efectos.
Cuando tenemos varios efectos en nuestro documento, estos se van introduciendo en

una cola de efectos predeterminado llamado "fx". Cada elemento de la página tiene su propia
cola de efectos predeterminado y funciona de manera automática. Al invocar los efectos se van
metiendo ellos mismos en la cola y se van ejecutando automáticamente, uno detrás de otro, con
el orden en el que fueron invocados.
Un ejemplo de cola de efectos puede ser:

465
. . .
<p id="colaEfectos">TEXTO</p>
<div>
<button id="iniciaCola">Inicia Cola de Efectos</button>
</div>
. . .
En el script de jQuery tendríamos:
. . .
$('#iniciaCola').click(function(){
var micapa = $('#colaEfectos');
micapa.animate({"font-size": "27pt"}, 2500);
micapa.hide(2000);
Aula Mentor
micapa.show(2000);
micapa.animate({"margin-left": "450px", "marging-top": "70px"}, 2000);
});
. . .
Y en el CSS, para destacar un poco el texto lo pondremos naranja y un poco más grande
de lo habitual:
.miAnimacion{
color: blue;
font-size: 12pt;
}
466
Ejecuta el código, haz click sobre el botón Inicia Cola de Efectos y verás como realiza
una detrás de otra y de forma ordenada la cola de efectos que le hemos agregado.
Puedes visitar el ejemplo 03-efectos/#colaEfectos
4.6. Método queue.
El método queue está íntimamente relacionado con la cola de efetos "fx" mencionado en
el apartado anterior. Usando este método podemos ver la lista de eventos encolados, o encolar
incluso otras acciones que no son efectos como tal.
elemento.queue() o también elemento.queue("fx")
Por ejemplo con:
Con este método obtendremos la lista de eventos encolados:
. . .
<p id="colaEfectos">TEXTO</p>
<div>
<button id="iniciaCola">Inicia Cola de Efectos</button>

M3. JQUERY
</div>
<p id="listaEfectos"></p>
. . .
En el script tendríamos:
var micapa = $('#colaEfectos');
var areaNotificaciones = $('#listaEfectos');
function notificaListaEfectos(efectoActual, indice){
//Si comentamos la siguiente línea parecerá que no se ejecuta
alert("Me han llamado");
areaNotificaciones.text("Elementos en la cola de efectos: "+ micapa.queue().length)
areaNotificaciones.append("<br>Efecto Actual ["+indice+"]: " + efectoActual);
} 467
$('#iniciaCola').click(function(){
notificaListaEfectos(String('.animate({"font-size": "27pt"}, 2500);'), 1);
micapa.hide(2000);
notificaListaEfectos(String('hide(2000)'),2);
micapa.show(2000);
notificaListaEfectos(String('show(2000)'),3);
micapa.animate({"margin-left": "450px", "marging-top": "70px"}, 2000);
notificaListaEfectos(String('"margin-left": "450px", "marging-top": "70px"'),4);
notificaListaEfectos(String('"font-size": "5pt"'),5);

Aula Mentor
notificaListaEfectos(String('"font-size": "27pt"'),6);
});
Si ejecutamos este código observaremos que por un lado se ejecutan los efectos y por
otro las notificaciones. Esto es porque el navegador agrega los efectos a su cola y los muestra
todos seguidos y sin interacción con el código, ya que hasta que no tiene todos los efectos no
tenemos la cola, por eso hemos agregado un alert("Me han llamado") para detener el código y
realmente ver qué está pasando.
En cada iteracción estoy agregando un valor más a la cola de propiedades del elemento,
y si comentamos esa línea nos dará la sensación de que ha calculado bien el número de efectos
(6) pero no nos va cambiando como esperábamos el texto en la página.
Supongo que estarás pensando en lo siguiente, si por un lado tenemos la cola de efectos
y el navegador ejecuta por otro lado el otro código, si quiero agregar otras funciones que no
sean animaciones como tal, ¿cómo se haría?
Para ello podemos usar el método .queue pero agregándole otros parámetros:
.queue([nombreCola], callback(continua))
Donde nombreCola sería opcional e indica el nombre de la cola donde encolar una
función. Si no se indica nada, se encolará a la cola predeterminada "fx", se encola esa función en
la cola por defecto que gestiona jQuery por nosotros, ejecutando uno detrás de otro los efectos
468 del elemento. Si se indica un nombre, se encolará por nuestra cola y ésta la debemos gestionar
nosotros.
El otro parámetro callback(continua) sería la función que se desea encolar. Al encolarla

se coloca como última de las funciones a ejecutar de la cola, por tanto se tendrán que ejecutar
todas las funciones anteriores antes de llegar a ésta.
Para ayudarnos en todo el proceso, tenemos el método dequeue(), que puede recibir
un parámetro que es el nombre de la cola que se debe continuar ejecutándose. Si no indicamos
ninguna cola o indicamos el valor "fx", la cola que seguirá procesándose por defecto.
Veamos un ejemplo donde vamos a intercalar animaciones con otras acciones:
. . .
<h4>Ejemplo 1: </h4><hr>
<p id="colaEfectosQueue">TEXTO</p>
<div>
<button id="iniciaColaQueue">Inicia Cola de Efectos</button>
</div>
. . .
M3. JQUERY
En el CSS:
#colaEfectosQueue {
color: orange;
font-size: 20pt;
Y en el script tendríamos:
. . .
var micapaQueue = $('#colaEfectosQueue');
var areaNotificacionesQueue = $('#listaEfectosQueue');
function notificaListaEfectosQueue(efectoActual, indice){
//Si comentamos la siguiente línea parecerá que no se ejecuta 469
//alert("Me han llamado");
areaNotificacionesQueue.text("Elementos en la cola de efectos: "+ micapaQueue.queue().length)
areaNotificacionesQueue.append("<br>Notificación Actual ["+indice+"]: " + efectoActual);
notificaListaEfectosQueue('Inicio', 0);
$('#iniciaColaQueue').click(function(){
//-------------CSS y OTROS-----------------------------
micapaQueue.queue(function(){
//Podemos intercarlar cambios de propiedades CSS
$(this).css({
Aula Mentor
"border": "5px solid blue",
});
notificaListaEfectosQueue('font-size": "27pt y "border": "5px solid blue"', 1);
$(this).dequeue();
});
//-------------ANIMACION-------------------------------
micapaQueue.animate({"font-size": "27pt"}, 2500);
//-------------OTROS-----------------------------
notificaListaEfectosQueue('hide(2000)', 2);
$(this).dequeue();
});
470 //-------------ANIMACION-------------------------------
micapaQueue.hide(2000);
//-------------OTROS-----------------------------
notificaListaEfectosQueue('show(2000)', 3);
$(this).dequeue();
});
//-------------ANIMACION-------------------------------
micapaQueue.show(2000);
//-------------OTROS-----------------------------
M3. JQUERY
notificaListaEfectosQueue('margin-left": "450px", "marging-top": "70px"', 4);
$(this).dequeue();
});
//-------------ANIMACION-------------------------------
micapaQueue.animate({"margin-left": "450px", "marging-top": "70px"}, 2000);
//-------------OTROS-----------------------------
notificaListaEfectosQueue('margin-left": "450px", "marging-top": "70px"', 5);
$(this).dequeue();
});
//-------------ANIMACION-------------------------------
micapaQueue.animate({"font-size": "5pt"}, 2500); 471
//-------------OTROS-----------------------------
notificaListaEfectosQueue('"font-size": "27pt"', 6);
$(this).dequeue();
});
//-------------ANIMACION-------------------------------
micapaQueue.animate({"font-size": "27pt"}, 2500);
//-------------OTROS----------------------------
Aula Mentor
notificaListaEfectosQueue('"font-size": "27pt"', 7);
$(this).dequeue();
});
. . .
Puedes ver este ejemplo en 03-efectos/#colaEfectosQueue1
4.7. Detener efectos.
Cuando estamos realizando una animación con el método .stop() podemos parar la eje-
cución de la misma. Tiene la siguiente sintaxis:
.stop([limpiarCola],[irAlFinal])
Donde el parámetro limpiarCola sirve para eliminar todas las funciones que pudiera ha-
ber en la cola de efectos todavía por ejecutar, ya que si ejecutamos .stop() sin ningún parámetro
detendríamos sólo el efecto actual. Este parámetro es booleano indicando true detendrá toda la
cola, indicando false (u omitiendo el parámetro) detendremos sólo la animación actual.
El siguiente parámetro irAlFinal sirve para que se detenga el efecto de animación ac-
tual, pero que se coloque directamente en el valor final al que tendría ese efecto. Es un pará-
472 metro booleano, si se indica false, indica que la animación se para y se queda donde se había
detenido. Si indicamos true en este parámetro, aunque no se haya terminado el efecto, saltaría
al siguiente efecto, es decir se iría al final de la animación.
Veamos un ejemplo:
. . .
<button id="start">Iniciar</button>
<button id="stop">Parar</button>
<button id="stop2">Parar todo</button>
<button id="stop3">Parar e ir al final</button>
<div id="detenerEfectos">jQUERY</div>
. . .
M3. JQUERY
#detenerEfectos{
background:lime;
height:80px;
width:210px;
position:absolute;
Y en el script de jQuery tendríamos:
$("#start").click(function(){
$("#detenerEfectos").animate({left:'100px'},4500);
$("#detenerEfectos").animate({fontSize:'3em'},4500);
});
473
$("#stop").click(function(){
$("#detenerEfectos").stop();
});
$("#stop2").click(function(){
$("#detenerEfectos").stop(true);
});
$("#stop3").click(function(){
$("#detenerEfectos").stop(true,true);
});
Aula Mentor
Puedes ver el resultado en 03-efectos/#pararEfectos
5. Resumen.
- Todas las aplicaciones web suelen tener de una u otra forma algún formulario donde el
usuario nos introducirá los datos. jQuery nos proporciona muchos métodos para acceder
a ellos de forma concreta seleccionando qué tipo de campo o tipo de elemento es, y ten-
dríamos: :input, :submit, :text, :password, :radio, :checkbox, :checked, :selected, :disabled,
:enabled, :button, :image, :focus, :file, :reset.
- Para evitar sobrecarga de tráfico entre el servidor y los clientes, es conveniente hacer valida-
ciones de los datos que nos introduce el usuario en el formulario. Además éstas le ayudarán
para indicarles cómo es la forma correcta de rellenar los formularios. Existirían dos formas
de realizar estas validaciones, por nosotros mismos accediendo a los métodos y creando
las reglas pertinentes o de forma externa usando los métodos que nos proporciona jQuery
Validate. Existiendo ya predifinidas la mayoría de las funciones para comprobar datos del
formulario.
- jQuery puede interactuar también con las hojas de estilo CSS, accediendo y modificando las
propiedades definidas en el propio fichero .css. Tendríamos por tanto:
$('miseleccion').css('propiedad') Acceder o lee la propiedad de la selección.
$('miseleccion').css('propiedad', 'valor') Modifica la propieda con el valor indicado.

474
- Al igual que podemos acceder a las propiedades de los elementos de la hoja de estilo, po-
demos acceder a los valores de posicionamiento y dimensión de las capas o cajas creadas
por elementos de bloque, del tipo <div>. Estas serían: innerWidth(), innerHeight(), ou-
terWidth(), outerHeight(), offset(), position().
- Podemos emplear el uso de AJAX con jQuery a través de los métodos $.get(), $.post(), $get-
Script() y sobre todo del $.ajax(), pudiendo interactuar al igual que se hacía con JavaScript
pero de una forma más simplificada.
- Una forma de hacer aplicaciones web dinámicas, llamativas y que se diferencien del resto es
el uso de los efectos. Se pueden hacer los siguientes:
• Ocultar o mostrar elementos: .show(v) y .hide(v)
• Realizar fundidos: .fadeIn(v), .fadeOut(v) y .fadeTo(v)
• Desplazamientos: .slideDown( v, f) y .slideUp(v, f)
• Animaciones: .animate(Propiedades,[v],[Funcióndeanimación],[Callback])
• Crear colas de efectos: Usando animaciones una detras de otra
• Ver la cola de efectos: .queue([nombreCola], callback(continua))
• Detener los efectos: .stop([limpiarCola],[irAlFinal])

Unidad 8. jQuery UI y Plugins
1. jQuery UI.
Con el contenido de las unidades anteriores podemos desarrollar todo tipo de apli-
caciones web, ya que tenemos conocimientos sobre la página web con HTML5, el diseño o
maquetación con CSS3 y podemos interactuar enriquecidamente mediante jQuery. A partir de
esta unidad, vamos a ver otras formas de realizar aplicaciones web o detalles externos a tener
en cuenta en el desarrollo de nuestra aplicaciones.
jQuery fue un proyecto inicial donde se encontraban bibliotecas en JavaScript para fa-
475
cilitar la manipulación del DOM del documento, eventos y simplificar algunas acciones que ya
hacía JavaScript. Este proyecto fue creciendo y fueron añadiendo más bibliotecas, sobre todo
orientadas para que los diseñadores a la hora de implementar componentes de la web tuvieran
su tarea de una forma más sencilla.
Surgió entonces jQuery UI, que es una biblioteca de componentes para el framework
jQuery que le añade un conjunto de plug-ins, widgets y efectos visuales para la creación de
aplicaciones web. Cada componente o módulo se desarrolla de acuerdo a la filosofía de jQuery
(find something, manipulate it: encuentra algo, manipúlalo).
1.1. Instalación y uso en nuestra aplicación.
Para usar jQuery UI necesitamos al igual que cuando usábamos jQuery descargar un
archivo, éste contendrá las librerías que vamos a usar. Depende de la aplicación o el documento
en el que estemos trabajando, es posible que no necesitemos todas las librerías, sino sólo parte
de ellas que contendrán los elementos que vamos a usar nosotros.
Para descargarnos las librerias tenemos que irnos a la página de descargas oficial:
http://jqueryui.com/download/
Nos aparecerán una página con unos checkbox donde elegiremos qué opciones son las
que vamos a usar; para descargarnos exclusivamente aquellos componentes que vamos a usar,
en nuestro caso vamos a descargarnos la versión completa y dependiendo de la unidad tendre-
mos aquellas partes para no cargar mucho el documento o página web.
Aula Mentor
En el desarrollo de este manual está la versión jQueryUI 1.11.0, es muy probable que
cuando estés realizando el curso exista otra versión, ya que cada mes o mes y medio salen nue-
vas actualizaciones o mejoras, hay muchos programadores detrás de este proyecto y cada vez
van aportando nuevos códigos. De todas formas, en los recursos del curso hay una carpeta don-
de podrás descargarte todos los archivos que están en relación exacta con el curso y además, lo
más probable es que no tengas muchos problemas para usar la última versión existente, ya que
en muchos casos son totalmente compatibles con otras versiones, por lo que hay que revisar la
documentación.
En la página podemos seleccionar varias opciones y a modo de resumen podemos verlas

en el siguiente esquema:
476
Versión: Cada versión de jQuery UI está preparada para funcionar con una
versión de framework jQuery.
Componentes: Podemos seleccionar de forma masiva todos los componentes o elegir

cuál son los que vamos a usar, en tal caso, nos creará un archivo con
aquellas bibliotecas que vamos a usar.
Temas: Existen algunos estilos predefinidos que podemos descargar con el

menú desplegable. O también diseñar y seleccionar nuestro estilo, con
nuestros colores, fuentes de texto, etc. Todo esto lo veremos más
adelante, te adelanto una página donde puedes ver los diferentes temas
existentes para elegir el que más te guste:
http://jqueryui.com/themeroller/
¿ Que estructura tiene la descarga?
El archivo que nos hemos descargado tiene formato .zip

M3. JQUERY
jquery-ui-1.11.0.custom.zip
Y si hemos elegido todas las opciones posibles habremos observado que tiene un tama-
ño de casi 2MB, por lo que es un tamaño grande y no recomendable en la mayoría de los casos.
Sería necesario ver qué apartados realmente vamos a necesitar y sino vamos a insertar algún
componente no seleccionarlo ya que sólo ralentizaremos la web en dispositivos con menos re-
cursos.
Anteriormente nos descargaba tres carpetas: css, js y development-bundle. Y ahí te-

níamos todo el contenido. El contenido de la carpeta css sería donde están las hojas de estilo
e imágenes para el diseño. La carpeta js donde tendreíamos los scripts javascript de jQuery y
jQuery UI para que todos los componentes funciones. Y la última carpeta devolopment-bundle
donde existen un manual y material útil para los desarrolladores.
En esta versión parece que la tendencia según las últimas versiones es descargar los ar-
chivos css, js, quedando una estructura como ésta:
Tenemos que tener en cuenta que esta descarga nos proporciona todo lo necesario para
funcionar independientemente, de ahí que trae todo, incluso el archivo jQuery para funcionar. 477
external: Carpeta donde tendremos fichero externos al jQueryUI, en este caso el fichero
jQuery JavaScript Library v1.10.2
images: Carpeta donde se alojarán las imágenes necesarias del tema descargado, fondos
e iconos.
index.html: Si ejecutamos este archivo tendremos un manual de uso y podremos ver el

estilo que aplicará a nuestras web. Si has copiado la carpeta con todos los
recursos y tienes ejecutando el Servidor Web en tu ordenador podrás verlo en:
Puedes visitar el ejemplo jQueryUI/jquery-ui-1.11.0.custom/
Luego tendremos dos archivos que son realmente los que vamos a necesitar para poder
usar jQueryUI con este tema, como ya estamos acostumbrados en el framework de jquery, siem-
pre nos proporcionarán la versión mínima (nombre-archivo.min.extensión) para usarla cuando
esté en fase de producción.
Recordemos que usualmente mientras estamos creando nuestra aplicación web, estamos
en fase de desarrollo y es posible que necesitemos ver el código fuente original, ver cómo está
implementado y la documentación al respecto. Cuando ya hemos probado la web y queremos
lanzarla a Internet o a nuestra Intranet de empresa, tendríamos que pasarla a fase de produc-
ción, donde se optimiza el archivo eliminando comentarios, tabuladores y saltos de líneas inne-
cesarios ya que el navegador no los utiliza.
Aula Mentor
Los archivos obligatorios que debemos agregar a nuestros proyectos son:
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery-ui.js"></script>
<script src="jquery.js"></script>
Por ello vamos a partir de nuestra estructura de directorios que hemos estado usando
todo el curso:
Vamos a tener todas las carpetas vacías menos la carpeta js donde vamos a mantener
el archivo jquery-1.11.1.min.js y jquery-1.11.1.js. Tenemos que asegurarnos muy bien donde
tenemos los archivos CSS y los JS, ya que la mayoría de las veces, el error está en nuestro script
y es por no haber llamado correctamente el nombre o ruta del archivo.
1.2. Acordeón.
478
Un efecto que ya hemos usado anteriormente de forma manual pero que el plugins de
jQueryUI nos trae de una forma muy llamativa es el efecto acordeón, donde conforme se va ha-
ciendo click en el componente va desplegándose y cerrándose con sus correspodientes efectos:
Para ello tendríamos que tener la estructura anterior descrita (con los correspondientes
archivos css y js) y el siguiente contenido en nuestro archivo HTML5, por ser la primera vez voy
a agregar todo el código completo, aunque también puedes verlo en los recursos del curso.
Puedes visitar el ejemplo 01-Ejemplo1-Acordeon/
<!DOCTYPE html>
<html lang="es">
<head>
M3. JQUERY
<meta charset="utf-8" />
<title>Módulo jQueryUI</title>


<script type="text/javascript" src="js/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
479

<script type="text/javascript" src="js/miarchivojquery.js"></script>
</head>
<body>
<section>
<article>
<h3> Acordeón </h3>
<div id="miAcordeon">
Aula Mentor
<h3>Elemento 1</h3>
<div>Contenido elemento 1.</div>
<h3>Elemento 2</h3>
<h3>Elemento 3</h3>
<h3>Elemento 4</h3>
</div>
</article>
480 </section>
</body>
</html>
Lo único que hemos tenido que declarar es una capa de tipo miAcordeon para poder
seleccionarla/buscarla en mi script jQuery (como hemos estado realizando todo el curso) y a
continuación tenemos que usar el método:
.accordion();
En nuestro caso tendríamos en nuestro archivo jQuery o en nuestro script dentro de la

misma página declarado en el <head> lo siguiente:
$( "#miAcordeon" ).accordion();
Ten en cuenta que no hemos declarado ningún archivo propio CSS ya que estamos
usando los que usa por defecto el plugins. Además si nos fijamos, este efecto está usando va-
rios elementos (efectos, propiedades y estilos) que, aunque ya sabemos nosotros crearlos desde
cero, nos facilitan mucho ya que estaría todo creado previamente.
M3. JQUERY
¿Cómo interactúa el usuario con el teclado?
Cuando el foco está en el header del elemento podemos usar los siguientes elementos:
UP/LEFT: Mueve el foco al anterior elemento. Si está en el primero lo mueve al

último elemento.
DOWN/RIGHT: Mueve el foco al siguiente elemento. Si está en el último lo mueve al

primer elemento.
HOME: Mueve el foco al primer elemento. (tecla INICIO).
END: Mueve el foco al último elemento. (tecla FIN).
ESPACIO/ENTER: Activa el panel asociado al elemento cabecera que está en ese momento.
¿Qué temas estarían realacionados?
Al fin y al cabo, no dejan de ser unos archivos con hojas de estilo predefinidas, el widget
acordeon de jQuery UI CSS especifica unas reglas concretas, pero si necesitas saber a que estilos
se está refiriendo siempre los puedes ver en la documentación oficial, en este caso verás que
puedes usar:
481
ui-accordion: El contenedor del acordeón.
ui-accordion-header: Las cabeceras del acordeon. Adicionalmente podemos usar

iconos, para ello tenemos ui-accordion-icons.
ui-accordion-content: El contenido de los paneles interiores de cada elemento.
¿De qué depende este método?
UI Core Núcleo de UI
Widget Factory Widget
Effects Core Efectos(Opcional para usar las opciones animadas)
Existen muchos parámetros y funciones que puedes modificar y configurar, en caso que
necesites más información puedes recurrir a la documentación oficial:
http://api.jqueryui.com/accordion/
Aula Mentor
1.3. Autocompletar.
Uno de los efectos y elementos que es muy interesante para el usuario es ayudarle en
la escritura y simplificación en la elección de los elementos. Para ello, jQuery UI nos facilita un
elemento que se llama autocomplete, en el que conforme va escribiendo el usuario, van saliendo
las opciones más similares a su búsqueda.
Se usa el método creado en jQueryUI llamado:
.autocomplete()
A este método se le ha de pasar al menos una lista de nombres, para ello usamos la sin-
taxis:
$(miSeleccion ).autocomplete({
source: Lista
});
Imaginemos que tenemos la siguiente lista:
Jesús, José , Antonio, Andrés, Luis, Mario, Miguel Ángel, Francisco, Juan, Javier, María, Guada-
lupe, Raquel, Rosa, Alicia, Dolores.
482
Queremos que cuando el usuario empiece a escribir su nombre, si éste está en la lista le
vaya ayudando en la decisión agilizando todo el proceso.
Si nos fijamos, hemos introducido en el Autocomplete una "A" y él automáticamente

nos ha mostrado los nombres de la lista que contiene "a" o "A" en alguna parte, por lo que ha
omitido mayúsculas y minúsculas, y los nombres que no tienen la letra a, como han sido: Jesús,
José, Luis, Dolores.
Para poder usarlo, sólo tenemos que tener en el documento HTML:
. . .
<div>
<input id="miAutocomplete" title="Nombres" name="Nombre">

M3. JQUERY
</div>
. . .
Sin tener en cuenta el CSS y centrándonos en el jQuery, tendríamos:
var listaNombres = [
"Jesús",
"José" ,
"Antonio",
"Andrés",
"Luis",
"Mario",
"Miguel Ángel", 483
"Francisco",
"Juan",
"Javier",
"María",
"Guadalupe",
"Raquel",
"Rosa",
"Alicia",
"Dolores"
];
$( "#miAutocomplete" ).autocomplete({
source: listaNombres
Aula Mentor
});
Debemos pensar que estos nombres en algunos casos serán siempre los mismos, por
ejemplo si estamos en un formulario donde preguntamos al usuario sobre la provincia donde
nació, estás son estáticas y siempre serán las mismas y podíamos usarlo de esta forma. Pero en
otros casos esta lista será dinámica, cogida de una Base de Datos, de otra web o servidor. Para
facilitar los posibles cambios es una buena práctica cargar la lista de nombres o bien con una
variable independiente, o con una función. Al realizarlo así, tenemos algo parecido a esto:
$( "#miAutocomplete" ).autocomplete({
source: dameNombres()
});
Así estamos llamando a una función que se llama dameNombres() y realmente nos daría
igual de que forma obtenemos los nombres, hoy puede ser de forma estática y en un futuro,
podemos usar otros métodos, pero si hemos trabajado así, el mantenimiento del código será
siempre más sencillo:
484 function dameNombres(){
var listaNombres = [
"Jesús",
"José" ,
"Antonio",
"Andrés",
"Luis",
"Mario",
"Miguel Ángel",
"Francisco",
"Juan",
"Javier",
M3. JQUERY
"María",
"Guadalupe",
"Raquel",
"Rosa",
"Alicia",
"Dolores"
];
return listaNombres;
Puedes visitar el ejemplo 02-Ejemplo2-Autocomplete/
Existen muchos parámetros y funciones que puedes modificar y configurar, en caso que necesi- 485
tes más información puedes recurrir a la documentación oficial:
http://api.jqueryui.com/autocomplete/
1.4. Botones.
Otro elemento que no puede faltar en cualquier aplicación web son botones, y claro
está, jQueryUI nos facilita también varias formas de declararlos. Para ello tenemos el método
para crear, o dar formato de botones siguiente:
.button()
Y obtener botones de esta forma usando el método anterior es muy sencillo:
Imaginemos que tenemos un documento html con las siguientes declaraciones:
. . .
<button>Botón tipo button</button>

Aula Mentor
<input type="submit" value="Botón tipo submit">
<a href="#">Botón tipo enlace</a>
. . .
Y en el jQuery tendríamos que seleccionar nuestros elementos y decirle a todos ellos que
les aplique el método .button() de jQueryUI.
$( "input[type=submit], a, button" )
.button()
//Eliminamos la acción por defecto del evento .click para este ejemplo.
//Así cuando hagamos click sobre ellos el navegador no hará nada.

486
.click(function( event ) {
});
Puedes visitar el ejemplo 03-Ejemplo3-Button
Aunque podemos pensar que este método no es nada útil, ya que hemos visto muchas
formas en el curso de crear botones, sólo con apenas tres líneas hemos creado los botones con
ese estilo, que de hacerlo de forma manual tendríamos que definir: un fondo concreto, una
fuente de texto y color agradable y en sintonía con los demás, además de tener que controlar
todos los eventos cuando pase por encima de cada botón, crear nuevos fondos, color de borde,
color de texto, etc. Realmente estamos totalmente capacitados para realizar un botón con una
apariencia igual o mejor que ésta, lo único que jQueryUI nos ofrece muchos temas, colores y
demás estilos predefinidos, y en muchas situaciones cuando tengamos que desarrollar una apli-
cación de forma rápida.
M3. JQUERY
http://api.jqueryui.com/button/
1.5. Calendario.
Muchas veces cuando estamos realizando un formulario, necesitamos que el usuario nos
introduzca una fecha, por ejemplo, la fecha de nacimiento, la fecha de una cita, etc; en definitva
un campo en el que el usuario necesita introducir un dato de tipo fecha y tenemos que asegu-
rarnos que el formato de fecha es correcto y sea una forma agradable y fácil para él.
Para usar el calendario de jQueryUI debemos usar el método:
.datepicker()
Con él nos ahorraremos mucho tiempo de programación ya que nos da todo realizado,
los días de cada mes, y una forma de ir interactuando entre ellos (pasar de mes). Como ya sa-
bemos existen muchos temas, y cada tema tiene su estilo correspondiente y todos los elementos
estarían en concordancia con los demás componentes, por eso, lo ideal es escoger un tema
apropiado o crearnos uno por nuestra cuenta, como veremos en temas posteriores.
Si nos vamos a la web http://jqueryui.com/themeroller/ y posteriormente pulsamos en

el menú que nos ofrece los temas, en Gallery podemos ver los diferentes calendarios y su tema
relacionado:
487
Ejemplos de calendarios en los diferentes temas:
Para usar el calendario, no tenemos que usar mucho código, debemos asociarlo a un
campo del formulario en el HTML y posteriormente llamar al calendario desde jQuery UI. En el
documento HTML tendríamos que crearnos un campo de tipo texto y asociarle un id para poder
llamarlo desde el script de jQuery:
. . .
<p>Fecha: <input type="text" id="miCalendario" name="miFecha"></p>
. . .
Aula Mentor
En el jQuery tendríamos que tener:
$( "#miCalendario" ).datepicker();
});//fin de la lectura del document
Y realmente con apenas dos líneas de código, hemos creado un calendario muy vistoso
y útil. Cuando pulsemos en la fecha, directamente nos parecerá la fecha en formato MM/DD/
AAAA:
488
http://api.jqueryui.com/datepicker/
1.6. Diálogos.
Cuando necesitemos usar diálogos, podemos recurrir también a jQueryUI, así mostramos
diálogos más personalizados a los que tiene por defecto el navegador. Es muy interesante para
aquellos casos que queramos dar más personalización a nuestra página y destacar sobre otras,
ya que son diferentes y más agradables.
Para usar los diálogos con jQueryUI tenemos que usar el método:
.dialog()
Para insertar nuestros diálogos, podríamos tener en el hmtl:
. . .
<div id="miDialogo" title="Mi primer diálogo">
<p>Este texto será el que aparecerá en el diálogo. Esta ventana la puede mover o cerrar el usuario.</
p>
M3. JQUERY
</div>
. . .
Y en el script de jQuery tendríamos
$( "#miDialogo" ).dialog();
El resultado sería un diálogo en sintonía con la página, todo esto por usar el mismo tema
de diseño:
Existen muchos parámetros y funciones que puedes modificar y configurar, en caso de

que necesites más información puedes recurrir a la documentación oficial:
http://api.jqueryui.com/dialog/
489
1.7. Menús.
Toda aplicación o página web debe tener un menú o forma de interactuar entre las
diferentes secciones de la página. En el módulo de CSS3 vimos muchos métodos y menús dife-
rentes, sabemos cómo se hacen y en qué están basados la mayoría. Para ayudarnos en esta tarea
tan común, jQueryUI también nos proporciona una forma de crear nuestros menús, y de igual
forma, se suele usar listas para crear los nombres de los menús, hoy en día es casi impensable
usar imágenes; se hace más hincapié en el CSS3 y así se agiliza la página.
Para usar el método menú de jQueryUI, sólo tenemos que usar el siguiente método:
.menu()
Vamos a coger literalmente el texto del ejemplo del ejercicio 6.2.2 para demostrar que si
realizamos una buena semántica en el documento HTML, poder hacer cambios posteriormente
es muy sencillo. El código HTML que teníamos para el menú lo hicimos con lista y tenía la si-
guiente estructura:
<ul id="menu">
<li>INICIO</li>
<li>Sección 1
<ul class="submenu">
Aula Mentor
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</li>
<li>Sección 2
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
490 </ul>
</li>
<li>Seccion 3
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</li>
M3. JQUERY
<li>Seccion 4
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
</li>
</ul>
Y en el CSS sólo necesitamos delimitar el ancho del menú, ya bien dentro del fichero CSS
o si lo hacemos dentro del head:
<style>
.ui-menu { width: 150px; }

491
</style>
Y en el script de jQuery sólo tendríamos que usar el método .menu().
$( "#menu" ).menu();
Nuevamente con muy pocas líneas hemos realizado un menú desplegable y además,
tenemos muchos temas para poder usarlos. El ejemplo, quedaría de la siguiente forma, debes
fijarte que ha contado muchas opciones y cambios de colores, bordes, sombreado, etc que ten-
dríamos que hacer con CSS nosotros mismos:
Puedes visitar el ejemplo 06-Ejemplo6-Menu/

Aula Mentor
http://api.jqueryui.com/menu/
1.8. Barra de progreso.
Cuando estamos usando una barra de progreso, jQuery UI nos ofrece una forma muy
sencilla y con muy buen aspecto gráfico. Para ello, podemos usar la sintaxis siguiente:
.progressbar({
value: 00
});
Donde value nos indica el valor en el que estaría la barra de progreso en ese momento,
siendo 0 el menor y 100 el mayor o la barra completa. Para usarlo, sólo debemos de agregar al
documento HTML el siguiente código:
. . .
<div style="width: 450px;">
492 <div id="miBarraProgreso"></div>
</div>
. . .
Sólo hemos declarado un contenedor para almacenar la barra, no es obligatorio, pero es

aconsejable, en este caso, sólo lo hemos limitado a un ancho de 450px.
En el jQuery tendríamos:
$( "#miBarraProgreso" ).progressbar({
value: 56
});
Y nos mostraría una barra de progreso en el valor 56% completado:

M3. JQUERY
Veamos un ejemplo que sea más automático, es decir que veamos como va aumentando
la barra de progreso según unos parámetros, estos parámetros, ahora van a ser simulados, pero
ayudarán a entender mejor este método:
Agregamos este código al html:
. . .
<div id="miBarraProgreso2">
<div class="progress-label">inciando simulación...</div>
</div>
</div>
. . .
Y este al jQuery:
var miProgressbar = $( "#miBarraProgreso2" ),
progressLabel = $( ".progress-label" ); 493
miProgressbar.progressbar({
value: false,
change: function() {
progressLabel.text( miProgressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "¡Simulación completa!" );
});
function progreso() {
var val = miProgressbar.progressbar( "value" ) || 0;

Aula Mentor
miProgressbar.progressbar( "value", val + 2 );
if ( val < 99 ) {
setTimeout( progreso, 120 );
Lo que va realizando este código es hacer aumentar automáticamente el valor con (val
+2) y vamos a su vez insertando temporizaciones, tanto para iniciar el script como para los in-
tervalos en cada cuenta.
Hemos usado dos parámetros de la función, change para la acción que vayamos hacer
mientras haya un cambio, en este caso mostrar el valor del %. Y otra función cuando termine,
complete, que en este caso, muestra un texto "¡Simulación completa!"
494 También debemos prestar atención a un método que hemos usado que es:
setTimeout( función, tiempo en milisegundos );
Con esta función lo que hacemos es simular tiempos de espera, ya que se ejecutará la
función indicada en el primer parámetro, pasado el tiempo expresado en milisegundos del se-
gundo parámetro.
Por eso, hay dos tiempos en el ejemplo anterior:
Indicando que va a ejectuar la función progreso en 3,5 segundos.
Indicando que ejecute la función progreso en 0.12 segundos, creando el efecto de carga
simulada de un archivo, de una web, etc.
Todo este ejemplo viene descrito por una simulación, y de paso hemos aprovechado
para aprender la función setTimeout, pero en una aplicación real tendremos que calcular ese
tiempo con datos reales, por ejemplo en la subida de un archivo, si éste ocupa 10.000MB, y
lleva 1.000MB tendrá un 10% subido y en cada actualización podemos incluso indicar cuántos
MegaBytes se han subido.
M3. JQUERY
Puedes ver el ejercicio comentado en los recursos del curso, recuerda que sería impor-
tante que intentaras crearlos tú desde cero para coger una soltura real con todos los módulos
que estamos trabajando:
Puedes visitar el ejemplo 07-Ejemplo7-BarraProgreso/
Existen muchos parámetros y funciones que puedes modificar y configurar, en caso de

que necesites más información puedes recurrir a la documentación oficial:
http://api.jqueryui.com/progressbar/
1.9. Menús de selección.
Para mostrar al usuario varias opciones, en HTML5 teníamos la etiqueta de selección

<select>…</select> dando al usuario un menú con las diferentes opciones que podía elegir. Aquí
podemos usarla igualmente y aprovecharnos de los diseños predefinidos de jQueryUI. El méto-
do que corresponde a la selección en jQueryUI sería:
.selectmenu();
Vamos a ver un ejemplo con varios ejemplo de menus, uno simple, otro con varios gru-
pos, y otro con muchos elementos para ver cómo los presenta el plugins.
Podemos convertir esto:

495
Con unas pocas líneas de jQueryUI en esto:
Sólo con agregar en el CSS:
select {
width: 200px;
Y en el script de jQuery:
$( "#idioma" ).selectmenu();
Aula Mentor
$( "#nivelIdioma" ).selectmenu();
$( "#edad" )
.selectmenu()
.selectmenu( "menuWidget" );
Puedes visitar el ejemplo 08-Ejemplo8-Seleccion/
Hemos usado la opción menuWidget del la opción .selectmenu() existen muchas opcio-
nes donde puedes ir probando y practicando, para ello, siempre disponemos de la documenta-
ción oficial con todos sus parámetros.
http://api.jqueryui.com/selectmenu/
1.10. Slider.
Últimamente la mayoría de los usuarios utilizan smartphones, tablets o incluso portátiles

con la pantalla táctil para navegar por internet. Existe un componente que se llama slider que
496 realiza a través de un desplazamiento lateral el valor seleccionado por el usuario.
Para ello jQueryUI nos facilita el siguiente método:
.slider()
Queremos obtener un componente parecido a éste:
Desplazando hacia la izquierda o derecha, aumenta o disminuye el valor del input
Para poder usarlo en nuestras aplicaciones web, tenemos que usar muy poco código,
veamos un ejemplo sencillo. En el HTML tendríamos que tener:
<div id="miSlider"></div>
Y en el jQuery llamamos al método:

M3. JQUERY
$("#miSlider").slider();
Con este ejemplo hemos creado un slider, podemos mover y desplazarlo a la derecha
o izquierda, pero realmente, no nos sería muy práctico en nuestros formularios. Uno entre los
tantos ejemplos que podemos usar, sería que ese desplazamiento estuviera relacionado con las
opciones de un componente <select></select>:
Supongamos este formulario:
<form id="formulario">
<label for="habitaciones">Introduce el número de habitaciones</label>
<select name="misHabitaciones" id="misHabitaciones">
<option>1</option>
<option>2</option>
<option>3</option>
497
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</form>
Y en nuestro script jQuery tendríamos:
var select = $( "#misHabitaciones" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
max: 6,
range: "min",
value: select[ 0 ].selectedIndex + 1,

Aula Mentor
slide: function( event, ui ) {
select[ 0 ].selectedIndex = ui.value - 1;
});
$( "#misHabitaciones" ).change(function() {
slider.slider( "value", this.selectedIndex + 1 );
});
Con este script vamos actualizando el valor del <select> cada vez que hay algún cambio
(change). Vamos modificando el valor del select dentro de sus valores, que pueden ser numéri-
cos o alfanuméricos:
Existen muchas formas interesantes resueltas sobre los slider, simulando ecualizadores,
mezcladores de colores y todos los que se te ocurran. Te recomiendo que una vez entendidos
estos ejemplos, si tienes tiempo puedas ampliar información sobre ellos en la documentación
oficial http://api.jqueryui.com/slider/ y verás cómo agregar efectos y elementos de una forma
sencilla.
498
Puedes visitar el ejemplo 09-Ejemplo9-Slider/
1.11. Spinner.
Cuando tengamos que usar valores numéricos, otro componente muy utilizado es el uso
de spinner, teniendo la opción de aumentar y disminuir el valor del campo para poder rescatar-
lo.
Para hacerlo más didáctico vamos a insertar varios botones para poder ver cómo interac-
túa el componente con el usuario:
M3. JQUERY
Vamos a tener nuestro spinner donde si pulsamos en la parte superior incrementa o si

pulsamos en la parte inferior decrementa. Además vamos a poder ponerlo modificable o no con
el botón Conmuta desactiva/activa, y podremos destruir o construir el Widget del Spinner con
el botón Conmuta/Destruye Widget. Con el botón Dame valor obtendremos el valor actual
seleccionado, y con el botón Inserta el valor 5 insertará el valor en el spinner.
Supongamos el siguiente código en el documento HTML:
<p>
<label for="miSpinner">Selecciona un valor:</label>
<input id="miSpinner" name="value">
</p>
<p>
<button id="desactiva">Conmuta desactiva/activa</button>
<button id="destruyeWidget">Conmuta/Destruye Widget</button>
</p>
<p>
499
<button id="dameValor">Dame valor</button>
<button id="insertaValor">Inserta el valor 5</button>
</p>
Realmente hemos definido un <input> con un identificador y unos botones. Todo lo

vamos a crear desde nuestro script de jQueryUI:
var miSpinner = $( "#miSpinner" ).spinner();
/*-------------------------------------------------
Cuando hace click sobre el botón desactiva
activamos o desactivamos el valor usando
los parámetros del método option -> disabled
-------------------------------------------------*/
$( "#desactiva" ).click(function() {
Aula Mentor
if ( miSpinner.spinner( "option", "disabled" ) ) {
miSpinner.spinner( "enable" );
} else {
miSpinner.spinner( "disable" );
});
/*-------------------------------------------------
Cuando hace click sobre el botón destruyeWidget
le pasamos un parámetro al método: instance
para instanciarlo o destruyendo la funcionalidad
-------------------------------------------------*/
500 $( "#destruyeWidget" ).click(function() {
if ( miSpinner.spinner( "instance" ) ) {
miSpinner.spinner( "destroy" );
} else {
miSpinner.spinner();
});
/*-------------------------------------------------
Cuando hace click sobre el botón captura
el valor del spinner

M3. JQUERY
-------------------------------------------------*/
$( "#dameValor" ).click(function() {
alert( miSpinner.spinner( "value" ) );
});
/*-------------------------------------------------
Cuando hace click sobre el botón inserta
el valor 5 en el spinner
-------------------------------------------------*/
$( "#insertaValor" ).click(function() {
miSpinner.spinner( "value", 5 );
});
501
/*-------------------------------------------------
Usamos el estilo y diseño de jQueryUI
del tipo button
-------------------------------------------------*/
$( "button" ).button();
Tienes el ejercicio resuelto en:
Puedes ver el ejemplo en 10-Ejemplo10-spinner/
1.12. Tabs.
Una forma de organizar las páginas web y mostrar al usuario diferentes opciones son las
tabs o pestañas también llamadas tab-bar. Seguro que las has visto sobre todo en aplicaciones
para Smartphone u otros dispositivos. Para crear unas pestañas debemos usar el método:
Aula Mentor
.tabs()
Por ejemplo si queremos representar en una web algo parecido a esto:
Tendremos que tener una estructura en el HTML parecida a esta:
. . .
<div id="misTabs">
<ul>
<li><a href="#tabs-1">Pestaña 1</a></li>
502
</ul>
<div id="tabs-1">
<p>Contenido de la pestaña 1.......</p>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
. . .
M3. JQUERY
Si nos fijamos tendríamos tres partes bien diferenciadas; el contenedor que contendrá
todo el conjunto (div id="misTabs"), otra donde tenemos las opciones superiores de las pestañas
que declaramos como una lista <ul> <li>…</li></ul> y otra donde declaramos el contenido
interior de cada pestaña <div id="tabs-n">.
Ahora en el script jQuery sólo tenemos que definir las siguientes líneas:
$( "#misTabs" ).tabs();
Puedes ver el ejemplo completo en los recurso del curso en:
Puedes visitar el ejemplo 11-Ejemplo11-tabs/
1.13. Tooltip.
Por último vamos a ver los elementos tooltip, indispensable para ayudar al usuario cuan-
do está navegando por nuestra web o rellenando nuestros formularios. Este tipo de ayuda se
presenta normalmente al pasar el ratón por encima, al coger el elemento o el foco. Esta infor-
mación puede ser texto o incluir más cosas, imágenes u otros componentes, para ello existe el
método:
503
.tooltip()
Veamos un ejemplo sencillo donde ayudamos a un usuario a rellenar un formulario web:
<p><a href="#" title="Aquí pondría la información que quiera para el usuario">Tooltips</a>
puede estar unido a cualquier elemento. Al pasar el ratón por el elemento, el atributo title se muestra
en una pequeña caja al lado del elemento</p>
<p>
<label for="nombre">Tu nombre:</label>
<input id="nombre" title="Introduce tu nombre con la primera letra en mayúscula">
</p>
<label for="dni">DNI:</label>
Aula Mentor
<input id="dni" title="Introduce tu dni con la letra seguida (sin caracteres ni espacios) y en mayús-
cula"></p>
</div>
Y en el jQuery tendreíamos que usar:
$(this).tooltip();
Como podemos darnos cuenta, directamente todo lo que pongamos como title será
detectado por el método y le agregará la información. En este caso y como queremos que se
aplique a todo el documento hemos dicho que todo el $(document) cuando sea leído, use el
elemento con él mismo (this). Se podría haber realizado una selección más exahustiva, pero para
el ejemplo viene bien ya que deseamos que se active para todos los componentes susceptibles
de tener tooltip.
El resultado sería parecido al siguiente y
504
Puedes visitar el ejemplo 12-Ejemplo11-tooltip/
2. Uso y desarrollo de plugins.

Como hemos podido comprobar en el apartado anterior, podemos usar plugins que con
pocas líneas de códigos nos facilitan muchas acciones comunes y con unos diseños bonitos y
acordes. Existen muchos programadores que se han dedicado a realizar y crear plugins, entre
los que podemos destacar:
http://plugins.jquery.com
http://jquery-plugins.net
Existen muchos diseñadores, programadores y empresas que se han dedicado también

a crear plugins. Para utilizar dichos plugins traen un manual de integración para que podamos
incorporarlos a nuestra web, que normalmente será agregar los link de CSS y de jQuery o JavaS-
cript en la cabecera de nuestro documento y usar la sintaxis que nos diga el desarrollador para
llamarlo dentro de la documentación.
M3. JQUERY
Podemos por tanto, desarrollar nuestros propios plugins, para que terceras personas
aprovechen el código desarrollado. Existen varias formas de realizar plugins, algunas simple-
mente ponen disponibles nuevas funciones globales a nuestro jQuery.
Las funciones globales son en realidad métodos del objeto jQuery, pero en un sentido
práctico, son funciones dentro de un espacio de nombres jQuery. Un ejemplo de ello sería la
función $.ajax(), en ella todo lo que $.ajax() realiza se podría conseguir con una función global
denominada $.ajax(), pero este enfoque nos dejaría abiertos a conflictos de nombres de función.
Al situar la función dentro del espacio de nombre jQuery, solamente nos tenemos que preocupar
por conflictos con otros métodos jQuery.
2.1. Añadir funciones globales.
Para añadir una nueva función al espacio de nombre jQuery, podemos simplemente
asignar la nueva función como una propiedad del objeto jQuery:
jQuery.globalFunction = function(){
//Mi código
console.log('Esto es una prueba de una función');
Ahora cuando queramos utilizar este plug-in podemos escribir: 505
jQuery.globalFunction();
O también podíamos en su formato corto:
$.globalFunction();
Así podríamos usar nuestra llamada a la función de forma básica y en este ejemplo mos-
trará por consola el texto indicado.
Se pueden añadir varias funciones declarandolas independientemente:
jQuery.functionOne = function(){
console.log('Soy la función número 1');
jQuery.functionTwo = function(){
}
Aula Mentor
jQuery.functionThree = function(miVariable){
console.log('Soy la función número 3 y me han pasado la variable'+miVariable);
Y cuando deseemos utilizar estas funciones sólo teníamos que hacer:
$.functionOne();
$.functionTwo();
$.functionThree('Hola');
Se puede utilizar otra sintaxis para definir nuestras funciones, que es usar $.extend(),
pero tenemos que tener cuidado al utilizar el mismo espacio de nombres de jQuery, podríamos
tener conflictos con nombres de función definidos en otros plugins jQuery.
jQuery.extend({
jQuery.functionOne : function(){
506 },
jQuery.functionTwo : function(){
},
jQuery.functionThree : function(miVariable){
});
Para evitar conflictos muchas veces es mejor encapsular todas las funciones globales
para un plugin concreto en un objeto de la siguiente forma:
jQuery.miPlugin = {
jQuery.functionOne : function(){

M3. JQUERY
};
jQuery.functionTwo : function(){
};
jQuery.functionThree : function(miVariable){
};
};
Esta forma de trabajar crea realmente otro espacio de nombres para nuestras funciones
globales, denominado jQuery.miPlugin. Ahora las funciones que hay declaradas, realmente
serían métodos del objeto jQuery.miPlugin, una propiedad del objeto global jQuery. Por tanto
para poder usar estas funciones debemos anteponer el nombre miPlugin antes de llamar a los
otros métodos así no tendrá conflictos.
$.miPlugin.functionOne();
$.miPlugin.functionTwo(); 507
$.miPlugin.functionThree('Hola');
Así evitamos colisiones con otros espacios de nombres y plugins, es la forma de asegu-
rarnos de estar totalmente protegidos ante errores externos a nuestro pluging.
2.2. Añadir métodos de objeto jQuery.
La mayoría de la funcionalidad de jQuery viene a través del uso de sus métodos de ob-
jeto, y aquí es donde los plugins también destacan. Siempre que escribimos una función que
actúa sobre parte del DOM, es apropidado crear un método "." de objeto.
Para añadir métodos de instancia, ampliamos el objeto jQuery.fn:
jQuery.fn.miMetodo = function(){
//Mi código
console.log('Soy un método');
jQuery.fn es un alias de jQuery .prototype, proporcionado por concisión. Podemos in-

vocar luego este nuevo método desde nuestro código después de utilizar cualquier expresión
selector:
Aula Mentor
$(miSeleccion).miMetodo();
Nuestro método se invocará sobre el elemento de selección que haya declarado, po-
dríamos haber declarado una función global, sin embargo, puesto que no hemos utilizado los
nodos DOM coincidentes en ningún sentido. Una implementación de método razonable actuará
siempre sobre su contexto.
2.3. Compartir un Plugin.
Una vez hemos realizado todo nuestro código, creando funciones, métodos, etc pode-
mos publicarlo de modo que otros puedan utilizarlo y benificiarse de él, como tú, en otras oca-
siones te has podido benificiar de otros códigos, puedes hacer esto en el repositorio de plugins
oficial de jQuery http://plugins.jquery.com. Aquí debemos registrarnos, seguir las instrucciones
para describir el plugin y subir el archivo con el código comprimido en .zip.
Por supuesto antes de subir ningún plugins debemos asegurarnos que el plugin está co-
rrecto para el público, existen una reglas a seguir cuando se escriben plugins para que funcione
bien con otros códigos:
Uso del alias $
Los plugins jQuery pueden no asumir que el alias $ se encuentra disponible, en su lugar
debe escribir el nombre jQuery completo cada vez, que en el caso de usar script muy extenso
puede ocasionar lentitud y dificultar la lectura.
508
Interfaces del método
Todos los métodos jQuery se invocan dentro del contexto de un objeto jQuery, de modo
que this, hace referencia a un objeto que puede hacer referencia a uno o más elementos DOM.
Todos los métodos deben comportarse correctamente con independencia del número de ele-
mento coincidentes.
Estilo de documentación
Se debe anexar delante de cada definición de función o método la documentación, usan-

do entre comentarios y dependiendo de cada caso el valor que corresponda:
/**
* Descripción del método
*@alias
*@author
*@classDescription
*@constructor
*@deprecated
M3. JQUERY
*@example
*@exception
*@id
*@inherits
*@internal
*@memberOf
*@method
*@namespace
*@param
*@private
*@projectDescription
*@property
*@return 509
*@see
*@since
*@type
*@version
**/
Por supuesto no es obligatorio rellenar todos para cada función, hay que pensar que la
documentación está pensada para facilitar y ayudar a otras personas que no han desarrollado el
código a que puedan usarlo y entenderlo correctamente.
Usualmente en la definición del fichero se agregan los datos de versión, autor, copyrigth
y otros, para saber de forma global qué va a contener el fichero. Por ejemplo, si abrimos un
archivo de jquery, veremos que inicialmente nos dá información, en concreto para la versión
jquery-1.11.1.js nos da la siguiente información:
/*!
* jQuery JavaScript Library v1.11.1
* http://jquery.com/
Aula Mentor
* Includes Sizzle.js
* http://sizzlejs.com/
* Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors
* Released under the MIT license
* http://jquery.org/license
* Date: 2014-05-01T17:42Z
*/
Existen programas y proyectos que se han ocupado que posteriormente toda esa docu-
mentación podamos verla de una forma más agradable y vistosa, para Java, C++ existe Doxigen
y para JavaScript hay un proyecto nuevo llamado JSDuck.
510
3. Resumen.
- jQuery UI, es una biblioteca de componentes para el framework jQuery que le añade un
conjunto de plug-ins, widgets y efectos visuales para la creación de aplicaciones web. Cada
componente o módulo se desarrolla de acuerdo a la filosofía de jQuery (find something,
manipulate it: encuentra algo, manipúlalo).
- Para la instalación de jQuery UI, nos tendremos que descargar unos archivos dependiendo
de la versión de jQuery que estemos trabajando. Una vez descargados agregamos sus temas,
funciones y podremos utilizar muchos elementos de forma automática:
Acordeón: .accordion()
Autocomplete: .autocomplete()
Botón: .button()
Calendario: .datepicker()
Diálogos: .dialog()
Menús: .menu()
Barras de progreso: .progressbar({ value: 00 });
Menús de selección: .selectmenu();

M3. JQUERY
Barras de desplazamiento: .slider()
Spinner: .spinner()
Tabs: .tabs()
Tooltip: .tooltip()
- Podemos desarrollar nuestros propios plugins para que otros desarrolladores web puedan
utilizar nuestro código. Éste lo tenemos que hacer siguiendo unas reglas para no interceder
con otros métodos de jQuery, si no podríamos crear conflictos entre el propio código y no
funcionaría. Para ello, tenemos varias opciones:
• Añadir funciones globales con jQuery.nombreFuncion(){ … }
• Añadir métodos de objeto jQuery con jQuery.fn.miMetodo = function(){ … }
• Compartir el plugin a través del repositorio de plugins oficial de jQuery http://plugins.

jquery.com
511

Ud 3

Cargado por

Copyright:

Formatos disponibles

Ud 3

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Ud 3

Cargado por

Copyright:

Formatos disponibles

Módulo 3. JQUERY.

Unidad 6. Introducción e historia a JQUERY.

Como hemos podido comprobar en determinadas circunstancias hemos usado un len-

alert('Soy una ventana!');

Muchas de las empresas de informática más importantes reconocen la calidad y utilidad

<div id="deporte" name="mideporte">…..</div>

Si queríamos acceder podíamos acceder a ella usando:

Cogeríamos el elemento con el id buscado, p.e. id="deporte".

Cogeríamos el elemento con el name buscado, p.e. name="mideporte".

¿Qué quiere decir este esquema? Este esquema es la representación de la organización

Puedes ver la definición del DOM por ejemplo de Mozilla Firefox

3. Introducción a la programación en JavaScript.

Para ello vamos a explicar de forma resumida y simplificada la programación de JavaS-

<script type="text/javascript" src="js/miarchivo.js"></script>

var nombre_variable = 'valor'

var miVariable1 = 34;

var miVariable2 = "Hola Mundo";

var miVariable4 = miVariable1;

Debemos tener en cuenta que en JavaScript se distinguen entre mayúsculas y minúsculas

Cuando estamos usando operaciones aritméticas, debemos tener cuidado y respetar el

Es decir, obtendremos resultados distintos en los siguientes ejemplos:

var operacion3 = a + (b * c);

alert('Soy una ventana!');

En este caso la función muestraVentana() no tiene ningún parámetro de entrada ni de-

function suma(valorA, valorB) {

var miSuma = valorA + valorB;

Las funciones en JavaScript también se pueden definir directamente en la creación de

var resultadoSuma = function suma(valorA, valorB) {

var miSuma = valorA + valorB;

Si recordamos en el modo Depurador o avanzado de los navegadores (F12) puedes ver

Y aparecerá en él el valor 9. De esta forma podemos depurar nuestro programa, pero

3.4. Operadores básicos. 315

x+y Suma dos valores numéricos o concatena dos cadenas.

x-y Resta dos valores numéricos.

x*y Multiplica dos valores numéricos.

x/y Realiza la división de dos valores numéricos.

x%y Calcula el resto de una división (módulo)

x++ Incrementa en uno el valor numérico.

x-- Decremente en uno el valor numérico.

x=y Asigna a x el valor de y

x+=y Asigna a x el valor de x+y. ~(x = x + y)

x-=y Asigna a x el valor de x-y. ~(x = x - y)

x*=y Asigna a x el valor de x*y. ~(x = x * y)

x/=y Asigna a x el valor de x*y. ~(x = x / y)

x%=y Asigna a x el valor de x*y. ~(x = x % y)

3.5. Operadores lógicos.

En los algoritmos encontraremos situaciones que debemos hacerle preguntas al progra-

x>y Comprobamos si x es mayor que y.

x<y Comprobamos si x es menor que y.

x>=y Comprobamos si x es mayor o igual que y.

x<=y Comprobamos si x es menor o igual que y.

x==y Comprobamos si x es igual a y, pudiendo ser cadenas o números.

x===y Comprobamos si x es igual a y, pudiendo ser cadenas o números pero

x!=y Comprobamos si x es distinto a y, pudiendo ser cadenas o números.

x!==y Comprobamos si x es distinto a y, pudiendo ser cadenas o números pero

x&&y Concatena comparaciones, devolviendo true o verdadero si se cumplen

x||y Concatena comparaciones, devolviendo true o verdadero si se cumplen

3.6. Control de flujo del programa.

En un script o algoritmo que diseñemos, siempre vamos a tener sentencias condicionales

x=y Asigna a x el valor de xy. ~(x = x * y)