Tutorial de jquery

Tutorial de Jquery

Query es una liviana libreria de JavaScript, pensada para interactuar con los elementos de una web por medio del DOM. Lo que la hace tan especial es su sencillez y su reducido tamaño.

¿Por que debería usarlo?La sencillez de su sintaxis y la poca extension del codigo que necesitas escribir son las caracteristicas más notables. Si hicieras lo que hace jQuery con getElementById y window.onload no solo tendrias que escribir mucho, si no que podrian haber diversos problemas.

¿Como empiezo a usarlo?Lo primero que debes hacer, es descargarlo de la web oficial: jQuery. Una vez descargada la libreria (son más o menos 16k) puedes proceder a tu primer script:

HML:

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<title>Prueba de jQuery</title>

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

</head>

<body>

</body>

</html>

Lo primero que hacemos es linkear el jQuery a nuestro documento. Facil, no?

Ejecución y sintaxis básicajQuery tiene una sintaxis muy sencilla. Los comandos se reconocen por comenzar con el simbolo "$". Ahora, la forma de una sentencia es la siguiente:

$(elemento).evento(funcion-o-parametro);

La manera de inicializar jQuery es muy util:

$(document).ready(function(){

//Aqui tu codigo

});

http://www.jquery.com/

http://december.com/html/4/element/body.html

http://december.com/html/4/element/script.html

http://december.com/html/4/element/title.html

http://december.com/html/4/element/head.html

http://december.com/html/4/element/html.html

Ready es un método propio de jQuery, que revisa si el DOM está listo para usarse. Es más util que el window.onload, pues este debe esperar a que todos los elementos de la pagina esten cargados (como scripts e imagenes) paa ejecutar. El "ready", en cambio, espera solo a la estructura.

Acceso a elementos y eventosAcceder a los elementos de la página es sencillo pues se usa la misma nomenclatura que en CSS:

Tipo de elemento Modo de llamadoEtiqueta Nombre de la etiqueta ejemplos: “a”,

“strong”,”div”Elemento con un id Id precedido por el signo “#”. ejemplos:

“#principal” “#texto”Elemento con una clase (class) Clase precedida por un punto (.). ejemplos:

“.codigo”, “.titulo”

Nota: Tambien funcionan muchos de los selectores de CSS como ">", "*", etc. Un ejemplo de su uso seria:

$("* > a").click( function(){alert("nada");});

Los eventos que se pueden usar son los mismos que usariamos normalmente. El unico cambio es la supresión del "on" inicial: mouseover, click, focus, etc

Veamos todo juntoVeamos un ejemplo de lo visto hasta ahora:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Prueba de jQuery</title>

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

<script type="text/javascript">

$(document).ready(function (){

//Aqui asignamos el click al elemento <a>

$("a").click(function (){

alert("Presionaste un <a>");

});

});






</script>

</head>

<body>

<a href="#"> Presioname! </a>

</body>

</html>

Al presionar cualquier etiqueta "a" del documento, se ejecutaria el alert.

Añadir o retirar clasesCuando queremos que un elemento pueda interactuar con un css ya establecido, usamos las clases. Con jQuery, estas pueden ser asignadas dinamicamente:

$("a").addClass("boton");

O tambien removidas:

$("a").removeClass("boton");

Ahora, podemos añadirle CSS a esa determinada clase, y ver como se comporta:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>

Prueba de jQuery

</title>

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

</script>

<script type="text/javascript">

$(document).ready(function (){

//Aqui asignamos el click al elemento <a>

$("a").click(function (){

alert("Presionaste un <a>");

//Aqui removemos la clase!

$("a").removeClass("boton");

});

//Aqui añadimos la clase a los elementos <a>

$("a").addClass("boton");

});






http://december.com/html/4/element/a.html


</script>

<style type="text/css">

.boton{

color:#f00;

display:block;

width:100px;

text-align:center;

border:#f00 solid 1px;

}

</style>

</head>

<body>

<a href="#" class="algo">Presioname!</a>

</body>

</html>

Al ejecutarse el script, todos los "a", tomarán la clase "boton", que tiene propiedades de CSS. Sin embargo, al oprimir el elemento, la clase es removida.

Efectos especialesEsta librería también esta compuesta por algunos efectos, que resultan muy útiles. Son livianos y faciles de llamar. A continuación, una breve descripcion de cuales son, que hacen y como se usan:

http://december.com/html/4/element/a.html


http://december.com/html/4/element/style.html

Nombre del efecto Descripcion Descripcion de los parámetros Show (Mostrar) Modifica los atributos alto, ancho y

transparencia, partiendo de 0.$(objeto).show("velocidad")

Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser "slow" (lento), "normal", o "fast" (rápido).

Hide (Ocultar) Modifica los atributos alto, ancho y transparencia, partiendo de los valores actuales hasta llegar a 0.$(objeto).hide("velocidad")

Slide Down (Aparecer hacia abajo) Modifica los atributos alto y transparencia, partiendo de 0. Es similar a "show", salvo que no modifica el ancho, creando un efecto de "cortinilla".$(objeto).slideDown("velocidad")

Slide Up (Aparecer hacia arriba) Modifica los atributos alto y transparencia, partiendo de los actuales, hasta llegar a 0. Es similar a "show", salvo que no modifica el ancho, creando un efecto de "cortinilla".$(objeto).slideUp("velocidad")

Fade In(Aparecer) Modifica el atributo transparencia desde 0.$(objeto).fadeIn("velocidad")

Fade Out(Desaparecer) Modifica el atributo transparencia desde el valor actual, hasta llegar a 0.$(objeto).fadeOut("velocidad")

Center (Centrar) Centra un elemento con respecto a su "parent".$(objeto).center("velocidad");

Fade To(Cambiar transparencia) Modifica el atributo transparencia a un valor especifico.$(objeto).fadeTo("velocidad", transparencia

Velocidad: Determina el tiempo en el que se realizará el efecto. Puede ser "slow" (lento), "normal", o "fast" (rápido).

Transparencia: Un numero de 0 a 100 que indica que tan visible es el elemento.

"Callbacks", llamar funciones y pasar parametros

Despues de un evento se pueden llamar otras funciones JavaScript y jQuery, de la forma tradicional:

funcion();

Hay eventos que permiten, acabada su ejecución, llamar funciones. Los efectos, por ejemplo, permiten un parámetro opcional, el de "callback". De modo que la sintaxis para un efecto con callback, sería (por ejemplo) la siguiente:

$(objeto).show("velocidad", funcion);

Nota: La funcion debe colocarse sin los parentesis y sin comillas

Como no se pueden usar parentesis en un callback, el modo de pasar los parametros seria el siguiente:

$(objeto).show("slow", function(){lafuncion("parametro1","parametro2");

});

Nueva manera de programar JavaScript con jQuery.

Cuando uno utiliza una librería 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 librería puede ser frustrante. Lo más adecuado es ir viendo cual es la mecánica de trabajar con dicha librería con problemas muy sencillos e ir complicándolo 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 metodología tradicional accediendo directamente a las funciones del DOM y luego empleando la librería 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">Método tradicional con las funciones del DOM </a><br><a href="pagina3.html">Utilizando la librería jQuery</a><br></body></html>

pagina2.html

<html><head><title>Problema</title><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 botón');}

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 debería haber problemas de entendimiento, en caso de estar olvidado del manejo del DOM sería conveniente refrescar los conceptos en el tutorial de DHTMLYa.

http://www.dhtmlya.com.ar/

Pagina3.html

<html><head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones2.js"></script></head><body><input type="button" id="boton1" value="presioname"></body></html>

Lo primero que tenemos en cuenta es que debemos importar la librería:

<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 librería.

Siempre debemos disponer esta inclusión de la librería antes de incluir los otros archivos *.js que utilizan esta librería, es por eso el orden:

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

funciones2.js

var x;x=$(document);x.ready(inicializarEventos);

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

function presionBoton(){ alert("Se presionó el botón");}

En este archivo (funciones2.js) comienza nuestro estudio de la librería jquery

La función principal de esta librería se llama $.

A la función $ 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 función nos devuelve un objeto de tipo jQuery.

El primer método que nos interesa de esta clase es el ready:


El método ready tiene como parámetro un nombre de función. Esta función se ejecutará cuando todos los elementos de la página estén cargados. Es importante notar que solo pasamos el nombre de la función y no disponemos los paréntesis abiertos y cerrados al final.

El código de esta función:

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

Utilizamos nuevamente la función $ para crear un objeto de la clase jQuery pero ahora asociándolo al botón (esto lo hacemos pasando el id del control button precediéndolo por el caracter # y encerrado entre paréntesis. Finalmente llamamos al método click pasándo como parámetro el nombre de la función que se ejecutará al presionar dicho botón.

Selección de un elemento del documento mediante el id:

La sintaxis para seleccionar un elemento particular de la página 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 página que muestre dos títulos de primer nivel, al ser presionados cambiar el color de la fuente, fondo y la fuente del texto.

Pagina.html

<html>

<head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><h1 id="titulo1">Primer título</h1><h1 id="titulo2">Segundo título</h1></body></html>

funciones Js


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

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

function presionTitulo2(){ 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 librería primero creamos un objeto jquery a partir de la referencia a 'document' y luego llamamos al método ready indicándole el nombre de la función que debe ejecutarse luego de generarse el árbol de elementos HTML para la página:


La función inicializarEventos se ejecuta una vez que se cargó la página y están creados todos los elementos HTML, en esta función mediante $ accedemos a través del id a los elementos h1 respectivos, a casa uno le asignamos al evento click una función distinta que se disparará cuando presionemos con el mouse:

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

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 títulos:

function presionTitulo1(){ var x; x=$("#titulo1"); x.css("color","#ff0000");

x.css("background-color","#ffff00"); x.css("font-family","Courier");}

function presionTitulo2(){ var x; x=$("#titulo2"); x.css("color","#ffff00"); x.css("background-color","#ff0000"); x.css("font-family","Arial");}

Hasta ahora hemos presentado los siguientes métodos que tiene jquery:

readyclick

El tercer método nos permite modificar una propiedad de la hoja de estilo de un elemento HTML:

var x; x=$("#titulo1"); x.css("color","#ff0000");

Una vez que hemos obtenido la referencia a un elemento HTML llamamos al método css que tiene dos parámetros: 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 fácil acceder al estilo de un elemento HTML para actualizarlo en forma dinámica luego que la página fue cargada.

Selección 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><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><table border="1"><tr><td>1111111111</td><td>1111111111</td><td>1111111111</td><td>1111111111</td></tr><tr><td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</td></tr><tr><td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td></tr><tr><td>4444444444</td><td>4444444444</td><td>4444444444</td><td>4444444444</td></tr><tr><td>5555555555</td><td>5555555555</td><td>5555555555</td><td>5555555555</td></tr></table></body></html>

funciones Js


function inicializarEventos(){ 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 función presionFila

Cuando se presiona cualquiera de las filas de la tabla se ejecuta la siguiente función:

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 método CSS.

Selección de elementos utilizando los selectores CSS:Una de las características más 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 página 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 página y nosotros queremos solo los de una de las listas.

Pagina1.html<html><head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><input type="button" value="ocultar item primer lista" id="boton1"><h2>Lista 1</h2><ul id="lista1"><li>Opción número 1</li><li>Opción número 2</li><li>Opción número 3</li><li>Opción número 4</li></ul><h2>Lista 2</h2><ul #id="lista3"><li>Opción número 1</li><li>Opción número 2</li><li>Opción número 3</li><li>Opción número 4</li></ul></body></html>

Cada lista tiene definido su atributo id.

funciones.jsvar x;x=$(document);x.ready(inicializarEventos);

function inicializarEventos(){ var x; x=$("#boton1");

x.click(ocultarItem);}

function ocultarItem(){ var x; x=$("#lista1 li"); x.hide();}

En la función inicializarEventos obtenemos la referencia del botón mediante su id y llamamos al método click:

function inicializarEventos(){ 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 función $ el selector CSS que accede a todos los elementos de tipo li contenidos en #lista1.

Todas las reglas de CSS están disponibles para seleccionar los elementos del DOM.

Selección 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 función $:

x=$(".nombre de clase");

problema:Mostrar una serie de lenguajes de programación y aplicar un estilo resaltado para aquellos lenguajes que son orientados a objetos. Cuando se presione un botón agregar la propiedad background-color a todos los elementos de dicha clase.

Pagina1.html

<html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></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


function inicializarEventos(){ var x; x=$("#boton1");

x.click(resaltar);}

function resaltar(){ var x; x=$(".resaltado"); x.css("background-color","ffff00");}

.resaltado{color:#000000;}

El código 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.

Métodos text(), text(valor)Para saber el contenido de un elemento el objeto jQuery cuenta con un método llamado text(), por ejemplo:

var x=$("#parrafo1");

luego si hacemos x.text() obtenemos el contenido del párrafo con id igual a parrafo1.

Luego si queremos cambiar el texto del párrafo deberíamos disponer:

var x=$("#parrafo1");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 método text, por ejemplo:

var x=$("p");x.text("Este texto aparece en todos los párrafos del documento");

El código anterior crea un objeto jQuery con la referencia a todos los párrafos contenidos en el documento. Luego si llamamos al método text enviándole una cadena, esta aparecerá en todo el documento remplazando el contenido de los párrafos actuales.

El siguiente problema muestra el acceso y modificación unitaria y múltiple de contenidos de elementos.

Funcionesjs


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

function extraerTexto(){ var x=$("#parrafo1"); alert(x.text());}

function modificarTexto(){ var x=$("#parrafo1"); x.text("Nuevo texto del párrafo");}

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 método text modifica el contenido de todos ellos (todos los td del documento se cambian por el string "nuevo texto")

Métodos attr(nombre de propiedad), attr(nombre de propiedad,valor) y removeAttr(nombre de propiedad)

Estos métodos 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 función $, 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 función $, 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 botón añadirle la propiedad border con el valor 1. Si se presiona otro botón recuperar y mostrar el valor del atributo border y por último si se presiona otro botón eliminar la propiedad border.

Pagina1.html

<html><head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><input type="button" id="boton1" value="Añadir 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>1111111111</td></tr><tr><td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</td></tr><tr><td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td></tr></table></body></html>

funciones.js


function inicializarEventos(){ 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 botón:

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

Obtenemos la referencia de la tabla mediante su id y llamamos al método attr pasando como primer parámetro el nombre de la propiedad a agregar y como segundo parámetro el valor de la propiedad.

Cuando se presiona el segundo botón:

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 método attr enviándole como parámetro 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 botón:

function eliminarPropiedadBorder(){ var x=$("#tabla1"); x.removeAttr("border");}

Obtenemos la referencia a la tabla mediante su id y llamamos al método removeAttr con el nombre de la propiedad a eliminar.

Métodos addClass y removeClass.

Los métodos 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 párrafos. Cuando se presione un botón asociarle una clase y cuando se presione otro desasociarlo de dicha clase.

Pagina1.html<html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></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 páginas 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 imágenessobre una página, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para tabular datos, etc.</b><p>Para poder crear una página 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 página HTML con su navegador).</p><p>Lo más 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 alfabética.</p><p>Como veremos, de cada concepto se presenta una parte teórica, en la que se da una explicación completa, luego se pasa a la sección del ejercicio resuelto donde podemos ver el contenido de la página HTML y cómo la visualiza el navegador. Por último y tal vez la sección más importante de este tutorial es donde se propone que usted haga páginas en forma autónoma (donde realmente podrá darse cuenta si el concepto quedó firme).</p></div></body></html>

funciones.js


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

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

function desasociarClase()

{ var x=$("#descripcion"); 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:

<link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script>

Cuando se presiona el botón asociar hoja de estilo se ejecuta la función:

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

Donde llamamos al método 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 función:

function desasociarClase(){ var x=$("#descripcion"); x.removeClass("recuadro");}

donde llamamos al método removeClass a partir de un objeto jQuery.

Métodos html() y html(valor)

El método:

html([bloque html])

Nos permite agregar un bloque de html a partir de un elemento de la página. Básicamente es la propiedad innerHTML del DOM.

Y el método:

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 dinámica que solicite el nombre de usuario y su clave. Si se presiona el segundo botón mostrar todos los elementos HTML del formulario previamente creado.

pagina1.html

<html><head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></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);x.ready(inicializarEventos);function inicializarEventos(){ 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>'); }

function presionBoton2(){ var x; x=$("#formulario"); alert(x.html());}

Como podemos observar cuando se presiona el primer botón creamos un objeto jQuery que toma la referencia del div y mediante el método 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 botón muestra en un alert el contenido HTML actual del div:

function presionBoton2(){ var x; x=$("#formulario"); alert(x.html());}

Hay que diferenciar bien los métodos html(valor) y text(valor), el segundo como habíamos visto agrega texto a un elemento HTML.

Acotaciones

Cuando desarrollamos un sitio hay que tener mucho cuidado con la creación de bloques en forma dinámica ya que puede haber usuarios que no tengan activo JavaScript y les sería imposible acceder a dichas características. En nuestro ejemplo si el usuario tiene desactivo JavaScript no podrá acceder al formulario de carga de datos.

Administración de eventos con jQuery.jQuery facilita la administración de eventos de JavaScript y lo más importante nos hace transparente la diferencia en la registración de eventos entre distintos navegadores (IExplorer, FireFox)

En este tutorial ya hemos utilizado el manejador de eventos:

$(documento).ready(nombre de función)

Dijimos que este función que registramos mediante el método ready se ejecuta cuando el DOM del documento está en memoria. Si no utilizamos la librería jQuery hacemos esto a través del evento load.

Otro evento que vimos en conceptos anteriores es el click de un elemento, la sintaxis utilizada:

var x; x=$("button"); x.click(presionBoton)

Con este pequeño código registramos la función presionBoton para todos los elementos de tipo button del documento.

Con este otro código:

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

solo se registra para el elemento con id con valor "boton1".

Por último con este código se registra para todos los elementos "button" que dependen del div con valor de id igual a "formulario1":

var x; x=$("#formulario1 button"); x.click(presionBoton)

Para reafirmar estos conceptos confeccionaremos una página que muestre un párrafo, luego una tabla que contenga dos párrafos y por último otra tabla que contenga dos párrafos. Capturaremos el evento click de todos los párrafos del documento y mostraremos un mensaje indicando:'se presionó un párrafo del documento', también capturaremos el evento click del los dos párrafos de la segunda tabla y mostraremos: 'se presionó un párrafo contenido en la segunda tabla.'.

pagina1.html

<html><head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><p>Párrafo fuera de la tabla</p><table border="1"><tr><td><p>Párrafo dentro de la primer tabla.</p></td><td><p>Párrafo dentro de la primer tabla.</p></td></tr></table><br><table border="1" id="tabla2"><tr><td><p>Párrafo dentro de la segunda tabla.</p></td><td><p>Párrafo dentro de la segunda tabla.</p></td></tr></table></body></html>

funciones.js


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

function presionParrafoDocumento(){ alert('se presionó un párrafo del documento');}

function presionpresionParrafoSegundaTabla(){ alert('se presionó un párrafo contenido en la segunda tabla.');}

El siguiente código asocia a cada elemento de tipo "p" (párrafo del documento) la función 'presionParrafoDocumento':

x=$("p"); x.click(presionParrafoDocumento);

Luego cuando ejecutemos este documento cada vez que presionemos un párrafo de la página mostrará el mensaje 'se presionó un párrafo del documento'.

También asociamos otra función para el evento click de los párrafos contenidos dentro de la segunda tabla:

x=$("#tabla2 p"); x.click(presionpresionParrafoSegundaTabla);

Esto significa que los párrafos contenidos en la segunda tabla tienen asociados dos funciones para el evento click, luego cuando presionemos alguno de los párrafos de la segunda tabla aparecerán los dos mensajes: 'se presionó un párrafo del documento' y 'se presionó un párrafo contenido en la segunda tabla.'

Eventos mouseover y mouseout.Los eventos de JavaScript onmouseover y onmouseout son los equivalentes mouseover y mouseout de jQuery. Estos eventos están 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 página que contenga tres botones y cuando ingrese la flecha del mouse al botón cambiaremos el color de texto del mismo, retornando el color original cuando retiramos la flecha del control.

Implementaremos una página que contenga tres hipervínculos, cuando ingrese la flecha del mouse al hipervínculo cambiaremos el color de fondo, retornando el color original cuando retiramos la flecha del elemento.

pagina1.html

<html><head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><a href="http://www.lavoz.com.ar">La Voz del Interior</a><br> <a href="http://www.lanacion.com.ar">La nación</a><br> <a href="http://www.clarin.com.ar">El clarín</a><br> </body> </html>

funciones.js


function inicializarEventos(){ 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 función 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 función saleMouse retorna al color original:


Evento hover.jQuery no solo mapea los eventos del DOM sino que provee otros que combinan estos.

Como decíamos es común utilizar los eventos mouseover y mouseout en común, por eso en jQuery existe un evento llamado hover que tiene dos parámetros:

$(elemento).hover([función de ingreso del mouse],[función 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 página que contenga tres hipervínculos, cuando ingrese la flecha del mouse al hipervínculo cambiaremos el color de fondo, retornando el color original cuando retiramos la flecha del elemento.

pagina1.html

<html><head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><a href="http://www.lavoz.com.ar">La Voz del Interior</a><br> <a href="http://www.lanacion.com.ar">La nación</a><br> <a href="http://www.clarin.com.ar">El clarín</a><br> </body> </html>

funciones.js


function inicializarEventos(){ 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);

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 parámetro (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 página. Mostrar la coordenada donde se encuentra la flecha del mouse.

pagina1.html

<html><head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><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


function inicializarEventos(){ 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 función a ejecutar cuando se desplace el mouse:

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

La función 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 párrafo 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);

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 botón.

Implementemos una página que contenga una tabla con una fila y dos columna, al presionar el botón 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><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><table border="1"><tr><td>1111111111</td><td>1111111111</td></tr></table></body></html>

funciones.js


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

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

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

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 algún botón del mouse dentro de una celda de la tabla se dispara la función:

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

De forma similar cuando se suelta el botón del mouse se dispara la función:

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

Evento dblclick.El evento dblclick se dispara cuando se presiona dos veces seguidas el botón 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><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><div id="recuadro"><h1>Doble clic para ocultar este recuadro</h1></div></body></html>


function inicializarEventos(){ 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 función 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 función:

function dobleClic(){ var x; x=$(this); x.hide()}

donde obtenemos la referencia del elemento que emitió el evento y llamamos al método hide para que lo oculte.

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 común a muchos sitio donde se puede buscar información,disponer un control de tipo text con la leyenda 'Buscar...' y sin ningún botón a su lado. Cuando el control toma foco se borra automáticamente su contenido, el operador ingresa el texto a buscar y presiona la tecla ENTER.Para probar como capturar este evento implementaremos una página que resuelva el problema anteriormente planteado.

pagina1.html<html><head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><form action="#" method="post"><input type="text" name="buscar" id="buscar" value="Buscar..." size="20"></form></body></html>

funciones.js


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

function tomaFoco(){ var x=$("#buscar"); x.attr("value","");}

En la función inicializarEventos creamos un objeto jQuery a partir del id del control de tipo text y asociamos el evento focus con el método tomaFoco:

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

El método tomaFoco obtiene la referencia del elemento tipo text y mediante el método attr modifica la propiedad value:

function tomaFoco(){ var x=$("#buscar"); x.attr("value","");}

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 algún 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><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></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


function inicializarEventos(){ 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 función inicializar eventos asociamos los eventos focus y blur a los dos controles:

function inicializarEventos(){ 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");}

Manipulación de los elementos del DOM.

jQuery dispone de una serie de métodos que nos facilitan el tratamiento de los elementos del Dom.

Confeccionaremos un problema que haga uso de estos métodos.

Problema:Implementar una página que contenga una lista con cuatro items. Probar distintos métodos para manipular la lista (borrar, insertar)

pagina1.html

<html><head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><h1>Métodos 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="Añadir un elemento al final de la lista"><br><input type="button" id="boton4" value="Añadir 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>

{ 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 función $ y seguidamente llamamos al método empty:

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

Para restaurar la lista utilizamos el método 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 añadir un elemento al final de la colección de elementos del objeto jQuery disponemos del método append:

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

Para añadir un elemento al principio disponemos de un método 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 método eq (equal) indicamos la posición del elemento que necesitamos (el método eq retorna otro objeto de tipo jQuery) y por último llamamos al método 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 posición 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 método lt (low than) que retorna todos los elementos menores a la posición que le pasamos como parámetro (en nuestro ejemplo nos retorna los elementos de la posición 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 método gt (great than) que retorna un objeto jQuery con todos los elementos que superan la posición que le indicamos en el parámetro:

function eliminarDosUltimos(){ var x; x=$("li"); x=x.gt(x.length-3); x.remove();}

Efectos con los métodos show y hide.

Una característica muy interesante de jQuery que nos provee de un serie de efectos visuales.

Ya utilizamos los métodos 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 pequeña animación (que se oculte o muestre lentamente)

Estas características pueden ayudar al usuario a concentrarse en una parte de la página donde sucede la animación

Problema:Confeccionar una página que muestre un recuadro con texto. Disponer dos botones, uno que oculte lentamente el cuadro y el otro que lo muestre rápidamente.

pagina1.html

<html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><input type="button" id="boton1" value="Ocultar recuadro"><input type="button" id="boton2" value="Mostrar recuadro"><div id="descripcion" class="recuadro"><p>HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.</p> <p>Este lenguaje está constituido de elementos que el navegador interpreta y las despliegaen la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes sobre una página, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para tabular datos, etc.</b><p>Para poder crear una página HTML se requiere un simple editor de texto (en nuestro casoemplearemos 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 página HTML con su navegador).</p>

<p>Lo más importante es que en cada concepto desarrolle los ejercicios propuestos y modifiquelos 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 alfabética.</p><p>Como veremos, de cada concepto se presenta una parte teórica, en la que se da una explicación completa, luego se pasa a la sección del ejercicio resuelto donde podemosver el contenido de la página HTML y cómo la visualiza el navegador. Por último y tal vez la sección más importante de este tutorial es donde se propone que usted haga páginas en forma autónoma (donde realmente podrá darse cuenta si el concepto quedó firme).</p></div></body></html>


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

function ocultarRecuadro(){ var x=$("#descripcion"); x.hide("slow");}

function mostrarRecuadro(){ var x=$("#descripcion");

x.show("fast");}

estilos.css.recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px;




La función ocultarRecuadro se ejecuta cuando presionamos el botón de "Ocultar recuadro":

function ocultarRecuadro(){ var x=$("#descripcion"); x.hide("slow");}

donde obtenemos la referencia del div mediante su id y procedemos a llamar al método hide pasándole el string "slow", con esto logramos que se oculte el recuadro lentamente.

De forma similar la función mostrarRecuadro:

function mostrarRecuadro(){ var x=$("#descripcion"); x.show("fast");}

llama a la función show pasando como parámetro el string "fast".

Hay varias formas para llamar a los métodos show y hide:

Lo muestra en forma instantanea:

show()

Lo muestra con una animación rápida:

show("fast")

Lo muestra con una animación normal:

show("normal")

Lo muestra con una animación lenta:

show("slow")

Lo muestra con una animación que tarda tantos milisegundos como le indicamos:

show([cantidad de milisegundos])

Lo muestra con una animación que tarda tantos milisegundos como le indicamos y ejecuta al final la función que le pasamos como segundo parámetro:

show([cantidad de milisegundos],[función])

De forma similar funciona el método hide.

Efectos con los métodos fadeIn y fadeOut.

Estos dos métodos son similares a show y hide pero con la diferencia que fadeIn hace aparecer los elementos HTML con opacidad. El método fadeOut decolora hasta desaparecer, es decir reduce la opacidad del elemento en forma progresiva.

Problema:Confeccionar una página que muestre un recuadro con texto. Disponer dos botones, uno que oculte (fadeOut) y el otro que lo muestre (fadeIn).

pagina1.html

<html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><input type="button" id="boton1" value="Ocultar recuadro"><input type="button" id="boton2" value="Mostrar recuadro"><div id="descripcion" class="recuadro"><p>HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.</p> <p>Este lenguaje está constituido de elementos que el navegador interpreta y las despliega en la pantallade acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes sobre una página, hipervínculosque nos permiten dirigirnos a otra página, listas, tablas para tabular

datos, etc.</b><p>Para poder crear una página HTML se requiere un simple editor de texto (en nuestro caso emplearemos estesitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador que en este precisomomento está utilizando (recuerde que usted está viendo en este preciso momento una página HTML con su navegador).</p><p>Lo más 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 alfabética.</p><p>Como veremos, de cada concepto se presenta una parte teórica, en la que se da una explicación completa,luego se pasa a la sección del ejercicio resuelto donde podemos ver el contenido de la página HTML y cómola visualiza el navegador. Por último y tal vez la sección más importante de este tutorial es donde se propone que usted haga páginas en forma autónoma (donde realmente podrá darse cuenta si el concepto quedó firme).</p></div></body></html>

funciones.js


function inicializarEventos(){ var x=$("#boton1"); x.click(ocultarRecuadro); x=$("#boton2");

x.click(mostrarRecuadro);}

function ocultarRecuadro(){ var x=$("#descripcion"); x.fadeOut("slow");}

function mostrarRecuadro(){ var x=$("#descripcion"); x.fadeIn("slow");}

estilos.css





La función ocultarRecuadro se ejecuta cuando presionamos el botón de "Ocultar recuadro":

function ocultarRecuadro(){ var x=$("#descripcion"); x.fadeOut("slow");}

donde obtenemos la referencia del div mediante su id y procedemos a llamar al método fadeOut pasándole el string "slow", con esto logramos que se oculte el recuadro se decolore lentamente hasta desaparecer.

De forma similar la función mostrarRecuadro:

function mostrarRecuadro(){ var x=$("#descripcion"); x.fadeIn("slow");}

llama a la función fadeIn pasando como parámetro el string "slow".

Las formas de llamar a los métodos fadeIn y fadeOut:

Lo muestra con una animación rápida:

fadeIn("fast")

Lo muestra con una animación normal:

fadeIn("normal")

Lo muestra con una animación lenta:

fadeIn("slow")

Lo muestra con una animación que tarda tantos milisegundos como le indicamos:

fadeIn([cantidad de milisegundos])

Lo muestra con una animación que tarda tantos milisegundos como le indicamos y ejecuta al final la función que le pasamos como segundo parámetro:

fadeIn([cantidad de milisegundos],[función])

De forma similar funciona el método fadeOut.

Efecto con el método fadeTo.El método fadeTo puede modificar la opacidad de un elemento, el efecto es llevar la opacidad actual hasta el valor que le pasamos al método fadeTo

Podemos inicializar este método de las siguientes formas:

fadeTo([velocidad],[valor de opacidad])

Indicamos la velocidad de transición del estado actual al nuevo estado (slow/normal/fast) o un valor indicado en milisegúndos.

El valor de la opacidad es un numero real entre 0 y 1. 1 significa sin opacidad y 0 es transparente.

También podemos llamar al método fadeTo con tres parámetros:

fadeTo([velocidad],[valor de opacidad],[función])

Esta segunda estructura de la función permite ejecutar una función cuando finaliza la transición.

Hay que tener en cuenta que fadeTo por más que indiquemos el valor 0 en opacidad el espacio que ocupa el elemento en la página seguirá ocupado por un recuadro vacío.

Problema:Confeccionar una página que muestre un recuadro con texto. 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><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><input type="button" id="boton1" value="Reducir opacidad"><input type="button" id="boton2" value="Aumentar opacidad"><div id="descripcion" class="recuadro"><p>HTML es el lenguaje que se emplea para el desarrollo de páginas 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 imágenes sobre una página, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para tabular datos, etc.</b><p>Para poder crear una página 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 página HTML con su navegador).</p><p>Lo más 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 alfabética.</p><p>Como veremos, de cada concepto se presenta una parte teórica, en la que se da una explicación completa, luego se pasa a la sección del ejercicio resuelto donde podemos ver el contenido de la página HTML y cómo la visualiza el navegador. Por último y tal vez la sección más importante de este tutorial es donde se propone que usted haga páginas en forma autónoma (donde realmente podrá darse cuenta si el concepto quedó firme).</p></div></body></html>


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

function reducirOpacidadRecuadro(){ var x=$("#descripcion"); x.fadeTo("slow",0.5);}

function aumentarOpacidadRecuadro(){ var x=$("#descripcion"); x.fadeTo("slow",1);}

estilos.css





Cuando se presiona el botón de reducir la opacidad llamamos al método fadeTo con el valor 0.5:

function reducirOpacidadRecuadro(){ var x=$("#descripcion"); x.fadeTo("slow",0.5);}

y cuando presionamos el botón de aumentar la opacidad llamamos al método fadeTo con valor 1 en opacidad (significa opacidad total):

function aumentarOpacidadRecuadro(){ var x=$("#descripcion"); x.fadeTo("slow",1);}

Efecto con el método toggle.El método 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 información pase de visible a oculto lentamente y viceversa al presionar un botón.

pagina1.html<html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body>

<input type="button" id="boton1" value="Mostrar/Ocultar"><div id="descripcion" class="recuadro"><p>HTML es el lenguaje que se emplea para el desarrollo de páginas 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 imágenes sobre una página, hipervínculosque nos permiten dirigirnos a otra página, listas, tablas para tabular datos, etc.</b><p>Para poder crear una página 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 página HTMLcon su navegador).</p><p>Lo más 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 alfabética.</p><p>Como veremos, de cada concepto se presenta una parte teórica, en la que se da una explicación completa,luego se pasa a la sección del ejercicio resuelto donde podemos ver el contenido de la página HTML y cómo la visualiza el navegador. Por último y tal vez la sección más importante de este tutorial es donde se propone que usted haga páginas en forma autónoma (donde realmente podrá darse cuenta si el concepto quedó firme).</p></div></body></html>

funciones.jsvar x;x=$(document);

x.ready(inicializarEventos);

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

function ocultarMostrarRecuadro(){ var x=$("#descripcion"); x.toggle("slow");}





La función ocultarMostrarRecuadro:

function ocultarMostrarRecuadro(){ var x=$("#descripcion"); x.toggle("slow");}

se encarga de llamar al método toggle del objeto jQuery, y este analiza si actualmente el elemento está visible u oculto, la transición se hace en forma lenta ya que le pasamos como parámetro el string "slow".

Iteración por los elementos (each)

jQuery dispone de un método que nos permite asociar una función que se ejecutará por cada elemento que contenga la lista del objeto jQuery.

Dentro de esta función 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 párrafos que tienen menos de 100 caracteres.

pagina1.html<html><head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><div id="parrafos"><p>párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1 - párrafo 1</p><p>párrafo 2 - párrafo 2 - párrafo 2 - párrafo 2</p><p>párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3 - párrafo 3</p><p>párrafo 4 - párrafo 4 - párrafo 4 - párrafo 4 - párrafo 4</p></div></body> </html>

funciones.jsvar x;

x=$(document);x.ready(inicializarEventos);

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

function resaltarParrafos(){ var x=$(this); if (x.text().length<100) { x.css("background-color","#ff0"); }}

En la función inicializarEventos obtenemos la lista de párrafos contenidas en el div y luego a este objeto jQuery mediante el método each indicamos el nombre de la función que procesará a cada elemento:

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

La función resaltarParrafos se ejecuta por cada uno de los párrafos contenidos en el objeto jQuery (en nuestro caso 4 párrafos):

function resaltarParrafos(){ var x=$(this); if (x.text().length<100) { x.css("background-color","#ff0"); }}

Lo primero que hacemos mediante la función $ y pasando this como parámetro obtenemos la referencia del párrafo a procesar. Accedemos al método text() que nos retorna el texto del párrafo propiamente dicho.El método 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 párrafo.

Ajax: método load.

Para el entendimiento de los próximos conceptos se recomienda haber realizado el tutorial deAJAX Ya

Este método es el más sencillo para recuperar datos del servidor.

La sintaxis de este método es el siguiente:

load([nombre de la página],[parámetros],[funcion final])

Otra cosa muy importante es la llamada de este método a partir del elemento HTML donde queremos que se agregue la información que retorna el servidor (es decir que utilizamos este método cuando no tenemos que procesarlo en el navegador, sino directamente mostrarlo en forma completa). El segundo y tercer parámetro son opcionales.

Problema:Confeccionar una página que muestre una lista de hipervínculos con los distintos signos del horóscopo y luego al ser presionado no recargue la página completa sino que se envíe una petición al servidor y el mismo retorne la información de dicho signo, luego se actualice solo el contenido de un div del archivo HTML.

pagina1.html<html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><h1>Signos del horóscopo.</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>

http://www.ajaxya.com.ar/

http://www.ajaxya.com.ar/


function inicializarEventos(){ 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<?phpheader('Content-Type: text/html; charset=ISO-8859-1');if ($_REQUEST['cod']==1) echo "<strong>Aries:</strong> Hoy los cambios serán físicos, personales, de carácter, Te sentirás impulsivo y tomarás iniciativas. Período en donde considerarás unirte a agrupaciones de beneficencia, o de ayuda a los demás.";if ($_REQUEST['cod']==2) echo "<strong>Tauro:</strong> Hoy los cambios serán privados, íntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares de retiro. Tu cónyuge puede aportar buen status a tu vida o apoyo a tu profesión.";if ($_REQUEST['cod']==3) echo "<strong>Géminis:</strong> Los asuntos de hoy tienen que ver con las amistades, reuniones, actividades con ellos. Día esperanzado, ilusiones. Mucha energía sexual y fuerza emocional. Deseos difíciles de controlar.";if ($_REQUEST['cod']==4) echo "<strong>Cancer:</strong> Este día la profesión y las relaciones con superiores y con tu madre serán de importancia. Actividad

en relación a estos temas. Momentos positivos con compañeros de trabajo. Actividad laboral agradable.";if ($_REQUEST['cod']==5) echo "<strong>Leo:</strong> Este día los estudios, los viajes, el extranjero y la espiritualidad serán lo importante. Pensamientos, religión y filosofía también. Vivencias kármicas de la época te vuelven responsable tomando decisiones.";if ($_REQUEST['cod']==6) echo "<strong>Virgo:</strong> Para este día toma importancia tu vida sexual, tal vez miedos, temas legales, juicios o herencias. Experiencias extrañas. Hay karma de prueba durante este período en tu parte psicológica, generándose algunos replanteos.";if ($_REQUEST['cod']==7) echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver con tu pareja, también con socios, con la gente o el público. Ellos serán lo más importante del día. Ganancias a través de especulaciones o del juego. Actividades vocacionales artísticas.";if ($_REQUEST['cod']==8) echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que ver con temas de trabajo y de salud. Presta atención a ambos. Experiencias diversas con compañeros. Durante este período tendrás muchos recursos para ganar dinero.";if ($_REQUEST['cod']==9) echo "<strong>Sagitario:</strong> Durante este día se vivirán cambios en relación a los noviazgos o a los hijos. Creatividad, actividad, diversiones y salidas. Período de encuentros con personas o situaciones que te impresionan.";if ($_REQUEST['cod']==10) echo "<strong>Capricornio:</strong> Los cambios del día tienen que ver con tu hogar, con la convivencia y con el padre. Asuntos relativos al carácter en la convivencia. El karma de responsabilidad de estos momentos te acercará al mundo de lo desconocido, mucha madurez y contacto con el más allá.";if ($_REQUEST['cod']==11)

echo "<strong>Acuario:</strong> Hoy todo asunto tiene que ver con el entorno inmediato, hermanos y vecinos, con la comunicación, los viajes cortos o traslados frecuentes. El hablar y trasladarse será importante hoy. Mentalidad e ideas activas.";if ($_REQUEST['cod']==12) echo "<strong>Piscis:</strong> Durante este día se vivirán cambios en la economía, movimientos en los ingresos, negocios, valores. Momentos de gran fuerza y decisión profesionales, buscarás 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; font-family:verdana; border-width:0;

padding:5px; border: 1px dotted #fa0; margin:5px;}

Como podemos observar el código JavaScript es muy pequeño, veamos:


En la función inicializarEventos cremos un objeto jQuery con la referencia de todas las anclas que están contenidas en el div #menu. Asociamos el evento click a todos los enlaces.

La función presionEnlace:

function presionEnlace(){ var pagina=$(this).attr("href"); var x=$("#detalles"); x.load(pagina); return false;}

Extraemos el atributo href del hipervínculo que disparó el evento (tengamos en cuenta que almacena el nombre de la página y el parámetro, por ejemplo:"pagina1.php?cod=6)

var pagina=$(this).attr("href");

Creamos un objeto jQuery a partir del div #detalles:

var x=$("#detalles");

Llamamos al método load del objeto jQuery y le pasamos como parámetro el nombre de la página a recuperar:

x.load(pagina);

El método load se encarga de hacer la comunicación asincrónica con el servidor, esperar y recibir los datos y finalmente añadir la información al elemento HTML (en nuestro ejemplo el div #detalles)

Por último la función retorna false para anular la propagación de eventos y desactivar también el evento por defecto que ocurre cuando se presiona un enlace.

Ajax: métodos ajaxStart y ajaxStopEstos dos métodos se pueden asociar a un objeto de tipo jQuery, tienen como parámetro una función:

ajaxStart([función])

La función de ajaxStart se dispara cuando se inicia la petición al servidor y nos puede servir para mostrar en pantalla al usuario que están llegando datos del servidor.

ajaxStop([función])

Se dispara esta función cuando finalizar la petición de datos al servidor.

Problema:Confeccionar un problema que muestre una lista de hipervínculos con los distintos signos del horóscopo y luego al ser presionado no recargue la página completa sino que se envíe una petición al servidor y el mismo retorne la información 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><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><h1>Signos del horóscopo.</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>



function presionEnlace(){ var pagina=$(this).attr("href"); var x=$("#detalles"); x.ajaxStart(inicioEnvio); x.load(pagina); return false;}

function inicioEnvio(){ var x=$("#detalles"); x.html('<img src="../cargando.gif">');}

pagina1.php<?phpheader('Content-Type: text/html; charset=ISO-8859-1');if ($_REQUEST['cod']==1) echo "<strong>Aries:</strong> Hoy los cambios serán físicos, personales, de carácter, Te sentirás impulsivo y tomarás iniciativas. Período en donde considerarás unirte a agrupaciones de beneficencia, o de ayuda a los demás.";

if ($_REQUEST['cod']==2) echo "<strong>Tauro:</strong> Hoy los cambios serán privados, íntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares de retiro. Tu cónyuge puede aportar buen status a tu vida o apoyo a tu profesión.";if ($_REQUEST['cod']==3) echo "<strong>Géminis:</strong> Los asuntos de hoy tienen que ver con las amistades, reuniones, actividades con ellos. Día esperanzado, ilusiones. Mucha energía sexual y fuerza emocional. Deseos difíciles de controlar.";if ($_REQUEST['cod']==4) echo "<strong>Cancer:</strong> Este día la profesión y las relaciones con superiores y con tu madre serán de importancia. Actividad en relación a estos temas. Momentos positivos con compañeros de trabajo. Actividad laboral agradable.";if ($_REQUEST['cod']==5) echo "<strong>Leo:</strong> Este día los estudios, los viajes, el extranjero y la espiritualidad serán lo importante. Pensamientos, religión y filosofía también. Vivencias kármicas de la época te vuelven responsable tomando decisiones.";if ($_REQUEST['cod']==6) echo "<strong>Virgo:</strong> Para este día toma importancia tu vida sexual, tal vez miedos, temas legales, juicios o herencias. Experiencias extrañas. Hay karma de prueba durante este período en tu parte psicológica, generándose algunos replanteos.";if ($_REQUEST['cod']==7) echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver con tu pareja, también con socios, con la gente o el público. Ellos serán lo más importante del día. Ganancias a través de especulaciones o del juego. Actividades vocacionales artísticas.";if ($_REQUEST['cod']==8) echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que ver con temas de trabajo y de salud. Presta atención a ambos. Experiencias diversas con compañeros. Durante este período tendrás muchos recursos para ganar dinero.";

if ($_REQUEST['cod']==9) echo "<strong>Sagitario:</strong> Durante este día se vivirán cambios en relación a los noviazgos o a los hijos. Creatividad, actividad, diversiones y salidas. Período de encuentros con personas o situaciones que te impresionan.";if ($_REQUEST['cod']==10) echo "<strong>Capricornio:</strong> Los cambios del día tienen que ver con tu hogar, con la convivencia y con el padre. Asuntos relativos al carácter en la convivencia. El karma de responsabilidad de estos momentos te acercará al mundo de lo desconocido, mucha madurez y contacto con el más allá.";if ($_REQUEST['cod']==11) echo "<strong>Acuario:</strong> Hoy todo asunto tiene que ver con el entorno inmediato, hermanos y vecinos, con la comunicación, los viajes cortos o traslados frecuentes. El hablar y trasladarse será importante hoy. Mentalidad e ideas activas.";if ($_REQUEST['cod']==12) echo "<strong>Piscis:</strong> Durante este día se vivirán cambios en la economía, movimientos en los ingresos, negocios, valores. Momentos de gran fuerza y decisión profesionales, buscarás 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;}



#detalles { background-color:#ffc; text-align:left; font-family:verdana; border-width:0; padding:5px; border: 1px dotted #fa0; margin:5px;}

Lo nuevo en este problema es que llamamos al método ajaxStart con el mismo objeto jQuery que llama al método load:

function presionEnlace(){ var pagina=$(this).attr("href"); var x=$("#detalles"); x.ajaxStart(inicioEnvio); x.load(pagina); return false;}

Luego cuando se activa la petición de la página al servidor el objeto jQuery llama a la función inicioEvento, donde mostramos el gif animado:

function inicioEnvio(){ var x=$("#detalles"); 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.

$.get y $.post(Pasando datos al servidor por los métodos GET y POST)Utilizamos estas funciones cuando no queremos inyectar directamente los datos a nuestra página, sino que queremos procesarlos y eventualmente agregarlos en distintas partes.

La sintaxis de la función $.get es distinta a la ya utilizada $, en este caso es una función global de la librería jQuery:

$.get([nombre de la página],[parámetros a enviarse por el método get], [función que recibe los datos del servidor])También podemos llamarla:jQuery.get([nombre de la página],[parámetros a enviarse por el método get], [función que recibe los datos del servidor])

La función $.post es idéntica a la función $.get, lo único que difiere es como el protocolo HTTP empaqueta los datos y los envía al servidor. Normalmente se utiliza la función $.post, ya que no está limitado la cantidad de datos que se pueden enviar al servidor.

Problema:Implementar una aplicación que calcule el cuadrado de un número que ingresamos por teclado. La operación se realiza en el servidor, le enviamos los datos mediante la función de jQuery $.get

pagina1.html

<html><head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></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>


function inicializarEventos(){ 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 código JavaScript para comunicarse con el servidor:

Primero en la función inicializarEventos enlazamos el evento click al botón submit del formulario:

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

Cuando presionamos el botón extraemos el valor del control text y llamamos a la función $.get indicando el nombre de la página a llamar, un objeto literal con todos los parámetros y sus valores (en este caso solo tenemos un parámetro llamado numero) y finalmente el nombre de la función 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 función que se ejecuta cuando llegan los datos del servidor recibe un string:

function llegadaDatos(datos){ alert(datos);}

$.getJSON

La función getJSON hace una petición de datos al servidor considerando que retorna la información con notación JSON. La sintaxis de esta función es:

$.getJSON([nombre de la página], [parámetros], [función que recibe los datos])

La función getJSON procede a generar un objeto en JavaScript y nosotros en la función 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><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></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"><div id="resultados"></div></body></html>


function inicializarEventos(){ var x; x=$("#boton1"); x.click(presionSubmit);}

'direccion':'$direccion'}";?>

Cuando se presiona el botón submit procedemos a realizar la petición asincrónica utilizando la función getJSON:

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

Como hemos llamado a la función 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 notación JSON:

<?phpheader('Content-Type: text/txt; charset=ISO-8859-1');$nombre='';$apellido='';$direccion='';if ($_REQUEST['dni']=='1'){ $nombre='Juan';

$apellido='Rodriguez'; $direccion='Colon 123';}if ($_REQUEST['dni']=='2'){ $nombre='Ana'; $apellido='Maldonado'; $direccion='Lima 245';}if ($_REQUEST['dni']=='3'){ $nombre='laura'; $apellido='Pueyrredon'; $direccion='Laprida 785';}echo "{ 'nombre':'$nombre', 'apellido':'$apellido', 'direccion':'$direccion'}";?>

$.ajax

Hasta ahora hemos visto que jQuery nos provee varias formas de recuperar y enviar datos al servidor utilizando ajax:

1. Método load2. Funciones $.get y $.post3. $.getJSON

Existe otra función llamada $.ajax que es la más completa de todas, pero como desventaja es más compleja su empleo.

La sintaxis de la función $.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 parámetro a enviar.

Problema:Implementar una aplicación que calcule el cuadrado de un número que ingresamos por teclado. La operación se realiza en el servidor, le enviamos los datos mediante la función de jQuery $.ajax

pagina1.html<html><head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></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>


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

function presionSubmit(){ 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;}

function inicioEnvio(){ var x=$("#resultados"); x.html('<img src="../cargando.gif">');}

function llegadaDatos(datos){ $("#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 función $.ajax:

function presionSubmit(){ 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 comunicación será asincrónica (true) o sincrónica (false)• type : Indica el método que se envían 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 página que procesará la petición de datos.• data : Indicamos los datos a enviar al servidor.• beforeSend : Indicamos el nombre de la función que se ejecutará previo al envío de datos (en

nuestro ejemplo mostramos el gif animado que indica que se inició el pedido de datos al servidor)

• success : Indicamos la función que se ejecuta cuando finalizó el envío de datos del servidor y además ocurrió todo en forma correcta (en nuestro ejemplo recuperamos el dato devuelto y lo mostramos en la página)

• timeout : El tiempo máximo a esperar por la petición de datos.• error : El nombre de la función que se ejecuta si los datos no llegan del servidor.

Funciones anónimas en nuestro código.

Si visitamos sitios sobre jQuery podremos comprobar que la sintaxis empleada es mucho más compacta que todos los ejemplos que venimos viendo. El objetivo de este tutorial es aprender jQuery de una forma sencilla, pero estaría inconcluso si no introducimos la forma más habitual de programar con jQuery (funciones anónimas y encadenamiento de llamadas con el objeto jQuery)

Veamos como se organiza nuestro código utilizando funciones anónimas.

Problema:Confeccionar una página que muestre dos títulos de primer nivel, al ser presionados cambiar el color de fuente, fondo y la fuente del texto.

pagina1.html

<html><head><title>Problema</title><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><h1 id="titulo1">Primer título</h1><h1 id="titulo2">Segundo título</h1></body></html>

funciones.jsvar x;x=$(document);x.ready(function(){ var x; x=$("#titulo1"); x.click(function() { var x; x=$("#titulo1"); x.css("color","#ff0000"); x.css("background-color","#ffff00"); x.css("font-family","Courier"); }); x=$("#titulo2"); x.click(function () { var x; x=$("#titulo2"); x.css("color","#ffff00"); x.css("background-color","#ff0000"); x.css("font-family","Arial"); });})

Como podemos observar el código a quedado mucho más compacto. Normalmente uno utiliza funciones anónimos cuando el algoritmo contenido en la función solo se requiere para dicho evento.

La sintaxis para definir una función anónima:

x.ready(function(){......})

Como vemos llamamos al método ready y entre paréntesis incluimos la función tal como las venimos implementando en conceptos anteriores pero sin nombre.

También es interesante ver que podemos disponer otras funciones anónimos dentro de una función anónima:

x.click(function () { ...... });

Llamadas encadenadas de métodos del objeto jQuery.

Otra característica muy utilizada en la librería jQuery es la llamada sucesiva de métodos, esto se puede hacer ya que casi todos los métodos de la clase jQuery retornan un objeto de tipo jQuery.

Para entender esta sintaxis implementaremos un problema.

Problema:Confeccionar una página que muestre un recuadro con texto. Disponer dos botones, uno que cambie la opacidad lentamente hasta el valor 0.5, seguidamente oculte el recuadro también lentamente, y el otro botón que lo muestre en forma instantánea y aumente su opacidad al 100%.

pagina1.html

<html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><input type="button" id="boton1" value="Reducir opacidad y ocultar"><input type="button" id="boton2" value="Mostrar en forma instantánea"><div id="descripcion" class="recuadro"><p>HTML es el lenguaje que se emplea para el desarrollo de páginas 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 imágenes sobre una página, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para tabular datos, etc.</b><p>Para poder crear una página 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 página HTML con su navegador).</p><p>Lo más 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 alfabética.</p><p>Como veremos, de cada concepto se presenta una parte teórica, en la que se da una explicación completa, luego se pasa a la sección del ejercicio resuelto donde podemos ver el contenido de la página HTML y cómo la visualiza el navegador. Por último y tal vez la sección

más importante de este tutorial es donde se propone que usted haga páginas en forma autónoma (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"); }); $("#boton2").click(function () { $("#descripcion").show().fadeTo("slow",1); })})





Como podemos observar en la siguiente línea tenemos llamadas encadenadas:

$("#descripcion").fadeTo("slow",0.5).hide("slow");

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 función $ nos retorna un objeto jQuery que utilizamos directamente para llamar al método fadeTo para aumentar su opacidad lentamente. Seguidamente el método fadeTo nos retorna la referencia del objeto jQuery y la utilizamos para llamar al método hide indicándole que oculte el div lentamente.

Es importante notar que los métodos se ejecutan de izquierda a derecha.

Recordemos como era nuestro código cuando comenzamos a estudiar jQuery:


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

function ocultarRecuadro(){ var x=$("#descripcion"); x.fadeTo("slow",0.5); x.hide("slow");}

function mostrarRecuadro(){ var x=$("#descripcion"); x.show(); x.fadeTo("slow",1);}

Con funciones anónimas y encadenamiento de llamadas a métodos:

$(document).ready(function () { $("#boton1").click(function () { $("#descripcion").fadeTo("slow",0.5).hide("slow"); }); $("#boton2").click(function () { $("#descripcion").show().fadeTo("slow",1); })})

Luego de haber estudiado jQuery con la metodología larga no debería ser muy difícil adaptarse a esta metodología resumida.

Menú desplegable

Confeccionaremos una página que muestre un menú desplegable utilizando listas.

pagina1.html

<html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><div id="menu"><ul><li><a href="http://www.google.com.ar">Google</a></li><li><a class="imagen" href="#">Periódicos</a><ul><li><a href="http://www.lanacion.com.ar">La Nación</A></li><li><a href="http://www.clarin.com.ar">El Clarín</A></li><li><a href="http://www.lavoz.com.ar">La Voz</a></li></ul></li><li><a class="imagen" href="#">Lenguajes</a><ul><li><a href="http://www.php.net">PHP</a></li><li><a href="http://www.rubyonrails.org">Ruby on rails</a></li><li><a href="http://www.python.org">Python</a></li></ul></li><li><a href="http://www.msn.com">MSN</a></li></ul></div></body></html>

estilos.css#menu { font-family: Arial; margin:0px; padding:0px;}

#menu ul { margin:0px; padding:0px; list-style-type:none;}

#menu a {

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

.imagen { background-image:url(../triangulo.jpg); background-position:top left; background-repeat:no-repeat;}



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

ul li ul a:link, ul li ul a:visited { color: #000; text-decoration: none;}

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

funciones.js$(document).ready(function() { $("#menu").children().children("li").each(function () { if ($(this).find("ul").size()!=0) $(this).find("ul").hide(); });

$("a").click(function(e) { if ($(this).parent().find("ul").size()!=0) { if ($(this).parent().find("ul").css("display")=="none") $(this).parent().find("ul").show(); else $(this).parent().find("ul").hide(); } }) })

Obtenemos la referencia del elemento "ul" hijo del elemento con id=#menu, seguidamente obtenemos la referencia de todos los elementos "li" hijos que dependen directamente del "ul" e iteramos con el método each:

$("#menu").children().children("li").each(function () {

Dentro de la función de iteración obtenemos la referencia de todos los elemento "ul" que tienen elementos hijo (es decir submenú) y procedemos a ocultar dichos "ul":

if ($(this).find("ul").size()!=0) $(this).find("ul").hide();

Cuando se hace click sobre algún elemento "a", verificamos si el elemento padre tiene elementos "ul" y procedemos a ocultar o mostrar el submenú según el valor de la propiedad display:

$("a").click(function(e) { if ($(this).parent().find("ul").size()!=0) { if ($(this).parent().find("ul").css("display")=="none") $(this).parent().find("ul").show(); else $(this).parent().find("ul").hide(); } })

Mostrar un tooltip con datos recuperados del servidor en forma asincrónica

Implementaremos un problema utilizando todos los conceptos aprendidos hasta ahora.

ProblemaImplementar un Tooltip con jQuery recuperando la información a mostrar del servidor en forma asincrónica.Agregar una imagen al tooltip. En el servidor ya hay cuatro imágenes llamadas imagen1.jpg, imagen2.jpg etc. y se encuentran en el directorio inmediatamente superior a donde se almacenan las páginas. ( <img src="../imagen1.jpg"> )

pagina1.html<html><head><title>Problema</title><link rel="StyleSheet" href="estilos.css" type="text/css"><script type="text/javascript" src="../jquery.js"></script><script type="text/javascript" src="funciones.js"></script></head><body><p>Entre con el mouse al recuadro.</p><div class="cuadradito" id="c1"></div><div class="cuadradito" id="c2"></div><div class="cuadradito" id="c3"></div><div class="cuadradito" id="c4"></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$(document).ready(function () { $("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 () { $("#divmensaje").hide(); }) $(".cuadradito").mousemove(function (e){ $("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5);

$("#divmensaje").css("top",e.clientY+document.body.scrollTop+5); })})

pagina1.php<?phpif ($_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>";}if ($_REQUEST['cod']=='c2'){ echo "<img src=\"../imagen2.jpg\">"; echo "<p>Segundo tooltip.</p>"; echo "<p>bbbbbbbb bbbbbbbbbbb bbbbbbbb bbbbbbbbbbbbbb bbbbbbbbbbb bb"; echo "bbbbbbbb bbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbb</p>";}if ($_REQUEST['cod']=='c3'){ echo "<img src=\"../imagen3.jpg\">"; echo "<p>Tercer tooltip.</p>";}if ($_REQUEST['cod']=='c4'){ echo "<img src=\"../imagen4.jpg\">"; echo "<p>Cuarto tooltip.</p>";}?>

Como podemos ver el código JavaScript utilizando la librería jQuery queda muy compacto y reducido:

$(document).ready(function () { $("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 () { $("#divmensaje").hide(); }) $(".cuadradito").mousemove(function (e){ $("#divmensaje").css("left",e.clientX+document.body.scrollLeft+5); $("#divmensaje").css("top",e.clientY+document.body.scrollTop+5); })})

fin

Tutorial de jquery

Technology

Transcript of Tutorial de jquery