Guia de JQuery

1 - Que es el jQuery?
El jQuery es una librera de JavaScript para acceder a los objetos del

DOM de un modo simplificado.
El sitio oficial de la librera lo puedes acceder desde aqu donde puedes
descargar el archivo para tus proyectos, adems de poder enterarte de
las mejoras constantes que se le hacen.
El autor de esta librera es John Resig que adems trabaja para Mozilla
Corporation.
Las aplicaciones en internet son cada vez ms complejas, ya que
incorporan efectos visuales, drag and drop, auto-completar, animaciones
etc. el desarrollar todos estos conceptos desde cero puede resultar
complicado sobretodo si tenemos que presentar la solucin con muy
poco tiempo, en este tipo de situaciones el empleo de libreras como el
jQuery nos facilitan el desarrollo de la aplicacin. Otra ventaja paralela es
despreocuparnos cuando codificamos en la compatibilidad de
navegadores, ya que la librera resolver esto.
Para utilizar la librera como dijimos debemos descargarla del sitio oficial
y en cada pgina que lo requiera agregar:
<script type="text/javascript" src="jquery.js"></script>
Del sitio oficial de jQuery descargaremos la versin descomprimida que

ocupa alrededor de 60 Kb (es el archivo jquery.js) y cuando subamos
nuestro sitio es recomendable descargar la versin comprimida que tiene
un peso de 20 Kb.
La librera jQuery en resumen nos aporta las siguientes ventajas:
Nos ahorra muchas lneas de cdigo.
Nos hace transparente el soporte de nuestra aplicacin para los
navegadores principales.
Nos provee de un mecanismo para la captura de eventos.
Provee un conjunto de funciones para animar el contenido de la
pgina en forma muy sencilla.
Integra funcionalidades para trabajar con AJAX.
2 - Nueva manera de programar JavaScript con jQuery.
Cuando uno utiliza una librera debe adaptarse a sus mecanismos de

uso, el tratar de llevar los conocimientos que tenemos sobre un tema y
aplicarlos a la fuerza en dicha librera puede ser frustrante. Lo ms
adecuado es ir viendo cual es la mecnica de trabajar con dicha librera
con problemas muy sencillos e ir complicndolo a medida que
entendemos su funcionamiento.
Dispongamos el problema trivial de capturar el evento de un control
HTML de tipo button, lo desarrollaremos utilizando la metodologa
tradicional accediendo directamente a las funciones del DOM y luego
empleando la librera jQuery:
pagina1.html
<html>
<head>
<title>Problema</title>
</head>
<body>
<h2>CapturadeleventoclickdeuncontrolHTMLdetipobutton.</h2>
<ahref="pagina2.html">Mtodotradicionalconlasfunciones
delDOM</a><br>
<ahref="pagina3.html">UtilizandolalibrerajQuery</a><br>
</body>
</html>
pagina2.html
<html>
<head>
<scripttype="text/javascript"src="funciones1.js"></script>
</head>
<body>
<inputtype="button"id="boton1"value="presioname">
</body>
</html>
funciones1.js
addEvent(window,'load',inicializarEventos,false);
functioninicializarEventos()
{
varboton1=document.getElementById('boton1');
addEvent(boton1,'click',presionBoton,false);
}
functionpresionBoton(e)
{
alert('sepresionelbotn');
}
functionaddEvent(elemento,nomevento,funcion,captura)
{
if(elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
returntrue;
}
else
if(elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
returntrue;
}
else
returnfalse;
}
Todo lo anterior no debera haber problemas de entendimiento, en caso

de estar olvidado del manejo del DOM sera conveniente refrescar los
conceptos en el tutorial de DHTMLYa.
pagina3.html
<html>
<head>
<scripttype="text/javascript"src="../jquery.js"></script>
<scripttype="text/javascript"src="funciones2.js"></script>
</head>
<body>
<inputtype="button"id="boton1"value="presioname">
</body>
</html>
Lo primero que tenemos en cuenta es que debemos importar la librera:

<script type="text/javascript" src="../jquery.js"></script>
Como se encuentra en la carpeta superior a donde se encuentra el
archivo pagina3.html ponemos src="../jquery.js", si estuviera en la misma
carpeta disponemos src="jquery.js", es decir directamente el nombre de
la librera.
Siempre debemos disponer esta inclusin de la librera antes de incluir
los otros archivos *.js que utilizan esta librera, es por eso el orden:

<script type="text/javascript" src="funciones2.js"></script>
funciones2.js
varx;
x=$(document);
x.ready(inicializarEventos);
{
varx;
x=$("#boton1");
x.click(presionBoton)
}
functionpresionBoton()
{
alert("Sepresionelbotn");
}
En este archivo (funciones2.js) comienza nuestro estudio de la librera

jquery
La funcin principal de esta librera se llama $.
A la funcin $ le podemos pasar distintos valores como veremos (en la
primer llamada le pasamos la referencia del objeto document del DOM y
en la segunda el id del control button):
x=$(document);
...
x=$("#boton1");
Esta funcin nos devuelve un objeto de tipo jQuery.

El primer mtodo que nos interesa de esta clase es el ready:
var x;
x=$(document);
El mtodo ready tiene como parmetro un nombre de funcin. Esta

funcin se ejecutar cuando todos los elementos de la pgina estn
cargados. Es importante notar que solo pasamos el nombre de la funcin
y no disponemos los parntesis abiertos y cerrados al final.
El cdigo de esta funcin:
function inicializarEventos()
{
var x;
x=$("#boton1");
Utilizamos nuevamente la funcin $ para crear un objeto de la clase

jQuery pero ahora asocindolo al botn (esto lo hacemos pasando el id
del control button precedindolo por el caracter # y encerrado entre
parntesis. Finalmente llamamos al mtodo click pasndo como
parmetro el nombre de la funcin que se ejecutar al presionar dicho
botn.
3 - Seleccin de un elemento del documento mediante el

id.
La sintaxis para seleccionar un elemento particular de la pgina mediante

la propiedad id es:
$("#nombre del id")
Confeccionaremos un problema para ver como obtenemos la referencia a

elementos HTML particulares mediante el id.
Problema:Confeccionar una pgina que muestre dos ttulos de primer
nivel, al ser presionados cambiar el color de la fuente, fondo y la fuente
del texto.
pagina1.html
<html>
<head>
<scripttype="text/javascript"src="funciones.js"></script>
</head>
<body>
<h1id="titulo1">Primerttulo</h1>
<h1id="titulo2">Segundottulo</h1>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("#titulo1");
x.click(presionTitulo1)
x=$("#titulo2");
}
functionpresionTitulo1()
{
varx;
x=$("#titulo1");
x.css("color","#ff0000");
x.css("backgroundcolor","#ffff00");
x.css("fontfamily","Courier");
}
functionpresionTitulo2()
{
varx;
x=$("#titulo2");
x.css("color","#ffff00");
x.css("backgroundcolor","#ff0000");
x.css("fontfamily","Arial");
}
Como va ser costumbre siempre que trabajemos con esta librera primero
creamos un objeto jquery a partir de la referencia a 'document' y luego
llamamos al mtodo ready indicndole el nombre de la funcin que debe
ejecutarse luego de generarse el rbol de elementos HTML para la
pgina:
var x;
x=$(document);
La funcin inicializarEventos se ejecuta una vez que se carg la pgina y

estn creados todos los elementos HTML, en esta funcin mediante $
accedemos a travs del id a los elementos h1 respectivos, a casa uno le
asignamos al evento click una funcin distinta que se disparar cuando
presionemos con el mouse:
{
var x;
x=$("#titulo1");
x=$("#titulo2");
}
Es importante notar que cuando obtenemos la referencia de un elemento

por medio del id se le antecede el caracter # al nombre del id:
x=$("#titulo1");
...
x=$("#titulo2");
Luego las dos funciones que se ejecutan al presionar los ttulos:
function presionTitulo1()
{
var x;
x=$("#titulo1");
x.css("background-color","#ffff00");
x.css("font-family","Courier");
}
function presionTitulo2()
{
var x;
x=$("#titulo2");
x.css("background-color","#ff0000");
x.css("font-family","Arial");
}
Hasta ahora hemos presentado los siguientes mtodos que tiene jquery:
ready
click
El tercer mtodo nos permite modificar una propiedad de la hoja de estilo

de un elemento HTML:
var x;
x=$("#titulo1");
Una vez que hemos obtenido la referencia a un elemento HTML

llamamos al mtodo css que tiene dos parmetros: el primero indica el
nombre de la propiedad y el segundo el valor a asignarle. Podemos ver
las otras dos asignaciones:
x.css("background-color","#ffff00");
x.css("font-family","Courier");
Como podemos ver es muy fcil acceder al estilo de un elemento HTML

para actualizarlo en forma dinmica luego que la pgina fue cargada.
4 - Seleccin de elementos por el tipo de elementos.
La sintaxis para tener la referencia de todos los elementos de cierto tipo

(a, p, h1, etc.):
$("nombre del elemento")
Es decir es casi igual que obtener la referencia de un elemento particular

mediante el id, solo difiere en que no le antecedemos el caracter $.
Podemos con esto definir funciones comunes a un conjunto de
elementos.
ProblemaConfeccionar una tabla con 5 filas. Hacer que cambie de color

la fila que se presiona con el mouse. Obtener la referencia a todos los
elementos 'tr'.
pagina1.html
<html>
<head>
</head>
<body>
<tableborder="1">
<tr>
<td>1111111111</td><td>1111111111</td><td>1111111111</td><td>111111111
1</td>
</tr>
<tr>
<td>2222222222</td><td>2222222222</td><td>2222222222</td><td>222222222
2</td>
</tr>
<tr>
<td>3333333333</td><td>3333333333</td><td>3333333333</td><td>333333333
3</td>
</tr>
<tr>
<td>4444444444</td><td>4444444444</td><td>4444444444</td><td>444444444
4</td>
</tr>
<tr>
<td>5555555555</td><td>5555555555</td><td>5555555555</td><td>555555555
5</td>
</tr>
</table>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("tr");
x.click(presionFila);
}
functionpresionFila()
{
varx;
x=$(this);
x.css("backgroundcolor","eeeeee");
}
Con la siguiente sintaxis obtenemos la referencia a todos los elementos

HTML de tipo 'tr':
var x;
x=$("tr");
x.click(presionFila);
y a todos ellos los enlazamos con la funcin presionFila

Cuando se presiona cualquiera de las filas de la tabla se ejecuta la
siguiente funcin:
function presionFila()
{
var x;
x=$(this);
x.css("background-color","eeeeee");
}
Para obtener la referencia de que elemento en particular dispar el

evento podemos hacerlo de la siguiente manera:
x=$(this);
y a partir de esta referencia llamar al mtodo css.
5 - Seleccin de elementos utilizando los selectores CSS.
Una de las caractersticas ms interesantes de jQuery es poder obtener

la referencia de elementos del DOM utilizando para ello selectores de
CSS (Significa que el manejo de Hojas de estilo nos facilita las cosas)
El primer problema que dispondremos ser ocultar todos los list item de
una lista desordenada, dispondremos dos listas en la pgina por lo que
conocemos hasta ahora no nos sirve indicar:
x=$("li");
ya que esto nos selecciona todos los elementos de tipo li de la pgina y

nosotros queremos solo los de una de las listas.
pagina1.html
<html>
<head>
</head>
<body>
<inputtype="button"value="ocultaritemprimerlista"
id="boton1">
<h2>Lista1</h2>
<ulid="lista1">
<li>Opcinnmero1</li>
</ul>
<h2>Lista2</h2>
<ul#id="lista3">
</ul>
</body>
</html>
Cada lista tiene definido su atributo id.

funciones.js
varx;
x=$(document);
{
varx;
x=$("#boton1");
x.click(ocultarItem);
}
functionocultarItem()
{
varx;
x=$("#lista1li");
x.hide();
}
En la funcin inicializarEventos obtenemos la referencia del botn

mediante su id y llamamos al mtodo click:
{
var x;
x=$("#boton1");
x.click(ocultarItem);
}
Ahora lo nuevo es obtener la referencia de todos los elementos li que

pertenecen a la primer lista:
var x;
x=$("#lista1 li");
x.hide();
Pasamos a la funcin $ el selector CSS que accede a todos los

elementos de tipo li contenidos en #lista1.
Todas las reglas de CSS estn disponibles para seleccionar los
elementos del DOM.
6 - Seleccin de elementos utilizando las clases CSS

definidas.
Recordemos que definimos clases en CSS cuando una regla de estilo

puede ser igual para un conjunto de marcas HTML.
Mediante este nombre de clase podemos podemos acceder a todos los
elementos utilizando la funcin $:
x=$(".nombre de clase");
problema:Mostrar una serie de lenguajes de programacin y aplicar un

estilo resaltado para aquellos lenguajes que son orientados a objetos.
Cuando se presione un botn agregar la propiedad background-color a
todos los elementos de dicha clase.
pagina1.html
<html>
<head>
<linkrel="StyleSheet"href="estilos.css"type="text/css">
</head>
<body>
<p>Cualesdelossiguienteslenguajessonorientadosaobjetos:
<spanclass="resaltado">Java</span>,VB6,<spanclass="resaltado">C+
+</span>,C,
<spanclass="resaltado">C#</span>,Cobol?</p>
<inputtype="button"id="boton1"value="verresultado">
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("#boton1");
x.click(resaltar);
}
functionresaltar()
{
varx;
x=$(".resaltado");
x.css("backgroundcolor","ffff00");
}
.resaltado{
color:#000000;
}
El cdigo nuevo es:

x=$(".resaltado");
x.css("background-color","ffff00");
Primero generamos un objeto jQuery que guarda la referencia a todos los

elementos que tienen definida la clase .resalatado y luego fijamos como
color de fondo el amarillo a dichos elementos.
7 - Mtodos text(), text(valor)
Para saber el contenido de un elemento el objeto jQuery cuenta con un

mtodo llamado text(), por ejemplo:
var x=$("#parrafo1");
luego si hacemos x.text() obtenemos el contenido del prrafo con id igual

a parrafo1.
Luego si queremos cambiar el texto del prrafo deberamos disponer:
x.text("Este es el texto nuevo");
Pero hay que tener mucho cuidado cuando utilizamos jQuery ya que
podemos cambiar el contenido de muchos elementos con una sola
llamada al mtodo text, por ejemplo:
var x=$("p");
x.text("Este texto aparece en todos los prrafos del documento");
El cdigo anterior crea un objeto jQuery con la referencia a todos los

prrafos contenidos en el documento. Luego si llamamos al mtodo text
envindole una cadena, esta aparecer en todo el documento

remplazando el contenido de los prrafos actuales.
El siguiente problema muestra el acceso y modificacin unitaria y mltiple
de contenidos de elementos.
<html>
<head>
<scriptlanguage="javascript"src="funciones.js"
type="text/javascript"></script>
</head>
<body>
<inputtype="button"value="Obtenereltextocontenidoenun
prrafo"id="boton1"><br>
<inputtype="button"value="Modificareltextodeunprrafo"
id="boton2"><br>
<inputtype="button"value="Modificareltextodeloselementos
tddeunatabla"id="boton3"><br>
<pid="parrafo1">Textodelprimerprrafo</p>
<tableborder="1">
<tr>
<td>celda1,1</td><td>celda1,2</td>
<td>celda2,1</td><td>celda2,2</td>
</tr>
</table>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx=$("#boton1");
x.click(extraerTexto);
x=$("#boton2");
x.click(modificarTexto);
x=$("#boton3");
x.click(modificarDatosTabla);
}
functionextraerTexto()
{
varx=$("#parrafo1");
alert(x.text());
}
functionmodificarTexto()
{
varx=$("#parrafo1");
x.text("Nuevotextodelprrafo");
}
functionmodificarDatosTabla()
{
varx=$("td");
x.text("textonuevo");
}
Como vemos esta pgina tiene tres botones, al presionarse el primero se

dispara la funcin:
function extraerTexto()
{
alert(x.text());
}
Obtenemos la referencia al prrafo mediante su id (recordemos que en

una pgina todos los valores de los id son distintos), luego extraemos el
contenido mediante el mtodo text() y lo mostramos en un alert.
La segunda funcin cambia el contenido del prrafo:
function modificarTexto()
{
x.text("Nuevo texto del prrafo");
}
Obtenemos la referencia del prrafo mediante su id y llamamos al

mtodo text envindole el nuevo string a mostrar.
Por ltimo la funcin:
function modificarDatosTabla()
{
var x=$("td");
x.text("texto nuevo");
}
Crea un objeto de la clase jQuery con la referencia a todos los elementos

td del documento (es decir los td de todas las tablas) y posteriormente
mediante el mtodo text modifica el contenido de todos ellos (todos los td
del documento se cambian por el string "nuevo texto")
8 - Mtodos attr(nombre de propiedad), attr(nombre de

propiedad,valor) y removeAttr(nombre de propiedad)
Estos mtodos nos permiten agregar propiedades a un elemento HTML y

recuperar el valor de una propiedad.
Para recuperar el valor de una propiedad (si hay muchos elementos que
recupera la funcin $, solo retorna la propiedad del primero):
$(elemento).attr(nombre de propiedad)
Para fijar el valor de una propiedad (si hay muchos elementos que
recupera la funcin $, se inicializan para todos):
$(elemento).attr(nombre de propiedad,valor)
Para eliminar una propiedad de un elemento o conjunto de elementos

tenemos:
$(elemento).removeAttr(nombre de la propiedad)
Problema:Definir una tabla sin el atributo border. Al presionar un botn

aadirle la propiedad border con el valor 1. Si se presiona otro botn
recuperar y mostrar el valor del atributo border y por ltimo si se presiona
otro botn eliminar la propiedad border.
pagina1.html
<html>
<head>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<input type="button" id="boton1" value="Aadir
propiedad border"><br>
<input type="button" id="boton2" value="Recuperar
valor de la propiedad border"><br>
<input type="button" id="boton3" value="Eliminar la
propiedad border">
<table id="tabla1">
<tr>
<td>1111111111</td><td>1111111111</td><td>1111111111</td><td>111111111
1</td>
</tr>
<tr>
<td>2222222222</td><td>2222222222</td><td>2222222222</td><td>222222222
2</td>
</tr>
<tr>
<td>3333333333</td><td>3333333333</td><td>3333333333</td><td>333333333
3</td>
</tr>
</table>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx=$("#boton1");
x.click(agregarPropiedadBorder);
x=$("#boton2");
x.click(recuperarPropiedadBorder);
x=$("#boton3");
x.click(eliminarPropiedadBorder);
}
functionagregarPropiedadBorder()
{
varx=$("#tabla1");
x.attr("border","1");
}
functionrecuperarPropiedadBorder()
{
varx=$("#tabla1");
if(x.attr("border")!=undefined)
alert(x.attr("border"));
else
alert("Noestdefinidalapropiedadborderenlatabla");
}
functioneliminarPropiedadBorder()
{
varx=$("#tabla1");
x.removeAttr("border");
}
Cuando se presiona el primer botn:

function agregarPropiedadBorder()
{
var x=$("#tabla1");
x.attr("border","1");
}
Obtenemos la referencia de la tabla mediante su id y llamamos al mtodo

attr pasando como primer parmetro el nombre de la propiedad a agregar
y como segundo parmetro el valor de la propiedad.
Cuando se presiona el segundo botn:
function recuperarPropiedadBorder()
{
var x=$("#tabla1");
if (x.attr("border")!=undefined)
alert(x.attr("border"));
else
alert("No est definida la propiedad border en la tabla");
}
Llamamos al mtodo attr envindole como parmetro el nombre de la

propiedad que queremos rescatar. Si retorna el valor undefined significa
que no tiene dicha propiedad el elemento HTML, en caso contrario
retorna su valor y procedemos a mostrarlo mediante un alert.
Cuando se presiona el tercer botn:
function eliminarPropiedadBorder()
{
var x=$("#tabla1");
x.removeAttr("border");
}
Obtenemos la referencia a la tabla mediante su id y llamamos al mtodo

removeAttr con el nombre de la propiedad a eliminar.
9 - Mtodos addClass y removeClass.
Los mtodos addClass y removeClass nos permiten asociar y desasociar

una clase a un elemento o conjunto de elementos HTML.
Problema: Disponer un div con un conjunto de prrafos. Cuando se
presione un botn asociarle una clase y cuando se presione otro
desasociarlo de dicha clase.
pagina1.html
<html>
<head>
</head>
<body>
<inputtype="button"id="boton1"value="Asociarclase">
<inputtype="button"id="boton2"value="Desasociar
clase">
<divid="descripcion">
<p>HTMLesellenguajequeseempleaparaeldesarrollodepginas
deinternet.</p>
<p>Estelenguajeestconstituidodeelementosqueelnavegador
interpreta
ylasdespliegaenlapantalladeacuerdoasuobjetivo.Veremosque
hayelementosparadisponer
imgenes
sobreunapgina,hipervnculosquenospermitendirigirnosaotra
pgina,listas,tablasparatabulardatos,etc.</b>
<p>ParapodercrearunapginaHTMLserequiereunsimpleeditor
detexto(ennuestrocasoemplearemosestesitio)yunnavegadorde
internet(IExplorer,
FireFoxetc.),
emplearemoselnavegadorqueenesteprecisomomentoestutilizando
(recuerde
queustedestviendoenesteprecisomomentounapginaHTMLconsu
navegador).</p>
<p>Lomsimportanteesqueencadaconceptodesarrollelosejercicios
propuestosymodifiquelosquesepresentanyaresueltos.<p>
<p>EstecursoloquebuscaesacercarellenguajeHTMLaunapersona
que
nuncaantestrabaj
conelmismo.NopretendemostrartodasloselementosHTMLenforma
alfabtica.</p>
<p>Comoveremos,decadaconceptosepresentaunaparteterica,
enlaquesedaunaexplicacincompleta,luegosepasaalaseccin
delejercicio
resueltodondepodemosverelcontenidodelapginaHTMLycmola
visualizaelnavegador.
Porltimoytalvezlaseccinmsimportantedeestetutoriales
dondesepropone
queustedhagapginasenformaautnoma(donderealmentepodrdarse
cuentasielconcepto
quedfirme).</p>
</div>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx=$("#boton1");
x.click(asociarClase);
x=$("#boton2");
x.click(desasociarClase);
}
functionasociarClase()
{
varx=$("#descripcion");
x.addClass("recuadro");
}
functiondesasociarClase()
{
x.removeClass("recuadro");
}
estilos.css
.recuadro{
backgroundcolor:#ffffcc;
fontfamily:verdana;
fontsize:14px;
bordertopwidth:1px;
borderrightwidth:3px;
borderbottomwidth:3px;
borderleftwidth:1px;
bordertopstyle:dotted;
borderrightstyle:solid;
borderbottomstyle:solid;
borderleftstyle:dotted;
bordertopcolor:#ffaa00;
borderrightcolor:#ff0000;
borderbottomcolor:#ff0000;
borderleftcolor:#ffaa00;
}
Tengamos bien en cuenta que en el archivo HTML debemos indicar

donde se encuentran los archivos js y css:
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="funciones.js"></script>
Cuando se presiona el botn asociar hoja de estilo se ejecuta la funcin:

function asociarClase()
{
var x=$("#descripcion");
x.addClass("recuadro");
}
Donde llamamos al mtodo addClass con el nombre de la clase (dicha

clase debe estar definida en la hoja de estilo (css).
De forma similar para desasociar una clase se ejecuta la funcin:
function desasociarClase()
{
x.removeClass("recuadro");
}
donde llamamos al mtodo removeClass a partir de un objeto jQuery.
10 - Mtodos html() y html(valor)
El mtodo:
html([bloque html])
Nos permite agregar un bloque de html a partir de un elemento de la

pgina. Bsicamente es la propiedad innerHTML del DOM.
Y el mtodo:
html()
Nos retorna el bloque html contenido a partir del elemento html que hace
referencia el objeto jQuery.
Problema:Disponer dos botones, al ser presionado el primero crear un
formulario en forma dinmica que solicite el nombre de usuario y su
clave. Si se presiona el segundo botn mostrar todos los elementos
HTML del formulario previamente creado.
pagina1.html
<html>
<head>
</head>
<body>
<inputtype="button"id="boton1"value="Mostrarformulario">
<inputtype="button"id="boton2"value="Mostrarelementos
htmldelformulario"><br>
<divid="formulario">
</div>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("#boton1");
x.click(presionBoton1);
x=$("#boton2");
x.click(presionBoton2);
}
functionpresionBoton1()
{
varx;
x=$("#formulario");
x.html('<form>Ingresenombre:<inputtype="text"
id="nombre"><br>Ingrese
clave:<inputtype="text"id="clave"><br><input
type="submit"value="confirmar"></form>');
}
functionpresionBoton2()
{
varx;
x=$("#formulario");
alert(x.html());
}
Como podemos observar cuando se presiona el primer botn creamos un

objeto jQuery que toma la referencia del div y mediante el mtodo html
crea un bloque en su interior:
function presionBoton1()
{
var x;
x=$("#formulario");
x.html('<form>Ingrese nombre:<input type="text"
id="nombre"><br>Ingrese
clave:<input type="text" id="clave"><br><input
type="submit" value="confirmar"></form>');
}
El segundo botn muestra en un alert el contenido HTML actual del div:

function presionBoton2()
{
var x;
x=$("#formulario");
alert(x.html());
}
Hay que diferenciar bien los mtodos html(valor) y text(valor), el segundo

como habamos visto agrega texto a un elemento HTML.
Acotaciones
Cuando desarrollamos un sitio hay que tener mucho cuidado con la

creacin de bloques en forma dinmica ya que puede haber usuarios que
no tengan activo JavaScript y les sera imposible acceder a dichas
caractersticas. En nuestro ejemplo si el usuario tiene desactivo
JavaScript no podr acceder al formulario de carga de datos.
11 - Administracin de eventos con jQuery.
jQuery facilita la administracin de eventos de JavaScript y lo ms

importante nos hace transparente la diferencia en la registracin de
eventos entre distintos navegadores (IExplorer, FireFox)
En este tutorial ya hemos utilizado el manejador de eventos:

$(documento).ready(nombre de funcin)
Dijimos que este funcin que registramos mediante el mtodo ready se

ejecuta cuando el DOM del documento est en memoria. Si no utilizamos
la librera jQuery hacemos esto a travs del evento load.
Otro evento que vimos en conceptos anteriores es el click de un
elemento, la sintaxis utilizada:
var x;
x=$("button");
Con este pequeo cdigo registramos la funcin presionBoton para todos

los elementos de tipo button del documento.
Con este otro cdigo:
var x;
x=$("#boton1");
solo se registra para el elemento con id con valor "boton1".

Por ltimo con este cdigo se registra para todos los elementos "button"
que dependen del div con valor de id igual a "formulario1":
var x;
x=$("#formulario1 button");
Para reafirmar estos conceptos confeccionaremos una pgina que

muestre un prrafo, luego una tabla que contenga dos prrafos y por
ltimo otra tabla que contenga dos prrafos. Capturaremos el evento
click de todos los prrafos del documento y mostraremos un mensaje
indicando:'se presion un prrafo del documento', tambin capturaremos
el evento click del los dos prrafos de la segunda tabla y mostraremos:
'se presion un prrafo contenido en la segunda tabla.'.
pagina1.html
<html>
<head>
</head>
<body>
<p>Prrafofueradelatabla</p>
<tableborder="1">
<tr>
<td><p>Prrafodentrodelaprimertabla.</p></td><td><p>Prrafo
dentrodelaprimertabla.</p></td>
</tr>
</table>
<br>
<tableborder="1"id="tabla2">
<tr>
<td><p>Prrafodentrodelasegundatabla.</p></td><td><p>Prrafo
dentrodelasegundatabla.</p></td>
</tr>
</table>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("p");
x.click(presionParrafoDocumento);
x=$("#tabla2p");
x.click(presionpresionParrafoSegundaTabla);
}
functionpresionParrafoDocumento()
{
alert('sepresionunprrafodeldocumento');
}
functionpresionpresionParrafoSegundaTabla()
{
alert('sepresionunprrafocontenidoenlasegundatabla.');
}
El siguiente cdigo asocia a cada elemento de tipo "p" (prrafo del

documento) la funcin 'presionParrafoDocumento':
x=$("p");
x.click(presionParrafoDocumento);
Luego cuando ejecutemos este documento cada vez que presionemos

un prrafo de la pgina mostrar el mensaje 'se presion un prrafo del
documento'.
Tambin asociamos otra funcin para el evento click de los prrafos
contenidos dentro de la segunda tabla:
x=$("#tabla2 p");
x.click(presionpresionParrafoSegundaTabla);
Esto significa que los prrafos contenidos en la segunda tabla tienen

asociados dos funciones para el evento click, luego cuando presionemos
alguno de los prrafos de la segunda tabla aparecern los dos mensajes:
'se presion un prrafo del documento' y 'se presion un prrafo
contenido en la segunda tabla.'
12 - Eventos mouseover y mouseout.
Los eventos de JavaScript onmouseover y onmouseout son los

equivalentes mouseover y mouseout de jQuery. Estos eventos estn
generalmente unidos. El primero se dispara cuando ingresamos la flecha
del mouse a un elemento HTML y el segundo cuando sacamos la flecha
del control.
Para probar estos dos eventos implementaremos una pgina que
contenga tres botones y cuando ingrese la flecha del mouse al botn
cambiaremos el color de texto del mismo, retornando el color original
cuando retiramos la flecha del control.
Implementaremos una pgina que contenga tres hipervnculos, cuando
ingrese la flecha del mouse al hipervnculo cambiaremos el color de
fondo, retornando el color original cuando retiramos la flecha del
elemento.
pagina1.html
<html>
<head>
</head>
<body>
<ahref="http://www.lavoz.com.ar">LaVozdelInterior</a>
<br>
<ahref="http://www.lanacion.com.ar">Lanacin</a>
<br>
<ahref="http://www.clarin.com.ar">Elclarn</a>
<br>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("a");
x.mouseover(entraMouse);
x.mouseout(saleMouse);
}
functionentraMouse()
{
$(this).css("backgroundcolor","#ff0");
}
functionsaleMouse()
{
$(this).css("backgroundcolor","#fff");
}
Lo primero que hacemos es asignar las funciones a ejecutarse cuando

ocurren los evento mouseover y mouseout:
var x;
x=$("a");
x.mouseover(entraMouse);
x.mouseout(saleMouse);
La funcin entraMouse accede al elemento que recibe en su interior el

mouse (la obtenemos mediante la referencia que guarda this) y cambia el
color de la propiedad text-background del CSS:
function entraMouse()
{
$(this).css("background-color","#ff0");
}
De forma similar la funcin saleMouse retorna al color original:

function saleMouse()
{
$(this).css("background-color","#fff");
}
13 - Evento hover.
jQuery no solo mapea los eventos del DOM sino que provee otros que
combinan estos.
Como decamos es comn utilizar los eventos mouseover y mouseout en

comn, por eso en jQuery existe un evento llamado hover que tiene dos
parmetros:
$(elemento).hover([funcin de ingreso del mouse],[funcin de salida
del mouse])
Es decir que al evento hover asociamos dos funciones, la primera se

ejecuta cuando ingresamos la flecha del mouse dentro del elemento y la
segunda cuando retiramos la flecha del mouse.
Confeccionaremos el mismo problema del concepto que vimos los
eventos mouseover y mouseout.
Implementaremos una pgina que contenga tres hipervnculos, cuando
ingrese la flecha del mouse al hipervnculo cambiaremos el color de
fondo, retornando el color original cuando retiramos la flecha del
elemento.
pagina1.html
<html>
<head>
</head>
<body>
<ahref="http://www.lavoz.com.ar">LaVozdelInterior</a>
<br>
<ahref="http://www.lanacion.com.ar">Lanacin</a>
<br>
<ahref="http://www.clarin.com.ar">Elclarn</a>
<br>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("a");
x.hover(entraMouse,saleMouse);
}
functionentraMouse()
{
}
functionsaleMouse()
{
}
Utilizamos solamente el evento hover para cambiar el color de fondo del

ancla cuando se ingresa la flecha del mouse y retornarla al color original
cuando se sale:
var x;
x=$("a");
x.hover(entraMouse,saleMouse);
14 - Evento mousemove.
Este evento se dispara cuando se mueve la flecha del mouse dentro del
elemento HTML respectivo.
Si queremos recuperar la coordenada donde se encuentra en ese
momento el mouse, jQuery pasa el objeto event como parmetro (con la
ventaja que hace transparente las diferencias entre IE y otros
navegadores)
Problema:Capturar el evento mousemove a nivel del objeto document,
este se dispara cada vez que desplazamos el mouse dentro de la pgina.
Mostrar la coordenada donde se encuentra la flecha del mouse.
pagina1.html
<html>
<head>
<scriptlanguage="javascript"src="funciones.js"
type="text/javascript"></script>
</head>
<body>
<pid="corx">coordenadax=</p>
<pid="cory">coordenaday=</p>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$(document);
x.mousemove(moverMouse);
}
functionmoverMouse(event)
{
varx;
x=$("#corx");
x.text("coordenadax="+event.clientX);
x=$("#cory");
x.text("coordenaday="+event.clientY);
}
Primero obtenemos la referencia del objeto document y le registramos la

funcin a ejecutar cuando se desplace el mouse:
var x;
x=$(document);
x.mousemove(moverMouse);
La funcin que se ejecuta cada vez que se desplaza la flecha del mouse
en el documento es:
function moverMouse(event)
{
var x;
x=$("#corx");
x.text("coordenada x="+event.clientX);
x=$("#cory");
x.text("coordenada y="+event.clientY);
}
En esta creamos un objeto jQuery a partir del id del primer prrafo y

fijamos el texto del mismo con el valor del atributo event.clientX que
almacena la coordenada x de la flecha del mouse:
x=$("#corx");
x.text("coordenada x="+event.clientX);
15 - Eventos mousedown y mouseup.
El evento mousedown se dispara cuando presionamos alguno de los

botones del mouse y el evento mouseup cuando dejamos de presionar el
botn.
Implementemos una pgina que contenga una tabla con una fila y dos
columna, al presionar el botn del mouse dentro de una casilla de la tabla
cambiar el color de fondo de la misma por amarillo y cuando levantamos
el dedo del mouse regresar a color blanco la casilla.
pagina1.html
<html>
<head>
</head>
<body>
<tableborder="1">
<tr>
<td>1111111111</td><td>1111111111</td>
</tr>
</table>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("td");
x.mousedown(presionaMouse);
x.mouseup(sueltaMouse);
}
functionpresionaMouse()
{
}
functionsueltaMouse()
{
}
Primero asociamos los eventos mousedown y mouseup a todos los

elementos td del documento:
var x;
x=$("td");
x.mousedown(presionaMouse);
x.mouseup(sueltaMouse);
Cuando se presiona algn botn del mouse dentro de una celda de la

tabla se dispara la funcin:
function presionaMouse()
{
$(this).css("background-color","#ff0");
}
De forma similar cuando se suelta el botn del mouse se dispara la

funcin:
function sueltaMouse()
{
$(this).css("background-color","#fff");
}
16 - Evento dblclick.
El evento dblclick se dispara cuando se presiona dos veces seguidas el

botn izquierdo del mouse.
Para ver el funcionamiento de este evento crearemos un div en una
coordenada absoluta y lo ocultaremos al hacer doble clic en su interior.
pagina1.html
<html>
<head>
</head>
<body>
<divid="recuadro">
<h1>Dobleclicparaocultaresterecuadro</h1>
</div>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("#recuadro");
x.dblclick(dobleClic);
}
functiondobleClic()
{
varx;
x=$(this);
x.hide()
}
estilos.css
#recuadro{
color:#aa0;
backgroundcolor:#ff0;
position:absolute;
textalign:center;
left:40px;
top:30px;
width:800px;
height:70px;
}
En la funcin inicializarEventos registramos el evento dblclick para el div:

var x;
x=$("#recuadro");
x.dblclick(dobleClic);
Cuando se presiona dos veces seguidas dentro del div se dispara la

funcin:
function dobleClic()
{
var x;
x=$(this);
x.hide()
}
donde obtenemos la referencia del elemento que emiti el evento y

llamamos al mtodo hide para que lo oculte.
17 - Evento focus.
El evento focus se produce cuando se activa el control. Podemos

capturar el evento focus de un control de tipo text, textarea, button,
checkbox, fileupload, password, radio, reset y submit.
Es comn a muchos sitio donde se puede buscar informacin,disponer

un control de tipo text con la leyenda 'Buscar...' y sin ningn botn a su
lado. Cuando el control toma foco se borra automticamente su
contenido, el operador ingresa el texto a buscar y presiona la tecla
ENTER.Para probar como capturar este evento implementaremos una
pgina que resuelva el problema anteriormente planteado.
pagina1.html
<html>
<head>
</head>
<body>
<formaction="#"method="post">
<inputtype="text"name="buscar"id="buscar"
value="Buscar..."size="20">
</form>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("#buscar");
x.focus(tomaFoco);
}
functiontomaFoco()
{
varx=$("#buscar");
x.attr("value","");
}
En la funcin inicializarEventos creamos un objeto jQuery a partir del id

del control de tipo text y asociamos el evento focus con el mtodo
tomaFoco:
x=$("#buscar");
x.focus(tomaFoco);
El mtodo tomaFoco obtiene la referencia del elemento tipo text y

mediante el mtodo attr modifica la propiedad value:
function tomaFoco()
{
var x=$("#buscar");
x.attr("value","");
}
18 - Evento blur.
El evento blur se dispara cuando pierde el foco el control.

Podemos capturar el evento blur de un control de tipo text, textarea,
button, checkbox, fileupload, password, radio, reset y submit.
Para probar su funcionamiento dispondremos dos controles de tipo text
con algn contenido. Fijaremos de color azul su fuente. Al tomar foco el
control cambiar a color rojo y al perder el foco volver a color azul.
pagina1.html
<html>
<head>
</head>
<body>
<formaction="#"method="post">
<inputtype="text"name="text1"id="text1"value="Hola"
size="20">
<br>
<inputtype="text"name="text2"id="text2"value="Hola"
size="20">
</form>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx=$("#text1");
x.focus(tomaFoco);
x.blur(pierdeFoco);
x=$("#text2");
x.focus(tomaFoco);
x.blur(pierdeFoco);
}
functiontomaFoco()
{
varx=$(this);
x.css("color","#f00");
}
functionpierdeFoco()
{
varx=$(this);
x.css("color","#00f");
}
estilos.css
#text1,#text2{
color:#00f;
}
En la funcin inicializar eventos asociamos los eventos focus y blur a los

dos controles:
{
var x=$("#text1");
x.focus(tomaFoco);
x.blur(pierdeFoco);
x=$("#text2");
x.focus(tomaFoco);
x.blur(pierdeFoco);
}
El evento tomaFoco cambia de color a rojo al texto del control

seleccionado:
function tomaFoco()
{
var x=$(this);
x.css("color","#f00");
}
De forma similar pierdeFoco cambia a azul:

function pierdeFoco()
{
var x=$(this);
x.css("color","#00f");
}
19 - Manipulacin de los elementos del DOM.
jQuery dispone de una serie de mtodos que nos facilitan el tratamiento

de los elementos del Dom.
Confeccionaremos un problema que haga uso de estos mtodos.
Problema:Implementar una pgina que contenga una lista con cuatro
items. Probar distintos mtodos para manipular la lista (borrar, insertar)
pagina1.html
<html>
<head>
</head>
<body>
<h1>MtodosparamanipularnodosdelDOMconjQuery.</h1>
<ul>
<li>Primeritem.</li>
<li>Segundoitem.</li>
<li>Terceritem.</li>
<li>Cuartoitem.</li>
</ul>
<inputtype="button"id="boton1"value="Eliminarlalista
completa."><br>
<inputtype="button"id="boton2"value="RestaurarLista"><br>
<inputtype="button"id="boton3"value="Aadirunelementoalfinalde
lalista"><br>
<inputtype="button"id="boton4"value="Aadirunelementoal
principiodelalista"><br>
<inputtype="button"id="boton5"value="Eliminarelltimo
elemento."><br>
<inputtype="button"id="boton6"value="Eliminarelprimer
elemento."><br>
<inputtype="button"id="boton7"value="Eliminarelprimeroysegundo
elemento."><br>
<inputtype="button"id="boton8"value="Eliminarlosdos
ltimos."><br>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("#boton1");
x.click(eliminarElementos)
x=$("#boton2");
x.click(restaurarLista)
x=$("#boton3");
x.click(anadirElementoFinal)
x=$("#boton4");
x.click(anadirElementoPrincipio)
x=$("#boton5");
x.click(eliminarElementoFinal)
x=$("#boton6");
x.click(eliminarElementoPrincipio)
x=$("#boton7");
x.click(eliminarPrimeroSegundo)
x=$("#boton8");
x.click(eliminarDosUltimos)
}
functioneliminarElementos()
{
varx;
x=$("ul");
x.empty();
}
functionrestaurarLista()
{
$("ul").html('<li>Primeritem.</li><li>
Segundoitem.</li><li>Terceritem.</li><li>Cuartoitem.</li>');
}
functionanadirElementoFinal()
{
varx;
x=$("ul");
x.append("<li>otroitemalfinal</li>");
}
functionanadirElementoPrincipio()
{
varx;
x=$("ul");
x.prepend("<li>otroitemalprincipio</li>");
}
functioneliminarElementoFinal()
{
varx;
x=$("li");
varcantidad=x.length;
x=x.eq(cantidad1);
x.remove();
}
functioneliminarElementoPrincipio()
{
varx;
x=$("li");
x=x.eq(0);
x.remove();
}
functioneliminarPrimeroSegundo()
{
varx;
x=$("li");
x=x.lt(2);
x.remove();
}
functioneliminarDosUltimos()
{
varx;
x=$("li");
x=x.gt(x.length3);
x.remove();
}
Para borrar todos los elementos contenidos en una lista obtenemos la

referencia de la lista mediante la funcin $ y seguidamente llamamos al
mtodo empty:
function eliminarElementos()
{
var x;
x=$("ul");
x.empty();
}
Para restaurar la lista utilizamos el mtodo html insertando directamente

los item a partir del elemento ul:
function restaurarLista()
{
$("ul").html('<li>Primer item.</li><li>
Segundo item.</li><li>Tercer item.</li><li>Cuarto item.</li>');
}
Para aadir un elemento al final de la coleccin de elementos del objeto

jQuery disponemos del mtodo append:
function anadirElementoFinal()
{
var x;
x=$("ul");
x.append("<li>otro item al final</li>");
}
Para aadir un elemento al principio disponemos de un mtodo llamado

prepend:
function anadirElementoPrincipio()
{
var x;
x=$("ul");
x.prepend("<li>otro item al principio</li>");
}
Para eliminar un elemento del final de la lista, primero obtenemos la

cantidad de elementos que almacena el objeto jQuery por medio de la
propiedad length y luego mediante el mtodo eq (equal) indicamos la
posicin del elemento que necesitamos (el mtodo eq retorna otro objeto
de tipo jQuery) y por ltimo llamamos al mtodo remove:
function eliminarElementoFinal()
{
var x;
x=$("li");
var cantidad=x.length;
x=x.eq(cantidad-1);
x.remove();
}
Para eliminar un elemento del principio es similar a borrar el ltimo, pero

aqu no necesitamos saber la cantidad de elementos que almacena el
objeto jQuery ya que debemos acceder al primero (el primero se
almacena en la posicin cero):
function eliminarElementoPrincipio()
{
var x;
x=$("li");
x=x.eq(0);
x.remove();
}
Para eliminar el primero y segundo elemento que almacena el objeto

jQuery disponemos de un mtodo lt (low than) que retorna todos los
elementos menores a la posicin que le pasamos como parmetro (en
nuestro ejemplo nos retorna los elementos de la posicin 0 y 1:
function eliminarPrimeroSegundo()
{
var x;
x=$("li");
x=x.lt(2);
x.remove();
}
Para eliminar los dos elementos finales podemos rescatarlos mediante el

mtodo gt (great than) que retorna un objeto jQuery con todos los
elementos que superan la posicin que le indicamos en el parmetro:
function eliminarDosUltimos()
{
var x;
x=$("li");
x=x.gt(x.length-3);
x.remove();
}
20 - Efectos con los mtodos show y hide.
Una caracterstica muy interesante de jQuery que nos provee de un serie

de efectos visuales.
Ya utilizamos los mtodos hide() y show(), que tienen por objetivo ocultar
y mostrar elementos HTML. Ahora veremos que podemos hacer que
cuando se oculte o muestre un elemento lo haga con una pequea
animacin (que se oculte o muestre lentamente)
Estas caractersticas pueden ayudar al usuario a concentrarse en una
parte de la pgina donde sucede la animacin
Problema:Confeccionar una pgina que muestre un recuadro con texto.
Disponer dos botones, uno que oculte lentamente el cuadro y el otro que
lo muestre rpidamente.
pagina1.html
<html>
<head>
</head>
<body>
<inputtype="button"id="boton1"value="Ocultarrecuadro">
<inputtype="button"id="boton2"value="Mostrarrecuadro">
<divid="descripcion"class="recuadro">
deinternet.</p>
interpreta
ylasdespliega
enlapantalladeacuerdoasuobjetivo.Veremosquehayelementos
paradisponer
imgenes
sobreunapgina,hipervnculosquenospermitendirigirnosaotra
pgina,listas,tablas
paratabulardatos,etc.</b>
detexto(ennuestrocaso
emplearemosestesitio)yunnavegadordeinternet(IExplorer,FireFox
etc.),
emplearemos
elnavegadorqueenesteprecisomomentoestutilizando(recuerdeque
ustedestviendo
enesteprecisomomentounapginaHTMLconsunavegador).</p>
propuestosymodifique
losquesepresentanyaresueltos.<p>
que
nuncaantestrabaj
conelmismo.NopretendemostrartodasloselementosHTMLenforma
alfabtica.</p>
enlaquesedauna
explicacincompleta,luegosepasaalaseccindelejercicio
resuelto
dondepodemos
verelcontenidodelapginaHTMLycmolavisualizaelnavegador.
Porltimoy
talvezlaseccinmsimportantedeestetutorialesdondesepropone
queusted
hagapginasenformaautnoma(donderealmentepodrdarse
cuentasielconceptoquedfirme).</p>
</div>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx=$("#boton1");
x.click(ocultarRecuadro);
x=$("#boton2");
x.click(mostrarRecuadro);
}
functionocultarRecuadro()
{
x.hide("slow");
}
functionmostrarRecuadro()
{
x.show("fast");
}
estilos.css
.recuadro{
fontfamily:verdana;
fontsize:14px;
bordertopwidth:1px;
}
La funcin ocultarRecuadro se ejecuta cuando presionamos el botn de

"Ocultar recuadro":
function ocultarRecuadro()
{
x.hide("slow");
}
donde obtenemos la referencia del div mediante su id y procedemos a

llamar al mtodo hide pasndole el string "slow", con esto logramos que
se oculte el recuadro lentamente.
De forma similar la funcin mostrarRecuadro:
function mostrarRecuadro()
{
x.show("fast");
}
llama a la funcin show pasando como parmetro el string "fast".

Hay varias formas para llamar a los mtodos show y hide:
Lo muestra en forma instantanea:
show()
Lo muestra con una animacin rpida:

show("fast")
Lo muestra con una animacin normal:

show("normal")
Lo muestra con una animacin lenta:
show("slow")
Lo muestra con una animacin que tarda tantos milisegundos como le

indicamos:
show([cantidad de milisegundos])

indicamos y ejecuta al final la funcin que le pasamos como segundo
parmetro:
show([cantidad de milisegundos],[funcin])
De forma similar funciona el mtodo hide.
21 - Efectos con los mtodos fadeIn y fadeOut.
Estos dos mtodos son similares a show y hide pero con la diferencia
que fadeIn hace aparecer los elementos HTML con opacidad. El mtodo
fadeOut decolora hasta desaparecer, es decir reduce la opacidad del
elemento en forma progresiva.
Disponer dos botones, uno que oculte (fadeOut) y el otro que lo muestre
(fadeIn).
pagina1.html
<html>
<head>
</head>
<body>
<inputtype="button"id="boton1"value="Ocultarrecuadro">
<inputtype="button"id="boton2"value="Mostrarrecuadro">
deinternet.</p>
interpreta
ylasdespliegaenlapantalla
deacuerdoasuobjetivo.Veremosquehayelementosparadisponer
imgenes
sobreunapgina,hipervnculos
quenospermitendirigirnosaotrapgina,listas,tablasparatabular
datos,etc.</b>
detexto(ennuestrocasoemplearemoseste
sitio)yunnavegadordeinternet(IExplorer,FireFoxetc.),
emplearemoselnavegador
queenestepreciso
momentoestutilizando(recuerdequeustedestviendoeneste
precisomomentounapginaHTMLconsu
navegador).</p>
propuestosymodifiquelosquese
presentanyaresueltos.<p>
que
nuncaantestrabajconelmismo.
NopretendemostrartodasloselementosHTMLenformaalfabtica.</p>
enlaquesedaunaexplicacincompleta,
luegosepasaalaseccindelejercicioresueltodondepodemosverel
contenidodelapginaHTMLycmo
lavisualizaelnavegador.Porltimoytalvezlaseccinms
importantedeestetutorialesdondese
proponequeustedhagapginasenformaautnoma(donderealmente
podrdarsecuentasielconceptoqued
firme).</p>
</div>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx=$("#boton1");
x=$("#boton2");
}
functionocultarRecuadro()
{
x.fadeOut("slow");
}
functionmostrarRecuadro()
{
x.fadeIn("slow");
}
estilos.css
.recuadro{
fontfamily:verdana;
fontsize:14px;
bordertopwidth:1px;
}
La funcin ocultarRecuadro se ejecuta cuando presionamos el botn de

"Ocultar recuadro":
{
x.fadeOut("slow");
}
donde obtenemos la referencia del div mediante su id y procedemos a

llamar al mtodo fadeOut pasndole el string "slow", con esto logramos
que se oculte el recuadro se decolore lentamente hasta desaparecer.
De forma similar la funcin mostrarRecuadro:
{
x.fadeIn("slow");
}
llama a la funcin fadeIn pasando como parmetro el string "slow".

Las formas de llamar a los mtodos fadeIn y fadeOut:
Lo muestra con una animacin rpida:
fadeIn("fast")
Lo muestra con una animacin normal:

fadeIn("normal")
Lo muestra con una animacin lenta:

fadeIn("slow")

indicamos:
fadeIn([cantidad de milisegundos])

indicamos y ejecuta al final la funcin que le pasamos como segundo
parmetro:
fadeIn([cantidad de milisegundos],[funcin])
De forma similar funciona el mtodo fadeOut.
22 - Efecto con el mtodo fadeTo.
El mtodo fadeTo puede modificar la opacidad de un elemento, el efecto

es llevar la opacidad actual hasta el valor que le pasamos al mtodo
fadeTo
Podemos inicializar este mtodo de las siguientes formas:
fadeTo([velocidad],[valor de opacidad])
Indicamos la velocidad de transicin del estado actual al nuevo estado

(slow/normal/fast) o un valor indicado en milisegndos.
El valor de la opacidad es un numero real entre 0 y 1. 1 significa sin
opacidad y 0 es transparente.
Tambin podemos llamar al mtodo fadeTo con tres parmetros:
fadeTo([velocidad],[valor de opacidad],[funcin])
Esta segunda estructura de la funcin permite ejecutar una funcin

cuando finaliza la transicin.
Hay que tener en cuenta que fadeTo por ms que indiquemos el valor 0
en opacidad el espacio que ocupa el elemento en la pgina seguir
ocupado por un recuadro vaco.
Disponer dos botones, uno que cambie la opacidad lentamente hasta el
valor 0.5 y el otro que lo muestre lentamente hasta el valor 1.
pagina1.html
<html>
<head>
</head>
<body>
<inputtype="button"id="boton1"value="Reduciropacidad">
<inputtype="button"id="boton2"value="Aumentaropacidad">
deinternet.</p>
interpreta
hayelementos
paradisponerimgenessobreunapgina,hipervnculosque
nospermitendirigirnosaotrapgina,listas,tablasparatabular
datos,etc.</b>
internet(IExplorer,
FireFoxetc.),emplearemoselnavegadorqueenesteprecisomomento
est
utilizando(recuerdequeustedestviendoenesteprecisomomentouna
pginaHTMLconsunavegador).</p>
que
nuncaantestrabajconelmismo.Nopretendemostrartodaslos
elementos
HTMLenformaalfabtica.</p>
delejercicioresueltodondepodemosverelcontenidodelapgina
HTML
ycmolavisualizaelnavegador.Porltimoytalvezlaseccin
msimportantedeestetutorialesdondeseproponequeustedhaga
pginas
enformaautnoma(donderealmentepodrdarsecuentasielconcepto
quedfirme).</p>
</div>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx=$("#boton1");
x.click(reducirOpacidadRecuadro);
x=$("#boton2");
x.click(aumentarOpacidadRecuadro);
}
functionreducirOpacidadRecuadro()
{
x.fadeTo("slow",0.5);
}
functionaumentarOpacidadRecuadro()
{
x.fadeTo("slow",1);
}
estilos.css
.recuadro{
fontfamily:verdana;
fontsize:14px;
bordertopwidth:1px;
}
Cuando se presiona el botn de reducir la opacidad llamamos al mtodo

fadeTo con el valor 0.5:
function reducirOpacidadRecuadro()
{
}
y cuando presionamos el botn de aumentar la opacidad llamamos al

mtodo fadeTo con valor 1 en opacidad (significa opacidad total):
function aumentarOpacidadRecuadro()
{
x.fadeTo("slow",1);
}
23 - Efecto con el mtodo toggle.
El mtodo toggle permite cada vez que se ejecute cambiar de estado la

visibilidad del elemento HTML, es decir si est visible pasa a oculto y si
se encuentra oculto pasa a visible.
Problema:Hacer que un bloque de informacin pase de visible a oculto
lentamente y viceversa al presionar un botn.
pagina1.html
<html>
<head>
</head>
<body>
<inputtype="button"id="boton1"value="Mostrar/Ocultar">
deinternet.</p>
interpreta
ylasdespliegaenlapantalla
deacuerdoasuobjetivo.Veremosquehayelementosparadisponer
imgenes
sobreunapgina,hipervnculos
quenospermitendirigirnosaotrapgina,listas,tablasparatabular
datos,etc.</b><p>ParapodercrearunapginaHTMLserequiereun
simpleeditor
detexto(ennuestrocasoemplearemos
estesitio)yunnavegadordeinternet(IExplorer,FireFoxetc.),
emplearemos
elnavegadorqueenesteprecisomomentoestutilizando
(recuerdequeustedestviendoenesteprecisomomentounapgina
HTML
consunavegador).</p>
que
nuncaantestrabajconelmismo.
NopretendemostrartodasloselementosHTMLenformaalfabtica.</p>
enlaquesedaunaexplicacincompleta,
luegosepasaalaseccindelejercicioresueltodondepodemosverel
contenidodelapginaHTMLycmolavisualizaelnavegador.
Porltimoytalvezlaseccinmsimportantedeestetutoriales
dondese
proponequeustedhagapginasenformaautnoma(donderealmente
podrdarsecuentasielconceptoqued
firme).</p>
</div>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx=$("#boton1");
x.click(ocultarMostrarRecuadro);
}
functionocultarMostrarRecuadro()
{
x.toggle("slow");
}
estilos.css
.recuadro{
fontfamily:verdana;
fontsize:14px;
bordertopwidth:1px;
}
La funcin ocultarMostrarRecuadro:
function ocultarMostrarRecuadro()
{
x.toggle("slow");
}
se encarga de llamar al mtodo toggle del objeto jQuery, y este analiza si

actualmente el elemento est visible u oculto, la transicin se hace en
forma lenta ya que le pasamos como parmetro el string "slow".
24 - Iteracin por los elementos (each)
jQuery dispone de un mtodo que nos permite asociar una funcin que
se ejecutar por cada elemento que contenga la lista del objeto jQuery.
Dentro de esta funcin podemos manipular el elemento actual.
La sintaxis del iterador each es:
var x;
x=$([elementos]);
x.each([nombre de funcion])
Problema:Resaltar con fondo amarillo todos los prrafos que tienen

menos de 100 caracteres.
pagina1.html
<html>
<head>
</head>
<body>
<divid="parrafos">
<p>prrafo1prrafo1prrafo1prrafo
1prrafo1prrafo1prrafo1prrafo1
prrafo1prrafo1prrafo1prrafo1prrafo
1prrafo1prrafo1prrafo1
1prrafo1prrafo1prrafo1</p>
<p>prrafo2prrafo2prrafo2prrafo2</p>
3prrafo3prrafo3
3prrafo3</p>
4prrafo4</p>
</div>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("#parrafosp");
x.each(resaltarParrafos);
}
functionresaltarParrafos()
{
varx=$(this);
if(x.text().length<100)
{
}
}
En la funcin inicializarEventos obtenemos la lista de prrafos contenidas

en el div y luego a este objeto jQuery mediante el mtodo each
indicamos el nombre de la funcin que procesar a cada elemento:
x=$("#parrafos p");
x.each(resaltarParrafos);
La funcin resaltarParrafos se ejecuta por cada uno de los prrafos

contenidos en el objeto jQuery (en nuestro caso 4 prrafos):
function resaltarParrafos()
{
var x=$(this);
if (x.text().length<100)
{
x.css("background-color","#ff0");
}
}
Lo primero que hacemos mediante la funcin $ y pasando this como

parmetro obtenemos la referencia del prrafo a procesar. Accedemos al
mtodo text() que nos retorna el texto del prrafo propiamente dicho.
El mtodo text() retorna un string por lo que podemos acceder al atributo
length y verificar la cantidad de caracteres que tiene, en caso de ser
inferior a 100 procedemos a cambiar el color de fondo de dicho prrafo.
25 - Ajax: mtodo load.
Para el entendimiento de los prximos conceptos se recomienda haber

realizado el tutorial de AJAX Ya
Este mtodo es el ms sencillo para recuperar datos del servidor.
La sintaxis de este mtodo es el siguiente:
load([nombre de la pgina],[parmetros],[funcion final])
Otra cosa muy importante es la llamada de este mtodo a partir del

elemento HTML donde queremos que se agregue la informacin que
retorna el servidor (es decir que utilizamos este mtodo cuando no
tenemos que procesarlo en el navegador, sino directamente mostrarlo en
forma completa). El segundo y tercer parmetro son opcionales.
Problema:Confeccionar una pgina que muestre una lista de
hipervnculos con los distintos signos del horscopo y luego al ser
presionado no recargue la pgina completa sino que se enve una
peticin al servidor y el mismo retorne la informacin de dicho signo,
luego se actualice solo el contenido de un div del archivo HTML.
pagina1.html
<html>
<head>
</head>
<body>
<h1>Signosdelhorscopo.</h1>
<divid="menu">
<p><aid="enlace1"href="pagina1.php?cod=1">Aries</a></p>
<p><aid="enlace2"href="pagina1.php?cod=2">Tauro</a></p>
<p><aid="enlace3"href="pagina1.php?cod=3">Geminis</a></p>
<p><aid="enlace4"href="pagina1.php?cod=4">Cancer</a></p>
<p><aid="enlace5"href="pagina1.php?cod=5">Leo</a></p>
<p><aid="enlace6"href="pagina1.php?cod=6">Virgo</a></p>
<p><aid="enlace7"href="pagina1.php?cod=7">Libra</a></p>
<p><aid="enlace8"href="pagina1.php?cod=8">Escorpio</a></p>
<p><aid="enlace9"href="pagina1.php?cod=9">Sagitario</a></p>
<p><aid="enlace10"href="pagina1.php?cod=10">Capricornio</a></p>
<p><aid="enlace11"href="pagina1.php?cod=11">Acuario</a></p>
<p><aid="enlace12"href="pagina1.php?cod=12">Piscis</a></p>
</div>
<divid="detalles">Seleccionesusigno.</div>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("#menua");
x.click(presionEnlace);
}
functionpresionEnlace()
{
varpagina=$(this).attr("href");
varx=$("#detalles");
x.load(pagina);
returnfalse;
}
pagina1.php
<?php
header('ContentType:text/html;charset=ISO88591');
if($_REQUEST['cod']==1)
echo"<strong>Aries:</strong>Hoyloscambiossernfsicos,
personales,decarcter,Tesentirsimpulsivoytomars
iniciativas.Perodoendondeconsiderarsunirteaagrupaciones
debeneficencia,odeayudaalosdems.";
echo"<strong>Tauro:</strong>Hoyloscambiossernprivados,
ntimos.Recuerdos.Ayuda,solidaridad.Asuntosenlugaresde
retiro.Tu
cnyugepuedeaportarbuenstatusatuvidaoapoyoatu
profesin.";
echo"<strong>Gminis:</strong>Losasuntosdehoytienen
queverconlasamistades,reuniones,actividadesconellos.Da
esperanzado,
ilusiones.Muchaenergasexualyfuerzaemocional.Deseosdifciles
decontrolar.";
echo"<strong>Cancer:</strong>Estedalaprofesin
ylasrelacionesconsuperioresycontumadreserndeimportancia.
Actividad
enrelacinaestostemas.Momentospositivosconcompaerosde
trabajo.Actividadlaboralagradable.";
echo"<strong>Leo:</strong>Estedalosestudios,los
viajes,elextranjeroylaespiritualidadsernloimportante.
Pensamientos,
religinyfilosofatambin.Vivenciaskrmicasde
lapocatevuelvenresponsabletomandodecisiones.";
echo"<strong>Virgo:</strong>Paraestedatomaimportancia
tuvidasexual,talvezmiedos,temaslegales,juiciosoherencias.
Experiencias
extraas.Haykarmadepruebaduranteesteperodoentuparte
psicolgica,
generndosealgunosreplanteos.";
echo"<strong>Libra:</strong>Hoytodoasuntotienequevercon
tupareja,tambinconsocios,conlagenteoelpblico.Ellos
sernlomsimportantedelda.Gananciasatravs
deespeculacionesodeljuego.Actividadesvocacionales
artsticas.";
echo"<strong>Escorpio:</strong>Hoytodoasuntotienequever
contemasdetrabajoydesalud.Prestaatencinaambos.
Experiencias
diversasconcompaeros.Duranteesteperodotendrsmuchos
recursosparaganardinero.";
echo"<strong>Sagitario:</strong>Duranteestedase
vivirncambiosenrelacinalosnoviazgosoaloshijos.
Creatividad,
actividad,diversionesysalidas.Perododeencuentrosconpersonas
o
situacionesqueteimpresionan.";
echo"<strong>Capricornio:</strong>Loscambiosdelda
tienenquevercontuhogar,conlaconvivenciayconelpadre.
Asuntosrelativos
alcarcterenlaconvivencia.Elkarmaderesponsabilidaddeestos
momentos
teacercaralmundodelodesconocido,muchamadurezycontactocon
el
msall.";
echo"<strong>Acuario:</strong>Hoytodoasuntotienequever
conelentornoinmediato,hermanosyvecinos,conlacomunicacin,
los
viajescortosotrasladosfrecuentes.Elhablarytrasladarseser
importante
hoy.Mentalidadeideasactivas.";
echo"<strong>Piscis:</strong>Duranteestedasevivirn
cambiosenlaeconoma,movimientosenlosingresos,negocios,
valores.
Momentosdegranfuerzaydecisinprofesionales,buscarsel
liderazgo.";
?>
estilos.css
#menu{
fontfamily:Arial;
margin:5px;
}
#menup{
margin:0px;
padding:0px;
}
#menua{
display:block;
padding:3px;
width:160px;
backgroundcolor:#f7f8e8;
borderbottom:1pxsolid#eee;
textalign:center;
}
#menua:link,#menua:visited{
color:#f00;
textdecoration:none;
}
#menua:hover{
backgroundcolor:#369;
color:#fff;
}
#detalles{
backgroundcolor:#ffc;
textalign:left;
fontfamily:verdana;
borderwidth:0;
padding:5px;
border:1pxdotted#fa0;
margin:5px;
}
Como podemos observar el cdigo JavaScript es muy pequeo, veamos:

{
var x;
x=$("#menu a");
}
En la funcin inicializarEventos cremos un objeto jQuery con la referencia

de todas las anclas que estn contenidas en el div #menu. Asociamos el
evento click a todos los enlaces.
La funcin presionEnlace:
function presionEnlace()
{
var pagina=$(this).attr("href");
var x=$("#detalles");
x.load(pagina);
return false;
Extraemos el atributo href del hipervnculo que dispar el evento

(tengamos en cuenta que almacena el nombre de la pgina y el
parmetro, por ejemplo:"pagina1.php?cod=6)
Creamos un objeto jQuery a partir del div #detalles:

Llamamos al mtodo load del objeto jQuery y le pasamos como

parmetro el nombre de la pgina a recuperar:
x.load(pagina);
El mtodo load se encarga de hacer la comunicacin asincrnica con el

servidor, esperar y recibir los datos y finalmente aadir la informacin al
elemento HTML (en nuestro ejemplo el div #detalles)
Por ltimo la funcin retorna false para anular la propagacin de eventos
y desactivar tambin el evento por defecto que ocurre cuando se
presiona un enlace.
26 - Ajax: mtodos ajaxStart y ajaxStop
Estos dos mtodos se pueden asociar a un objeto de tipo jQuery, tienen

como parmetro una funcin:
ajaxStart([funcin])
La funcin de ajaxStart se dispara cuando se inicia la peticin al servidor

y nos puede servir para mostrar en pantalla al usuario que estn llegando
datos del servidor.
ajaxStop([funcin])
Se dispara esta funcin cuando finalizar la peticin de datos al servidor.

Problema:Confeccionar un problema que muestre una lista de
hipervnculos con los distintos signos del horscopo y luego al ser
presionado no recargue la pgina completa sino que se enve una
peticin al servidor y el mismo retorne la informacin de dicho signo,
luego se actualice solo el contenido de un div del archivo HTML.
Mostrar un gif animado mientras los datos no llegaron del servidor.
pagina1.html
<html>
<head>
</head>
<body>
<h1>Signosdelhorscopo.</h1>
<divid="menu">
<p><aid="enlace1"href="pagina1.php?cod=1">Aries</a></p>
<p><aid="enlace2"href="pagina1.php?cod=2">Tauro</a></p>
<p><aid="enlace3"href="pagina1.php?cod=3">Geminis</a></p>
<p><aid="enlace4"href="pagina1.php?cod=4">Cancer</a></p>
<p><aid="enlace5"href="pagina1.php?cod=5">Leo</a></p>
<p><aid="enlace6"href="pagina1.php?cod=6">Virgo</a></p>
<p><aid="enlace7"href="pagina1.php?cod=7">Libra</a></p>
<p><aid="enlace8"href="pagina1.php?cod=8">Escorpio</a></p>
<p><aid="enlace9"href="pagina1.php?cod=9">Sagitario</a></p>
<p><aid="enlace10"href="pagina1.php?cod=10">Capricornio</a></p>
<p><aid="enlace11"href="pagina1.php?cod=11">Acuario</a></p>
<p><aid="enlace12"href="pagina1.php?cod=12">Piscis</a></p>
</div>
<divid="detalles">Seleccionesusigno.</div>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("#menua");
}
functionpresionEnlace()
{
varpagina=$(this).attr("href");
x.ajaxStart(inicioEnvio);
x.load(pagina);
returnfalse;
}
functioninicioEnvio()
{
x.html('<imgsrc="../cargando.gif">');
}
pagina1.php
<?php
header('ContentType:text/html;charset=ISO88591');
echo"<strong>Aries:</strong>Hoyloscambiossernfsicos,
personales,decarcter,Tesentirsimpulsivoytomars
iniciativas.Perodoendondeconsiderarsunirteaagrupaciones
debeneficencia,odeayudaalosdems.";
echo"<strong>Tauro:</strong>Hoyloscambiossernprivados,
ntimos.Recuerdos.Ayuda,solidaridad.Asuntosenlugaresde
retiro.Tu
cnyugepuedeaportarbuenstatusatuvidaoapoyoatu
profesin.";
echo"<strong>Gminis:</strong>Losasuntosdehoytienen
queverconlasamistades,reuniones,actividadesconellos.Da
esperanzado,
ilusiones.Muchaenergasexualyfuerzaemocional.Deseosdifciles
decontrolar.";
echo"<strong>Cancer:</strong>Estedalaprofesin
ylasrelacionesconsuperioresycontumadreserndeimportancia.
Actividad
enrelacinaestostemas.Momentospositivosconcompaerosde
trabajo.Actividadlaboralagradable.";
echo"<strong>Leo:</strong>Estedalosestudios,los
viajes,elextranjeroylaespiritualidadsernloimportante.
Pensamientos,
religinyfilosofatambin.Vivenciaskrmicasde
lapocatevuelvenresponsabletomandodecisiones.";
echo"<strong>Virgo:</strong>Paraestedatomaimportancia
tuvidasexual,talvezmiedos,temaslegales,juiciosoherencias.
Experiencias
extraas.Haykarmadepruebaduranteesteperodoentuparte
psicolgica,
generndosealgunosreplanteos.";
echo"<strong>Libra:</strong>Hoytodoasuntotienequevercon
tupareja,tambinconsocios,conlagenteoelpblico.Ellos
sernlomsimportantedelda.Gananciasatravs
deespeculacionesodeljuego.Actividadesvocacionales
artsticas.";
echo"<strong>Escorpio:</strong>Hoytodoasuntotienequever
contemasdetrabajoydesalud.Prestaatencinaambos.
Experiencias
diversasconcompaeros.Duranteesteperodotendrsmuchos
recursosparaganardinero.";
echo"<strong>Sagitario:</strong>Duranteestedase
vivirncambiosenrelacinalosnoviazgosoaloshijos.
Creatividad,
actividad,diversionesysalidas.Perododeencuentrosconpersonas
o
situacionesqueteimpresionan.";
echo"<strong>Capricornio:</strong>Loscambiosdelda
tienenquevercontuhogar,conlaconvivenciayconelpadre.
Asuntosrelativos
alcarcterenlaconvivencia.Elkarmaderesponsabilidaddeestos
momentos
teacercaralmundodelodesconocido,muchamadurezycontactocon
el
msall.";
echo"<strong>Acuario:</strong>Hoytodoasuntotienequever
conelentornoinmediato,hermanosyvecinos,conlacomunicacin,
los
viajescortosotrasladosfrecuentes.Elhablarytrasladarseser
importante
hoy.Mentalidadeideasactivas.";
echo"<strong>Piscis:</strong>Duranteestedasevivirn
cambiosenlaeconoma,movimientosenlosingresos,negocios,
valores.
Momentosdegranfuerzaydecisinprofesionales,buscarsel
liderazgo.";
sleep(1);
?>
estilos.css
#menu{
fontfamily:Arial;
margin:5px;
}
#menup{
margin:0px;
padding:0px;
}
#menua{
display:block;
padding:3px;
width:160px;
backgroundcolor:#f7f8e8;
borderbottom:1pxsolid#eee;
textalign:center;
}
#menua:link,#menua:visited{
color:#f00;
textdecoration:none;
}
#menua:hover{
backgroundcolor:#369;
color:#fff;
}
#detalles{
backgroundcolor:#ffc;
textalign:left;
fontfamily:verdana;
borderwidth:0;
padding:5px;
border:1pxdotted#fa0;
margin:5px;
}
Lo nuevo en este problema es que llamamos al mtodo ajaxStart con el

mismo objeto jQuery que llama al mtodo load:
function presionEnlace()
{
x.ajaxStart(inicioEnvio);
x.load(pagina);
return false;
}
Luego cuando se activa la peticin de la pgina al servidor el objeto

jQuery llama a la funcin inicioEvento, donde mostramos el gif animado:
function inicioEnvio()
{
x.html('<img src="../cargando.gif">');
}
No ocultamos el gif animado ya que se est mostrando en el div

#detalles. Dicho div ser inicializado por el objeto jQuery con los datos
enviados por el servidor y borrar el elemento img.
27 - $.get y $.post(Pasando datos al servidor por los

mtodos GET y POST)
Utilizamos estas funciones cuando no queremos inyectar directamente

los datos a nuestra pgina, sino que queremos procesarlos y
eventualmente agregarlos en distintas partes.
La sintaxis de la funcin $.get es distinta a la ya utilizada $, en este caso
es una funcin global de la librera jQuery:
$.get([nombre de la pgina],[parmetros a enviarse por el mtodo get],
[funcin que recibe los datos del servidor])
Tambin podemos llamarla:
jQuery.get([nombre de la pgina],[parmetros a enviarse por el mtodo

get],
[funcin que recibe los datos del servidor])
La funcin $.post es idntica a la funcin $.get, lo nico que difiere es

como el protocolo HTTP empaqueta los datos y los enva al servidor.
Normalmente se utiliza la funcin $.post, ya que no est limitado la
cantidad de datos que se pueden enviar al servidor.
Problema:Implementar una aplicacin que calcule el cuadrado de un
nmero que ingresamos por teclado. La operacin se realiza en el
servidor, le enviamos los datos mediante la funcin de jQuery $.get
pagina1.html
<html>
<head>
</head>
<body>
<formaction="pagina1.php"method="post"id="formulario">
Ingresenro:<inputtype="text"name="nro"id="nro"
size="10"><br>
<inputtype="submit"value="Calcularelcuadrado"id="enviar">
<divid="resultados"></div>
</form>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("#enviar");
x.click(presionSubmit);
}
functionpresionSubmit()
{
varv=$("#nro").attr("value");
$.get("pagina1.php",{numero:v},llegadaDatos);
returnfalse;
}
functionllegadaDatos(datos)
{
alert(datos);
pagina1.php
<?php
$cuadrado=$_REQUEST['numero']*$_REQUEST['numero'];
echo$cuadrado;
?>
Veamos el cdigo JavaScript para comunicarse con el servidor:

Primero en la funcin inicializarEventos enlazamos el evento click al
botn submit del formulario:
{
var x;
x=$("#enviar");
}
Cuando presionamos el botn extraemos el valor del control text y

llamamos a la funcin $.get indicando el nombre de la pgina a llamar, un
objeto literal con todos los parmetros y sus valores (en este caso solo
tenemos un parmetro llamado numero) y finalmente el nombre de la
funcin que se ejecutar cuando lleguen los datos del servidor:
function presionSubmit()
{
var v=$("#nro").attr("value");
$.get("pagina1.php",{numero:v},llegadaDatos);
return false;
}
La funcin que se ejecuta cuando llegan los datos del servidor recibe un
string:
function llegadaDatos(datos)
{
alert(datos);
}
28 - $.getJSON
La funcin getJSON hace una peticin de datos al servidor considerando

que retorna la informacin con notacin JSON. La sintaxis de esta
funcin es:
$.getJSON([nombre de la pgina], [parmetros], [funcin que recibe los

datos])
La funcin getJSON procede a generar un objeto en JavaScript y

nosotros en la funcin lo procesamos.
Problema:Confeccionar un sitio que permita ingresar el documento de
una persona y nos retorne su apellido, nombre y lugar donde debe votar.
pagina1.html
<html>
<head>
</head>
<body>
Ingresedni(soloexistenlosvalores1,2y3):<inputtype="text"
name="dni"id="dni"size="10"><br>
<inputtype="button"value="Enviar"id="boton1">
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("#boton1");
}
{
varv=$("#dni").attr("value");
$.getJSON("pagina1.php",{dni:v},llegadaDatos);
returnfalse;
}
{
$("#resultados").html("Nombre:"+datos.nombre+
"<br>"+"Apellido:"+
datos.apellido+"<br>"+
"Direccion:"+datos.direccion);
}
pagina1.php
<?php
header('ContentType:text/txt;charset=ISO88591');
$nombre='';
$apellido='';
$direccion='';
if($_REQUEST['dni']=='1')
{
$nombre='Juan';
$apellido='Rodriguez';
$direccion='Colon123';
}
{
$nombre='Ana';
$apellido='Maldonado';
$direccion='Lima245';
}
{
$nombre='laura';
$apellido='Pueyrredon';
$direccion='Laprida785';
}
echo"{
'nombre':'$nombre',
'apellido':'$apellido',
'direccion':'$direccion'
}";
?>
Cuando se presiona el botn submit procedemos a realizar la peticin

asincrnica utilizando la funcin getJSON:
{
var v=$("#dni").attr("value");
$.getJSON("pagina1.php",{dni:v},llegadaDatos);
return false;
}
Como hemos llamado a la funcin getJSON la misma nos retorna un

objeto JavaScript para procesarlo:
function llegadaDatos(datos)
{
$("#resultados").html("Nombre:"+datos.nombre+
"<br>"+"Apellido:"+
datos.apellido+"<br>"+
"Direccion:"+datos.direccion);
}
Tengamos en cuenta que el programa en el servidor debe retornar un

archivo con notacin JSON:
<?php
header('Content-Type: text/txt; charset=ISO-8859-1');
$nombre='';
$apellido='';
$direccion='';
if ($_REQUEST['dni']=='1')
{
$nombre='Juan';
$apellido='Rodriguez';
$direccion='Colon 123';
}
{
$nombre='Ana';
$apellido='Maldonado';
$direccion='Lima 245';
}
{
$nombre='laura';
$apellido='Pueyrredon';
$direccion='Laprida 785';
}
echo "{
'nombre':'$nombre',
'apellido':'$apellido',
'direccion':'$direccion'
}";
?>
29 - $.ajax
Hasta ahora hemos visto que jQuery nos provee varias formas de
recuperar y enviar datos al servidor utilizando ajax:
1. Mtodo load
2. Funciones $.get y $.post
3. $.getJSON
Existe otra funcin llamada $.ajax que es la ms completa de todas, pero
como desventaja es ms compleja su empleo.
La sintaxis de la funcin $.ajax es:
ajax([objeto literal])
Retorna un objeto XMLHttpRequest que podemos eventualmente

utilizarlo.
Con un ejemplo veremos las propiedades principales que podemos
configurar en el parmetro a enviar.
Problema:Implementar una aplicacin que calcule el cuadrado de un

nmero que ingresamos por teclado. La operacin se realiza en el
servidor, le enviamos los datos mediante la funcin de jQuery $.ajax
pagina1.html
<html>
<head>
</head>
<body>
<formaction="pagina1.php"method="post"id="formulario">
Ingresenro:<inputtype="text"name="nro"id="nro"
size="10"><br>
<inputtype="submit"value="Calcularelcuadrado"id="enviar">
</form>
</body>
</html>
funciones.js
varx;
x=$(document);
{
varx;
x=$("#enviar");
}
{
varv=$("#nro").attr("value");
$.ajax({
async:true,
type:"POST",
dataType:"html",
contentType:"application/xwwwformurlencoded",
url:"pagina1.php",
data:"numero="+v,
beforeSend:inicioEnvio,
success:llegadaDatos,
timeout:4000,
error:problemas
});
returnfalse;
}
functioninicioEnvio()
{
varx=$("#resultados");
x.html('<imgsrc="../cargando.gif">');
}
{
$("#resultados").text(datos);
}
functionproblemas()
{
$("#resultados").text('Problemasenelservidor.');
}
pagina1.php
<?php
$cuadrado=$_REQUEST['numero']*$_REQUEST['numero'];
echo$cuadrado;
?>
Veamos que datos podemos enviarle a la funcin $.ajax:

{
var v=$("#nro").attr("value");
$.ajax({
async:true,
type: "POST",
dataType: "html",
contentType: "application/x-www-form-urlencoded",
url:"pagina1.php",
data:"numero="+v,
beforeSend:inicioEnvio,
success:llegadaDatos,
timeout:4000,
error:problemas
});
return false;
}
Hemos inicializado las siguientes propiedades:

async : Indica si la comunicacin ser asincrnica (true) o
sincrnica (false)
type : Indica el mtodo que se envan los datos (pudiendo ser GET
o POST)
dataType : Indica el tipo de datos que se va a recuperar (pudiendo
ser "html","xml","json","script")
contentType : Indicamos como se empaquetan los datos para

enviarlos al servidor (normalmente "application/x-www-formurlencoded")
url : Indicamos el nombre de la pgina que procesar la peticin de
datos.
data : Indicamos los datos a enviar al servidor.
beforeSend : Indicamos el nombre de la funcin que se ejecutar
previo al envo de datos (en nuestro ejemplo mostramos el gif
animado que indica que se inici el pedido de datos al servidor)
success : Indicamos la funcin que se ejecuta cuando finaliz el
envo de datos del servidor y adems ocurri todo en forma
correcta (en nuestro ejemplo recuperamos el dato devuelto y lo
mostramos en la pgina)
timeout : El tiempo mximo a esperar por la peticin de datos.
error : El nombre de la funcin que se ejecuta si los datos no llegan
del servidor.
30 - Funciones annimas en nuestro cdigo.
Si visitamos sitios sobre jQuery podremos comprobar que la sintaxis

empleada es mucho ms compacta que todos los ejemplos que venimos
viendo. El objetivo de este tutorial es aprender jQuery de una forma
sencilla, pero estara inconcluso si no introducimos la forma ms habitual
de programar con jQuery (funciones annimas y encadenamiento de
llamadas con el objeto jQuery)
Veamos como se organiza nuestro cdigo utilizando funciones annimas.
Problema:Confeccionar una pgina que muestre dos ttulos de primer
nivel, al ser presionados cambiar el color de fuente, fondo y la fuente del
texto.
pagina1.html
<html>
<head>
</head>
<body>
<h1id="titulo1">Primerttulo</h1>
<h1id="titulo2">Segundottulo</h1>
</body>
</html>
funciones.js
varx;
x=$(document);
x.ready(function(){
varx;
x=$("#titulo1");
x.click(function(){
varx;
x=$("#titulo1");
x.css("backgroundcolor","#ffff00");
x.css("fontfamily","Courier");
});
x=$("#titulo2");
x.click(function(){
varx;
x=$("#titulo2");
x.css("fontfamily","Arial");
});
})
Como podemos observar el cdigo a quedado mucho ms compacto.

Normalmente uno utiliza funciones annimos cuando el algoritmo
contenido en la funcin solo se requiere para dicho evento.
La sintaxis para definir una funcin annima:
x.ready(function(){
......
})
Como vemos llamamos al mtodo ready y entre parntesis incluimos la

funcin tal como las venimos implementando en conceptos anteriores
pero sin nombre.
Tambin es interesante ver que podemos disponer otras funciones
annimos dentro de una funcin annima:
x.click(function () {
......
});
31 - Llamadas encadenadas de mtodos del objeto

jQuery.
Otra caracterstica muy utilizada en la librera jQuery es la llamada

sucesiva de mtodos, esto se puede hacer ya que casi todos los
mtodos de la clase jQuery retornan un objeto de tipo jQuery.
Para entender esta sintaxis implementaremos un problema.
Disponer dos botones, uno que cambie la opacidad lentamente hasta el
valor 0.5, seguidamente oculte el recuadro tambin lentamente, y el otro
botn que lo muestre en forma instantnea y aumente su opacidad al
100%.
pagina1.html
<html>
<head>
</head>
<body>
<inputtype="button"id="boton1"value="Reduciropacidad
yocultar">
<inputtype="button"id="boton2"value="Mostraren
formainstantnea">
<p>HTMLesellenguajequeseempleaparaeldesarrollodepginasde
internet.</p>
interpreta
hayelementos
paradisponerimgenessobreunapgina,hipervnculosque
nospermitendirigirnosaotrapgina,listas,tablasparatabular
datos,
etc.</b><p>ParapodercrearunapginaHTMLserequiereunsimple
editor
internet(IExplorer,
FireFoxetc.),emplearemoselnavegadorqueenesteprecisomomento
est
utilizando(recuerdequeustedestviendoenesteprecisomomentouna
pginaHTMLconsunavegador).</p>
que
nuncaantestrabajconelmismo.Nopretendemostrartodaslos
elementos
HTMLenformaalfabtica.</p>
delejercicioresueltodondepodemosverelcontenidodelapgina
HTML
ycmolavisualizaelnavegador.Porltimoytalvezlaseccin
msimportantedeestetutorialesdondeseproponequeustedhaga
pginas
enformaautnoma(donderealmentepodrdarsecuentasielconcepto
quedfirme).</p>
</div>
</body>
</html>
funciones.js
$(document).ready(function(){
$("#boton1").click(function(){
$("#descripcion").fadeTo("slow",0.5).hide("slow");
});
$("#boton2").click(function(){
$("#descripcion").show().fadeTo("slow",1);
})
})
estilos.css
.recuadro{
fontfamily:verdana;
fontsize:14px;
bordertopwidth:1px;
}
Como podemos observar en la siguiente lnea tenemos llamadas

encadenadas:
estilos.css
.recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px;
border-top-width:1px; border-right-width:3px; border-bottom-width:3px;
border-left-width:1px; border-top-style:dotted; border-right-style:solid;
border-bottom-style:solid; border-left-style:dotted; border-topcolor:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000;
border-left-color:#ffaa00; }
Primero obtenemos la referencia del id descripcion, la funcin $ nos
retorna un objeto jQuery que utilizamos directamente para llamar al
mtodo fadeTo para aumentar su opacidad lentamente. Seguidamente el
mtodo fadeTo nos retorna la referencia del objeto jQuery y la utilizamos
para llamar al mtodo hide indicndole que oculte el div lentamente.
Es importante notar que los mtodos se ejecutan de izquierda a derecha.
Recordemos como era nuestro cdigo cuando comenzamos a estudiar
jQuery:
var x;
x=$(document);
{
var x=$("#boton1");
x=$("#boton2");
}
{
x.hide("slow");
}
{
x.show();
x.fadeTo("slow",1);
}
Con funciones annimas y encadenamiento de llamadas a mtodos:
$(document).ready(function () {
$("#boton1").click(function () {
});
$("#boton2").click(function () {
$("#descripcion").show().fadeTo("slow",1);
})
})
Luego de haber estudiado jQuery con la metodologa larga no debera

ser muy difcil adaptarse a esta metodologa resumida.
32 - Mostrar un tooltip con datos recuperados del servidor

en forma asincrnica
Implementaremos un problema utilizando todos los conceptos aprendidos

hasta ahora.
ProblemaImplementar un Tooltip con jQuery recuperando la informacin
a mostrar del servidor en forma asincrnica.
Agregar una imagen al tooltip. En el servidor ya hay cuatro imgenes
llamadas imagen1.jpg, imagen2.jpg etc. y se encuentran en el directorio
inmediatamente superior a donde se almacenan las pginas. ( <img
src="../imagen1.jpg"> )
pagina1.html
<html>
<head>
</head>
<body>
<p>Entreconelmousealrecuadro.</p>
<divclass="cuadradito"id="c1"></div>
</body>
</html>
estilos.css
.cuadradito{
backgroundcolor:#f00;
height:50px;
width:50px;
margin:3px;
zindex:1;
}
#divmensaje{
backgroundcolor:yellow;
position:absolute;
padding:5px;
width:250px;
left:120px;
top:100px;
zindex:100;
}
funciones.js
$(document).ready(function(){
$("body").append('<divid="divmensaje">hhhh</div>');
$("#divmensaje").hide();
$(".cuadradito").hover(function(e){
$("#divmensaje").show();
$("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5);
$("#divmensaje").css("top",e.clientY+document.body.scrollTop+5);
$("#divmensaje").load("pagina1.php?cod="+$(this).attr('id'));
},
function(){
})
$(".cuadradito").mousemove(function(e){
})
})
pagina1.php
<?php
if($_REQUEST['cod']=='c1')
{
echo"<imgsrc=\"../imagen1.jpg\">";
echo"<p>Primertooltip.</p>";
echo"<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaa";
echo"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
echo"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaa";
echo"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaa";
echo"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa</p>";
}
{
echo"<p>Segundotooltip.</p>";
echo"<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bb";
echo"bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbb</p>";
}
{
echo"<p>Tercertooltip.</p>";
}
{
echo"<p>Cuartotooltip.</p>";
}
?>
Como podemos ver el cdigo JavaScript utilizando la librera jQuery

queda muy compacto y reducido:
$(document).ready(function () {
$("body").append('<div id="divmensaje">hhhh</div>');
$(".cuadradito").hover(function (e) {
$("#divmensaje").show();
$("#divmensaje").load("pagina1.php?cod="+$(this).attr('id'));
},
function () {
})
$(".cuadradito").mousemove(function (e){
})
})
#0078ae
AZUL
#77d5f7

Guia de JQuery

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Guia de JQuery

Enviado por

Direitos autorais:

Formatos disponíveis

1 - Que es el jQuery?

El jQuery es una librera de JavaScript para acceder a los objetos del

Del sitio oficial de jQuery descargaremos la versin descomprimida que

2 - Nueva manera de programar JavaScript con jQuery.

Cuando uno utiliza una librera debe adaptarse a sus mecanismos de

Todo lo anterior no debera haber problemas de entendimiento, en caso

Lo primero que tenemos en cuenta es que debemos importar la librera:

<script type="text/javascript" src="../jquery.js"></script>

En este archivo (funciones2.js) comienza nuestro estudio de la librera

Esta funcin nos devuelve un objeto de tipo jQuery.

El mtodo ready tiene como parmetro un nombre de funcin. Esta

Utilizamos nuevamente la funcin $ para crear un objeto de la clase

3 - Seleccin de un elemento del documento mediante el

La sintaxis para seleccionar un elemento particular de la pgina mediante

Confeccionaremos un problema para ver como obtenemos la referencia a

La funcin inicializarEventos se ejecuta una vez que se carg la pgina y

Es importante notar que cuando obtenemos la referencia de un elemento

Luego las dos funciones que se ejecutan al presionar los ttulos:

El tercer mtodo nos permite modificar una propiedad de la hoja de estilo

Una vez que hemos obtenido la referencia a un elemento HTML

Como podemos ver es muy fcil acceder al estilo de un elemento HTML

4 - Seleccin de elementos por el tipo de elementos.

La sintaxis para tener la referencia de todos los elementos de cierto tipo

Es decir es casi igual que obtener la referencia de un elemento particular

ProblemaConfeccionar una tabla con 5 filas. Hacer que cambie de color

Con la siguiente sintaxis obtenemos la referencia a todos los elementos

y a todos ellos los enlazamos con la funcin presionFila

Para obtener la referencia de que elemento en particular dispar el

y a partir de esta referencia llamar al mtodo css.

5 - Seleccin de elementos utilizando los selectores CSS.

Una de las caractersticas ms interesantes de jQuery es poder obtener

ya que esto nos selecciona todos los elementos de tipo li de la pgina y

Cada lista tiene definido su atributo id.

En la funcin inicializarEventos obtenemos la referencia del botn

Ahora lo nuevo es obtener la referencia de todos los elementos li que

Pasamos a la funcin $ el selector CSS que accede a todos los

6 - Seleccin de elementos utilizando las clases CSS

Recordemos que definimos clases en CSS cuando una regla de estilo

problema:Mostrar una serie de lenguajes de programacin y aplicar un

El cdigo nuevo es:

Primero generamos un objeto jQuery que guarda la referencia a todos los

7 - Mtodos text(), text(valor)

Para saber el contenido de un elemento el objeto jQuery cuenta con un

luego si hacemos x.text() obtenemos el contenido del prrafo con id igual

El cdigo anterior crea un objeto jQuery con la referencia a todos los

envindole una cadena, esta aparecer en todo el documento

Como vemos esta pgina tiene tres botones, al presionarse el primero se

Obtenemos la referencia al prrafo mediante su id (recordemos que en

Obtenemos la referencia del prrafo mediante su id y llamamos al

Crea un objeto de la clase jQuery con la referencia a todos los elementos

8 - Mtodos attr(nombre de propiedad), attr(nombre de

Estos mtodos nos permiten agregar propiedades a un elemento HTML y

Para eliminar una propiedad de un elemento o conjunto de elementos

Problema:Definir una tabla sin el atributo border. Al presionar un botn

Cuando se presiona el primer botn:

Obtenemos la referencia de la tabla mediante su id y llamamos al mtodo

Llamamos al mtodo attr envindole como parmetro el nombre de la

Obtenemos la referencia a la tabla mediante su id y llamamos al mtodo

9 - Mtodos addClass y removeClass.

Los mtodos addClass y removeClass nos permiten asociar y desasociar

Tengamos bien en cuenta que en el archivo HTML debemos indicar

Cuando se presiona el botn asociar hoja de estilo se ejecuta la funcin:

Donde llamamos al mtodo addClass con el nombre de la clase (dicha

donde llamamos al mtodo removeClass a partir de un objeto jQuery.