J Query

Introduccin a DOM: HTML y jQuery
Primeros pasos
A continuacin vamos a iniciar nuestra magia con jQuery usando la sintaxis $

(document).ready(); que ya viste. Funciona de esta manera:
$() dice: "Miren, estn a punto de pasar cosas que tienen que ver con jQuery!"
Si ponemos document entre parntesis sabemos que vamos a hacer magia en el

mismo documento HTML.
.ready(); es una funcin, o una accin bsica, en jQuery. Dice: "Voy a hacer algo
apenas est listo el documento HTML!"

Lo que est entre los parntesis de.ready() es el evento de jQuery, que ocurre en
cuanto el documento HTML est listo.
Entonces,
$(document).ready(algo);
dice: "cuando el documento HTML est listo, hac algo!" (En el siguiente ejercicio
te vamos a mostrar cmo reemplazar algo con una accin).
Fijate que .ready(); termina con un punto y coma. Esto le indica a jQuery que
terminaste de darle una orden.
El enfoque funcional
Perfecto! Ahora necesitamos agregar algo dentro de nuestra funcinready().

Acordate de que cuando hablamos de "funcin", pods pensar en "accin." Las
funciones son la unidad bsica con la que se trabaja en jQuery.
Por eso, jQuery incluye la palabra clavefunction. La sintaxis se ve as:
function(){
magia de jQuery;
}
Si agregamos nuestra funcin dentro de nuestro .ready(), jQuery ejecutar el

cdigo de nuestra funcin en cuanto se cargue el documento HTML. La sintaxis se
ver de esta manera:
$(document).ready(function() {
magia de jQuery;
});
Acordate de que cerramos nuestras sentencias de jQuery con un punto y coma.
Deslizamiento electr(n)ico
Ya casi terminamos! Ahora solamente tenemos que incluir una accin en el cuerpo
de nuestra funcin. En este caso vamos a hacer un encabezadodiv deslizable para
que se haga visible en nuestra pgina HTML.
Entre las {} de nuestra function(), vamos a convertir nuestro div en un objeto de
jQuery, para que jQuery pueda manipularlo. De forma muy parecida a como
usamos .ready() en$(document), vamos a usar la accin.slideDown() en nuestro
objeto divde jQuery.
Dentro de los parntesis de.slideDown, vamos a indicarle la rapidez con la que
debe deslizarse. Vamos a escribir 'slow' (es decir, despacio). No te olvides de
poner las comillas.
...y afuera!
Excelente! Tu botn se ve genial: resalta cuando el usuario mueve el cursor sobre

l.
Sin embargo, vas a ver que el botn queda opaco an despus de alejar el cursor
de l. Lo que queremos es que nuestro botn se vuelva claro de nuevo cuando
alejamos el cursor.
Seguro que ya adivinaste que jQuery tambin incluye la accinmouseleave(). Si lo
hiciste, ests en lo cierto! (Si sos curioso, pods aprender ms acerca de estas
acciones en losdocumentos de jQuery.)
$('div').mouseenter(function() {
$('div').fadeTo('fast', 1);
});
$('div').mouseleave(function() {
$('div').fadeTo('fast', 0.5);
});
});
div {
height: 60px;
width: 100px;
border-radius: 5px;
background-color: #69D2E7;
text-align: center;
color: #FFFFFF;
font-family: Verdana, Arial, Sans-Serif;
opacity: 0.5;
}
<html>
<head>
<title>Magia del botn</title>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<script type='text/javascript' src='script.js'></script>
</head>
<body>
<div><br/><strong>Hac clic ac.</strong></div>
</body>
</html>
Funciones, Parte I: $(document).ready
Las funciones son la unidad de accin bsica de jQuery. El principal punto de

entrada de la mayora de las aplicaciones de jQuery es un bloque de cdigo que se
ve as:
Realiza una accin
});
Vamos a examinarlo parte por parte.

$(document) es un objeto de jQuery. La parte de $() es en realidad una funcin
disfrazada; convierte adocument en un objeto de jQuery.

.ready() es una especie de funcin; imaginate que es como un ayudante que
ejecuta el cdigo que tiene entre sus parntesis, en cuanto el documento HTML
est listo.
function(){} es la accin que ejecutar .ready() tan pronto como se cargue el
documento de HTML. (En el ejemplo anterior, la parte Realiza una accin es el

lugar donde va dicha accin.)
La prctica hace al maestro! Empez tu cdigo jQuery en la pestaa script.jscon $
(document).ready() y pasale una funcin que oculte inmediatamente eldiv de color
naranja de la ventana de Resultados. (Pods usar el efecto jQuery .hide() para

hacerlo).
Funciones, Parte II: funciones explicadas

Una funcin est compuesta de tres partes: la palabra clave function, los
argumentos que la funcin tome (que van entre () y se separan por comas si se
trata de ms de uno), y cualquier accin que la funcin deba ejecutar (estas
acciones van entre {}). Generalmente as:
function(argumento1, argumento2, etc.) {
Realiz una accin

Realiz otra accin
Realiz otra accin ms!
}
Una de las ventajas de jQuery es que el argumento de una funcin puede ser casi
cualquier cosa, incluso puede ser otra funcin! Por eso .ready() puede incluir
a function entre sus parntesis; toma una funcin como argumento.
(Si te interesa, pods aprender ms acerca de las funciones en los cursos de
JavaScript.
Variables
Las variables nos sirven para guardar informacin que queremos usar ms
adelante. Las variables pueden guardar cualquier tipo de informacin con la que
trabajs, as que pens que son como envases.
El signo = se usa para asignar valores. Por ejemplo, en jQuery pods escribir:
var lucky = 7; var name ="Codecademy"; var $p = $('p');
Nuestra primera variable tiene un nmero 7, mientras que la segunda variable tiene
algo de texto: "Codecademy". Nuestra tercera variable guarda el resultado de un
selector jQuery '$('p')' en la variable'$p'. Como pods ver, esto es solo una manera
fcil de guardar informacin para ms adelante.
Para qu haramos eso? Bueno, hasta ahora no tuvimos que modificar nada ms
de una vez. Si quisiramos modificar la pgina web con nueva informacin,
tendramos que guardar esa informacin en variables. Quizs quers crear una
pgina que se cargue y que desaparezca cuando recibs esa informacin. En ese
caso sera una buena idea usar variables.
$p vs. $('p')
Probablemente te diste cuenta de que en el ejercicio anterior usamos $ y$():

var $p = $('p');
Existe una pequea diferencia entre los dos.

$p es simplemente un nombre de variable. No hay nada de mgico en el$ de $p;
es solamente una convencin para decir: "Mir, esta variable contiene un objeto de
jQuery". Podemos llamar a $p de cualquier
manera: $parrafo, parrafo,vacas_espaciales, de cualquier forma! Simplemente es
una ayuda para las personas que leen nuestro cdigo que vean $p, ya que es una
forma concreta de decir "Mir, ac hay un objeto de jQuery 'p'".
Pero por otra parte, $() s es mgico. Esta es la funcin disfrazada que crea
objetos de jQuery. Si ests creando un objeto de jQuery, tens que usarlo!
Uso de funciones para seleccionar elementos

HTML
Ahora que sabs ms sobre la manera en que operan las funciones, entends
cuando decimos algo as:
$('div').hide();
});
Le estamos pasando a .ready() una funcin (que no toma argumentos; por eso es
que sus () estn vacos), y el trabajo de esa funcin es ocultar, con.hide(), el
objeto div de jQuery.
Seleccin mediante ID
Si podemos seleccionar elementos por su clase, tambin podemos seleccionarlos

por ID. Esto lo hacemos escribiendo el nombre de ID (entre comillas) dentro de $().
As como necesitamos el . para las clases, tambin necesitamos usar # para los
ID. Podemos modificar aid="encabezado" as:
$('#encabezado');
El punto y coma al final es importante: es la manera en que jQuery sabe que le

estamos dando una orden. Por ahora, una buena regla prctica es que escribas
punto y coma al final de cualquier lnea que no termine con una{ abierta. (El editor
tratar de ayudarte con la ubicacin de los punto y coma, as que prest atencin a
los mensajes de advertencia.) En Te trabaste? Te damos un consejo pods ver los
ejemplos del uso correcto e incorrecto del punto y coma.
<!DOCTYPE html>
<html>
<head>
<title>Acto de desaparicin</title>
</head>
<body>
<div id="azul"></div>
<div></div>
<div></div>
<div></div>
<br/><button>Hac clic!</button>
</body>
</html>
div {
height: 100px;
width: 100px;
display: inline-block;
background-color: #F38630;
border-radius: 5px;
}
#azul {
background-color: #A7DBD8;
}
$('button').click(function() {
$('#azul').fadeOut('slow');
});
});
Introduccin a las funciones

Funciones, Parte I: $(document).ready
Funciones, Parte II: funciones explicadas
Variables
$p vs. $('p')
Cmo usar los selectores
Uso de funciones para seleccionar elementos HTML
Seleccin mediante clases
Seleccin mediante ID
Selecciones flexibles
'this' es importante!
jQuery funcional
Listo?
Hac clic y tir
Cmo deslizar nuestro panel
Bien hecho!
Course by codecademy-translators
Funciones y selectores de jQuery
'this' es importante!
En la ltima leccin, tenamos un cdigo que se vea as:

$('div').mouseenter(function() {
$('div').hide();
});
});
La segunda lnea est bien: nos dice que cuando pasamos el cursor sobre un div,
debe ejecutarse una accin determinada. Sin embargo, $('div').hide(); no solamente
ocultar el div sobre el que pass el cursor; tambin ocultar todos los divde la
pgina. Cmo podemos indicarle a jQuery que solamente queremos
afectar este div en particular?
Con this, por supuesto!
La palabra clave this (este) se refiere al objeto de jQuery con el que estamos
trabajando en ese momento. Las reglas de operacin son un poco complejas, pero
lo importante es entender que si uss un controlador de eventos(eventos es el
nombre elegante de las acciones como .click() y.mouseenter(), ya que controlan
eventos de jQuery) en un elemento, pods llamar al evento que ocurre (tal
como fadeOut()) en $(this), y el evento solamente afectar al elemento con el que
hacs algo en ese momento (por ejemplo, sobre el que se hace clic o se pasa el
cursor).
$('div').click(function() {
$(this).fadeOut('slow');
});
});
Listo?
Muy bien! Es hora de usar nuestros conocimientos recin adquiridos de jQuery

para agregar otro componente interactivo a nuestro sitio web: un panel deslizante
que se mueva hacia arriba y hacia abajo cuando hacemos clic sobre l.
Ya escribimos el HTML y CSS que necesits. Tu misin: animarlo con jQuery.
<!DOCTYPE html>
<html>
<head>
<title>Panel deslizante</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link>
</head>
<body>
<div class="panel">
<br />
<br />
<p>Ahora me ves!</p>
</div>
<p class="desliza"><a href="#" class="tirar">Deslizar hacia
arriba/abajo</a></p>
</body>
</html>
body {
margin:0 auto;
padding:0;
width:200px;
text-align:center;
}
a:hover{
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}
.panel {
background: #ffffbd;
background-size:90% 90%;
height:300px;
display:none;
font-family:garamond,times-new-roman,serif;
}
.panel p{
text-align:center;
}
.desliza {
margin:0;
padding:0;
border-top:solid 2px #cc0000;
}
.tirar {
display:block;
position:relative;
right:-25px;
width:150px;
height:20px;
font-family:arial,sans-serif;
font-size:14px;
color:#ffffff;
background:#cc0000;
text-decoration:none;
-moz-border-bottom-left-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.tirar p {
text-align:center;
}
Hac clic y tir
Qu bien! Ahora queremos activar un evento cuando se hace clic sobre la pestaa
"Deslizar hacia arriba/abajo" (la clase de esa pestaa es tirar).
Cmo deslizar nuestro panel
Perfecto! Solo un paso ms: necesitamos decirle a .click() qu tiene que hacer. En
este caso, cuando hagamos clic sobre la pestaa, queremos que nuestro panel
deslizable (que tiene la clase .panel) se abra o se cierre.
El evento de jQuery que necesitamos para deslizar nuestro panel es (adivinaste):
.slideToggle()! Le daremos un argumento, que es la velocidad de la animacin de
deslizamiento.
$('.tirar').click(function() {
$('.panel').slideToggle('slow');
});
});
Modificar elementos de HTML
Crear elementos de HTML
La adicin dinmica de elementos a nuestra pgina de HTML es una herramienta

poderosa: nos permite no solamente modificar el formato, sino laestructura misma
de nuestros sitios web como respuesta a las interacciones de los usuarios. Por
ejemplo, cuando usas Gchat, cada mensaje es un nuevo <div> que se agrega de
forma dinmica a la pgina. Genial, no?
Si lo penss, es ms o menos lo que ya hicimos: establecer una variable que sea
igual a un objeto de jQuery. Sin embargo, en este caso, en lugar de tener
simplemente algo como:
$p = $('p');
Lo que queremos hacer es pasar un elemento completo de HTML entre comillas:

$p = $("<p>Soy un prrafo nuevo!</p>");
Cuando escribimos un texto as entre comillas, lo llamamos string (es decir, una
"cadena de caracteres"). De ahora en adelante, cada vez que digamos "string" o
"cadena" pods pensar en un "texto" o "frase." Las cadenas siempre van en medio
de comillas inglesas o simples.
Insertar elementos
Podemos insertar nuestros elementos recin creados usando algunas acciones de

jQuery.
.append() insert el elemento especificado como el ltimo hijo del elemento al que
apunta. .prepend()inserta el elemento especificado como el primer hijo del

elemento al que apunta. Si tenemos un div con clase.info,
$('.info').append('<p>Algo!</p>');
$('.info').prepend('<p>Algo!</p>');
agregamos un prrafo con el texto "Algo!" dentro de todos los divs con
clase .info. .append() har que el prrafo sea el ltimo hijo de cada
div;.prepend() har que el prrafo sea el primer hijo de cada div. (Nota: mir el
consejo si ests usando comillas simples).
.appendTo() hace lo mismo que.append(), pero invierte el orden de "lo que hay que
agregar" y "donde agregarlo". El cdigo

$('<p>Algo!</p>').appendTo('.info');
tiene el mismo efecto que el cdigo.append() anterior. .prependTo() tiene una

relacin parecida con .prepend().
Antes y despus
Podemos especificar en qu parte del DOM insertamos un elemento con las

funciones .before() y .after(). La sintaxis es as:
$('objetivo').after('<etiqueta>Adicin</etiqueta>');
Donde 'objetivo' es el elemento despus del cual agregs algo, y la parte entre
las <etiqueta>s es el elemento de HTML que quers agregar. Pods
agregar <h1>, <div>, o cualquier otro HTML vlido que quieras.
Mover elementos
Mover los elementos por el DOM es muy fcil; todo lo que debemos hacer es usar
las funciones de jQuery que aprendimos, en los elementos existentes, en lugar de
crear unos nuevos.
var $paragraph = $("p"); // existing element
$("div").after($paragraph); // Move it!
// Same as:
$("div").after($("p"));
1.
2.
Podemos seleccionar un elemento usando $("p") y asignarlo a una variable.

Podemos mover la posicin en el DOM usando la variable en nuestra
sentenciaafter().
Nota: Esto no copia el elemento de una ubicacin a otra. Mueve el elemento
originario en forma efectiva, ahorrndote tener que eliminar el original.
Eliminar elementos
Agregar elementos a nuestros documentos HTML es genial, pero nuestras pginas

muy pronto estaran abarrotadas sin la posibilidad de quitarlos. Afortunadamente
contamos con dos funciones de jQuery, .empty()y .remove(), que nos ayudan a
eliminar el contenido de nuestras pginas.
.empty() elimina el contenido y todos los descendientes de un elemento. Por
ejemplo, si uss .empty() en un 'ol', tambin eliminars todos sus 'li' y su texto.
.remove(), no solo elimina el contenido de un elemento, sino que tambin elimina el
elemento en s.
Agregar y eliminar clases
No tenemos que limitarnos a agregar o eliminar elementos completos; podemos

potenciar nuestros superpoderes de jQuery para modificar las clases, las hojas de
estilo cascada (CSS), e incluso los contenidos de nuestros elementos de HTML.
Empecemos con las clases. jQuery incluye dos
funciones: .addClass() y.removeClass(), que se pueden usar para agregar o
eliminar una clase de un elemento. Esto es muy til si, por ejemplo, tens una
clase .resaltarque le quers aplicar a un elemento cuando haces clic sobre l.
La sintaxis es as:
$('selector').addClass('NombreDeClase');
$('selector').removeClass('NombreDeClase');
en donde 'selector' es el elemento de HTML que quers y'NombreDeClase' es el

nombre de clase que vas a agregar o eliminar.
Acordate: no ests seleccionando nada. Ests modificando tu elemento. Esto
significa que no necesits # ni . antes de tu clase.
Cambiar tu estilo
Pero, si queremos ajustar valores individuales de propiedades de hojas de estilo

cascada (CSS)? No hay problema: jQuery tiene una funcin para hacerlo.
Debido a que es muy comn cambiar el tamao de los elementos, jQuery tiene las
funciones especficas.height() y .width() que pueden usarse para cambiar la altura
y el ancho de los elementos de HTML. Por ejemplo:
$('div').height('100px');
$('div').width('50px');
le dar a todos los <div> de la pgina una altura de 100 pixeles y un ancho de 50
pixeles.
jQuery tambin incluye una funcin.css() para fines generales que toma dos
entradas: la primera es el elemento de CSS que se va a modificar y la segunda es
el valor que se le dar. Por ejemplo:
$('div').css('background-color','#008800');
le dar a todos los <div> de la pgina un color de fondo verde. Pods modificar
cualquier elemento de atributos CSS de esta manera.
Modificar el contenido
Por ltimo, podemos actualizar los contenidos de nuestros elementos de HTML; es

decir, la parte que est entre las etiquetas de cierre y de apertura, usando las
funciones .html() y.val().
Se puede usar .html() para obtener el contenido del primer elemento que coincida.
Por ejemplo:
$('div').html();
recuperar el contenido HTML delprimer div que encuentre, y

$('div').html("Me encanta jQuery!");
cambiar el contenido del primer div que encuentre por "Me encanta jQuery!"
.val() se usa para obtener el valor de los elementos de formularios. Por ejemplo,
$('input:checkbox:checked').val();
recuperar el valor de la primera casilla de seleccin activada que jQuery

encuentre.
Preparacin
Ahora tenemos que poner en prctica lo que acabamos de aprender. En esta

seccin vamos a construir una lista interactiva de "Cosas para hacer", que
agregar tems a una lista de verificacin y los eliminar cuando se van tildando.
Pusimos el HTML y CSS necesarios; vos tens que escribir el jQuery.
Hac clic en el botn, ya!
Fijate que creamos un formulario de HTML para obtener los datos de parte del
usuario. Debemos almacenar los datos del usuario en una variable que nos
permitir agregar esos datos al cuerpo del documento HTML ms adelante.
Pods establecer una variable igual al contenido del campo de entrada
usando .val(), as:
//Obtener la variable de una entrada
var input = $('input[name=checkListItem]').val();
1.
2.
Nuestro selector encuentra la entrada especfica usando un selector css en

nuestra entrada checkListItem.
Llamamos al val() para obtener el valor del campo.
3. Agregar un cuerpo
4. Perfecto! Ahora queremos agregar nuestro elemento HTML al documento.

Esto se puede hacer usando la funcin.append().
5. Vamos a usarla en nuestro div con la clase .lista. Agregaremos
un <div>con class="item", ya que ms adelante vamos a querer manipular
nuestro<div> agregado cuando vayamos a eliminar los <div>. (Una lista de
Cosas para hacer no es buena si no podemos tachar cosas en ella.)
6. Queremos que el contenido de nuestro div sea el contenido de nuestro
campo de entrada, que habamos guardado en la variable Agregar. Eso
quiere decir que cuando usamos la funcin, queremos agregar
7.
'<div class="item">' + Agregar + '<
Elimin lo seleccionado
Muy bien! Por ltimo, queremos poder eliminar tems de nuestra lista.
Pods pensar que podramos hacer esto:
$('.item').click(function() {
$(this).remove();
});
y no es mala idea. El problema es que no funcionara; jQuery busca todos

los.item cuando DOM se carga, as que, para cuando tu documento est listo, ya
habr decidido que no hay ningn.item para eliminar con .remove(), y tu cdigo no
funcionar.
Para esto necesitaremos un nuevo controlador de eventos: .on(). Imaginate
que .on() es un controlador general que toma el evento, su selector, y una accin
como datos de entrada. La sintaxis queda as:
$(document).on('evento', 'selector', funcion() {
Realizar una accin!
});
En este caso, 'evento' ser 'click','selector' ser '.item', y lo que queremos hacer
es llamar a .remove()en this.
Animation
var myName = "Franky";
var
var
var
var
var
var
red = [0, 100, 63];

irange = [40, 100, 60];
green = [75, 100, 40];
blue = [196, 77, 55];
purple = [280, 50, 60];
letterColors = [black, blue, green, blue, red];
drawName(myName, letterColors);
if(10 < 3)
{
bubbleShape = 'square';
}
else
{
bubbleShape = 'square';
}
bounceBubbles();
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery1.10.2.min.js"></script>
<script type="text/javascript"
src="http://s3.amazonaws.com/codecademy-content/courses/hour-ofcode/js/alphabet.js"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript"
src="http://s3.amazonaws.com/codecademy-content/courses/hour-ofcode/js/bubbles.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Repaso de eventos de jQuery
Ya sabs un montn sobre eventos de jQuery, pero nunca est de ms repasar los
conceptos bsicos.
El cdigo casi siempre es as:
$('elementoParaTocar').evento(function() {
$('elementoAfectado').efecto();
});
});
donde "elemento para tocar" es el elemento HTML sobre el que hars clic, pasars
el puntero, o con el que interactuars de otro modo; y "elemento afectado" es el
elemento HTML que se desvanece, cambia de tamao, o que sufre alguna otra
transformacin.
Algunas veces los dos elementos se refieren a uno solo: pods pasar el cursor
sobre un <div> para cambiar su opacidad. Otras veces interactas con un
elemento aparte; por ejemplo, pods hacer clic en un botn para cambiar el
tamao de un<div>.
A veces, si quieres que un efecto ocurra de inmediato, sin un evento

como.click() o .hover(), podss omitir la segunda lnea del ejemplo anterior:
$('elementoAfectado').efecto();
});
<!DOCTYPE html>
<html>
<head>
<title>Resultado</title>
</head>
<body>
<form>
MENSAJE: <input type="text" name="mensaje" value="Escrib ac tu
texto!">
</form>
<button>Agregar!</button><br/>
<div id="mensajes"></div>
</body>
</html>
form {
font-size: 12px;
font-family: Verdana, Arial, Sans-Serif;
display: inline-block;
}
#mensajes {
font-size: 14px;
font-family: Garamond, Times, Serif;
}
$('button').click(function() {
var Agregar = $("input[name=mensaje]").val();
$('#mensajes').append("<p>"+Agregar+"</p>");
});
});
Vayamos al grano
Vamos a repasar rpidamente como activar un efecto sin un controlador especial
de eventos como .click(); simplemente queremos que nuestro efecto ocurra tan
pronto como nuestrodocument est listo ( .ready() ).
Acordate: la prctica hace al maestro!
Instrucciones
Tu div representa al planeta Krypton. Usa .fadeOut() y 'fast' para que se

desvanezca rpidamente! (Hac que ocurra inmediatamente, sin necesidad de
hacer clic.)
<!DOCTYPE html>
<html>
<head>
<title>Bum!</title>
</head>
<body>
<div></div>
</body>
</html>
body {
background-image: url('http://bit.ly/UpQgJ6');
repeat: no-repeat;
}
div {
height: 100px;
width: 100px;
border-radius: 100%;
background-color: #008800;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(#003500), to(#008800));
background-image: -webkit-linear-gradient(left, #003500, #008800);
background-image: -moz-linear-gradient(left, #003500, #008800);
background-image:
-ms-linear-gradient(left, #003500, #008800);
background-image:
-o-linear-gradient(left, #003500, #008800);
}
.rojo {
background-color: #CC0000;
from(#330000), to(#CC0000));
background-image: -webkit-linear-gradient(left, #330000, #CC0000);
background-image: -moz-linear-gradient(left, #330000, #CC0000);
background-image:
-ms-linear-gradient(left, #330000, #CC0000);
background-image:
-o-linear-gradient(left, #330000, #CC0000);
}
$('div').fadeOut('fast');
});
Combinar .click() y .hover()
Muy bien! Vamos a agregar un evento ms de jQuery a nuestra simulacin de

"destruccin de Krypton". Krypton no solo se desapareci sino que explot!
Hagmoslo volverse rojo.
$('div').hover(function(){
$('div').addClass('green');
});
1.
Siguiendo el patrn que estuvimos aprendiendo, nos centramos en Krypton,

nuestro $('div')
2.
Despus aplicamos nuestro evento hover event a nuestro objetivo.
3.
Finalmente, ejecutamos el cdigo dentro de la function(){} que le agrega

una clase de verde a nuestra etiqueta.
<!DOCTYPE html>
<html>
<head>
<title>Bum!</title>
</head>
<body>
<div></div>
</body>
</html>
body {
background-image: url('http://bit.ly/UpQgJ6');
repeat: no-repeat;
}
div {
height: 100px;
width: 100px;
border-radius: 100%;
background-color: #008800;
from(#003500), to(#008800));
background-image: -webkit-linear-gradient(left, #003500, #008800);
background-image: -moz-linear-gradient(left, #003500, #008800);
background-image:
-ms-linear-gradient(left, #003500, #008800);
background-image:
-o-linear-gradient(left, #003500, #008800);
}
.rojo {
background-color: #CC0000;
from(#330000), to(#CC0000));
background-image: -webkit-linear-gradient(left, #330000, #CC0000);
background-image: -moz-linear-gradient(left, #330000, #CC0000);
background-image:
-ms-linear-gradient(left, #330000, #CC0000);
background-image:
-o-linear-gradient(left, #330000, #CC0000);
}
$(document).ready(function(){
$('div').click(function(){
$('div').hover(function(){
$(this).addClass('rojo');
$('div').fadeOut('fast');
});
});
});
Hover (pasar sobre algo)
Viste ese efecto que se usa en muchas pginas web que se produce cuando
pass el mouse sobre un objeto y desaparece cuando lo alejs?
$('div').hover(
function(){
$(this).addClass('highlight');
},
function(){
$(this).removeClass('highlight');
}
);
1.
Primero elegimos el elemento que queremos modificar $('div')
2.
Fijate que nuestro efecto hover puede asumir dos funciones functions()
{}separadas por una coma. La coma es muy importante.
3.
La primera funcin function(){} que pongamos se ejecutar la primera vez

que pasemos el botn por nuestro objetivo. Ac aplicamos un tipo de resaltado.
4.
La segunda funcin function(){} se llamar cuando nuestro mouse se vaya

del objeto. Ac es cuando sacamos el resaltado.
La segunda funcin function(){} no tiene porqu ser opuesta a la primera funcin,
pero es muy comn que lo sea.
Vamos a usar .focus()!
Otro evento que podemos usar es.focus(). Decimos que un elemento

tiene foco cuando hacemos clic sobre l o usamos tab en l. Si alguna vez
completaste un formulario en una pgina web y viste cmo cada cuadro de texto se
ilumina cuando usas tab en l o hacs clic sobre l, entonces viste el controlador
de eventos 'focus' en accin!
El controlador de eventos .focus()solamente funciona en los elementos que pueden

recibir foco; la lista de estos elementos es un poco vaga, pero los elementos de
HTML como<textarea> e <input> son los principales sospechosos.
Mir el formulario que pusimos en la ventana de Resultados. Si hacs clic en el
campo de entrada, vas a ver que se ilumina automticamente con un tono celeste.
Como el celeste es para bebs, queremos que nuestro resaltado sea rojo.
Podemos hacer esto usando dos herramientas: .focus() y la funcin.css() que
acabamos de ver. Queremos escribir un cdigo de jQuery que cambie el 'outlinecolor' de nuestro 'input' a 'rojo' cuando tenga foco.
El evento .keydown()
En jQuery, no ests limitado a usar los elementos con el mouse; tambin pods
activar eventos usando el teclado.
El evento .keydown() se activa cuando se presiona un botn en el teclado. Solo
funciona en cualquier elemento de la pgina que tenga foco, as que, para ver su
efecto, tendrs que hacer clic en la ventana que contiene tu div antes de tocar una
tecla.
Combinemos nuestro evento con un nuevo efecto: .animate(). Lo usaremos para
mover un objeto en la pantalla cuando toquemos una tecla.
El efecto .animate() toma dos parmetros: la animacin que se va a realizar, y el
tiempo en el cul se realizar. Ac hay un ejemplo:
$('div').animate({left:'+=10px'},500);
});
Esto tomar el primer div que encuentre y lo mover diez pixeles a la derecha.
Acordate de que al aumentar la distancia desde el margen izquierdo se mueve algo
hacia la derecha; la parte de += es solamente una manera de decir "sumale diez
al nmero que est ah." En este caso, le agrega diez pixeles a la distancia actual
desde el margen izquierdo.
Eventos de jQuery
Completar los casos
Buen trabajo! Ahora es momento de animar nuestro personaje segn las acciones
del usuario en el teclado.
Cada tecla que se toca en un teclado se traduce en un nmero para que use la
computadora. No te preocupes por memorizarlos, por ahora te dimos lo bsico
en script.js.
// Flecha izquierda presionada

case 37:
('img').animate({left: "-=10px"}, 'fast');
1.
La flecha izquierda de tu teclado traduce al nmero 37 a la computadora.

Cuando se presiona esa tecla animamos nuestra imagen a la izquierda restando
10px.
2.
Para mover hacia arriba restamos 10px desde la parte superior (nmero
38).
3.
4.
Para mover hacia la derecha, agregamos 10px a la izquierda (nmero 39).

Finalmente, para mover hacia abajo agregamos 10px a la parte superior
(nmero 40).
Pods agregar Arriba, Abajo y a la Derecha? Qu pasa si agregs pixeles pixels
+=10px en vez de restar?
$(document).keydown(function(key) {
switch(parseInt(key.which,10)) {
case 37:
$('img').animate({left: "-=10px"}, 'fast');
break;
case 38:
$('img').animate({top: "+=10px"}, 'fast');
break;
case 39:
$('img').animate({left: "+=10px"}, 'fast');
break;
case 40:
$('img').animate({top: "+=10px"}, 'fast');
break;
}
});
});
Ms prctica con .animate()
Vamos a practicar un poco ms el efecto .animate(). Es el que tiene parmetros un

poco ms complicados; si quisiramos mover un 'div' 10 pixeles hacia abajo,
escribiramos algo como
$('div').animate({top:'+=10px'},500);
En este caso el fragmento de cdigo que est entre las llaves dice: "Dale jQuery!
Agreg 10 pxeles al margen superior actual", y el segundo parmetro dice:
"Hacelo en 500 milisegundos!" (1.000 milisegundos = un segundo.)
.bounce()
Genial, no? Pero podemos hacer mucho ms que simplemente explotar cosas.
Otro efecto posible es 'bounce'. Lo usamos como un parmetro de.effect() igual
que 'explode', pero agregamos un parmetro adicional para decirle cuntas veces
rebotar. El siguiente cdigo har que nuestro'div' rebote dos veces en 200
milisegundos:
$('div').effect('bounce', {times:2}, 200);
Efectos especiales
El efecto .effect() contiene toda clase de caractersticas mgicas, pero no es lo
ms asombroso que puede hacer jQuery UI. La biblioteca tiene una cantidad de
efectos incorporados que pueden hacer que tu sitio web quede muy bien y con un
aspecto profesional, con muy poco cdigo.
Pods aprender ms si consults ladocumentacin de jQuery UI!
<!DOCTYPE html>
<html>
<head>
<title>Miren!</title>
<link rel='stylesheet' type='text/css'
href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jqueryui.min.js"></script>
</head>
<body>
<div id="menu">
<h3>jQuery</h3>
<div>
<p>jQuery es una biblioteca de JavaScript que hace que tus sitios
web queden espectaculares.</p>
</div>
<h3>jQuery UI</h3>
<div>
<p>jQuery UI incluye an ms caractersticas de jQuery!</p>
</div>
<h3>JavaScript</h3>
<div>
<p>JavaScript es un lenguaje de programacin que se usa en
navegadores web, y es el componente principal de jQuery y jQuery UI.
Pods aprender sobre JavaScript con la <a
href="http://www.codecademy.com/tracks/javascript" target="blank"
style="text-decoration:none; color:#F39814">serie de ejercicios de

JavaScript</a> ac en Codecademy.</a></p>
</div>
</div>
</body>
</html>
$("#menu").accordion({collapsible: true, active: false});
});
Auto de carreras
jQuery UI tiene una funcin.draggable() que permite arrastrar cualquier elemento

de HTML; pods hacer clic en l y moverlo a cualquier parte de la pgina!
Pensamos que debs de estar cansado de los bloques <div>, as que te hicimos
un auto CSS que nos dio mucho trabajo.
Un cambio de tamao les queda a todos
No te encant nuestro auto? Nos llev meses hacerlo! Entonces vamos a volver
a los <div> comunes y corrientes!
(Es en broma: estuvimos sigloshaciendo ese autito!)
Instrucciones
Llam a la funcin .resizable() a tu'div'. Hac clic en Guardar y enviar, and a la

ventana de Resultados y cambi el tamao de tu <div> como quieras!
Vamos a poner las cosas en orden
Las listas son geniales, y jQuery UI las hace todava mejores. Si bien seleccionar
es algo grandioso, no necesariamente hace que nuestra lista sea tan dinmica
como quisiramos; qu pasa si queremos reordenar los elementos en nuestra
lista?
Presentamos la funcin .sortable().
jQuery UI, hay algo que no puedas hacer?
Muy bien! Es momento de usar jQuery UI para crear ese asombroso men estilo
desplegable que vimos en la ltima seccin. Para eso usaremos la funcin
incorporada de jQuery UI que se llama .accordion(). (Qu prctico, no?)
Sin embargo, primero vamos a necesitar algunos otros elementos HTML.
Sac tu .accordion()!
Perfecto! Ahora, todo lo que necesitamos es llamar a .accordion()en

nuestro '#menu'.

J Query

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

J Query

Uploaded by

Copyright:

Available Formats

Introduccin a DOM: HTML y jQuery

A continuacin vamos a iniciar nuestra magia con jQuery usando la sintaxis $

Si ponemos document entre parntesis sabemos que vamos a hacer magia en el

apenas est listo el documento HTML!"

Perfecto! Ahora necesitamos agregar algo dentro de nuestra funcinready().

Si agregamos nuestra funcin dentro de nuestro .ready(), jQuery ejecutar el

Acordate de que cerramos nuestras sentencias de jQuery con un punto y coma.

Excelente! Tu botn se ve genial: resalta cuando el usuario mueve el cursor sobre

Funciones, Parte I: $(document).ready

Las funciones son la unidad de accin bsica de jQuery. El principal punto de

Vamos a examinarlo parte por parte.

disfrazada; convierte adocument en un objeto de jQuery.

documento de HTML. (En el ejemplo anterior, la parte Realiza una accin es el

naranja de la ventana de Resultados. (Pods usar el efecto jQuery .hide() para

Funciones, Parte II: funciones explicadas

Realiz una accin

Probablemente te diste cuenta de que en el ejercicio anterior usamos $ y$():

Existe una pequea diferencia entre los dos.

Uso de funciones para seleccionar elementos

Si podemos seleccionar elementos por su clase, tambin podemos seleccionarlos

El punto y coma al final es importante: es la manera en que jQuery sabe que le

Introduccin a las funciones

En la ltima leccin, tenamos un cdigo que se vea as:

Muy bien! Es hora de usar nuestros conocimientos recin adquiridos de jQuery

Hac clic y tir

Cmo deslizar nuestro panel

Crear elementos de HTML

La adicin dinmica de elementos a nuestra pgina de HTML es una herramienta

Lo que queremos hacer es pasar un elemento completo de HTML entre comillas:

Podemos insertar nuestros elementos recin creados usando algunas acciones de

apunta. .prepend()inserta el elemento especificado como el primer hijo del

agregar" y "donde agregarlo". El cdigo

tiene el mismo efecto que el cdigo.append() anterior. .prependTo() tiene una

Podemos especificar en qu parte del DOM insertamos un elemento con las

Podemos seleccionar un elemento usando $("p") y asignarlo a una variable.

Agregar elementos a nuestros documentos HTML es genial, pero nuestras pginas

.empty() elimina el contenido y todos los descendientes de un elemento. Por

Agregar y eliminar clases

No tenemos que limitarnos a agregar o eliminar elementos completos; podemos

en donde 'selector' es el elemento de HTML que quers y'NombreDeClase' es el

Pero, si queremos ajustar valores individuales de propiedades de hojas de estilo

Por ltimo, podemos actualizar los contenidos de nuestros elementos de HTML; es

recuperar el contenido HTML delprimer div que encuentre, y

recuperar el valor de la primera casilla de seleccin activada que jQuery

Ahora tenemos que poner en prctica lo que acabamos de aprender. En esta

Hac clic en el botn, ya!

Nuestro selector encuentra la entrada especfica usando un selector css en

4. Perfecto! Ahora queremos agregar nuestro elemento HTML al documento.

'<div class="item">' + Agregar + '<

y no es mala idea. El problema es que no funcionara; jQuery busca todos

red = [0, 100, 63];

Repaso de eventos de jQuery

A veces, si quieres que un efecto ocurra de inmediato, sin un evento

Tu div representa al planeta Krypton. Usa .fadeOut() y 'fast' para que se

Combinar .click() y .hover()

Muy bien! Vamos a agregar un evento ms de jQuery a nuestra simulacin de

Siguiendo el patrn que estuvimos aprendiendo, nos centramos en Krypton,

Despus aplicamos nuestro evento hover event a nuestro objetivo.

Finalmente, ejecutamos el cdigo dentro de la function(){} que le agrega

-o-linear-gradient(left, #330000, #CC0000);

Hover (pasar sobre algo)

Primero elegimos el elemento que queremos modificar $('div')

La primera funcin function(){} que pongamos se ejecutar la primera vez