Embed Size (px)
Citation preview
Muy breve
Introducción a jQuery
Descarga los ejemplos en https://github.com/vrivas/intro-jquery
Víctor M. Rivas Santos
Noviembre, 2014
Qué es jQuery: versión oficial
● https://jquery.com
jQuery is a fast, small, and feature-rich JavaScriptlibrary. It makes things like HTML documenttraversal and manipulation, event handling,animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.With a combination of versatility and extensibility,jQuery has changed the way that millions of peoplewrite JavaScript.
Qué es jQuery: a mi modo dever
● Una excelente biblioteca para seleccionarnodos del DOM...
● … y aplicarles todo tipo de manipulaciones
Qué bases necesitas paraprogramar con jQuery
● HTML
● CSS > Importantísimo
● Javascript > para lo del “programar”
De dónde “descargo” estabiblioteca
● Del sitio oficial: https://jquery.com/download/
● De las Google Hosted Libraries:<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
● De cualquier página web que las use... Ctrl+U;)
● Normalmente usamos la versión “min”
“Hola mundo” en jQuery
<html>
<head>
<title>Hola Mundo jQueryano</title>
<script src="jquery-2.1.1.js"></script>
</head>
<body>
<h1>Hola mundo jQueryano</h1>
<p></p><p></p><p></p><p></p>
<script>
jQuery( "p" ).html( "Hola mundo" );
</script>
</body>
</html>
Selección de nodos
“Manipulaciones”
¿jQuery()?
● Normalmente usaremos su “alias”: $
$( "p" ).html( "Hola mundo" );
Qué pongo en la parte del“selector”● Básicamente: expresiones CSS● Modificamos el ejemplo anterior haciendo:
$( "p, h1" ).html( "Hola mundo" );
● Otras posibilidades:
$( "#identificador" ).html( "Hola mundo" );
$( ".clase" ).html( "Hola mundo" );
$( "h1+h2" ).html( "Hola mundo" );
$( "p a" ).html( "Hola mundo" );
$( "p > a" ).html( "Hola mundo" );
$( "*" ).html( "Hola mundo" );
$( "p[opcional]" ).html( "Hola mundo" );
$( "p[opcional='si']" ).html( "Hola mundo" );
$( "td :not( .cabecera )" ).html( "Hola mundo" );
● Más info: http://api.jquery.com/category/selectors/
Qué pongo en la parte de lamanipulación● Puff... hay de todo● Algunos ejemplos básicos (luego veremos más):
– .html( “Texto que reemplazará el que exista” )
– .css( “font-weight”, “bold” )
– .css( { “font-weight”: “bold”, “color”: “green” } )
– .append( “Texto a añadir al final” )
– .prepend( “Texto a añadir por el principio” )
– .remove()
– .addClass( “clase1 clase2 clase3” )
– .removeClass( “clase1 clase2 clase3” )
– .removeClass()
Encadenamiento de acciones
● Posiblemente, una de las mejores cosas dejQuery:
– El 99,99% de los métodos devuelven unconjunto de nodos
$( "p, h1" ).html( "Hola mundo" );
Devuelve todos los Nodos de tipo p y h1
Cambia el contenido de los nodos …
y devuelve otra vez todoslos nodos de tipo p y h1
Un ejemplo deencadenamiento
$("p")
.css({"font-weight": "bold", "color":"green"})
.html( "Bonito texto")
.append( "<strong>que incluyo aquí</strong>")
.prepend( "<em>Voy a poner un</em> ")
.css( "border", "solid 1px red");
Cómo modifico el conjunto denodos● Se pueden añadir más nodos al conjunto sobre el que trabajamos o
bien reducirlo, usando los siguientes métodos:– .add( selector )
– .children( [selector] )
– .first()
– .eq( posicion )
– .slice( inicio, final )
– .end(): permite “deshacer” la última selección que hayamos aplicado. ● $('p').eq(2).css( 'text-align', 'center').end().first().css( 'border','2px dashed blue' )
– .next(), prev(), prevAll(), siblings()
– .parent()
– .filter( selector o función(índice) )
– .find()
Cuándo puedo empezar aoperar con el DOM● Normalmente esperamos a que se haya terminado de
cargar dicho DOM:– Al final de la página
– Usando el evento READY:
$(document).ready( function() { … } );
– O incluso más corto:
$( function() { … });
Ejemplo de $(function(){...});
<html>
<head>
<script src="jquery-2.1.1.min.js"></script>
<script>
$( function() {
$(".autor").append( "<p><small>Por Pepe Illo</small></p>" );
});
</script>
<body>
<h1>Ejemplo de jQuery</h1>
<p class="autor">Espero a que se cargue el documento completo
para empezar a modificar el DOM</p>
</body>
</html>
Añadimos algunos efectos
● Una de las “maravillas” de jQuery es la posibilidad deaplicar llamativos efectos al contenido de una web.
● hide(), show(): $(“[lang='en']”).hide(2000)
● toggle() (luego veremos un evento con .click)
● fadeIn(),fadeOut(), fadeToggle()
● slideDown(),slideUp(), slideToggle()
● animate()
Ejemplo animate
<html><head>
<style> p { border: 1px solid blue; }</style>
<script src="jquery-2.1.1.min.js"></script>
<script>
function reducir() {
$('p').animate({'margin-left': '-=20%', 'font-size': '-=30pt', 'border-width': '0px'}, 1000);
}
function agrandar() {
$('p').animate({'margin-left': '+=20%', 'font-size': '+=30pt', 'border-width': '+=45px'}, 3000);
}
$(function () { agrandar(); reducir(); });
</script>
<body>
<h1>Ejemplo de Animate</h1>
<p>Viva la, viva la, viva la ampliación</p>
<p>Soy un párrafo que me agrando, y luego aplico una reducción</p>
</body></html>
Creando callbaks para eventos
● Podemos definir los eventos para cada uno de los elementos de la páginaweb de forma muy sencilla:
<html><head>
<script src="jquery-2.1.1.min.js"></script>
<script>
$(function () {
$('img').mouseover(function () { $(this).css("border", "3px solid red"); })
.mouseout(function () { $(this).css("border-width", "0px"); })
.click( function () { alert( $(this).attr("src")); });
});
</script>
<body>
<h1>Ejemplo de asignación de eventos</h1>
<imgsrc="http://www.freeimageslive.com/galleries/sports/sportsgames/preview/cricket_ball.jpg">
<img src="http://thumbs.dreamstime.com/x/cricket-bat-ball-26560801.jpg">
</body></html>
¿Qué es eso de los “pluyins”?
● Usando como base jQuery se handesarrollado numerosos plug-ins.
● Lo único que necesitamos es incluir antesque nada jQuery y a partir de ahí lo quenecesitemos:
– http://plugins.jquery.com/
Ejemplo del plug-in jBox(¡ojo, que he puesto primero el body!)
<body>
<h1>Ejemplo de uso del plugin jBox</h1>
<form action="javascript: return false;">
Nombre: <input type="text" value="" class="ayuda" title="Introduzca su nombre" id="nombre">
<input type="submit" value="Enviar" id="enviar">
<input type="reset" value="Limpiar" id="limpiar">
</form>
</body>
</html>
Ejemplo del plug-in jBox
<html>
<head><title>Ejemplo de plugin con jQuery</title>
<!-- Incluimos la biblioteca jQuery, jBox y la hoja de estilos -->
<script src="jquery-2.1.1.min.js"></script>
<script src="jBox.min.js"></script>
<link href="jBox.css" rel="stylesheet">
<script>
$(function() {
$('.ayuda').jBox('Tooltip');
new jBox('Modal', { width: 300, height: 200, attach: $('#enviar'),
title: 'Envío de datos al servidor', animation: "slide",
content: '<em>Se va a proceder al envío de datos al servidor</em>' });
$("#limpiar").click( function ( ){
new jBox('Notice', {color: "blue",content: 'Se restauraron los valores por defecto'}); })
});
</script>
</head>
Gracias
● Remember:
http://www.digitallearning.es
publicidad
publicidad
publicidad
publicidad
facebook.com/victorrivassantos
@vrsantos
http://vrivas.es
