jQuery
eugeniaperez.es
JQuery
eugeniaperez.es
JQuery
jQuery es software libre y de código abierto. Al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.
eugeniaperez.es
JQuery
eugeniaperez.es
JQuery
eugeniaperez.es
Text
Se trata de entender conceptos básicos de jQuery:
Otros usos comunes:
JQuery
eugeniaperez.es
Text
JQuery
eugeniaperez.es
jQuery consiste en un único fichero JavaScript.
¿Qué ventajas supone frente a Javascript?
JQuery
eugeniaperez.es
FUNCIÓN $()
La forma de interactuar con la página es mediante la función $(), un alias de jQuery(), que recibe como parámetro una expresión CSS o el nombre de una etiqueta HTML y devuelve todos los nodos (elementos) que concuerden con la expresión.
$("#tablaAlumnos"); // Devolverá el elemento con id=”tablaAlumnos”
$(".activo"); //Devolverá una matriz de elementos con class=”activo”
JQuery
eugeniaperez.es
FUNCIÓN $()
Una vez obtenidos los nodos, se les puede aplicar cualquiera de las funciones que facilita la biblioteca.
O por ejemplo, efectos gráficos:
// Se elimina el estilo con removeClass() y se aplica uno nuevo con addClass()
// a todos los nodos con class=”activo”
$(".activo").removeClass("activo").addClass("inactivo");
// Anima todos los componentes con class=”activo”
$(".activo").slideToggle("slow");
JQuery
eugeniaperez.es
FUNCIÓN $()
Antes de realizar cualquier acción en el documento con jQuery(), debemos percatarnos de que el documento esté listo. Para ello usamos $(document).ready():
El código que pongamos dentro de esta función se ejecutará una vez que la página se ha terminado de cargar.
$(document).ready(function() {
//Aquí van todas las acciones del documento.
});
$(function() {
});
Shortcut
JQuery
eugeniaperez.es
En el propio sitio Web de jQuery puedes encontrar una extensa documentación, tutoriales, descargas, etc. Aquí tienes el API: http://api.jquery.com/
Lo primero que debes hacer es descargar la librería de su página Web: http://jquery.com/download/
JQuery
eugeniaperez.es
Existen 2 maneras de utilizar jQuery:
JQuery
eugeniaperez.es
a) Referenciando el fichero en local:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<p>jQuery</<p>
<script src="js/jquery.js"></script>
</body>
</html>
En el atributo src tienes que indicar la ruta en la que se encuentra el fichero js de jquery.
JQuery
eugeniaperez.es
b) Referenciando un recurso online:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<p>jQuery</p>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</body>
</html>
JQuery
eugeniaperez.es
A continuación, vamos a hacer que al pulsar en el enlace, se nos muestre un alert. Para ello, pega este código en unas etiquetas <script> dentro del head:
<a href="http://www.google.es">Click me</a>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("Thanks for visiting!");
});
});
</script>
JQuery
eugeniaperez.es
Con este código estamos indicando lo siguiente:
JQuery
eugeniaperez.es
Si quieres cancelar el comportamiento por defecto de un control al realizar una acción sobre él, puedes utilizar el método preventDefault.
$(document).ready(function(){
$("a").click(function(event){
alert("As you can see, the link no longer took you to google.es");
event.preventDefault();
});
});
JQuery
eugeniaperez.es
En el siguiente enlace tienes algunos selectores especiales que puedes necesitar en el futuro: http://docs.jquery.com/Selectors
JQuery
eugeniaperez.es
En jQuery, también puedes utilizar todos los selectores CSS que hasta ahora utilizabas para definir estilos en una CSS. Por ejemplo, dado el siguiente enlace:
<a id="link" class="linksClass" href="http://jquery.com/">jQuery</a>
$("#link"); //utilizando el id
$(".linksClass"); //utilizando la clase CSS
JQuery
eugeniaperez.es
<a id="link" class="linksClass" href="http://jquery.com/">jQuery</a>
alert($("#link").text()); // Obtengo el contenido
$("body").append($(".linksClass").text()); //Añado el contenido dentro de la página
JQuery
eugeniaperez.es
Alineación horizontal de los contenidos:
<style type="text/css">
.horizontal {
float: left;
list-style: none;
margin: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#selected-media > li').addClass('horizontal');
});
</script>
Hijos de primer nivel
JQuery
eugeniaperez.es
Se puede incluir la referencia a jQuery y el código anterior::
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/selectors.js"></script>
$(document).ready(function () {
$('#selected-media > li').addClass('horizontal');
});
js/selectors.js
Si quito el >, entonces lo hace sobre
todos los li
JQuery
eugeniaperez.es
Nos permite seleccionar los elementos que tienen un determinado atributos
Ejemplo: seleccionar todas las imágenes que tienen atributo alt
$('img[alt]')
$('a[href]')
$('body').append($('a[href]'));
$('body').append($('a[href="http://www.harrypotter.co.uk/jkrowling.htm"]'));
JQuery
eugeniaperez.es
La notación utilizada tiene similitudes con las expresiones regulares:
$('a[href^="http://"]')
$('a[href$=".doc"]')
$('a[href^="mailto:"]')
JQuery
eugeniaperez.es
También podríamos acceder de manera directa al primer y último elemento de una lista de elementos mediante :first y :last.
$('body').append($("#selected-media li:first ul li:last").text());
jQuery sólo debe ser utilizada para añadir comportamiento o contenido dinámico. El contenido estático debe ser especificado en el HTML
JQuery
eugeniaperez.es
... Y copia y pega cada fragmento a continuación, para ejemplificar el uso de los atributos en jQuery.
JQuery
eugeniaperez.es
.addClass(): añade una clase CSS al elemento
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 8px; font-size:16px; }
.selected { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$("p:last").addClass("selected");
</script>
</body>
</html>
JQuery
.attr(): obtiene o establece un valor a un atributo determinado
<!DOCTYPE html>
<html>
<head>
<style>
em {
color: blue;
font-weight: bold;
}
div {
color: red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
The title of the emphasis is:<div></div>
<script>
var title = $("em").attr("title");
$("div").text(title);
</script>
</body>
</html>
JQuery
.hasClass(): determina si un elemento tiene asignado una clase CSS determinada
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>This paragraph is black and is the first paragraph.</p>
<p class="selected">This paragraph is red and is the second paragraph.</p>
<div id="result1">First paragraph has selected class: </div>
<div id="result2">Second paragraph has selected class: </div>
<div id="result3">At least one paragraph has selected class: </div>
<script>
$("div#result1").append($("p:first").hasClass("selected").toString());
$("div#result2").append($("p:last").hasClass("selected").toString());
$("div#result3").append($("p").hasClass("selected").toString());
</script>
</body>
</html>
JQuery
.html(): obtiene o establece el contenido HTML dentro de un elemento
<html>
<head>
<style>
p {
margin: 8px;
font-size: 20px;
color: blue;
cursor: pointer;
}
strong {
text-decoration: underline;
}
button {
cursor: pointer;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><strong>Click</strong> to change the <span id="tag">html</span></p>
<p>to a <span id="text">text</span> node.</p>
<p>This<button name="nada">button</button> does nothing.</p>
<script>
$("p").click(function () {
var htmlStr = $(this).html();
$(this).text(htmlStr);
});
</script>
</body>
</html>
JQuery
.removeAttr(): borra un atributo de un elemento
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Enable</button>
<input type="text" title="hello there" />
<div id="log"></div>
<script>
(function () {
var inputTitle = $("input").attr("title");
$("button").click(function () {
var input = $(this).next();
if (input.attr("title") == inputTitle) {
input.removeAttr("title")
}
$("#log").html("input title is now " + input.attr("title") +". Does not exist anymore");
});
})();
</script>
</body>
</html>
JQuery
.removeClass(): borra una clase CSS de un elemento
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder; }
.blue { color:blue; }
.under { text-decoration:underline; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
<script>$("p:even").removeClass("blue");</script>
</body>
</html>
JQuery
.removeProp(): borra una propiedad de un elemento
<html>
<head>
<style>
img {
padding: 10px;
}
div {
color: red;
font-size: 24px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p></p>
<script>
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ",
String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ",
String($para.prop("luggageCode")), ". ");
</script>
</body>
</html>
JQuery
.toggleClass(): dependiendo de si la clase CSS ya estaba presente o no, añade o borra
una o más clases CSS sobre un elemento.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin: 4px; font-size:16px; font-weight:bolder;
cursor:pointer; }
.blue { color:blue; }
.highlight { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p class="blue">Click to toggle</p>
<p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="blue">paragraphs</p>
<script>
$("p").click(function () {
$(this).toggleClass("highlight");
});
</script>
</body>
</html>
JQuery
.val(): obtiene o establece el valor de un
elemento. En el siguiente ejemplo se
pueden ver los valores seleccionados en
dos desplegables, uno de selección única
y otro de selección múltiple.
<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; margin:4px; }
b { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<script>
function displayVals() {
var singleValues = $("#single").val();
var multipleValues = $("#multiple").val() || [];
$("p").html(" <b> Single: </b> " +
singleValues +
" <b> Multiple: </b> " +
multipleValues.join(", "));
}
$("select").change(displayVals);
displayVals();
</script>
</body>
</html>
JQuery
jQuery nos ofrece también una manera mucho más natural de recorrer colecciones de elementos con una sintaxis más simple que el clásico bucle for:
eugeniaperez.es
var enteros = [52, 97];
$.each(enteros, function (index, value) {
alert(index + ': ' + value);
});
JQuery
Vamos a recorrer lo que se conoce como array asociativo:
eugeniaperez.es
var persona = {
"nombre": "Julen",
"profesion": "programador",
"aficion": "futbol"
};
$.each( persona, function( key, value ) {
alert( key + ": " + value );
});
El each es aún más cómodo, ya que nos permite acceder tanto a la clave como al valor de cada posición del array.
JQuery
.after(): inserta contenido después del elemento seleccionado.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>$("p").after("<b> Hello </b>");</script>
</body>
</html>
JQuery
.append(): inserta contenido al final del elemento seleccionado.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$("p").append("<strong> Hello </strong>");
</script>
</body>
</html>
JQuery
.before(): lo contrario a after().
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p> is what I said...</p>
<script>$("p").before("<b>Hello</b>");</script>
</body>
</html>
JQuery
.prepend(): inserta contenido al principio del elemento seleccionado.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>there, friend!</p>
<p>amigo!</p>
<script>$("p").prepend("<b> Hello </b>");</script>
</body>
</html>
JQuery
.css(): obtiene o establece el valor de una propiedad CSS en el elemento seleccionado.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span id="result"></span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("That div is <span style='color:" +
color + ";'> " + color + " </span>.");
});
</script>
</body>
</html>
JQuery
.empty(): borra todos los nodos hijos del elemento seleccionado.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
Hello, <span>Person</span> <a href="javascript:;">and person</a>
</p>
<button>Call empty() on above paragraph</button>
<script>
$("button").click(function () {
$("p").empty();
});
</script>
</body>
</html>
JQuery
.height(): obtiene la
altura del elemento
seleccionado.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<style>
body { background:yellow; }
button { font-size:12px; margin:2px; }
p { width:150px; border:1px red solid; }
div { color:red; font-weight:bold; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="getp">Get Paragraph Height</button>
<button id="getd">Get Document Height</button>
<button id="getw">Get Window Height</button>
<div></div>
<p>
Sample paragraph to test height
</p>
<script>
function showHeight(ele, h) {
$("div").text("The height for the " + ele +
" is " + h + "px.");
}
$("#getp").click(function () {
showHeight("paragraph", $("p").height());
});
$("#getd").click(function () {
showHeight("document", $(document).height());
});
$("#getw").click(function () {
showHeight("window", $(window).height());
});
</script>
</body>
</html>
JQuery
.remove(): borra el elemento seleccionado del DOM.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<style>p { background:yellow; margin:6px 0; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
how are
<p>you?</p>
<button>Call remove() on paragraphs</button>
<script>
$("button").click(function () {
$("p").remove();
});
</script>
</body>
</html>
JQuery
.replaceAll(): reemplaza los elementos seleccionados con un elemento dado.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("<b>Paragraph.</b>").replaceAll("p");</script>
</body>
</html>
JQuery
Hemos visto cómo manejar eventos en Javascript añadiendo un atributo al elemento HTML, como por ejemplo el onclick:
eugeniaperez.es
<a id=”link” href=”#” onclick=”hello()”>Clic aquí</a>
jQuery nos permite manejar los eventos de una manera mucho menos intrusiva con el código HTML de nuestra página.
function hello(){
alert('Hola');
}
JQuery
Sólo debemos seleccionar el elemento aL que asignarle un manejador, e indicar qué tipo de evento y qué función será el manejador:
eugeniaperez.es
$("#link").click(function () {
alert("Hola");
});
En la sentencia anterior primero seleccionamos el enlace, le indicamos que queremos manejar su evento onclick (en jQuery es sólo click) y a continuación implementamos la función.
JQuery
.bind(): que sirve realmente es para asignar un evento a un manejador de eventos.
No obstante, acabamos de ver cómo se hacía eso en jQuery, y no hemos utilizado el bind(). Esto es por realmente click() es una manera corta de llamar a bind(“click”).
No obstante, bind() tiene sus ventajas...
eugeniaperez.es
JQuery
...bind() tiene sus ventajas, como la posibilidad de asignar múltiples eventos a la vez:
eugeniaperez.es
$("div.test").bind({
click: function(){
$(this).addClass("active");
},
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});
JQuery
.blur(): Se lanza cuando un elemento pierde el foco de selección:
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<input id="target" type="text" value="Field 1" />
<input type="text" value="Field 2"/>
</form>
<div id="other">
Trigger the handler
</div>
The event handler can be bound to the first input field:
<script>
$('#target').blur(function () {
alert('Handler for .blur() called.');
});
</script>
</body>
</html>
JQuery
.change(): Se lanza cuando cambia el valor de un elemento. Este evento puede ser lanzado por los siguientes controles:
Input
Textarea
Select
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<input class="target" type="text" value="Field 1" />
<select class="target">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<div id="other">
Trigger the handler
</div>
<script>
$('.target').change(function () {
alert('Handler for .change() called.');
});
</script>
</body>
</html>
JQuery
.click(): Se dispara cuando se hace click en el elemento indicado.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="target">
Click here
</div>
<div id="other">
Trigger the handler
</div>
<script>
$("#target").click(function () {
alert("Handler for .click() called.");
});
</script>
</body>
</html>
JQuery
.delegate(): similar al bind(), ya que no sirve para capturar eventos, sino para asignarlos a manejadores,
pero asigna eventos a
elementos que aún no
se encuentran en la
página HTML.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Click me!</p>
<span></span>
<script>
$("body").delegate("p", "click", function () {
$(this).after("<p> Another paragraph! </p>");
});
</script>
</body>
</html>
JQuery
event.preventDefault(): estamos cancelando el comportamiento por defecto de una determinada acción.
Por ejemplo, cuando pinchamos en un enlace, el comportamiento por defecto será redirigirnos a la dirección que esté establecida en el atributo href.
Si lo que queremos es hacer otra cosa y cancelar esta redirección, deberemos llamar a este método.
eugeniaperez.es
JQuery
event.preventDefault(): estamos cancelando el comportamiento:
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>
<script>
$("a").click(function (event) {
event.preventDefault();
$('<div/>')
.append('default ' + event.type + ' prevented')
.appendTo('#log');
});
</script>
</body>
</html>
JQuery
.focus(): Al contrario que blur(), este evento se dispara cuando el elemento indicado recibe el foco.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><input type="text"/> <span>focus fire</span></p>
<p><input type="password"/> <span>focus fire</span></p>
<script>
$("input").focus(function () {
$(this).next("span").css('display', 'inline').fadeOut(1000);
});
</script>
</body>
</html>
JQuery
.hover(): Se dispara
cuando el puntero
del ratón pasa por
encima del elemento
indicado.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<style>
ul { margin-left:20px; color:blue; }
li { cursor:default; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class='fade'>Chips</li>
<li class='fade'>Socks</li>
</ul>
<script>
$("li").hover(
function () {
$(this).append($("<span> ***</span>"));
},
function () {
$(this).find("span:last").remove();
}
);
//li with fade class
$("li.fade").hover(function () {
$(this).fadeOut(100);
$(this).fadeIn(500);
});
</script>
</body>
</html>
JQuery
.on(): Vincula manejadores de
eventos al elemento
seleccionado. Este método
es el recomendado a partir
de la versión 1.7 de jQuery.
Se puede revertir el efecto de
on() con el método off().
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<input id="target" type="text" value="Field 1" />
<input type="text" value="Field 2" />
</form>
<div id="other">
Trigger the handler
</div>
<script type="text/javascript">
//The event handler can be bound to the first input field:
$("#target").blur(function () {
alert("Handler for .blur() called.");
});
/*$("#target").on('blur', function() {
alert("Handler for .blur() called.");
});*/
/*$(document).ready(function(){
$("#target").on('blur', function(){callBlur();});
});*/
var callBlur = function () {
alert("Handler for .blur() called.");
};
</script>
</body>
</html>
JQuery
.ready(): Todo lo que codifiquemos dentro de ready() se ejecutará una vez que la página haya terminado de cargarse.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<style>p { color:red; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>
JQuery
.submit(): Se dispara cuando se intenta enviar un formulario. Por tanto, este evento sólo puede ser asociado a elementos form. A su vez, los formularios sólo pueden ser enviados por los siguientes elementos:
eugeniaperez.es
JQuery
.submit(): Se dispara cuando
se intenta enviar un formulario:
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<style>
p { margin:0; color:blue; }
div,p { margin-left:10px; }
span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Type 'correct' to validate.</p>
<form action="javascript:alert('success!');">
<div>
<input type="text"/>
<input type="submit"/>
</div>
</form>
<span></span>
<script>
$("form").submit(function () {
if ($("input:first").val() == "correct") {
$("span").text("Validated...").show();
return true;
}
$("span").text("Not valid!").show().fadeOut(1000);
return false;
});
</script>
</body>
</html>
JQuery
Realiza la Actividad 2: está relacionada con los eventos:
eugeniaperez.es
JQuery
show(): Muestra uno o varios elementos seleccionados si en ese momento están ocultos:
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("p").show()
});
</script>
</head>
<body>
<p style="display:none">Hello 1</p>
</body>
</html>
JQuery
hide(): Oculta un elemento que en ese momento se está mostrando.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("p").hide();
$("a").click(function () {
$(this).hide();
return true;
});
});
</script>
</head>
<body>
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
</body>
</html>
JQuery
toggle(): es una combinación de los dos anteriores. Toggle() oculta un elemento si está visible, y lo muestra si no está visible:
eugeniaperez.es
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
</body>
</html>
JQuery
slideDown(): Hace aparecer un
elemento en la página mediante
un efecto de cortina descendente.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
});
</script>
<style>
div { background:#de9a44; margin:3px; width:80px;
height:40px; display:none; float:left; }
</style>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
</body>
</html>
JQuery
slideUp():Consigue el mismo
resultado que slideDown(), pero
en este caso el efecto de cortina
es ascendente.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").show("slow");
} else {
$("div").slideUp();
}
});
});
</script>
<style>
div { background:#3d9a44; margin:3px; width:80px;
height:40px; float:left; }
</style>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
JQuery
fadeIn(): Hace aparecer un
element en la página poco a poco
ajustando su opacidad.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$(document.body).click(function () {
$("div:hidden:first").fadeIn("slow");
});
});
</script>
<style>
span { color:red; cursor:pointer; }
div { margin:3px; width:80px; display:none;
height:80px; float:left; }
div#one { background:#f00; }
div#two { background:#0f0; }
div#three { background:#00f; }
</style>
</head>
<body>
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
JQuery
fadeOut(): Similar a fadeIn(), pero
en este caso para hacer
desaparecer un element.
eugeniaperez.es
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("p").click(function () {
$("p").fadeOut("slow");
});
});
</script>
<style>
p { font-size:150%; cursor:pointer; }
</style>
</head>
<body>
<p>
If you click on this paragraph
you'll see it just fade away.
</p>
</body>
</html>
JQuery
jQuery UI nos proporciona la posibilidad de enriquecer nuestra interfaces de usuario con multitud de efectos, controles, etc., ya predefinidos.
A continuación veremos algunos de los más comunes, pero en el siguiente enlace tienes la lista completa:
eugeniaperez.es
JQuery
Es útil atraer la atención del usuario hacia algún lado de la página cuando ésta contiene información relevante
(si bien las normas de usabilidad aconsejan no abusar de este tipo de efectos).
eugeniaperez.es
JQuery
Por ejemplo, en algunos sitios Web se puede ver que cuando el usuario introduce incorrectamente sus datos de login, la página además de mostrarle un mensaje de error, hace moverse al componente que contiene los campos de usuario y contraseña.
eugeniaperez.es
JQuery
En los EJEMPLOS, descarga el ejemplo de LoginShake:
eugeniaperez.es
JQuery
eugeniaperez.es
<form id="loginSample" style="border: 3px solid rgb(153, 153, 153); width: 300px; padding: 6px;">
<p>
<label for="username">Username:</label>
<input id="username" type="text">
</p>
<p>
<label for="password">Password:</label>
<input id="password" type="password">
</p>
<p>
<input type="submit" value="Login">
</p>
</form>
<p>
<input type="button" id="bounce" value="Bounce">
<input type="button" id="highlight" value="Highlight">
<input type="button" id="pulsate" value="Pulsate">
<input type="button" id="shake" value="Shake">
</p>
<script type="text/javascript">
$("#bounce").click(function () {
$("#loginSample").effect("bounce");
});
$("#highlight").click(function () {
$("#loginSample").effect("highlight");
});
$("#pulsate").click(function () {
$("#loginSample").effect("pulsate");
});
$("#shake").click(function () {
$("#loginSample").effect("shake");
});
$.webshims.polyfill();
</script>
JQuery
Para utilizar jQuery UI:
eugeniaperez.es
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
Incluir la CSS de la jquery ui
Incluir jquery y jquery ui
JQuery
Puedes ver efectos de jQuery UI aquí:
eugeniaperez.es
JQuery
Compatibilidad hacia atrás HTML5:
Verás que en el código anterior aparecen referencias a librerías JS como modernizr o polyfill. En este caso, ambas librerías están intentando llenar el hueco que tienen en cuanto a HTML5 navegadores antiguos.
Los atributos HTML5 no son reconocidos por versiones de IE8 o anteriores...
eugeniaperez.es
JQuery
Echa un vistazo a esta web:
http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html
Aquí tienes otro enlace interesante:
http://codylindley.com/blogstuff/js/jquery/#
eugeniaperez.es
JQuery
Los atributos
Métodos del DOM
Eventos
Efectos
eugeniaperez.es
JQuery
Actividad 1
Actividad 2
Actividad 3
Actividad 4
eugeniaperez.es
Act. 3: Catálogo de Ikea
Act. 4: Animación de Pikachu
JQuery
Actividad 1
Actividad 2
Actividad 3
eugeniaperez.es