(Muy breve) Introduccion a jQuery

Víctor M. Rivas Santos
Muy breve
Introducción a jQuery
Descarga los ejemplos en
https://github.com/vrivas/intro-jquery
Noviembre, 2014

Qué es jQuery: versión oficial
● https://jquery.com
jQuery is a fast, small, and feature-rich JavaScript
library. It makes things like HTML document
traversal 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 people
write JavaScript.

Qué es jQuery: a mi modo de
ver
● Una excelente biblioteca para seleccionar
nodos del DOM...
● … y aplicarles todo tipo de manipulaciones

Qué bases necesitas para
programar con jQuery
● HTML
● CSS > Importantísimo
● Javascript > para lo del “programar”

De dónde “descargo” esta
biblioteca
● 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 la
manipulació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 de
jQuery:
– El 99,99% de los métodos devuelven un
conjunto 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 todos
los nodos de tipo p y h1

Un ejemplo de
encadenamiento
$("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 de
nodos
● 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 a
operar 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 de
aplicar 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>
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ágina
web de forma muy sencilla:
<html><head>
<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>
<img
src="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 han
desarrollado numerosos plug-ins.
● Lo único que necesitamos es incluir antes
que nada jQuery y a partir de ahí lo que
necesitemos:
– 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>

<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
publ
icid
ad
publicidad
facebook.com/victorrivassantos
vrivas@ujaen.es
@vrsantos
http://vrivas.es

(Muy breve) Introduccion a jQuery

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a (Muy breve) Introduccion a jQuery

Similar a (Muy breve) Introduccion a jQuery (20)

(Muy breve) Introduccion a jQuery