jQuery
Diseño Web

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/")

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

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)

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

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

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

$("#elemento").toggleClass("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

$(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

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

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

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

Menús

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

text() y html()

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

  window.addEventListener('click', function(e){   
      if (document.getElementById('amor').contains(e.target)){
      } else{
        amor.classList.remove('desplegado');
    }

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>

<h2>Métodos para manipular nodos del DOM con jQuery.</h2>
<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.">

Plugins

Monteserín Gallery

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

Ver monteserin gallery

Kwicks

Enlce a kwicks

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

LightBox 2

Plugin lightbox

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
• 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..
  	});