Introducción A DOM Jquery

Introduccin a DOM: HTML y jQuery
Ver para creer
Hasta el momento construimos pginas web usando HTML y les dimos estilo usando
CSS. Nuestras pginas quedan geniales, pero en realidad nohacen nada; no
podemos arrastrar elementos por la pgina, abrir o cerrar paneles deslizantes, animar
los elementos de HTML, ni agregar elementos nuevos a nuestras pginas de HTML
simplemente haciendo un clic sobre un botn.
Pero todo eso est a punto de cambiar. En esta serie de ejercicios vas a
aprender jQuery, que te va a permitir hacer todas esas cosas y muchas ms.
Instrucciones
And a la ventana de Resultados. Pas el cursor por encima de cada uno de

los <div> para ver qu hacen y hac clic sobre cada uno. Despus hac clic en
"Guardar y enviar" cuando ests listo para aprender jQuery!
*.html
<!DOCTYPE html>
<html>
<head>
<title>Magia!</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="rojo"></div>
<div id="azul"></div>
<div id="amarillo"></div>
<div id="verde"></div>
</body>
</html>
*.css
div {
height:100px;
width:100px;
display: inline-block;
}
#rojo {
background-color:#FF0000;
}
#azul {
background-color:#0000FF;
}
#amarillo {
background-color:#E2BE22;
}
#verde {
background-color:#008800;
}
*.js
$(document).ready(function() {
$('div').mouseenter(function() {
$(this).animate({
height: '+=10px'
});
});
$('div').mouseleave(function() {
$(this).animate({
height: '-=10px'
});
});
$('div').click(function() {
$(this).toggle(1000);
});
});
El Modelo de Objetos del Documento
Para aprovechar jQuery al mximo tenemos que repasar cmo se compone una
pgina HTML.
Un documento de HTML est estructurado de acuerdo con elDocument Object
Model, es decir, el Modelo de Objetos del Documento, oDOM. jQuery puede acceder
y modificar el HTML interactuando con el DOM.
El DOM est compuesto de todos los elementos en la pgina, dispuestos en una

jerarqua que refleja la forma en que el documento HTML est ordenado. Te acords
de queimaginbamos que el documento de HTML era como una casa? Pods
imaginarte que el DOM es algo parecido. Igual que en un documento de HTML, los
elementos en el DOM pueden tener elementos padres, hijos y hermanos.
Si no tens muy claro qu es un elemento de HTML, qu es un selector de CSS, o
qu son los ID y las clases, pods repasarlos en la serie de ejercicios de HTML y
CSS.
Instrucciones
Revis el cdigo en script.js. Pronto vamos a explicarlo, pero por ahora todo lo que
tens que saber es que este cdigo seleccionar un elemento de HTML y lo har
desaparecer cuando el documento de HTML se cargue.
En este ejercicio queremos centrarnos en el elemento div, as que en la lnea 2 dentro
de $() agreg div.
Cambiar de objetivos
No te sientas intimidado por la cantidad de cdigo que ests viendo: vamos a

analizarlo parte por parte, para asegurarnos de que lo entiendas todo.
As como div en CSS se refiere al elemento <div> de HTML, el 'div' en jQuery se
refiere al mismo elemento<div> de HTML. Pods imaginarte que el nombre del
elemento se muestra en jQuery igual que como estaba en CSS, solo que ahora
aparece entre comillas. As que, por ejemplo, pods centrarte en cualquier elemento
de la clasebutton usando
$('.button').algunaAccin
Como te acordars, .button es la forma que uss en CSS para centrarte en cualquier
elemento que en tu archivo de HTML tengaclass="button".
Instrucciones
Escrib un selector dentro de $() para que se centre en el ID #verde.
Qu es jQuery?
jQuery es una biblioteca, o un conjunto de complementos tiles (adds-ons), para el

lenguaje de programacin JavaScript. Tal vez parezca contradictorio aprender cmo
usar una biblioteca antes de aprender el lenguaje en s, pero hay algunas buenas
razones para hacerlo.
1.
Lleva un poco de tiempo sentirse cmodo con JavaScript y es ms fcil

manipular los elementos de DOM directamente con jQuery que con JavaScript. Vamos
a empezar mostrndote jQuery para ayudarte a crear sitios web geniales mucho ms
rpido.
2.
jQuery brinda una interfaz sencilla para el cdigo JavaScript subyacente. Es

ms fcil para muchos usuarios aprender primero a manejar jQuery y despus s
animarse con los detalles de JavaScript.
3.
jQuery es mucho mejor en cuanto a resultados inmediatos y visuales que el

JavaScript normal. Cuando termine esta leccin vas a haber creado tu propio botn
interactivo.
Instrucciones
En la pestaa script.js, agreg las piezas faltantes de la lnea 2, de modo que tu

cdigo jQuery llame a fadeOuten el div con el ID #nolisto.
Cmo enlazar tus archivos HTML y JavaScript
Genial! Ahora necesitamos asociar la pgina de HTML con el script de jQuery, de

modo que la magia de jQuery modifique nuestro HTML.
As como necesitamos una etiqueta<link> para conectar nuestros HTML y CSS,
necesitamos una etiqueta<script> para conectar nuestro HTML y jQuery. La etiqueta
se ve as:
<script type="text/javascript" src="src"></script>
Fijate que la etiqueta <script> no se autocierra; necesita una etiqueta</script> de

cierre.
Instrucciones
Agreg una etiqueta <script> aindex.html. En type debe decir "text/javascript" y

en src debe decir "script.js".
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.
Instrucciones
Agreg $(document).ready(); ascript.js. Acordate: la parte de document es especial:

no es un elemento de HTML como <p> o<div>, as que no va entre comillas.
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 clave function. 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:
magia de jQuery;
});
Acordate de que cerramos nuestras sentencias de jQuery con un punto y coma.

Instrucciones
Agreg function(){} dentro de.ready(). Todava no tens que escribir nada entre las
llaves ({}) defunction; eso lo vamos a ver en el siguiente ejercicio.
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.
Instrucciones
En la lnea 2 de la pestaa script.js, convert 'div' en un objeto de jQuery, y llam a la

accin.slideDown() sobre dicho objeto. Entre los parntesis de slideDown(),
escrib 'slow' (despacio) de modo que jQuery sepa a qu velocidad quers que se
deslice div.
Repaso de mitad de leccin
Buen trabajo! Ya vimos bastantes cosas. Tommonos un segundo para repasar lo

que aprendimos:
Qu es jQuery y cmo puede manipular los elementos de HTML
La sintaxis de jQuery
Instrucciones
Hac clic en "Guardar y enviar" cuando ests listo para poner en prctica tus nuevas
habilidades de jQuery y crear un botn interactivo para tu sitio web.
Listos!
Muy bien! Vamos a empezar.

Instrucciones
1.
En la pestaa index.html, agreg una etiqueta <script> para conectar tu HTML

con script.js.
2.
En tu pestaa script.js, convertdocument en un objeto de jQuery y llam

a .ready().
En el Consejo hay unos ejemplos.
Adentro...!
Genial! Ahora vamos a incluir nuestra palabra clave function junto con dos nuevas
acciones, mouseenter() yfadeTo().
mouseenter() produce un cambio cuando movs el cursor dentro de un elemento de
HTML determinado. Por ejemplo,

$('div').hide();
});
});
debera hacer que todos los <div> de la pgina se oculten en cuanto muevas el
cursor sobre uno de ellos. (En la prxima leccin vamos a ver cmo afectar solamente
un <div> entre muchos.) Por ahora solamente tenemos un <div>, as que este cdigo
est bien.
Vamos a ubicar fadeTo() dentro demouseenter(), en lugar de hide().fadeTo() toma
dos argumentos, oentradas, separados por una coma, entre sus parntesis: la
velocidad a la cual se desvanece el elemento y laopacidad (o transparencia) que
tendr al desvanecerse. Por ejemplo,
fadeTo('fast', 0.25);
har que el elemento se desvanezca rpidamente hasta un 25% de su opacidad

original, dejndolo de color muy claro.
Instrucciones
Usando los ejemplos anteriores, hac que tu 'div' se desvanezca a 1(100%) de

opacidad cuando el cursor pase sobre l. Hac que la velocidad de la animacin
sea 'fast' (rpido). (Asegurate de escribir los argumentos de fadeTo() en orden; es
decir, velocidad y despus opacidad.)
...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.)
Instrucciones
Entre }); al final de tu mouseenter() y}); al final de tu $(document).ready(), agreg

un mouseleave() que usefadeTo para devolver la opacidad de tu div a 0.5. Igual que en
el fadeToanterior, su primer argumento debe ser 'fast'.
Hac clic en Guardar y enviar, despus pas el cursor despacio sobre tu div y mir el
efecto.
Funciones y selectores de jQuery
$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!
Instrucciones
Cre una variable $div, y asignala al objeto de jQuery div usando =. No necesits
usar $(document).ready() ni ningn otro cdigo adicional.
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.
Instrucciones
Dale a .ready() una function(){}como argumento. Dentro de las {} de tu funcin,

llam a fadeIn('slow')para que modifique a 'div', que en este momento est invisible,
de modo que pueda aparecer. As es; los objetos tambin pueden aparecer!
Seleccin mediante clases
No tenemos que limitarnos a seleccionar elementos HTML como<p> y <div>;

bsicamente podemos escribir entre comillas cualquier selector de CSS y ponerlo
dentro de $(). Esto quiere decir que tambin podemos seleccionar clases!
Acordate de que en CSS seleccionamos las clases usando un punto (.). Si
tenemos class="rojo"en nuestro HTML, podemos modificarlo en CSS usando .rojo. En
jQuery, todo lo que necesitamos es escribir '.rojo' entre comillas, y podemos ponerlo
dentro de $() para crear un objeto de jQuery.
Instrucciones
Vamos a practicar un poco con la accin .click().

Complet el cdigo de jQuery, de modo que los cuatro 'div' de la clase '.desvanecer' se
desvanezcan usandofadeOut() y 'slow', cuando hagas clic ( .click() ) en el botn
(button ).
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.
Instrucciones
Actualiz tu cdigo de jQuery de modo que usando .fadeOut(), solamente se

desvanezca el div que tiene el ID #azul.
Selecciones flexibles
Todo lo que puedas modificar con CSS, podrs modificarlo con jQuery. Por ejemplo
podemos aplicar fadeTo() a un selector p de esta manera:
$('p').fadeTo('slow', 0);
Podemos aplicar fadeTo() a un selector li de esta manera:

$('li').fadeTo('slow', 0);
Podemos aplicar fadeTo() tanto al selector p como al selector li, de esta manera:
$('p, li').fadeTo('slow', 0);
Esto se denomina selector compuesto.

Instrucciones
Usemos un selector compuesto para aplicar fadeTo() tanto al selector.rosa como

al .rojo.
'this' es importante!
En la ltima leccin, tenamos un cdigo que se vea as:
$('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 losdiv de 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 solamenteafectar al elemento con el que hacs algo en ese
momento (por ejemplo, sobre el que se hace clic o se pasa el cursor).
Instrucciones
Revis el cdigo en script.js. En lugar de usar fadeOut() en todos los'div', solamente lo

usamos en uno con ayuda de this. Ac this se refiere al div sobre el que pass el
cursor. Hac clic en Guardar y enviar y despus sobre cada uno de los div para verlos
funcionar.
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.
Instrucciones
Ya sabs cmo se hace! Convertdocument en un objeto de jQuery y llam

a .ready() a la accin. (Todava no hace falta que escribas nada entre los parntesis
de .ready().)
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).
Instrucciones
1.
Agreg tu function(){} dentro de los parntesis de .ready().
2.
function no tendr argumentos en medio de (); pero en medio de {}, deber
llamar al controlador de eventos .click() para modificar el objeto .tirar de jQuery.
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.
Instrucciones
Dentro de los parntesis de .click(), cre un objeto de jQuery .panel, y llam al

efecto .slideToggle(). Dale a la velocidad de la animacin el argumento 'slow'.
Bien hecho!
Buen trabajo! Ves lo fcil que es? Con un poco de magia de jQuery, pods hacer
que tus sitios web hagan toda clase de cosas asombrosas.
Tanto Twitter, Facebook, como Gmail usan jQuery para hacer que sus sitios web sean
interactivos. Aprendiendo jQuery te encamins hacia la grandeza de Internet!
Si en algn momento tens dudas sobre lo que es capaz de hacer jQuery, o sobre
cmo funciona, pods revisar la documentacin de jQuery (http://docs.jquery.com/),
que cubre todos los aspectos de la biblioteca.
Instrucciones
Cuando ests listo hac clic en Guardar y enviar para completar esta leccin y
continuar con ms maravillas de jQuery!
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 la estructura 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.
Instrucciones
En script.js, crea una variable, $h1, y hac que sea igual a un objeto de jQuery que
contenga una etiqueta<h1> con el texto "Hola". La etiqueta debe ser una cadena.
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().
Instrucciones
En la pestaa script.js, usa.append() para agregar un prrafo abody en tu documento

de HTML. Tu prrafo debe tener el texto: "Soy un prrafo!"

Introducción A DOM Jquery

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Introducción A DOM Jquery

Transféré par

Droits d'auteur :

Formats disponibles

Introduccin a DOM: HTML y jQuery

Ver para creer

And a la ventana de Resultados. Pas el cursor por encima de cada uno de

Introduccin a DOM: HTML y jQuery

El Modelo de Objetos del Documento

El DOM est compuesto de todos los elementos en la pgina, dispuestos en una

No te sientas intimidado por la cantidad de cdigo que ests viendo: vamos a

Escrib un selector dentro de $() para que se centre en el ID #verde.

jQuery es una biblioteca, o un conjunto de complementos tiles (adds-ons), para el

Lleva un poco de tiempo sentirse cmodo con JavaScript y es ms fcil

jQuery brinda una interfaz sencilla para el cdigo JavaScript subyacente. Es

jQuery es mucho mejor en cuanto a resultados inmediatos y visuales que el

En la pestaa script.js, agreg las piezas faltantes de la lnea 2, de modo que tu

Introduccin a DOM: HTML y jQuery

Cmo enlazar tus archivos HTML y JavaScript

Genial! Ahora necesitamos asociar la pgina de HTML con el script de jQuery, de

Fijate que la etiqueta <script> no se autocierra; necesita una etiqueta</script> de

Agreg una etiqueta <script> aindex.html. En type debe decir "text/javascript" y

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!"

Agreg $(document).ready(); ascript.js. Acordate: la parte de document es especial:

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

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

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

En la lnea 2 de la pestaa script.js, convert 'div' en un objeto de jQuery, y llam a la

Repaso de mitad de leccin

Buen trabajo! Ya vimos bastantes cosas. Tommonos un segundo para repasar lo

Muy bien! Vamos a empezar.

En la pestaa index.html, agreg una etiqueta <script> para conectar tu HTML

En tu pestaa script.js, convertdocument en un objeto de jQuery y llam

mouseenter() produce un cambio cuando movs el cursor dentro de un elemento de

HTML determinado. Por ejemplo,

har que el elemento se desvanezca rpidamente hasta un 25% de su opacidad

Usando los ejemplos anteriores, hac que tu 'div' se desvanezca a 1(100%) de

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

Entre }); al final de tu mouseenter() y}); al final de tu $(document).ready(), agreg

Funciones y selectores de jQuery

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 HTML

Dale a .ready() una function(){}como argumento. Dentro de las {} de tu funcin,

Seleccin mediante clases

No tenemos que limitarnos a seleccionar elementos HTML como<p> y <div>;

Vamos a practicar un poco con la accin .click().

Si podemos seleccionar elementos por su clase, tambin podemos seleccionarlos por

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

Actualiz tu cdigo de jQuery de modo que usando .fadeOut(), solamente se

Podemos aplicar fadeTo() a un selector li de esta manera:

Esto se denomina selector compuesto.

Usemos un selector compuesto para aplicar fadeTo() tanto al selector.rosa como

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

Revis el cdigo en script.js. En lugar de usar fadeOut() en todos los'div', solamente lo

Ya sabs cmo se hace! Convertdocument en un objeto de jQuery y llam

Hac clic y tir

Agreg tu function(){} dentro de los parntesis de .ready().

function no tendr argumentos en medio de (); pero en medio de {}, deber

llamar al controlador de eventos .click() para modificar el objeto .tirar de jQuery.

Cmo deslizar nuestro panel

Dentro de los parntesis de .click(), cre un objeto de jQuery .panel, y llam al

Modificar elementos de HTML

Crear elementos de HTML

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