Curso de jQuery

¿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.

Instalación

http://jquery.com/: sitio oficial de la librería.

Ahí puedes descargar el archivo para tus proyectos.

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

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

Para cargar la librería a partir de los repositorios de google:
https://developers.google.com/speed/libraries/

Ejemplo básico

Llamada a función I

<script type="text/javascript" src="jquery.js"></script>
<script>
	$(document).ready(inicializar);

	function inicializar(){
		alert("hola");
	}
</script>
	

$(document) espera a que el código de la página esté cargado, si quiero esperar a que además las imágenes de la página estén cargadas usaré $(window) en su lugar.

Llamada a función II

<script type="text/javascript" src="jquery.js"></script>
<script>
	$(document).ready(inicializar);

	function inicializar(){
		$("#boton").on('click', botonPulsado);
	}

	function botonPulsado(){
		alert("Boton pulsado");
	}
</script>

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

Llamada a función III

<script>
	$(document).ready(inicializar);

	function inicializar(){
		$("#boton").on('click', function(){
			alert("Boton pulsado");
		});
	}
</script>

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

Llamada a función IV

<script>
	$(inicializar);

	function inicializar(){
		$("#boton").on('click', function(){
			alert("Boton pulsado");
		});
	}
</script>

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

Acerca de la función click

A veces esta función se llama dos veces en lugar de una. Esto suele ocurrir cuando genero la página dinámicamente y el evento click se añade varias veces. Para prevenirlo:

$(".button").off('click').on('click', function(){
	alert('has hecho click');
});

Es como si una persona tuviese muchas orejas y cada vez que alguien le da los buenos días, saludase una vez por cada oreja que tiene. Si sólo queremos que salude una vez, deberíamos dejarla con sólo una oreja.

Método val()

$("#txt").val("value cambiado");

alert($("#txt").val());

Ejercicio val()

Crear una página con un <input type=”text”> y dos botones. Al pulsar sobre un botón se modificará el value del cuadro de texto. Al pulsar sobre el otro botón, se mostrará un mensaje de alerta con el value del cuadro de texto

Eventos

Para realizar los siguientes ejercicios de eventos, dibujar en pantalla un cuadro de texto (un <input type=”text” >).

Ejercicio

Para ejecutar una función cuando el elemento toma el foco:

$("#elemento").on('focus', fn);

Para lanzar una función cuando el elemento pierde el foco:

$("#elemento").on('blur', fn);

Ejercicio

$("#elemento").on('dblclick', fn);

Mouse up, Mouse down

$("#buscar").on('mousedown', fn);

$("#buscar").on('mouseup', fn);

Ejercicio

$("#elemento").mouseover(fn)

$("#elemento").mouseout(fn)

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

<script type="text/javascript" src="jquery.js"></script>
<script>
	$(document).ready(function(){
		$(document).mousemove(function(event){
			$("#cory").text("coordenada y="+event.pageY);
		});
		$(document).click(function(e){
			$("#corx").text("coordenada x="+e.pageX);
		})
	});
</script>

<p id="corx"></p>
<p id="cory"></p>

Efectos

Para realizar los siguientes ejercicios de efectos, dibujar en pantalla una capa roja y dos botones (los botones no deben estar dentro de la capa).

show / hide

Cuando haga click sobre uno de los botones, la capa roja deberá ocultarse. Cuando haga click sobre el otro, deberá mostrarse.

$("#capaRoja").hide("slow");

$("#capaRoja").show("fast");

fadeIn / fadeOut

$("#capaRoja").fadeOut("slow");

$("#capaRoja").fadeIn("slow");

fadeTo

$("#descripcion").fadeTo("slow",0.5);

$("#descripcion").fadeTo("slow",1);	

toggle

$("#capaRoja").toggle("slow");

Animate

$("#capaRoja").animate({height:"800px"},500);

$("#capaRoja").animate({height:"800px",width:"800px"},500);

Ejercicios CSS

Ejercicio

Cambio del estilo de un elemento:		
$("#elemento").css("color","#ff0000");

Para aplicar varios modificadores a un único elemento:
$("div").css("background", "blue").css("width","200px").css("height", "400px");
$("div").css({"background" : "blue", "width" : "200px" });

Ejercicio

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

Ejercicios Slider

Ejercicio, con un solo botón

Ejercicio, con efecto

Pista: $(".capa:nth-child("+elemento+")").css("opacity", 1).css("transform","scale(1)");

Ejercicio, sin definir número de elementos

Pista:var numero_elementos = $("#layers .capa").length;

Slider que avanza automáticamente

Pista setInterval(avanza, 1000);

Con cambio de dirección

Pistaif(contador>=n-1|| contador <1){
	signo = signo*(-1);
}

Método attr

Añadir un atributo

$("#elemento").attr("href","https://pablomonteserin.com/")

Eliminar un atributo:

$("#elemento").removeAttr("href");

Recuperar el valor de un atributo:

var valor = $("#elemento").attr("href");

Ejercicio attr()

Ejercicio attr con contador

Cada vez que hacemos click sobre el botón la imagen cambia, así hasta el infinito.

Ejercicio imágen aleatoria

Al pulsar el botón, cambiar la imágen por una aleatoria.

$(this)

Cuando pulsemos sobre cualquier celda de la tabla:

Ejercicio imagen secreta

Una imagen es escogida aleatoriamente. Esta imagen aparecerá inicialmente en pantalla. Hay otras tres imágenes pulsables. El juego consiste en pulsar una imagen y evaluar si esa es la imágen que se vé inicialmente

Este ejercicio se puede descomponer en tres fases:

1. La imagen que queremos descubrir no es es aletoria.
2. La imagen que queremos descubrir es aleatoria, pero no usaremos arrays. Para ello, los nombres de las fotografías serán 0.jpg, 1.jpg y 2.jpg, etc.
3. La imagen que queremos decubrir será aleatoria y usaremos arrays. No es posible calcular una palabra (un nombre de fotografía) aleatoria. Cuando queremos generar un número aleatorio usamos Math.random. Si queremos generar una palabra aleatoria, usaremos Math.random como indice de un array.

addClass / removeClass / hasClass / toggleClass

Asociar una clase

$("#elemento").addClass("clase");

Desasociar clase

$("#elemento").removeClass("clase");

Cambiar clase, si está, quitarlo, si no está, ponerlo

$("#elemento").toggleClass("clase");

¿Tiene clase?

if($("#elemento").hasClass("clase")){alert("exito")}

Ejercicio – animate.css

Usando addClass, hacer que al pulsar un botón este coja los estilos necesarios y suministrados por la librería animate.css para que se produzca la animación correspondiente

Para que funcione, habrá que añadir el class animated y el class correspondiente a la animación que queremos emplear y que podemos consultar en animate.css.

Si queremos que pasado un tiempo se elimine el class, usaremos la función timeOut

setTimeout( function(){
	$("#rojo").removeClass('animated bounce');
}, 2000);

Si queremos que el class se elimine cuando la animación ha concluído, usaremos:

$("#rojo").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ 
	$("#rojo").removeClass("animated bounce");
});

Ejercicio menú hamburguer

if($("#elemento").hasClass("clase")){...}

Accesos al hijo, al padre y al hermano

closest();

• closest() devuelve la primera coincidencia envolviendo al elemento indicado (en este caso $(this)).
• parent() devuelve el elemento inmediatamente por encima, sólo si este coincide con el selector especificado.
• parents() devuelve todas las coincidencias por encima del elemento indicado.

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#boton").click(function(){
		alert($(this).closest("div").attr("id"));
	});
	$("#boton1").click(function(){
		alert($(this).parent("#capaIntermedia").attr("id"));
	});
	$("#boton2").click(function(){
		alert($(this).parents("div").eq(2).attr("id"));
	});
});
</script>
<div id="wrapper">
	<div id="capaIntermedia">
		<div id="capaMasInterna">
			<input type="button" id="boton"/>
			<input type="button" id="boton1"/>
			<input type="button" id="boton2"/>
		</div>
	</div>
</div>

find

Busca el input type=”radio” y cambia su propiedad checked a true.

$(this).find('input:radio').prop('checked', true);

Ejercicio filas

Al pulsar sobre una fila, esta se colorea y se marca el radio button correspondiente a la fila pulsada.

siblings()

Al contrario que closest(), que devuelve el elemento situado por encima, siblings() devuelve el elemento ubicado al lado.

$(this).siblings("input").val()

Mezclar closest() con siblings()

La siguiente línea me devolverá el value de la select situada al lado del span que está envolviendo al elemento con el que acabo de interactuar.

$(this).closest("span").siblings("select").val();

Bucle en jQuery

var $filas = $("table tr");
$filas.each(function() {
	alert($(this).html());
});

Ejercicio tipo test con bucle

Para recorrer todos los radios que estan marcados usaremos:

$("input[type=radio]:checked")

Ejercicio presupuesto

Ejercicio carta de recomendacion

A continuación te facilito los textos que puedes usar. No hace falta que los uses todos; con tres de cada categoría, sirve

Motivo

• Cuento con varios años de experiencia muy sólida como profesional por lo cual me creo capacitad@ para asumir las responsabilidades del puesto que ustedes anuncian.
• En relación al anuncio publicado donde solicitaban un profesional para su empresa, les presento mi candidatura.
• El pasado día del mes corriente, se publicó una oferta de trabajo en la que se hacía constar que necesitaban cubrir un puesto de trabajo.
• En respuesta a su anuncio aparecido en el periódico , me es grato manifestarle mi interés por el puesto .
• Me dirijo a ustedes con el fin de ofrecerles mis servicios profesionales.
• En relación al anuncio de referencia tengo el gusto de enviarle mi currículo ya que, como verá en el mismo, creo reunir todos los requisitos para el puesto de trabajo que quieren cubrir.
• Me pongo en contacto con ustedes para manifestarles mi interés por el puesto de trabajo que solicitaban.
• Me dirijo a ustedes para hacerles constar mi interés por desarrollar mi futuro profesional en su empresa.
• Sería de mi agrado poderme integrar en aquella actividad que me permita continuar con lo ya aprendido.

Medallas

• Como he reseñado en el historial adjunto, aunque solo cuento años de experiencia, confío en mi afán de de superación para llegar a poseer un dominio completo de la profesión. Creo contar con las aptitudes necesarias para poder aportar beneficios muy positivos a su organización.
• Debido a mis cualidades personales y mi experiencia, me considero capacitado para desempeñar ese trabajo.
• Me adapto con facilidad al trabajo en equipo y baso mi actuación `profesional en una relación duradera y de confianza con la empresa.
• El puesto que ustedes ofrecen coincide plenamente con mis objetivos profesionales y constituye para mi un reto profesional, qué trataré de llevar a cabo con todo entusiasmo, para mutuo beneficio.
• Considero que mis características de formación y experiencia puedan corresponder con las de su anuncio y me complazco en enviarles mi CV para su consideración.
• Por mi formación y por mi entusiasmo en desarrollar al máximo mi carrera profesional, espero ser un firme candidato para cubrir el puesto que se ofrece.
• Mis aspiraciones profesionales se dirigen profesionalmente hacia sectores donde mi formación y experiencia podrían consolidarse. Tengo plena disponibilidad para cambios de residencia y viajes.
• Tanto el interés por ampliar mi carrera profesional, como mi capacidad de trabajo y responsabilidad, pueden resultar de utilidad para una empresa consolidada como la suya.

Objetivo

• Agradecería la oportunidad de poder presentarme ante ustedes para contestar cualquier pregunta y ampliar lo resumido en mi historial.
• Les agradecería me dejasen formar parte del proceso de selección.
• Por todo ello espero que tenga en cuenta mi candidatura ante cualquier necesidad futura se ponga en contacto conmigo.
• Desearía formar parte del proceso de selección, y quedo a su disposición para mantener una entrevista personal si lo estiman oportuno.
• Espero se pongan en contacto conmigo para poderles ampliar mi datos en una entrevista personal.
• Por todo ello, creo reunir los requisitos que mencionan para el futuro ocupante del puesto, deseando poder formar parte del proceso de selección.
• Esperando comentar con usted en una próxima entrevista mi historial profesional, aprovecho la ocasión para saludarle atentamente.

Despedida

• Un cordial saludo.
• En espera de sus noticias y sin otro particular.
• Aprovecho la ocasión para agradecerle el interés que ha manifestado por mi candidatura. Atentamente.
• Muy atentamente.
• Atentamente.
• A la espera de recibir noticias suyas, les saluda atentamente.
• Agradeciéndoles la atención restada , se despide atentamente.

Hacer un filtro

Al pulsar sobre un enlace, las capas de colores inferiores deben filtrarse en función del enlace pulsado. Para ello, recorreremos todas las capas, añadiendo o eliminando el class “oculta” en el caso de que el href (con #) del enlace coincida con alguno de los class de la capa

Utilizaremos el siguiente código CSS:

.oculta{
	overflow:hidden;
	animation: ocultar 0.5s;
	animation-fill-mode: forwards
}

@keyframes ocultar{
	to{
		width: 0;
		height: 0;
		margin: 0;
		border:0;
	}
}

Menus

Menú que desaparece al hacer scroll down

var $mywindow = $(window);
var mypos = $mywindow.scrollTop();
$mywindow.scroll(function() {
	if($mywindow.scrollTop() > mypos){
		$('.site-header').fadeOut();
	}else{
		$('.site-header').fadeIn();
	}
	mypos = $mywindow.scrollTop();
});

Ejercicio – Menú que se solapa arriba

$(window).scroll(function(){

});

var scrollTop = $(window).scrollTop();

distanciaInicial = $('.nav').offset().top;

//Si scrollTop es mayor que la distancia inicial añado un class para pegar el menú arriba

Seleccionar la etiqueta que contiene cierto texto

$h1 = $("<h1>Hello</h1>")

Nótese que para almacenar nuestro elemento jquery usamos una variable precedida de $. Esto significa “esta variable contiene un objeto jquery”.

text()

Para devolver el texto contenido en el cuerpo de un elemento:

alert($("#elemento").text());

Para escribir una cadena de texto en el cuerpo de un elemento:

$("#elemento").text("cadena");

Ejercicio método HTML

Crear una capa cuyo id será “wrapper”.Tendré dos botones que harán las siguientes acciones:

1. Pintar una capa roja dentro de wrapper.
2. Mostrar un alert con el código fuente que hay dentro de wrapper.

Para escribir código HTML dentro de un elemento:

$("#elemento").html("<p>bla bla bla</p>");

Para devolver el código HTML contenido en un elemento:

$("#elemento").html();

Detectar cuando pulso fuera de cierta capa

$(".black_overlay").click(function(e){
	if(e.target == this){
		$(".black_overlay").css("display", "none");			
	}
});

DOM

Document Object Model

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(inicializarEventos);
function inicializarEventos(){
  $("#eliminarElementos").click(function(){
	$("div").empty();
  })
  $("#pintarCuadradoVerde").click(function(){
  	$("div").html("<span id='rqr' style='float:left; background-color:green; width:50px; height:30px'></span>");
  });
  $("#anadirElementoAlFinal").click(function(){
	$("div").append("<span style=' float:left; background-color:blue'>texto al final</span>");
  });
  $("#anadirElementoAlPrincipio").click(function(){
	$("div").prepend("<span style='float:left; background-color:green'>texto al pricipio</span>");  
  });
  /*Mediante el método eq (equal) indicamos la posición del elemento que vamos a borrar*/

  $("#eliminarUltimoElemento").click(function(){
	$("span").eq( $("span").length-1 ).remove();  
  });
  $("#eliminarPrimerElemento").click(function(){
  	$("span").eq(0).remove();
  });
}
</script>

<h1>Métodos para manipular nodos del DOM con jQuery.</h1>
<div style="background-color:red; width:400px; height:200px">
</div>
<input type="button" id="eliminarElementos" value="Eliminar elementos de la lista"><br/>
<input type="button" id="pintarCuadradoVerde" value="Pintar cuadrado verde"><br/>
<input type="button" id="anadirElementoAlFinal" value="Añadir un elemento al final"><br/>
<input type="button" id="anadirElementoAlPrincipio" value="Añadir un elemento al principio"><br/>
<input type="button" id="eliminarUltimoElemento" value="Eliminar el último elemento."><br/>
<input type="button" id="eliminarPrimerElemento" value="Eliminar el primer elemento.">

Ejercicio

Acceder al parent de un iframe

function show(url){
	$('#contenedor_pop', window.parent.document).html("<img src='"+url+"'>");	
}
---------------------------------
<a href="javascript:show('perro.png');">enlace</a>

Plugins

Monteserín Gallery

Descargar monteserinGallery.js y atendiendo a la documentación del enlace, reproducirlo con nuestras propias fotos.

Kwicks

http://www.jeremymartin.name/projects.php?project=kwicks

Ejercicio: implementar el plugin kwicks para que muestre tres pestañas con la siguiente apariencia:

LightBox 2

Descargar este plugin y echarlo a andar siguiendo su documentación.

Notas:

– Para que la fotografía no se vea a pantalla completa cuando pulsemos sobre su link es necesario que el documento tenga un doctype. Además, la librería de javascript debe cargarse justo antes del cierre del body.

<!DOCTYPE html> 

– La carga de jQuery y del plugin, debe estar justo antes del cierre del body.

Photo Info

Otros plugin jQuery

• Slide reveal, hace aparecer un panel a un lado de la pantalla
• jQuery.youtubebackground, para poner videos de background. Ojo, que si utilizamos este plugin en un dominio https, tendremos que añadir la “s” en el fichero jquery.youtubebackgroud, en la línea tag.src = ‘http://www.youtube.com/iframe_api’;
• Menú responsive
• Mapa de imágenes
• Autoscroll
• Maquetación tipo revista
• Skrollr Parallax
  • Demo de scrollr.
  • Descarga de scrollr
  • Documentación de Scrollr .
  
  Para determinar el momento en el que irán apareciendo las cosas, lo más fácil es tomar como referencia el límite superior de la página usando el atributo: data–100-top=”estilo” (A 100 px de arriba hago cosas)
• Color Box: Para redimensionarlo podemos usar este código:
  

  jQuery(".inline").colorbox({maxWidth:'25%', maxHeight:'25%'});

• NavNav
• Flex slider
• SuperSlides (full screen slider)
• Animated Pie Chart
• Aniview Permite detonar animaciones cuando un elemento está a la vista. Para ello, deberemos cargar, además, la hoja de estilos de animate.css y usar el siguiente código para inicializar:

  $(function(){
  	var options = {
  		animateThreshold: 100
  	};              
  	$('.aniview').AniView(options);	
  })

  Las animaciones que usaremos en el atributo data-av-animation=”slideInRight”, serán las de animate.css.

• Swipe slider:
  La documentación de este plugin está en este enlace:
  idangero
  Aquí se indica que para cambiar el ancho y el alto del slider accedamos al estilo:
  .swiper-container, .swiper-slide
  
  

  Nota importante:
  Si en un mismo proyecto tenemos varios sliders, deberemos identificarlos de forma diferente al aplicar el script:

  var mySwiper1 = new Swiper('#page1 .swiper-container',{
  		//Your options here:
  		mode:'horizontal',
  		loop: true
  		//etc..
  	});  
  var mySwiper2 = new Swiper('#page2 .swiper-container',{
  		//Your options here:
  		mode:'horizontal',
  		loop: true
  		//etc..
  	});

Validación 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 carácter, 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

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)){

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)){

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)){

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");
}

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 validacionFinal() {
	var formularioValido = true;
	var objetosValidacion = $(".required");
	objetosValidacion.push($(".numero"));
	objetosValidacion.push($(".fiveDigits"));
	objetosValidacion.push($(".fecha"));
	objetosValidacion.push($(".mail"));
	objetosValidacion.each(function(i) {
		if($(this).attr("valido") != "true") {
			formularioValido = false;
			return false;
		}
	});
	if(formularioValido == false) {
		alert("Revise el formulario, hay datos incorrectos");
	} else {
		alert("Eviando formulario...")
	}
}

function contieneValor() {
	if($(this).val() == "") {
		pintarError($(this), "El campo debe contener un valor.");
	} else {
		limpiar($(this));
	}
}
function pintarError(elemento, msg) {
	elemento.css("background", "salmon");
	elemento.next().html(msg);
	elemento.attr("valido", "false");
}
function limpiar(elemento) {
	elemento.css("background", "PaleGreen");
	elemento.next().html("");
	elemento.attr("valido", "true");
}

Validación con plugin

<script>
  $(document).ready(function(){
    $("#myform").validate();
  });
</script>

class="required number email url"
minlength="5" 
maxlength="5"
equalTo="#idPassword"

Ejercicio

Nota: el plugin requiere que todos los elementos tengan un name.

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 campo página web debe contener una URL.

Campo correo electrónico debe contener una dirección mail.

Utilizando rules

$(document).ready(function(){
	$("#myform").validate({
  	rules: { 	
    		fieldNombre:{//los name de los elementos
    			required:true
    		},
		…
	},
	messages: {
  		fieldNombre: "Por favor, inserte su nombre",
  		fieldEdad: {
			required: "Por favor, inserte la edad",
			number: "Sólo puedes introducir números"
		},
		...
	},
	submitHandler: function(){
    		alert("rqr");
    }
	});
});

rules
required:true,
number:true,
minlength:3,
maxlength:5,
min:300,
max:600
email:true
url:true
equalTo: "#password"

Ejercicio

Nota: el plugin requiere que todos los elementos tengan un name.

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 campo página web debe contener una URL.

Campo correo electrónico debe contener una dirección mail.

Buenas prácticas con jQuery

Refrescar el DOM sólo cuando sea necesario

$('body').append('<ul id=”list” ></ul>');
for(var i = 1; i<100; i++){
	//cien llamadas al método append
	$('#list').append('<li>' + i + '</li>');
}

→ 

var list = '<ul id=”list”>';
for(var i = 1; i<100; i++){
	list += '<li>' + i + '</li>';
}
list += '</ul>';
//una sola llamada al método append
$('body').append(list);

Evitar acceso repetido a objetos jQuery

$(“#main_menu”).css(“background”,”red”);
$(“#main_menu”).css(“color”,”blue”);
$(“#main_menu”).css(“width”,”200px”);
$(“#main_menu”).css(“height”,”300px”);
→
$main_menu = $(“#main_menu”);
$main_menu.css(“background”,”red”);
$main_menu.css(“color”,”blue”);
$main_menu.css(“width”,”200px”);
$main_menu.css(“height”,”300px”);

Cómo crear un plugin de jQuery con parámetros

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="plugin.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("#elemento").newMethod({
		saludo:"Juan"
	});
})
</script>

plugin.js
jQuery.fn.newMethod = function(event){
	alert("hola " + event.saludo);
	alert($(this).attr(“id”));
}