4 Jquery

JQUERY
pablomonteserin.com ©
¿Para qué sirve?
Implementa funciones complejas: “drag and

drop”, “auto completar”, “animaciones”,
“máscaras”...
La librería se asegura de mantener la

compatibilidad entre navegadores.
http://jquery.com/
Ese sitio oficial de la librería.
Ahí puedes descargar el archivo para tus

proyectos.
Carga de la librería
En cada página que lo requiera, habrá que agregar:

<script type="text/javascript" src="jquery.js"></script>
Para cargar la librearía a partir de los repositorios de google:

https://developers.google.com/speed/libraries/
Llamada a función I
<script type="text/javascript"
src="jquery.js"></script>
<script>
$(document).ready(inicializar);
function inicializar(){
alert("hola");
}
</script>
Verlo funcionando
Llamada a función II
<script>
$("#boton").click(botonPulsado);
}
function botonPulsado(){
alert("Boton pulsado");
}
</script>
Verlo funcionando
<input type="button" id="boton"/>
Llamada a función III
Llamada a función III

<script>
$("#boton").click(function(){
});
}
</script>
<input type="button" id="boton"/>
Verlo funcionando
Llamada a función IV
<script>
$.(inicializar);
$("#boton").click(function(){
});
}
</script>
<input type="button" id="boton"/> Verlo funcionando
Ejercicio
Nota: un elemento “span” es una capa (div) alineada con el texto.
Ver ejercicio resuelto pablomonteserin.com ©

Ejercicio
Cambia el estilo del texto:
Cambio del estilo de un elemento:

$("#id").css("color","#ff0000");
Para aplicar varios modificadores a un único elemento:

$("div").css("background", "blue").css("width","200").css("height", "400");
Verlo funcionando pablomonteserin.com ©

Ejercicio attr()
Verlo funcionando
Añadir un atributo: Recuperar el valor de un

$("#elemento").attr("width","400"); atributo:
$("#elemento").attr("width");
Eliminar un atributo:
$("#elemento").removeAttr("border");
Ejercicio attr con contador
Cada vez que hacemos click sobre el botón la

imagen cambia, así hasta el infinito.
Verlo funcionando
Ejercicio attr()
Al pulsar sobre los botones, debe añadirse y
eliminarse la propiedad border de la tabla.
Ver ejercicio resuelto
Ejercicio
Cuando pulsemos sobre cualquier celda de la
tabla:

Ejercicio - text()
Devuelve el texto contenido en el cuerpo
de un elemento:
alert($("#id").text());
Escribe una cadena de texto en el cuerpo

de un elemento:
alert($("#id").text(“cadena”));
Ver ejercicio resuelto pablomonteserin.com

©
Ejercicio
Desasociar clase
Asociar una clase $("#id").removeClass("clase");
$("#id").addClass("clase");

Ejercicio
Nota:
$("#id").html(“ppppppppppp”+
“ffffffffffff");
Escribir código html: Devuelve el código html escrito dentro de

$("#id").html("<p>bla bla bla</p>"); un elemento
$("#id").html();
Ejercicio
La función se ejecuta al pulsar el botón La función se ejecuta al soltar el botón

$("id").mousedown(fn); $("id").mouseup(fn);

Ejercicio
La función se ejecuta cuando el elemento

La función se ejecuta cuando el elemento pierde el foco:
toma el foco: $("#id").blur(fn);
$("#id").focus(fn);

Ejercicio
La función se ejecuta al pulsar el botón

$("#id").dblclick(fn);

Mouse up, Mouse down
<script>
$(document).ready(function(){
$("td").mousedown(function(){
$(this).css("background-color","yellow");
});
$("td").mouseup(function(){
$(this).css("background-color","red");
});
});
</script>
<table border="1">
<tr>
<td>1111111111</td><td>1111111111</td>
</tr>
</table>

Ejercicio
$(“#id”).mouseover(fn) $(“#id”).mouseout(fn)

$("#id").hover(entraMouse fn, saleMouse fn);

Javascript – Declaración de
propiedades y objetos

Objeto evento
Es creado automáticamente por javascript cuando tiene lugar
un evento.
Tiene varias propiedades: type(tipo de evento producido),

keyCode(código Unicode) del botón pulsado, button(que botón
del ratón fue pulsado)...
No todos lo eventos disponen de todas las propiedades del

objeto event.
mousemove

DOM
Document Object Model
Ejercicio
Acceder al parent de un iframe
Verlo funcionando
EFECTOS
show / hide

fadeIn / fadeOut

fadeTo

toggle

PLUGINS
Round Corners

LightBox
Lograr que el plugin de esta página:
http://leandrovieira.com/projects/jquery/lightbox/
funcione así:
Verlo funcionando
Kwicks
http://www.jeremymartin.name/projects.php?project=kwicks
Ejercicio: implementar el plugin kwicks para que muestre

tres pestañas con una imagen grande de fondo.:
Verlo funcionando
Ejercicio – galería cycle
Conseguir el efecto deseado
http://www.malsup.com/jquery/cycle/adv.html
Cambiar el tamaño de la Cambiar el tipo de efecto, su

animación: velocidad, etc:
animIn: { fx: 'fade',
width: 450, speed: 4000,
height: 450
},
http://www.malsup.com/jquery/cycle/
Ver resultado deseado pablomonteserin.com ©

Sexy alert
Añadir un sexy alert cuando se cara la página

web

Drag & Drop

Photo Info

Ejercicio Mezcla

Validacion de
formularios
Validar si hay algo escrito
if($(".required").val() == "")

Validar si hay algo escrito II
if($.trim($(".required").val()) == "")

Validar si es un número
if(isNaN($(".required").val()))

Validar mail I
Validar que hemos escrito un único carácter y que es

una letra o un número.
/^ y $/ delimitan el principio y el final de la cadena.

\w representa un único caracter, que puede ser una
letra o un número.
if(/^\w$/.test(valor))

Validar mail II
Validar que hemos escrito una cadena de

caracteres que pueden ser letras o números.
\w+ representa una cadena de caracteres, que

pueden ser una letra o un número.
if(/^\w+$/.test(valor))

Validar mail III

caracteres que pueden ser letras o números
seguida de un punto o un guión
[\.-] representa un punto o un guión.
if (/^\w+[\.-]$/.test(valor)){

Validar mail IV

caracteres que pueden ser letras o números
seguida de un punto o un guión, seguidos de
más letras o números.
if (/^\w+[\.-]\w+$/.test(valor)){

Validar mail V
caracteres que pueden ser letras o números.
Luego puede haber escrita una sucesión de
punto o guión seguidos de más letras o números,
tantas veces como sea necesario
if (/^\w+([\.-]\w+)*$/.test(valor)){

Validar mail VI
Validar que se cumplen todas las condiciones

anteriores y que después hay escrita una Arroba.
if (/^\w+([\.-]\w+)*@$/.test(valor)){

Validar mail VII - Ejercicio
Construir la validación para el dominio, teniendo

en cuenta que deberá empezar por letras o
números y luego puede tener un punto o un guión
y más letras, luego tiene una arroba y luego texto
seguido de una o varias sucesiones de un punto
o guión y Texto.

Validar fechas I
Guardamos cada parte que compone la fecha en una variable diferente.
function validarFecha() {
var cadena = $("#fecha").val();
var dia = cadena.substring(0, cadena.indexOf("/"));
var mes = cadena.substring(cadena.indexOf("/") + 1, cadena.lastIndexOf("/"));
var anio = cadena.substring(cadena.lastIndexOf("/") + 1, cadena.length);
}

Validar fechas II
Comprobamos que los días, meses y años tomen valores posibles.
function validarFecha() {
var cadena = $(".required").val();
var dia = cadena.substring(0, cadena.indexOf("/"));
var mes = cadena.substring(cadena.indexOf("/") + 1,
cadena.lastIndexOf("/"));
var anio = cadena.substring(cadena.lastIndexOf("/") + 1,
cadena.length);
if(isNaN(anio) || anio.length != 4 || parseFloat(anio) < 1900)

alert("valor del año incorrecto");
if(isNaN(mes) || parseFloat(mes) < 1 || parseFloat(mes) > 12)
alert("valor del mes incorrecto");
if(isNaN(dia) || parseFloat(dia) < 1 || parseFloat(dia) > 31)
alert("valor del día incorrecto");
} Ver ejercicio resuelto pablomonteserin.com ©
Validar fechas III
A los condicionales que ya teníamos añadir otro

que evalúe si los meses 4, 6, 8 y 11 no tienen
más de 30 días y otro que evalúe que el mes 2 no
tenga más de 29 días.

Validar un formulario entero
Cuando el cuadro de texto pierda el foco,

llamaremos a las siguientes funciones, según el
caso:
contieneValor();
soloNumeros();
cincoNumeros();
validarFecha();
validarMail();

Validar al enviar
function contieneValor() {
if($(this).val() == "") {
function validacionFinal() { pintarError($(this), "El campo debe contener un valor.");
} else {
var formularioValido = true; limpiar($(this));
var objetosValidacion = $(".required"); }
}
objetosValidacion.push($(".numero")); function pintarError(elemento, msg) {
objetosValidacion.push($(".fiveDigits")); elemento.css("background", "salmon");
objetosValidacion.push($(".fecha")); elemento.next().html(msg);
elemento.attr("valido", "false");
objetosValidacion.push($(".mail")); }
objetosValidacion.each(function(i) { function limpiar(elemento) {
elemento.css("background", "PaleGreen");
if($(this).attr("valido") != "true") { elemento.next().html("");
formularioValido = false; elemento.attr("valido", "true");
return false; }
}
}); Ver ejercicio resuelto
if(formularioValido == false) {
alert("Revise el formulario, hay datos incorrectos");
} else {
alert("Eviando formulario...")
}
}
Validación con plugin:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
<script>
$("#myform").validate();
});
</script>
class="required number email url"

minlength="5"
maxlength="5" (no es js, es html)
equalTo="#idPassword"
Ejercicio
Todos los campos son requerido.
Los campos edad y código postal

deben contener valores numéricos.
No podremos poner más de 5 dígitos

en código postal.
Los campos password deben

visualizarse como asteriscos y para
que todo valide correctamente la
segunda ve que introducimos el
password debemos poner el mismo
valor que la primera vez.
El cámpo página web debe contener

una URL.
Campo correo electrónico debe

contener una dirección mail.
Verlo ejercicio resuelto pablomonteserin.com ©
Validación de formularios
con el plugin de validación de jquery
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
$("#myform").validate({
rules: {
fieldNombre:{//los name de los elementos
required:true
},
…
},
messages: { rules
required:true,
fieldNombre: "Por favor, inserte su nombre", number:true,
fieldEdad: { minlength:3,
required: "Por favor, inserte la edad", maxlength:5,
number: "Sólo puedes introducir números" min:300,
}, max:600
email:true
... url:true
}, equalTo: "#password"
submitHandler: function(){
alert("rqr");
}
});
}); pablomonteserin.com ©
Ejercicio
Todos los campos son requeridos.
Los campos edad y código postal

deben contener valores numéricos.
No podremos poner más de 5 dígitos

en código postal.
Los campos password deben

visualizarse como asteriscos y para
que todo valide correctamente la
segunda ve que introducimos el
password debemos poner el mismo
valor que la primera vez.
El cámpo página web debe contener

una URL.
Campo correo electrónico debe

contener una dirección mail.
Verlo ejercicio resuelto pablomonteserin.com ©

4 Jquery

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

4 Jquery

Cargado por

Copyright:

Formatos disponibles

JQUERY

Implementa funciones complejas: “drag and

La librería se asegura de mantener la

Ese sitio oficial de la librería.

Ahí puedes descargar el archivo para tus

En cada página que lo requiera, habrá que agregar:

Para cargar la librearía a partir de los repositorios de google:

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

<input type="button" id="boton"/>

<input type="button" id="boton"/> Verlo funcionando

Nota: un elemento “span” es una capa (div) alineada con el texto.

Ver ejercicio resuelto pablomonteserin.com ©

Cambio del estilo de un elemento:

Para aplicar varios modificadores a un único elemento:

Verlo funcionando pablomonteserin.com ©

Añadir un atributo: Recuperar el valor de un

Cada vez que hacemos click sobre el botón la

Ver ejercicio resuelto

Ver ejercicio resuelto

Escribe una cadena de texto en el cuerpo

Ver ejercicio resuelto pablomonteserin.com

Ver ejercicio resuelto pablomonteserin.com ©

Escribir código html: Devuelve el código html escrito dentro de

La función se ejecuta al pulsar el botón La función se ejecuta al soltar el botón

Ver ejercicio resuelto

La función se ejecuta cuando el elemento

Ver ejercicio resuelto

La función se ejecuta al pulsar el botón

Ver ejercicio resuelto pablomonteserin.com ©

Verlo funcionando pablomonteserin.com ©

Ver ejercicio resuelto pablomonteserin.com ©

Ver ejercicio resuelto pablomonteserin.com ©

Verlo funcionando pablomonteserin.com ©

Tiene varias propiedades: type(tipo de evento producido),

No todos lo eventos disponen de todas las propiedades del

Verlo funcionando pablomonteserin.com ©

Verlo funcionando pablomonteserin.com ©

Verlo funcionando pablomonteserin.com ©

Verlo funcionando pablomonteserin.com ©

Verlo funcionando pablomonteserin.com ©

Verlo funcionando pablomonteserin.com ©

Ejercicio: implementar el plugin kwicks para que muestre

Cambiar el tamaño de la Cambiar el tipo de efecto, su

Ver resultado deseado pablomonteserin.com ©

Añadir un sexy alert cuando se cara la página

Ver resultado deseado pablomonteserin.com ©

Verlo funcionando pablomonteserin.com ©

Ver resultado deseado pablomonteserin.com ©

Ver ejercicio resuelto pablomonteserin.com ©

Ver ejercicio resuelto pablomonteserin.com ©

Ver ejercicio resuelto pablomonteserin.com ©

Ver ejercicio resuelto pablomonteserin.com ©

Validar que hemos escrito un único carácter y que es

/^ y $/ delimitan el principio y el final de la cadena.

Ver ejercicio resuelto pablomonteserin.com ©

Validar que hemos escrito una cadena de

\w+ representa una cadena de caracteres, que

Ver ejercicio resuelto pablomonteserin.com ©

Validar que hemos escrito una cadena de

[\.-] representa un punto o un guión.

Ver ejercicio resuelto pablomonteserin.com ©

Validar que hemos escrito una cadena de

Ver ejercicio resuelto pablomonteserin.com ©