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>Captura del evento click de un control HTML de tipo button.</h2>
<a href="pagina2.html">Mtodo tradicional con las funciones
del DOM </a><br>
<a href="pagina3.html">Utilizando la librera jQuery</a><br>
</body>
</html>
pagina2.html
<html>
<head>
<script type="text/javascript" src="funciones1.js"></script>
</head>
<body>
<input type="button" id="boton1" value="presioname">
</body>
</html>
funciones1.js
addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
var boton1=document.getElementById('boton1');
addEvent(boton1,'click',presionBoton,false);
}

function presionBoton(e)
{
alert('se presion el botn');
}

function addEvent(elemento,nomevento,funcion,captura)
{
if (elemento.attachEvent)
{
elemento.attachEvent('on'+nomevento,funcion);
return true;
}
else
if (elemento.addEventListener)
{
elemento.addEventListener(nomevento,funcion,captura);
return true;
}
else
return false;
}
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>
<script type="text/javascript" src="../jquery.js"></script>
</head>
<body>
<input type="button" id="boton1" value="presioname">
</body>
</html>
Lo primero que tenemos en cuenta es que debemos importar la librera:
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:
funciones2.js
var x;
x=$(document);
x.ready(inicializarEventos);

{
var x;
x=$("#boton1");
x.click(presionBoton)
}

function presionBoton()
{
alert("Se presion el botn");
}
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:
{
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>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<h1 id="titulo1">Primer ttulo</h1>
<h1 id="titulo2">Segundo ttulo</h1>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$("#titulo1");
x.click(presionTitulo1)
x=$("#titulo2");
}

function presionTitulo1()
{
var x;
x=$("#titulo1");
x.css("color","#ff0000");
x.css("background-color","#ffff00");
x.css("font-family","Courier");
}

{
var x;
x=$("#titulo2");
x.css("color","#ffff00");
x.css("background-color","#ff0000");
x.css("font-family","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:
{
var x;
x=$("#titulo1");
}

{
var x;
x=$("#titulo2");
}
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:
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>
<table border="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
var x;
x=$(document);

{
var x;
x=$("tr");
x.click(presionFila);
}

function presionFila()
{
var x;
x=$(this);
x.css("background-color","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>
<input type="button" value="ocultar item primer lista"
id="boton1">
<h2>Lista 1</h2>
<ul id="lista1">
<li>Opcin nmero 1</li>
</ul>
<h2>Lista 2</h2>
<ul #id="lista3">
</ul>
</body>
</html>
Cada lista tiene definido su atributo id.
funciones.js
var x;
x=$(document);

{
var x;
x=$("#boton1");
x.click(ocultarItem);
}

function ocultarItem()
{
var x;
x=$("#lista1 li");
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>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<p>Cuales de los siguientes lenguajes son orientados a objetos:
<span class="resaltado">Java</span>, VB6, <span
class="resaltado">C++</span>,C,
<span class="resaltado">C#</span>, Cobol ?</p>
<input type="button" id="boton1" value="ver resultado">
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$("#boton1");
x.click(resaltar);
}

function resaltar()
{
var x;
x=$(".resaltado");
x.css("background-color","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>
<script language="javascript" src="funciones.js"
type="text/javascript"></script>
</head>
<body>
<input type="button" value="Obtener el texto contenido en un
prrafo" id="boton1"><br>
<input type="button" value="Modificar el texto de un prrafo"
id="boton2"><br>
<input type="button" value="Modificar el texto de los elementos
td de una tabla" id="boton3"><br>
<p id="parrafo1">Texto del primer prrafo</p>
<table border="1">
<tr>
<td>celda 1,1</td><td>celda 1,2</td>
<td>celda 2,1</td><td>celda 2,2</td>
</tr>
</table>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x=$("#boton1");
x.click(extraerTexto);
x=$("#boton2");
x.click(modificarTexto);
x=$("#boton3");
x.click(modificarDatosTabla);
}

function extraerTexto()
{
alert(x.text());
}

function modificarTexto()
{
x.text("Nuevo texto del prrafo");
}

function modificarDatosTabla()
{
var x=$("td");
x.text("texto nuevo");
}
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>
</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
var x;
x=$(document);

{
var x=$("#boton1");
x.click(agregarPropiedadBorder);
x=$("#boton2");
x.click(recuperarPropiedadBorder);
x=$("#boton3");
x.click(eliminarPropiedadBorder);
}

function agregarPropiedadBorder()
{
var x=$("#tabla1");
x.attr("border","1");
}

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");
}

function eliminarPropiedadBorder()
{
var x=$("#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>
<input type="button" id="boton1" value="Asociar clase">
<input type="button" id="boton2" value="Desasociar
clase">
<div id="descripcion">
<p>HTML es el lenguaje que se emplea para el desarrollo de pginas
de internet.</p>
<p>Este lenguaje est constituido de elementos que el navegador
interpreta
y las despliega en la pantalla de acuerdo a su objetivo. Veremos que
hay elementos para disponer
imgenes
sobre una pgina, hipervnculos que nos permiten dirigirnos a otra
pgina, listas, tablas para tabular datos, etc.</b>
<p>Para poder crear una pgina HTML se requiere un simple editor
de texto (en nuestro caso emplearemos este sitio) y un navegador de
internet (IExplorer,
FireFox etc.),
emplearemos el navegador que en este preciso momento est utilizando
(recuerde
que usted est viendo en este preciso momento una pgina HTML con su
navegador).</p>
<p>Lo ms importante es que en cada concepto desarrolle los ejercicios

propuestos y modifique los que se presentan ya resueltos.<p>
<p>Este curso lo que busca es acercar el lenguaje HTML a una persona
que
nunca antes trabaj
con el mismo. No pretende mostrar todas los elementos HTML en forma
alfabtica.</p>
<p>Como veremos, de cada concepto se presenta una parte terica,
en la que se da una explicacin completa, luego se pasa a la seccin
del ejercicio
resuelto donde podemos ver el contenido de la pgina HTML y cmo la
visualiza el navegador.
Por ltimo y tal vez la seccin ms importante de este tutorial es
donde se propone
que usted haga pginas en forma autnoma (donde realmente podr darse
cuenta si el concepto
qued firme).</p>
</div>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x=$("#boton1");
x.click(asociarClase);
x=$("#boton2");
x.click(desasociarClase);
}

function asociarClase()
{
var x=$("#descripcion");
x.addClass("recuadro");
}

function desasociarClase()
{
x.removeClass("recuadro");
}
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-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
Tengamos bien en cuenta que en el archivo HTML debemos indicar
donde se encuentran los archivos js y css:
Cuando se presiona el botn asociar hoja de estilo se ejecuta la funcin:
function asociarClase()
{
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>
<input type="button" id="boton1" value="Mostrar formulario">
<input type="button" id="boton2" value="Mostrar elementos
html del formulario"><br>
<div id="formulario">
</div>
</body>
</html>
funciones.js
var x;
x=$(document);
{
var x;
x=$("#boton1");
x.click(presionBoton1);
x=$("#boton2");
x.click(presionBoton2);
}

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>');
}

{
var x;
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:
{
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:
{
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>Prrafo fuera de la tabla</p>
<table border="1">
<tr>
<td><p>Prrafo dentro de la primer tabla.</p></td><td><p>Prrafo
dentro de la primer tabla.</p></td>
</tr>
</table>
<br>
<table border="1" id="tabla2">
<tr>
<td><p>Prrafo dentro de la segunda tabla.</p></td><td><p>Prrafo
dentro de la segunda tabla.</p></td>
</tr>
</table>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$("p");
x.click(presionParrafoDocumento);
x=$("#tabla2 p");
x.click(presionpresionParrafoSegundaTabla);
}

function presionParrafoDocumento()
{
alert('se presion un prrafo del documento');
}

function presionpresionParrafoSegundaTabla()
{
alert('se presion un prrafo contenido en la segunda tabla.');
}
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>
<a href="http://www.lavoz.com.ar">La Voz del Interior</a>
<br>
<a href="http://www.lanacion.com.ar">La nacin</a>
<br>
<a href="http://www.clarin.com.ar">El clarn</a>
<br>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$("a");
x.mouseover(entraMouse);
x.mouseout(saleMouse);
}

function entraMouse()
{
$(this).css("background-color","#ff0");
}

function saleMouse()
{
$(this).css("background-color","#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:
{
}
De forma similar la funcin saleMouse retorna al color original:
{
}

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>
<a href="http://www.lavoz.com.ar">La Voz del Interior</a>
<br>
<a href="http://www.lanacion.com.ar">La nacin</a>
<br>
<a href="http://www.clarin.com.ar">El clarn</a>
<br>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$("a");
x.hover(entraMouse,saleMouse);
}

{
}

{
}
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>
<script language="javascript" src="funciones.js"
type="text/javascript"></script>
</head>
<body>
<p id="corx">coordenada x=</p>
<p id="cory">coordenada y=</p>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$(document);
x.mousemove(moverMouse);
}

function moverMouse(event)
{
var x;
x=$("#corx");
x.text("coordenada x="+event.clientX);
x=$("#cory");
x.text("coordenada y="+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=$("#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");

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>
<table border="1">
<tr>
<td>1111111111</td><td>1111111111</td>
</tr>
</table>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$("td");
x.mousedown(presionaMouse);
x.mouseup(sueltaMouse);
}

function presionaMouse()
{
}

function sueltaMouse()
{
}
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()
{
}
De forma similar cuando se suelta el botn del mouse se dispara la
funcin:
function sueltaMouse()
{
}

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>
<div id="recuadro">
<h1>Doble clic para ocultar este recuadro</h1>
</div>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$("#recuadro");
x.dblclick(dobleClic);
}

function dobleClic()
{
var x;
x=$(this);
x.hide()
}
estilos.css
#recuadro {
color:#aa0;
background-color:#ff0;
position:absolute;
text-align: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>
<form action="#" method="post">
<input type="text" name="buscar" id="buscar"
value="Buscar..." size="20">
</form>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$("#buscar");
x.focus(tomaFoco);
}

function tomaFoco()
{
var x=$("#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>
<form action="#" method="post">
<input type="text" name="text1" id="text1" value="Hola"
size="20">
<br>
<input type="text" name="text2" id="text2" value="Hola"
size="20">
</form>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x=$("#text1");
x.focus(tomaFoco);
x.blur(pierdeFoco);
x=$("#text2");
x.focus(tomaFoco);
x.blur(pierdeFoco);
}

function tomaFoco()
{
var x=$(this);
x.css("color","#f00");
}

function pierdeFoco()
{
var x=$(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>Mtodos para manipular nodos del DOM con jQuery.</h1>
<ul>
<li>Primer item.</li>
<li>Segundo item.</li>
<li>Tercer item.</li>
<li>Cuarto item.</li>
</ul>
<input type="button" id="boton1" value="Eliminar la lista
completa."><br>
<input type="button" id="boton2" value="Restaurar Lista"><br>
<input type="button" id="boton3" value="Aadir un elemento al final de
la lista"><br>
<input type="button" id="boton4" value="Aadir un elemento al
principio de la lista"><br>
<input type="button" id="boton5" value="Eliminar el ltimo
elemento."><br>
<input type="button" id="boton6" value="Eliminar el primer
elemento."><br>
<input type="button" id="boton7" value="Eliminar el primero y segundo
elemento."><br>
<input type="button" id="boton8" value="Eliminar los dos
ltimos."><br>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
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)
}

function eliminarElementos()
{
var x;
x=$("ul");
x.empty();
}

function restaurarLista()
{
$("ul").html('<li>Primer item.</li><li>
Segundo item.</li><li>Tercer item.</li><li>Cuarto item.</li>');
}

function anadirElementoFinal()
{
var x;
x=$("ul");
x.append("<li>otro item al final</li>");
}

function anadirElementoPrincipio()
{
var x;
x=$("ul");
x.prepend("<li>otro item al principio</li>");
}

function eliminarElementoFinal()
{
var x;
x=$("li");
var cantidad=x.length;
x=x.eq(cantidad-1);
x.remove();
}

function eliminarElementoPrincipio()
{
var x;
x=$("li");
x=x.eq(0);
x.remove();
}

function eliminarPrimeroSegundo()
{
var x;
x=$("li");
x=x.lt(2);
x.remove();
}

function eliminarDosUltimos()
{
var x;
x=$("li");
x=x.gt(x.length-3);
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>
<input type="button" id="boton1" value="Ocultar recuadro">
<input type="button" id="boton2" value="Mostrar recuadro">
<div id="descripcion" class="recuadro">
de internet.</p>
interpreta
y las despliega
en la pantalla de acuerdo a su objetivo. Veremos que hay elementos
para disponer
imgenes
sobre una pgina, hipervnculos que nos permiten dirigirnos a otra
pgina, listas, tablas
para tabular datos, etc.</b>
de texto (en nuestro caso
emplearemos este sitio) y un navegador de internet (IExplorer, FireFox
etc.),
emplearemos
el navegador que en este preciso momento est utilizando (recuerde que
usted est viendo
en este preciso momento una pgina HTML con su navegador).</p>
propuestos y modifique
los que se presentan ya resueltos.<p>
que
nunca antes trabaj
con el mismo. No pretende mostrar todas los elementos HTML en forma
alfabtica.</p>
en la que se da una
explicacin completa, luego se pasa a la seccin del ejercicio
resuelto
donde podemos
ver el contenido de la pgina HTML y cmo la visualiza el navegador.
Por ltimo y
tal vez la seccin ms importante de este tutorial es donde se propone
que usted
haga pginas en forma autnoma (donde realmente podr darse
cuenta si el concepto qued firme).</p>
</div>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x=$("#boton1");
x.click(ocultarRecuadro);
x=$("#boton2");
x.click(mostrarRecuadro);
}

function ocultarRecuadro()
{
x.hide("slow");
}

function mostrarRecuadro()
{
x.show("fast");
}
estilos.css
.recuadro {
font-size:14px;



}
La funcin ocultarRecuadro se ejecuta cuando presionamos el botn de
"Ocultar recuadro":
{
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:
{
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>
<input type="button" id="boton1" value="Ocultar recuadro">
<input type="button" id="boton2" value="Mostrar recuadro">
de internet.</p>
interpreta
y las despliega en la pantalla
de acuerdo a su objetivo. Veremos que hay elementos para disponer
imgenes
sobre una pgina, hipervnculos
que nos permiten dirigirnos a otra pgina, listas, tablas para tabular
datos, etc.</b>
de texto (en nuestro caso emplearemos este
sitio) y un navegador de internet (IExplorer, FireFox etc.),
emplearemos el navegador
que en este preciso
momento est utilizando (recuerde que usted est viendo en este
preciso momento una pgina HTML con su
navegador).</p>
propuestos y modifique los que se
presentan ya resueltos.<p>
que
nunca antes trabaj con el mismo.
No pretende mostrar todas los elementos HTML en forma alfabtica.</p>
en la que se da una explicacin completa,
luego se pasa a la seccin del ejercicio resuelto donde podemos ver el
contenido de la pgina HTML y cmo
la visualiza el navegador. Por ltimo y tal vez la seccin ms
importante de este tutorial es donde se
propone que usted haga pginas en forma autnoma (donde realmente
podr darse cuenta si el concepto qued
firme).</p>
</div>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x=$("#boton1");
x=$("#boton2");
}

{
x.fadeOut("slow");
}

{
x.fadeIn("slow");
}
estilos.css
.recuadro {
font-size:14px;



}
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>
<input type="button" id="boton1" value="Reducir opacidad">
<input type="button" id="boton2" value="Aumentar opacidad">
de internet.</p>
interpreta
hay elementos
para disponer imgenes sobre una pgina, hipervnculos que
nos permiten dirigirnos a otra pgina, listas, tablas para tabular
datos, etc.</b>
FireFox etc.), emplearemos el navegador que en este preciso momento
est
utilizando (recuerde que usted est viendo en este preciso momento una
pgina HTML con su navegador).</p>
que
nunca antes trabaj con el mismo. No pretende mostrar todas los
elementos
HTML en forma alfabtica.</p>
del ejercicio resuelto donde podemos ver el contenido de la pgina
HTML
y cmo la visualiza el navegador. Por ltimo y tal vez la seccin
ms importante de este tutorial es donde se propone que usted haga
pginas
en forma autnoma (donde realmente podr darse cuenta si el concepto
qued firme).</p>
</div>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x=$("#boton1");
x.click(reducirOpacidadRecuadro);
x=$("#boton2");
x.click(aumentarOpacidadRecuadro);
}

function reducirOpacidadRecuadro()
{
x.fadeTo("slow",0.5);
}

function aumentarOpacidadRecuadro()
{
x.fadeTo("slow",1);
}
estilos.css
.recuadro {
font-size:14px;



}
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>
<input type="button" id="boton1" value="Mostrar/Ocultar">
de internet.</p>
interpreta
y las despliega en la pantalla
de acuerdo a su objetivo. Veremos que hay elementos para disponer
imgenes
sobre una pgina, hipervnculos
que nos permiten dirigirnos a otra pgina, listas, tablas para tabular
datos, etc.</b><p>Para poder crear una pgina HTML se requiere un
simple editor
de texto (en nuestro caso emplearemos
este sitio) y un navegador de internet (IExplorer, FireFox etc.),
emplearemos
el navegador que en este preciso momento est utilizando
(recuerde que usted est viendo en este preciso momento una pgina
HTML
con su navegador).</p>
que
nunca antes trabaj con el mismo.
No pretende mostrar todas los elementos HTML en forma alfabtica.</p>
en la que se da una explicacin completa,
luego se pasa a la seccin del ejercicio resuelto donde podemos ver el
contenido de la pgina HTML y cmo la visualiza el navegador.
Por ltimo y tal vez la seccin ms importante de este tutorial es
donde se
propone que usted haga pginas en forma autnoma (donde realmente
podr darse cuenta si el concepto qued
firme).</p>
</div>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x=$("#boton1");
x.click(ocultarMostrarRecuadro);
}

function ocultarMostrarRecuadro()
{
x.toggle("slow");
}
estilos.css
.recuadro {
font-size:14px;



}
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>
<div id="parrafos">
<p>prrafo 1 - prrafo 1 - prrafo 1 - prrafo
1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 -
prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo
1 - prrafo 1 - prrafo 1 - prrafo 1 -
1 - prrafo 1 - prrafo 1 - prrafo 1</p>
<p>prrafo 2 - prrafo 2 - prrafo 2 - prrafo 2</p>
3 - prrafo 3 - prrafo 3 -
3 - prrafo 3</p>
4 - prrafo 4</p>
</div>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$("#parrafos p");
x.each(resaltarParrafos);
}

function resaltarParrafos()
{
var x=$(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)
{
}
}
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>Signos del horscopo.</h1>
<div id="menu">
<p><a id="enlace1" href="pagina1.php?cod=1">Aries</a></p>
<p><a id="enlace2" href="pagina1.php?cod=2">Tauro</a></p>
<p><a id="enlace3" href="pagina1.php?cod=3">Geminis</a></p>
<p><a id="enlace4" href="pagina1.php?cod=4">Cancer</a></p>
<p><a id="enlace5" href="pagina1.php?cod=5">Leo</a></p>
<p><a id="enlace6" href="pagina1.php?cod=6">Virgo</a></p>
<p><a id="enlace7" href="pagina1.php?cod=7">Libra</a></p>
<p><a id="enlace8" href="pagina1.php?cod=8">Escorpio</a></p>
<p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p>
<p><a id="enlace10" href="pagina1.php?cod=10">Capricornio</a></p>
<p><a id="enlace11" href="pagina1.php?cod=11">Acuario</a></p>
<p><a id="enlace12" href="pagina1.php?cod=12">Piscis</a></p>
</div>
<div id="detalles">Seleccione su signo.</div>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$("#menu a");
x.click(presionEnlace);
}

function presionEnlace()
{
var pagina=$(this).attr("href");
var x=$("#detalles");
x.load(pagina);
return false;
}
pagina1.php
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
if ($_REQUEST['cod']==1)
echo "<strong>Aries:</strong> Hoy los cambios sern fsicos,
personales, de carcter, Te sentirs impulsivo y tomars
iniciativas. Perodo en donde considerars unirte a agrupaciones
de beneficencia, o de ayuda a los dems.";
echo "<strong>Tauro:</strong> Hoy los cambios sern privados,
ntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares de
retiro. Tu
cnyuge puede aportar buen status a tu vida o apoyo a tu
profesin.";
echo "<strong>Gminis:</strong> Los asuntos de hoy tienen
que ver con las amistades, reuniones, actividades con ellos. Da
esperanzado,
ilusiones. Mucha energa sexual y fuerza emocional. Deseos difciles
de controlar.";
echo "<strong>Cancer:</strong> Este da la profesin
y las relaciones con superiores y con tu madre sern de importancia.
Actividad
en relacin a estos temas. Momentos positivos con compaeros de
trabajo. Actividad laboral agradable.";
echo "<strong>Leo:</strong> Este da los estudios, los
viajes, el extranjero y la espiritualidad sern lo importante.
Pensamientos,
religin y filosofa tambin. Vivencias krmicas de
la poca te vuelven responsable tomando decisiones.";
echo "<strong>Virgo:</strong> Para este da toma importancia
tu vida sexual, tal vez miedos, temas legales, juicios o herencias.
Experiencias
extraas. Hay karma de prueba durante este perodo en tu parte
psicolgica,
generndose algunos replanteos.";
echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver con
tu pareja, tambin con socios, con la gente o el pblico. Ellos
sern lo ms importante del da. Ganancias a travs
de especulaciones o del juego. Actividades vocacionales
artsticas.";
echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que ver
con temas de trabajo y de salud. Presta atencin a ambos.
Experiencias
diversas con compaeros. Durante este perodo tendrs muchos
recursos para ganar dinero.";
echo "<strong>Sagitario:</strong> Durante este da se
vivirn cambios en relacin a los noviazgos o a los hijos.
Creatividad,
actividad, diversiones y salidas. Perodo de encuentros con personas
o
situaciones que te impresionan.";
echo "<strong>Capricornio:</strong> Los cambios del da
tienen que ver con tu hogar, con la convivencia y con el padre.
Asuntos relativos
al carcter en la convivencia. El karma de responsabilidad de estos
momentos
te acercar al mundo de lo desconocido, mucha madurez y contacto con
el
ms all.";
echo "<strong>Acuario:</strong> Hoy todo asunto tiene que ver
con el entorno inmediato, hermanos y vecinos, con la comunicacin,
los
viajes cortos o traslados frecuentes. El hablar y trasladarse ser
importante
hoy. Mentalidad e ideas activas.";
echo "<strong>Piscis:</strong> Durante este da se vivirn
cambios en la economa, movimientos en los ingresos, negocios,
valores.
Momentos de gran fuerza y decisin profesionales, buscars el
liderazgo.";
?>
estilos.css
#menu {
font-family: Arial;
margin:5px;
}

#menu p {
margin:0px;
padding:0px;
}

#menu a {
display: block;
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eee;
text-align:center;
}

#menu a:link, #menu a:visited {
color: #f00;
text-decoration: none;
}

#menu a:hover {
background-color: #369;
color: #fff;
}

#detalles {
background-color:#ffc;
text-align:left;
border-width:0;
padding:5px;
border: 1px dotted #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:
{
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>Signos del horscopo.</h1>
<div id="menu">
<p><a id="enlace1" href="pagina1.php?cod=1">Aries</a></p>
<p><a id="enlace2" href="pagina1.php?cod=2">Tauro</a></p>
<p><a id="enlace3" href="pagina1.php?cod=3">Geminis</a></p>
<p><a id="enlace4" href="pagina1.php?cod=4">Cancer</a></p>
<p><a id="enlace5" href="pagina1.php?cod=5">Leo</a></p>
<p><a id="enlace6" href="pagina1.php?cod=6">Virgo</a></p>
<p><a id="enlace7" href="pagina1.php?cod=7">Libra</a></p>
<p><a id="enlace8" href="pagina1.php?cod=8">Escorpio</a></p>
<p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p>
<p><a id="enlace10" href="pagina1.php?cod=10">Capricornio</a></p>
<p><a id="enlace11" href="pagina1.php?cod=11">Acuario</a></p>
<p><a id="enlace12" href="pagina1.php?cod=12">Piscis</a></p>
</div>
<div id="detalles">Seleccione su signo.</div>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$("#menu a");
}

{
x.ajaxStart(inicioEnvio);
x.load(pagina);
return false;
}

function inicioEnvio()
{
x.html('<img src="../cargando.gif">');
}
pagina1.php
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
echo "<strong>Aries:</strong> Hoy los cambios sern fsicos,
personales, de carcter, Te sentirs impulsivo y tomars
iniciativas. Perodo en donde considerars unirte a agrupaciones
de beneficencia, o de ayuda a los dems.";
echo "<strong>Tauro:</strong> Hoy los cambios sern privados,
ntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares de
retiro. Tu
cnyuge puede aportar buen status a tu vida o apoyo a tu
profesin.";
echo "<strong>Gminis:</strong> Los asuntos de hoy tienen
que ver con las amistades, reuniones, actividades con ellos. Da
esperanzado,
ilusiones. Mucha energa sexual y fuerza emocional. Deseos difciles
de controlar.";
echo "<strong>Cancer:</strong> Este da la profesin
y las relaciones con superiores y con tu madre sern de importancia.
Actividad
en relacin a estos temas. Momentos positivos con compaeros de
trabajo. Actividad laboral agradable.";
echo "<strong>Leo:</strong> Este da los estudios, los
viajes, el extranjero y la espiritualidad sern lo importante.
Pensamientos,
religin y filosofa tambin. Vivencias krmicas de
la poca te vuelven responsable tomando decisiones.";
echo "<strong>Virgo:</strong> Para este da toma importancia
tu vida sexual, tal vez miedos, temas legales, juicios o herencias.
Experiencias
extraas. Hay karma de prueba durante este perodo en tu parte
psicolgica,
generndose algunos replanteos.";
echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver con
tu pareja, tambin con socios, con la gente o el pblico. Ellos
sern lo ms importante del da. Ganancias a travs
de especulaciones o del juego. Actividades vocacionales
artsticas.";
echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que ver
con temas de trabajo y de salud. Presta atencin a ambos.
Experiencias
diversas con compaeros. Durante este perodo tendrs muchos
recursos para ganar dinero.";
echo "<strong>Sagitario:</strong> Durante este da se
vivirn cambios en relacin a los noviazgos o a los hijos.
Creatividad,
actividad, diversiones y salidas. Perodo de encuentros con personas
o
situaciones que te impresionan.";
echo "<strong>Capricornio:</strong> Los cambios del da
tienen que ver con tu hogar, con la convivencia y con el padre.
Asuntos relativos
al carcter en la convivencia. El karma de responsabilidad de estos
momentos
te acercar al mundo de lo desconocido, mucha madurez y contacto con
el
ms all.";
echo "<strong>Acuario:</strong> Hoy todo asunto tiene que ver
con el entorno inmediato, hermanos y vecinos, con la comunicacin,
los
viajes cortos o traslados frecuentes. El hablar y trasladarse ser
importante
hoy. Mentalidad e ideas activas.";
echo "<strong>Piscis:</strong> Durante este da se vivirn
cambios en la economa, movimientos en los ingresos, negocios,
valores.
Momentos de gran fuerza y decisin profesionales, buscars el
liderazgo.";
sleep(1);
?>
estilos.css
#menu {
font-family: Arial;
margin:5px;
}

#menu p {
margin:0px;
padding:0px;
}

#menu a {
display: block;
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eee;
text-align:center;
}

#menu a:link, #menu a:visited {
color: #f00;
text-decoration: none;
}

#menu a:hover {
background-color: #369;
color: #fff;
}

#detalles {
background-color:#ffc;
text-align:left;
border-width:0;
padding:5px;
border: 1px dotted #fa0;
margin:5px;
}
Lo nuevo en este problema es que llamamos al mtodo ajaxStart con el
mismo objeto jQuery que llama al mtodo load:
{
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:
{
}
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>
<form action="pagina1.php" method="post" id="formulario">
Ingrese nro:<input type="text" name="nro" id="nro"
size="10"><br>
<input type="submit" value="Calcular el cuadrado" id="enviar">
<div id="resultados"></div>
</form>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$("#enviar");
x.click(presionSubmit);
}

function presionSubmit()
{
var v=$("#nro").attr("value");
$.get("pagina1.php",{numero:v},llegadaDatos);
return false;
}

function llegadaDatos(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:
{
$.get("pagina1.php",{numero:v},llegadaDatos);
return false;
}
La funcin que se ejecuta cuando llegan los datos del servidor recibe un
string:
{
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>
Ingrese dni (solo existen los valores 1,2 y 3):<input type="text"
name="dni" id="dni" size="10"><br>
<input type="button" value="Enviar" id="boton1">
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$("#boton1");
}

{
var v=$("#dni").attr("value");
$.getJSON("pagina1.php",{dni:v},llegadaDatos);
return false;
}

{
$("#resultados").html("Nombre:"+datos.nombre+
"<br>"+"Apellido:"+
datos.apellido+"<br>"+
"Direccion:"+datos.direccion);
}
pagina1.php
<?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'
}";
?>
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:
{
$("#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='';
{
$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>
<form action="pagina1.php" method="post" id="formulario">
Ingrese nro:<input type="text" name="nro" id="nro"
size="10"><br>
<input type="submit" value="Calcular el cuadrado" id="enviar">
</form>
</body>
</html>
funciones.js
var x;
x=$(document);

{
var x;
x=$("#enviar");
}

{
$.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;
}

{
var x=$("#resultados");
}

{
$("#resultados").text(datos);
}

function problemas()
{
$("#resultados").text('Problemas en el servidor.');
}
pagina1.php
<?php
$cuadrado=$_REQUEST['numero']*$_REQUEST['numero'];
echo $cuadrado;
?>
Veamos que datos podemos enviarle a la funcin $.ajax:
{
$.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-form-
urlencoded")
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>
<h1 id="titulo1">Primer ttulo</h1>
<h1 id="titulo2">Segundo ttulo</h1>
</body>
</html>
funciones.js
var x;
x=$(document);
x.ready(function(){
var x;
x=$("#titulo1");
x.click(function() {
var x;
x=$("#titulo1");
});
x=$("#titulo2");
x.click(function () {
var x;
x=$("#titulo2");
});
})
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>
<input type="button" id="boton1" value="Reducir opacidad
y ocultar">
<input type="button" id="boton2" value="Mostrar en
forma instantnea">
<p>HTML es el lenguaje que se emplea para el desarrollo de pginas de
internet.</p>
interpreta
hay elementos
para disponer imgenes sobre una pgina, hipervnculos que
nos permiten dirigirnos a otra pgina, listas, tablas para tabular
datos,
etc.</b><p>Para poder crear una pgina HTML se requiere un simple
editor
FireFox etc.), emplearemos el navegador que en este preciso momento
est
utilizando (recuerde que usted est viendo en este preciso momento una
pgina HTML con su navegador).</p>
que
nunca antes trabaj con el mismo. No pretende mostrar todas los
elementos
HTML en forma alfabtica.</p>
del ejercicio resuelto donde podemos ver el contenido de la pgina
HTML
y cmo la visualiza el navegador. Por ltimo y tal vez la seccin
ms importante de este tutorial es donde se propone que usted haga
pginas
en forma autnoma (donde realmente podr darse cuenta si el concepto
qued firme).</p>
</div>
</body>
</html>
funciones.js
$(document).ready(function () {
$("#boton1").click(function () {
$("#descripcion").fadeTo("slow",0.5).hide("slow");
});
$("#descripcion").show().fadeTo("slow",1);
})
})
estilos.css
.recuadro {
font-size:14px;



}
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-top-
color:#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:
});
$("#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>Entre con el mouse al recuadro.</p>
<div class="cuadradito" id="c1"></div>
</body>
</html>
estilos.css
.cuadradito{
background-color: #f00;
height: 50px;
width: 50px;
margin:3px;
z-index: -1;
}

#divmensaje {
background-color: yellow;
position: absolute;
padding: 5px;
width:250px;
left:120px;
top:100px;
z-index: 100;
}
funciones.js
$("body").append('<div id="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 "<img src=\"../imagen1.jpg\">";
echo "<p>Primer tooltip.</p>";
echo "<p>aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa
aaaaaaaaaa";
echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaa";
echo "aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa
aaaaaaa";
echo "aaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa
aaaaaaaaaa";
echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaa
aaaaaaaaaaaaaaaa</p>";
}
{
echo "<p>Segundo tooltip.</p>";
echo "<p>bbbbbbbb bbbbbbbbbbb bbbbbbbb bbbbbbbbbbbbbb bbbbbbbbbbb
bb";
echo "bbbbbbbb bbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbb bbbbbbbbbbb
bbb</p>";
}
{
echo "<p>Tercer tooltip.</p>";
}
{
echo "<p>Cuarto tooltip.</p>";
}
?>
Como podemos ver el cdigo JavaScript utilizando la librera jQuery
queda muy compacto y reducido:
$("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){
})
})

Guia de JQuery

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Guia de JQuery

Uploaded by

Copyright:

Available Formats

1 - Que es el jQuery?

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

You might also like