JQUERY
[Link] ©
¿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.
[Link] ©
[Link]
Ese sitio oficial de la librería.
Ahí puedes descargar el archivo para tus
proyectos.
[Link] ©
Carga de la librería
En cada página que lo requiera, habrá que agregar:
<script type="text/javascript" src="[Link]"></script>
Para cargar la librearía a partir de los repositorios de google:
[Link]
[Link] ©
Llamada a función I
<script type="text/javascript"
src="[Link]"></script>
<script>
$(document).ready(inicializar);
function inicializar(){
alert("hola");
}
</script>
Verlo funcionando
[Link] ©
Llamada a función II
<script type="text/javascript" src="[Link]"></script>
<script>
$(document).ready(inicializar);
function inicializar(){
$("#boton").click(botonPulsado);
}
function botonPulsado(){
alert("Boton pulsado");
}
</script>
Verlo funcionando
<input type="button" id="boton"/>
[Link] ©
Llamada a función III
[Link] ©
Llamada a función III
<script type="text/javascript" src="[Link]"></script>
<script>
$(document).ready(inicializar);
function inicializar(){
$("#boton").click(function(){
alert("Boton pulsado");
});
}
</script>
<input type="button" id="boton"/>
Verlo funcionando
[Link] ©
Llamada a función IV
<script type="text/javascript" src="[Link]"></script>
<script>
$.(inicializar);
function inicializar(){
$("#boton").click(function(){
alert("Boton pulsado");
});
}
</script>
<input type="button" id="boton"/> Verlo funcionando
[Link] ©
Ejercicio
Nota: un elemento “span” es una capa (div) alineada con el texto.
Ver ejercicio resuelto [Link] ©
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 [Link] ©
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");
[Link] ©
Ejercicio attr con contador
Cada vez que hacemos click sobre el botón la
imagen cambia, así hasta el infinito.
Verlo funcionando
[Link] ©
Ejercicio attr()
Al pulsar sobre los botones, debe añadirse y
eliminarse la propiedad border de la tabla.
Ver ejercicio resuelto
[Link] ©
Ejercicio
Cuando pulsemos sobre cualquier celda de la
tabla:
Ver ejercicio resuelto
[Link] ©
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 [Link]
©
Ejercicio
Desasociar clase
Asociar una clase $("#id").removeClass("clase");
$("#id").addClass("clase");
Ver ejercicio resuelto [Link] ©
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();
Ver ejercicio resuelto [Link] ©
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);
Ver ejercicio resuelto
[Link] ©
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);
Ver ejercicio resuelto
[Link] ©
Ejercicio
La función se ejecuta al pulsar el botón
$("#id").dblclick(fn);
Ver ejercicio resuelto [Link] ©
Mouse up, Mouse down
<script type="text/javascript" src="[Link]"></script>
<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>
Verlo funcionando [Link] ©
Ejercicio
$(“#id”).mouseover(fn) $(“#id”).mouseout(fn)
Ver ejercicio resuelto [Link] ©
$("#id").hover(entraMouse fn, saleMouse fn);
Ver ejercicio resuelto [Link] ©
Javascript – Declaración de
propiedades y objetos
Verlo funcionando [Link] ©
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.
[Link] ©
mousemove
Verlo funcionando [Link] ©
DOM
Document Object Model
[Link] ©
Verlo funcionando [Link] ©
Ejercicio
Ver ejercicio resuelto
[Link] ©
Acceder al parent de un iframe
[Link] ©
Verlo funcionando
EFECTOS
[Link] ©
show / hide
Verlo funcionando [Link] ©
fadeIn / fadeOut
Verlo funcionando [Link] ©
fadeTo
Verlo funcionando [Link] ©
toggle
Verlo funcionando [Link] ©
PLUGINS
[Link] ©
Round Corners
Verlo funcionando [Link] ©
LightBox
Lograr que el plugin de esta página:
[Link]
funcione así:
Verlo funcionando
[Link] ©
Kwicks
[Link]
Ejercicio: implementar el plugin kwicks para que muestre
tres pestañas con una imagen grande de fondo.:
Verlo funcionando
[Link] ©
Ejercicio – galería cycle
Conseguir el efecto deseado
[Link]
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
},
[Link]
Ver resultado deseado [Link] ©
Sexy alert
Añadir un sexy alert cuando se cara la página
web
Ver resultado deseado [Link] ©
Drag & Drop
Verlo funcionando [Link] ©
Photo Info
Ver resultado deseado [Link] ©
Ejercicio Mezcla
Ver ejercicio resuelto [Link] ©
Validacion de
formularios
[Link] ©
Validar si hay algo escrito
if($(".required").val() == "")
Ver ejercicio resuelto [Link] ©
Validar si hay algo escrito II
if($.trim($(".required").val()) == "")
Ver ejercicio resuelto [Link] ©
Validar si es un número
if(isNaN($(".required").val()))
Ver ejercicio resuelto [Link] ©
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))
Ver ejercicio resuelto [Link] ©
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))
Ver ejercicio resuelto [Link] ©
Validar mail III
Validar que hemos escrito una cadena de
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)){
Ver ejercicio resuelto [Link] ©
Validar mail IV
Validar que hemos escrito una cadena de
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)){
Ver ejercicio resuelto [Link] ©
Validar mail V
Validar que hemos escrito una cadena de
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)){
Ver ejercicio resuelto [Link] ©
Validar mail VI
Validar que se cumplen todas las condiciones
anteriores y que después hay escrita una Arroba.
if (/^\w+([\.-]\w+)*@$/.test(valor)){
Ver ejercicio resuelto [Link] ©
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.
Ver ejercicio resuelto [Link] ©
Validar fechas I
Guardamos cada parte que compone la fecha en una variable diferente.
function validarFecha() {
var cadena = $("#fecha").val();
var dia = [Link](0, [Link]("/"));
var mes = [Link]([Link]("/") + 1, [Link]("/"));
var anio = [Link]([Link]("/") + 1, [Link]);
}
Ver ejercicio resuelto [Link] ©
Validar fechas II
Comprobamos que los días, meses y años tomen valores posibles.
function validarFecha() {
var cadena = $(".required").val();
var dia = [Link](0, [Link]("/"));
var mes = [Link]([Link]("/") + 1,
[Link]("/"));
var anio = [Link]([Link]("/") + 1,
[Link]);
if(isNaN(anio) || [Link] != 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 [Link] ©
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.
Ver ejercicio resuelto [Link] ©
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();
Ver ejercicio resuelto [Link] ©
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"); }
}
[Link]($(".numero")); function pintarError(elemento, msg) {
[Link]($(".fiveDigits")); [Link]("background", "salmon");
[Link]($(".fecha")); [Link]().html(msg);
[Link]("valido", "false");
[Link]($(".mail")); }
[Link](function(i) { function limpiar(elemento) {
[Link]("background", "PaleGreen");
if($(this).attr("valido") != "true") { [Link]().html("");
formularioValido = false; [Link]("valido", "true");
return false; }
}
}); Ver ejercicio resuelto
if(formularioValido == false) {
alert("Revise el formulario, hay datos incorrectos");
} else {
alert("Eviando formulario...")
}
}
[Link] ©
Validación con plugin:
[Link]
<script>
$(document).ready(function(){
$("#myform").validate();
});
</script>
class="required number email url"
minlength="5"
maxlength="5" (no es js, es html)
equalTo="#idPassword"
[Link] ©
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 [Link] ©
Validación de formularios
con el plugin de validación de jquery
[Link]
$(document).ready(function(){
$("#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");
}
});
}); [Link] ©
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 [Link] ©
