Guia de JQuery

1 - Que es el jQuery?

El jQuery es una librera de JavaScript para acceder a los objetos del DOM de un modo simplificado.El sitio oficial de la librera lo puedes acceder desdeaqudonde puedes descargar el archivo para tus proyectos, adems de poder enterarte de las mejoras constantes que se le hacen.El autor de esta librera esJohn Resigque adems trabaja paraMozilla Corporation.Las aplicaciones en internet son cada vez ms complejas, ya que incorporan efectos visuales, drag and drop, auto-completar, animaciones etc. el desarrollar todos estos conceptos desde cero puede resultar complicado sobretodo si tenemos que presentar la solucin con muy poco tiempo, en este tipo de situaciones el empleo de libreras como el jQuery nos facilitan el desarrollo de la aplicacin. Otra ventaja paralela es despreocuparnos cuando codificamos en la compatibilidad de navegadores, ya que la librera resolver esto.Para utilizar la librera como dijimos debemos descargarla del sitio oficial y en cada pgina que lo requiera agregar: Del sitio oficial de jQuery descargaremos la versin descomprimida que ocupa alrededor de 60 Kb (es el archivo jquery.js) y cuando subamos nuestro sitio es recomendable descargar la versin comprimida que tiene un peso de 20 Kb.La librera jQuery en resumen nos aporta las siguientes ventajas: Nos ahorra muchas lneas de cdigo. Nos hace transparente el soporte de nuestra aplicacin para los navegadores principales. Nos provee de un mecanismo para la captura de eventos. Provee un conjunto de funciones para animar el contenido de la pgina en forma muy sencilla. Integra funcionalidades para trabajar con AJAX.2 - Nueva manera de programar JavaScript con jQuery.

Cuando uno utiliza una librera debe adaptarse a sus mecanismos de uso, el tratar de llevar los conocimientos que tenemos sobre un tema y aplicarlos a la fuerza en dicha librera puede ser frustrante. Lo ms adecuado es ir viendo cual es la mecnica de trabajar con dicha librera con problemas muy sencillos e ir complicndolo a medida que entendemos su funcionamiento.Dispongamos el problema trivial de capturar el evento de un control HTML de tipo button, lo desarrollaremos utilizando la metodologa tradicional accediendo directamente a las funciones del DOM y luego empleando la librera jQuery:pagina1.html

Problema

Captura del evento click de un control HTML de tipo button.Mtodo tradicional con las funciones del DOM
Utilizando la librera jQuery

pagina2.html

Problema

funciones1.jsaddEvent(window,'load',inicializarEventos,false);

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

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

Problema

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

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

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

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

function presionBoton(){ alert("Se presion el botn");}En este archivo (funciones2.js) comienza nuestro estudio de la librera jqueryLa funcin principal de esta librera se llama $.A la funcin $ le podemos pasar distintos valores como veremos (en la primer llamada le pasamos la referencia del objeto document del DOM y en la segunda el id del control button):x=$(document);...x=$("#boton1");Esta funcin nos devuelve un objeto de tipo jQuery.El primer mtodo que nos interesa de esta clase es el ready:var x;x=$(document);x.ready(inicializarEventos);El mtodo ready tiene como parmetro un nombre de funcin. Esta funcin se ejecutar cuando todos los elementos de la pgina estn cargados. Es importante notar que solo pasamos el nombre de la funcin y no disponemos los parntesis abiertos y cerrados al final.El cdigo de esta funcin:function inicializarEventos(){ var x; x=$("#boton1"); x.click(presionBoton)}Utilizamos nuevamente la funcin $ para crear un objeto de la clase jQuery pero ahora asocindolo al botn (esto lo hacemos pasando el id del control button precedindolo por el caracter # y encerrado entre parntesis. Finalmente llamamos al mtodo click pasndo como parmetro el nombre de la funcin que se ejecutar al presionar dicho botn.3 - Seleccin de un elemento del documento mediante el id.

La sintaxis para seleccionar un elemento particular de la pgina mediante la propiedad id es:$("#nombre del id")Confeccionaremos un problema para ver como obtenemos la referencia a elementos HTML particulares mediante el id.Problema:Confeccionar una pgina que muestre dos ttulos de primer nivel, al ser presionados cambiar el color de la fuente, fondo y la fuente del texto.pagina1.html

Problema

Primer ttuloSegundo ttulo

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

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");}Hasta ahora hemos presentado los siguientes mtodos que tiene jquery:readyclickEl tercer mtodo 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 mtodo css que tiene dos parmetros: el primero indica el nombre de la propiedad y el segundo el valor a asignarle. Podemos ver las otras dos asignaciones: x.css("background-color","#ffff00"); x.css("font-family","Courier");Como podemos ver es muy fcil acceder al estilo de un elemento HTML para actualizarlo en forma dinmica luego que la pgina fue cargada.4 - Seleccin de elementos por el tipo de elementos.

La sintaxis para tener la referencia de todos los elementos de cierto tipo (a, p, h1, etc.):$("nombre del elemento")Es decir es casi igual que obtener la referencia de un elemento particular mediante el id, solo difiere en que no le antecedemos el caracter $.Podemos con esto definir funciones comunes a un conjunto de elementos.ProblemaConfeccionar una tabla con 5 filas. Hacer que cambie de color la fila que se presiona con el mouse. Obtener la referencia a todos los elementos 'tr'.pagina1.html

Problema

1111111111111111111111111111111111111111

2222222222222222222222222222222222222222

3333333333333333333333333333333333333333

4444444444444444444444444444444444444444

5555555555555555555555555555555555555555

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 funcin presionFilaCuando se presiona cualquiera de las filas de la tabla se ejecuta la siguiente funcin:function presionFila(){ var x; x=$(this); x.css("background-color","eeeeee");}Para obtener la referencia de que elemento en particular dispar el evento podemos hacerlo de la siguiente manera: x=$(this);y a partir de esta referencia llamar al mtodo css.5 - Seleccin de elementos utilizando los selectores CSS.

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

Problema

Lista 1

Opcin nmero 1

Opcin nmero 2

Opcin nmero 3

Opcin nmero 4

Lista 2

Opcin nmero 1

Opcin nmero 2

Opcin nmero 3

Opcin nmero 4

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 funcin inicializarEventos obtenemos la referencia del botn mediante su id y llamamos al mtodo 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 funcin $ el selector CSS que accede a todos los elementos de tipo li contenidos en #lista1.Todas las reglas de CSS estn disponibles para seleccionar los elementos del DOM.6 - Seleccin de elementos utilizando las clases CSS definidas.

Recordemos que definimos clases en CSS cuando una regla de estilo puede ser igual para un conjunto de marcas HTML.Mediante este nombre de clase podemos podemos acceder a todos los elementos utilizando la funcin $:x=$(".nombre de clase");problema:Mostrar una serie de lenguajes de programacin y aplicar un estilo resaltado para aquellos lenguajes que son orientados a objetos. Cuando se presione un botn agregar la propiedad background-color a todos los elementos de dicha clase.pagina1.html

Problema

Cuales de los siguientes lenguajes son orientados a objetos:Java, VB6, C++,C,C#, Cobol ?

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

function resaltar(){ var x; x=$(".resaltado"); x.css("background-color","ffff00");}.resaltado{ color:#000000;}El cdigo nuevo es: x=$(".resaltado"); x.css("background-color","ffff00");Primero generamos un objeto jQuery que guarda la referencia a todos los elementos que tienen definida la clase .resalatado y luego fijamos como color de fondo el amarillo a dichos elementos.7 - Mtodos text(), text(valor)

Para saber el contenido de un elemento el objeto jQuery cuenta con un mtodo llamado text(), por ejemplo:var x=$("#parrafo1");luego si hacemos x.text() obtenemos el contenido del prrafo con id igual a parrafo1.Luego si queremos cambiar el texto del prrafo deberamos disponer: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 mtodo text, por ejemplo:var x=$("p");x.text("Este texto aparece en todos los prrafos del documento");El cdigo anterior crea un objeto jQuery con la referencia a todos los prrafos contenidos en el documento. Luego si llamamos al mtodo text envindole una cadena, esta aparecer en todo el documento remplazando el contenido de los prrafos actuales.El siguiente problema muestra el acceso y modificacin unitaria y mltiple de contenidos de elementos.

Problema

Texto del primer prrafo

celda 1,1celda 1,2celda 2,1celda 2,2

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

Estos mtodos nos permiten agregar propiedades a un elemento HTML y recuperar el valor de una propiedad.Para recuperar el valor de una propiedad (si hay muchos elementos que recupera la funcin $, solo retorna la propiedad del primero):$(elemento).attr(nombre de propiedad)Para fijar el valor de una propiedad (si hay muchos elementos que recupera la funcin $, se inicializan para todos):$(elemento).attr(nombre de propiedad,valor)Para eliminar una propiedad de un elemento o conjunto de elementos tenemos:$(elemento).removeAttr(nombre de la propiedad)Problema:Definir una tabla sin el atributo border. Al presionar un botn aadirle la propiedad border con el valor 1. Si se presiona otro botn recuperar y mostrar el valor del atributo border y por ltimo si se presiona otro botn eliminar la propiedad border.pagina1.html

Problema

1111111111111111111111111111111111111111

2222222222222222222222222222222222222222

3333333333333333333333333333333333333333

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

Los mtodos addClass y removeClass nos permiten asociar y desasociar una clase a un elemento o conjunto de elementos HTML.Problema:Disponer un div con un conjunto de prrafos. Cuando se presione un botn asociarle una clase y cuando se presione otro desasociarlo de dicha clase.pagina1.html

Problema

HTML es el lenguaje que se emplea para el desarrollo de pginas de internet. 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 imgenessobre una pgina, hipervnculos que nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc.Para poder crear una pgina HTML se requiere un simple editor de texto (en nuestro caso emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.),emplearemos el navegador que en este preciso momento est utilizando (recuerde que usted est viendo en este preciso momento una pgina HTML con su navegador).Lo ms importante es que en cada concepto desarrolle los ejercicios

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

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:

Cuando se presiona el botn asociar hoja de estilo se ejecuta la funcin:function asociarClase(){ var x=$("#descripcion"); x.addClass("recuadro");}Donde llamamos al mtodo addClass con el nombre de la clase (dicha clase debe estar definida en la hoja de estilo (css).De forma similar para desasociar una clase se ejecuta la funcin:function desasociarClase(){ var x=$("#descripcion"); x.removeClass("recuadro");}donde llamamos al mtodo removeClass a partir de un objeto jQuery.10 - Mtodos html() y html(valor)

El mtodo:html([bloque html]) Nos permite agregar un bloque de html a partir de un elemento de la pgina. Bsicamente es la propiedad innerHTML del DOM.Y el mtodo:html()Nos retorna el bloque html contenido a partir del elemento html que hace referencia el objeto jQuery.Problema:Disponer dos botones, al ser presionado el primero crear un formulario en forma dinmica que solicite el nombre de usuario y su clave. Si se presiona el segundo botn mostrar todos los elementos HTML del formulario previamente creado.pagina1.html

Problema

funciones.jsvar 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('Ingrese nombre:
Ingrese clave:
'); }

jQuery facilita la administracin de eventos de JavaScript y lo ms importante nos hace transparente la diferencia en la registracin de eventos entre distintos navegadores (IExplorer, FireFox)En este tutorial ya hemos utilizado el manejador de eventos:$(documento).ready(nombre de funcin)Dijimos que este funcin que registramos mediante el mtodo ready se ejecuta cuando el DOM del documento est en memoria. Si no utilizamos la librera jQuery hacemos esto a travs del evento load.Otro evento que vimos en conceptos anteriores es el click de un elemento, la sintaxis utilizada: var x; x=$("button"); x.click(presionBoton)Con este pequeo cdigo registramos la funcin presionBoton para todos los elementos de tipo button del documento.Con este otro cdigo: var x; x=$("#boton1"); x.click(presionBoton)solo se registra para el elemento con id con valor "boton1".Por ltimo con este cdigo se registra para todos los elementos "button" que dependen del div con valor de id igual a "formulario1": var x; x=$("#formulario1 button"); x.click(presionBoton)Para reafirmar estos conceptos confeccionaremos una pgina que muestre un prrafo, luego una tabla que contenga dos prrafos y por ltimo otra tabla que contenga dos prrafos. Capturaremos el evento click de todos los prrafos del documento y mostraremos un mensaje indicando:'se presion un prrafo del documento', tambin capturaremos el evento click del los dos prrafos de la segunda tabla y mostraremos: 'se presion un prrafo contenido en la segunda tabla.'.pagina1.html

Problema

Prrafo fuera de la tabla

Prrafo dentro de la primer tabla.Prrafo dentro de la primer tabla.

Prrafo dentro de la segunda tabla.Prrafo dentro de la segunda tabla.

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

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

function presionpresionParrafoSegundaTabla(){ alert('se presion un prrafo contenido en la segunda tabla.');}El siguiente cdigo asocia a cada elemento de tipo "p" (prrafo del documento) la funcin 'presionParrafoDocumento': x=$("p"); x.click(presionParrafoDocumento);Luego cuando ejecutemos este documento cada vez que presionemos un prrafo de la pgina mostrar el mensaje 'se presion un prrafo del documento'.Tambin asociamos otra funcin para el evento click de los prrafos contenidos dentro de la segunda tabla: x=$("#tabla2 p"); x.click(presionpresionParrafoSegundaTabla);Esto significa que los prrafos contenidos en la segunda tabla tienen asociados dos funciones para el evento click, luego cuando presionemos alguno de los prrafos de la segunda tabla aparecern los dos mensajes: 'se presion un prrafo del documento' y 'se presion un prrafo contenido en la segunda tabla.'12 - Eventos mouseover y mouseout.

Los eventos de JavaScript onmouseover y onmouseout son los equivalentes mouseover y mouseout de jQuery. Estos eventos estn generalmente unidos. El primero se dispara cuando ingresamos la flecha del mouse a un elemento HTML y el segundo cuando sacamos la flecha del control.Para probar estos dos eventos implementaremos una pgina que contenga tres botones y cuando ingrese la flecha del mouse al botn cambiaremos el color de texto del mismo, retornando el color original cuando retiramos la flecha del control.Implementaremos una pgina que contenga tres hipervnculos, cuando ingrese la flecha del mouse al hipervnculo cambiaremos el color de fondo, retornando el color original cuando retiramos la flecha del elemento.pagina1.html

Problema

La Voz del Interior
La nacin
El clarn

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

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

13 - Evento hover.

jQuery no solo mapea los eventos del DOM sino que provee otros que combinan estos.Como decamos es comn utilizar los eventos mouseover y mouseout en comn, por eso en jQuery existe un evento llamado hover que tiene dos parmetros:$(elemento).hover([funcin de ingreso del mouse],[funcin de salida del mouse])Es decir que al evento hover asociamos dos funciones, la primera se ejecuta cuando ingresamos la flecha del mouse dentro del elemento y la segunda cuando retiramos la flecha del mouse.Confeccionaremos el mismo problema del concepto que vimos los eventos mouseover y mouseout.Implementaremos una pgina que contenga tres hipervnculos, cuando ingrese la flecha del mouse al hipervnculo cambiaremos el color de fondo, retornando el color original cuando retiramos la flecha del elemento.pagina1.html

Problema

La Voz del Interior
La nacin
El clarn

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

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

function saleMouse(){ $(this).css("background-color","#fff");}Utilizamos solamente el evento hover para cambiar el color de fondo del ancla cuando se ingresa la flecha del mouse y retornarla al color original cuando se sale: var x; x=$("a"); x.hover(entraMouse,saleMouse);

14 - Evento mousemove.

Este evento se dispara cuando se mueve la flecha del mouse dentro del elemento HTML respectivo.Si queremos recuperar la coordenada donde se encuentra en ese momento el mouse, jQuery pasa el objeto event como parmetro (con la ventaja que hace transparente las diferencias entre IE y otros navegadores)Problema:Capturar el evento mousemove a nivel del objeto document, este se dispara cada vez que desplazamos el mouse dentro de la pgina. Mostrar la coordenada donde se encuentra la flecha del mouse.pagina1.html

Problema

coordenada x=coordenada y=

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 funcin a ejecutar cuando se desplace el mouse: var x; x=$(document); x.mousemove(moverMouse);La funcin que se ejecuta cada vez que se desplaza la flecha del mouse en el documento es:function moverMouse(event){ var x; x=$("#corx"); x.text("coordenada x="+event.clientX); x=$("#cory"); x.text("coordenada y="+event.clientY);}En esta creamos un objeto jQuery a partir del id del primer prrafo y fijamos el texto del mismo con el valor del atributo event.clientX que almacena la coordenada x de la flecha del mouse: x=$("#corx"); x.text("coordenada x="+event.clientX);

15 - Eventos mousedown y mouseup.

El evento mousedown se dispara cuando presionamos alguno de los botones del mouse y el evento mouseup cuando dejamos de presionar el botn.Implementemos una pgina que contenga una tabla con una fila y dos columna, al presionar el botn del mouse dentro de una casilla de la tabla cambiar el color de fondo de la misma por amarillo y cuando levantamos el dedo del mouse regresar a color blanco la casilla.pagina1.html

Problema

11111111111111111111

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

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

16 - Evento dblclick.

El evento dblclick se dispara cuando se presiona dos veces seguidas el botn izquierdo del mouse.Para ver el funcionamiento de este evento crearemos un div en una coordenada absoluta y lo ocultaremos al hacer doble clic en su interior.pagina1.html

Problema

Doble clic para ocultar este recuadro

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

El evento focus se produce cuando se activa el control. Podemos capturar el evento focus de un control de tipo text, textarea, button, checkbox, fileupload, password, radio, reset y submit.Es comn a muchos sitio donde se puede buscar informacin,disponer un control de tipo text con la leyenda 'Buscar...' y sin ningn botn a su lado. Cuando el control toma foco se borra automticamente su contenido, el operador ingresa el texto a buscar y presiona la tecla ENTER.Para probar como capturar este evento implementaremos una pgina que resuelva el problema anteriormente planteado.pagina1.html

Problema

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

function tomaFoco(){ var x=$("#buscar"); x.attr("value","");}En la funcin inicializarEventos creamos un objeto jQuery a partir del id del control de tipo text y asociamos el evento focus con el mtodo tomaFoco: x=$("#buscar"); x.focus(tomaFoco);El mtodo tomaFoco obtiene la referencia del elemento tipo text y mediante el mtodo attr modifica la propiedad value:function tomaFoco(){ var x=$("#buscar"); x.attr("value","");}

18 - Evento blur.

El evento blur se dispara cuando pierde el foco el control.Podemos capturar el evento blur de un control de tipo text, textarea, button, checkbox, fileupload, password, radio, reset y submit.Para probar su funcionamiento dispondremos dos controles de tipo text con algn contenido. Fijaremos de color azul su fuente. Al tomar foco el control cambiar a color rojo y al perder el foco volver a color azul.pagina1.html

Problema

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

19 - Manipulacin de los elementos del DOM.

jQuery dispone de una serie de mtodos que nos facilitan el tratamiento de los elementos del Dom.Confeccionaremos un problema que haga uso de estos mtodos.Problema:Implementar una pgina que contenga una lista con cuatro items. Probar distintos mtodos para manipular la lista (borrar, insertar)pagina1.html

Problema

Mtodos para manipular nodos del DOM con jQuery.

Primer item.

Segundo item.

Tercer item.

Cuarto item.

function inicializarEventos(){ var x; x=$("#boton1"); x.click(eliminarElementos) x=$("#boton2"); x.click(restaurarLista) x=$("#boton3"); x.click(anadirElementoFinal) x=$("#boton4"); x.click(anadirElementoPrincipio) x=$("#boton5"); x.click(eliminarElementoFinal) x=$("#boton6"); x.click(eliminarElementoPrincipio) x=$("#boton7"); x.click(eliminarPrimeroSegundo) x=$("#boton8"); x.click(eliminarDosUltimos)}

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

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

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

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

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

20 - Efectos con los mtodos show y hide.

Una caracterstica muy interesante de jQuery que nos provee de un serie de efectos visuales.Ya utilizamos los mtodos hide() y show(), que tienen por objetivo ocultar y mostrar elementos HTML. Ahora veremos que podemos hacer que cuando se oculte o muestre un elemento lo haga con una pequea animacin (que se oculte o muestre lentamente)Estas caractersticas pueden ayudar al usuario a concentrarse en una parte de la pgina donde sucede la animacinProblema:Confeccionar una pgina que muestre un recuadro con texto. Disponer dos botones, uno que oculte lentamente el cuadro y el otro que lo muestre rpidamente.pagina1.html

Problema

HTML es el lenguaje que se emplea para el desarrollo de pginas de internet. 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 imgenes sobre una pgina, hipervnculos que nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc.Para poder crear una pgina 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 pgina HTML con su navegador).Lo ms importante es que en cada concepto desarrolle los ejercicios propuestos y modifiquelos que se presentan ya resueltos.Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabaj con el mismo. No pretende mostrar todas los elementos HTML en forma alfabtica.Como veremos, de cada concepto se presenta una parte terica, en la que se da una explicacin completa, luego se pasa a la seccin del ejercicio resuelto donde podemosver el contenido de la pgina HTML y cmo la visualiza el navegador. Por ltimo y tal vez la seccin ms importante de este tutorial es donde se propone que usted haga pginas en forma autnoma (donde realmente podr darse cuenta si el concepto qued firme).

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;

border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00;}La funcin ocultarRecuadro se ejecuta cuando presionamos el botn 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 mtodo hide pasndole el string "slow", con esto logramos que se oculte el recuadro lentamente.De forma similar la funcin mostrarRecuadro:function mostrarRecuadro(){ var x=$("#descripcion"); x.show("fast");}llama a la funcin show pasando como parmetro el string "fast".Hay varias formas para llamar a los mtodos show y hide:Lo muestra en forma instantanea:show() Lo muestra con una animacin rpida:show("fast")Lo muestra con una animacin normal:show("normal")Lo muestra con una animacin lenta:show("slow")Lo muestra con una animacin que tarda tantos milisegundos como le indicamos:show([cantidad de milisegundos])Lo muestra con una animacin que tarda tantos milisegundos como le indicamos y ejecuta al final la funcin que le pasamos como segundo parmetro:show([cantidad de milisegundos],[funcin])De forma similar funciona el mtodo hide.21 - Efectos con los mtodos fadeIn y fadeOut.

Estos dos mtodos son similares a show y hide pero con la diferencia que fadeIn hace aparecer los elementos HTML con opacidad. El mtodo fadeOut decolora hasta desaparecer, es decir reduce la opacidad del elemento en forma progresiva.Problema:Confeccionar una pgina que muestre un recuadro con texto. Disponer dos botones, uno que oculte (fadeOut) y el otro que lo muestre (fadeIn).pagina1.html

Problema

HTML es el lenguaje que se emplea para el desarrollo de pginas de internet. 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 imgenes sobre una pgina, hipervnculosque nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc.Para poder crear una pgina 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 pgina HTML con su navegador).Lo ms importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos.Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabaj con el mismo.No pretende mostrar todas los elementos HTML en forma alfabtica.Como veremos, de cada concepto se presenta una parte terica, en la que se da una explicacin completa,luego se pasa a la seccin del ejercicio resuelto donde podemos ver el contenido de la pgina HTML y cmola visualiza el navegador. Por ltimo y tal vez la seccin ms importante de este tutorial es donde se propone que usted haga pginas en forma autnoma (donde realmente podr darse cuenta si el concepto qued firme).

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

function mostrarRecuadro(){ var x=$("#descripcion"); x.fadeIn("slow");}estilos.css.recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px;

border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00;}La funcin ocultarRecuadro se ejecuta cuando presionamos el botn 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 mtodo fadeOut pasndole el string "slow", con esto logramos que se oculte el recuadro se decolore lentamente hasta desaparecer.De forma similar la funcin mostrarRecuadro:function mostrarRecuadro(){ var x=$("#descripcion"); x.fadeIn("slow");}llama a la funcin fadeIn pasando como parmetro el string "slow".Las formas de llamar a los mtodos fadeIn y fadeOut:Lo muestra con una animacin rpida:fadeIn("fast")Lo muestra con una animacin normal:fadeIn("normal")Lo muestra con una animacin lenta:fadeIn("slow")Lo muestra con una animacin que tarda tantos milisegundos como le indicamos:fadeIn([cantidad de milisegundos])Lo muestra con una animacin que tarda tantos milisegundos como le indicamos y ejecuta al final la funcin que le pasamos como segundo parmetro:fadeIn([cantidad de milisegundos],[funcin])De forma similar funciona el mtodo fadeOut.22 - Efecto con el mtodo fadeTo.

El mtodo fadeTo puede modificar la opacidad de un elemento, el efecto es llevar la opacidad actual hasta el valor que le pasamos al mtodo fadeToPodemos inicializar este mtodo de las siguientes formas:fadeTo([velocidad],[valor de opacidad])Indicamos la velocidad de transicin del estado actual al nuevo estado (slow/normal/fast) o un valor indicado en milisegndos.El valor de la opacidad es un numero real entre 0 y 1. 1 significa sin opacidad y 0 es transparente.Tambin podemos llamar al mtodo fadeTo con tres parmetros:fadeTo([velocidad],[valor de opacidad],[funcin])Esta segunda estructura de la funcin permite ejecutar una funcin cuando finaliza la transicin.Hay que tener en cuenta que fadeTo por ms que indiquemos el valor 0 en opacidad el espacio que ocupa el elemento en la pgina seguir ocupado por un recuadro vaco.Problema:Confeccionar una pgina 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

Problema

HTML es el lenguaje que se emplea para el desarrollo de pginas de internet. Este lenguaje est constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imgenes sobre una pgina, hipervnculos que nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc.Para poder crear una pgina HTML se requiere un simple editor de texto (en nuestro caso emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador que en este preciso momento est utilizando (recuerde que usted est viendo en este preciso momento una pgina HTML con su navegador).Lo ms importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos.Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabaj con el mismo. No pretende mostrar todas los elementos HTML en forma alfabtica.Como veremos, de cada concepto se presenta una parte terica, en la que se da una explicacin completa, luego se pasa a la seccin del ejercicio resuelto donde podemos ver el contenido de la pgina HTML y cmo la visualiza el navegador. Por ltimo y tal vez la seccin ms importante de este tutorial es donde se propone que usted haga pginas en forma autnoma (donde realmente podr darse cuenta si el concepto qued firme).

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.recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px;

border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00;}Cuando se presiona el botn de reducir la opacidad llamamos al mtodo fadeTo con el valor 0.5:function reducirOpacidadRecuadro(){ var x=$("#descripcion"); x.fadeTo("slow",0.5);}y cuando presionamos el botn de aumentar la opacidad llamamos al mtodo fadeTo con valor 1 en opacidad (significa opacidad total):function aumentarOpacidadRecuadro(){ var x=$("#descripcion"); x.fadeTo("slow",1);}

23 - Efecto con el mtodo toggle.

El mtodo toggle permite cada vez que se ejecute cambiar de estado la visibilidad del elemento HTML, es decir si est visible pasa a oculto y si se encuentra oculto pasa a visible.Problema:Hacer que un bloque de informacin pase de visible a oculto lentamente y viceversa al presionar un botn.pagina1.html

Problema

HTML es el lenguaje que se emplea para el desarrollo de pginas de internet. Este lenguaje est constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imgenes sobre una pgina, hipervnculosque nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc.Para poder crear una pgina HTML se requiere un simple editor de texto (en nuestro caso emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador que en este preciso momento est utilizando (recuerde que usted est viendo en este preciso momento una pgina HTMLcon su navegador).Lo ms importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos.Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabaj con el mismo.No pretende mostrar todas los elementos HTML en forma alfabtica.Como veremos, de cada concepto se presenta una parte terica, en la que se da una explicacin completa,luego se pasa a la seccin del ejercicio resuelto donde podemos ver el contenido de la pgina HTML y cmo la visualiza el navegador. Por ltimo y tal vez la seccin ms importante de este tutorial es donde se propone que usted haga pginas en forma autnoma (donde realmente podr darse cuenta si el concepto qued firme).

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

function ocultarMostrarRecuadro(){ var x=$("#descripcion"); x.toggle("slow");}estilos.css.recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px;

border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00;}La funcin ocultarMostrarRecuadro:function ocultarMostrarRecuadro(){ var x=$("#descripcion"); x.toggle("slow");}se encarga de llamar al mtodo toggle del objeto jQuery, y este analiza si actualmente el elemento est visible u oculto, la transicin se hace en forma lenta ya que le pasamos como parmetro el string "slow".24 - Iteracin por los elementos (each)

jQuery dispone de un mtodo que nos permite asociar una funcin que se ejecutar por cada elemento que contenga la lista del objeto jQuery.Dentro de esta funcin podemos manipular el elemento actual.La sintaxis del iterador each es: var x; x=$([elementos]); x.each([nombre de funcion])Problema:Resaltar con fondo amarillo todos los prrafos que tienen menos de 100 caracteres.pagina1.html

Problema

prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1 - prrafo 1prrafo 2 - prrafo 2 - prrafo 2 - prrafo 2prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3 - prrafo 3prrafo 4 - prrafo 4 - prrafo 4 - prrafo 4 - prrafo 4

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

function resaltarParrafos(){ var x=$(this); if (x.text().lengthestilos.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 cdigo JavaScript es muy pequeo, veamos:function inicializarEventos(){ var x; x=$("#menu a"); x.click(presionEnlace);}En la funcin inicializarEventos cremos un objeto jQuery con la referencia de todas las anclas que estn contenidas en el div #menu. Asociamos el evento click a todos los enlaces.La funcin presionEnlace:function presionEnlace(){ var pagina=$(this).attr("href"); var x=$("#detalles"); x.load(pagina); return false;}Extraemos el atributo href del hipervnculo que dispar el evento (tengamos en cuenta que almacena el nombre de la pgina y el parmetro, por ejemplo:"pagina1.php?cod=6) var pagina=$(this).attr("href");Creamos un objeto jQuery a partir del div #detalles: var x=$("#detalles");Llamamos al mtodo load del objeto jQuery y le pasamos como parmetro el nombre de la pgina a recuperar: x.load(pagina); El mtodo load se encarga de hacer la comunicacin asincrnica con el servidor, esperar y recibir los datos y finalmente aadir la informacin al elemento HTML (en nuestro ejemplo el div #detalles)Por ltimo la funcin retorna false para anular la propagacin de eventos y desactivar tambin el evento por defecto que ocurre cuando se presiona un enlace.26 - Ajax: mtodos ajaxStart y ajaxStop

Estos dos mtodos se pueden asociar a un objeto de tipo jQuery, tienen como parmetro una funcin:ajaxStart([funcin])La funcin de ajaxStart se dispara cuando se inicia la peticin al servidor y nos puede servir para mostrar en pantalla al usuario que estn llegando datos del servidor.ajaxStop([funcin])Se dispara esta funcin cuando finalizar la peticin de datos al servidor.Problema:Confeccionar un problema que muestre una lista de hipervnculos con los distintos signos del horscopo y luego al ser presionado no recargue la pgina completa sino que se enve una peticin al servidor y el mismo retorne la informacin de dicho signo, luego se actualice solo el contenido de un div del archivo HTML.Mostrar un gif animado mientras los datos no llegaron del servidor.pagina1.html

Problema

Signos del horscopo.

AriesTauroGeminisCancerLeoVirgoLibraEscorpioSagitarioCapricornioAcuarioPiscis

Seleccione su signo.

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

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('');}pagina1.php

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;}Lo nuevo en este problema es que llamamos al mtodo ajaxStart con el mismo objeto jQuery que llama al mtodo load:function presionEnlace(){ var pagina=$(this).attr("href"); var x=$("#detalles"); x.ajaxStart(inicioEnvio); x.load(pagina); return false;}Luego cuando se activa la peticin de la pgina al servidor el objeto jQuery llama a la funcin inicioEvento, donde mostramos el gif animado:function inicioEnvio(){ var x=$("#detalles"); x.html('');}No ocultamos el gif animado ya que se est mostrando en el div #detalles. Dicho div ser inicializado por el objeto jQuery con los datos enviados por el servidor y borrar el elemento img.27 - $.get y $.post(Pasando datos al servidor por los mtodos GET y POST)

Utilizamos estas funciones cuando no queremos inyectar directamente los datos a nuestra pgina, sino que queremos procesarlos y eventualmente agregarlos en distintas partes.La sintaxis de la funcin $.get es distinta a la ya utilizada $, en este caso es una funcin global de la librera jQuery:$.get([nombre de la pgina],[parmetros a enviarse por el mtodo get], [funcin que recibe los datos del servidor])Tambin podemos llamarla:jQuery.get([nombre de la pgina],[parmetros a enviarse por el mtodo get], [funcin que recibe los datos del servidor])La funcin $.post es idntica a la funcin $.get, lo nico que difiere es como el protocolo HTTP empaqueta los datos y los enva al servidor. Normalmente se utiliza la funcin $.post, ya que no est limitado la cantidad de datos que se pueden enviar al servidor.Problema:Implementar una aplicacin que calcule el cuadrado de un nmero que ingresamos por teclado. La operacin se realiza en el servidor, le enviamos los datos mediante la funcin de jQuery $.getpagina1.html

Problema

Ingrese nro:

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

Veamos el cdigo JavaScript para comunicarse con el servidor:Primero en la funcin inicializarEventos enlazamos el evento click al botn submit del formulario:function inicializarEventos(){ var x; x=$("#enviar"); x.click(presionSubmit);}Cuando presionamos el botn extraemos el valor del control text y llamamos a la funcin $.get indicando el nombre de la pgina a llamar, un objeto literal con todos los parmetros y sus valores (en este caso solo tenemos un parmetro llamado numero) y finalmente el nombre de la funcin que se ejecutar cuando lleguen los datos del servidor:function presionSubmit(){ var v=$("#nro").attr("value"); $.get("pagina1.php",{numero:v},llegadaDatos); return false;}La funcin que se ejecuta cuando llegan los datos del servidor recibe un string:function llegadaDatos(datos){ alert(datos);}

28 - $.getJSON

La funcin getJSON hace una peticin de datos al servidor considerando que retorna la informacin con notacin JSON. La sintaxis de esta funcin es:$.getJSON([nombre de la pgina], [parmetros], [funcin que recibe los datos])La funcin getJSON procede a generar un objeto en JavaScript y nosotros en la funcin lo procesamos.Problema:Confeccionar un sitio que permita ingresar el documento de una persona y nos retorne su apellido, nombre y lugar donde debe votar.pagina1.html

Problema

Ingrese dni (solo existen los valores 1,2 y 3):

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

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

function llegadaDatos(datos){ $("#resultados").html("Nombre:"+datos.nombre+ "
"+"Apellido:"+ datos.apellido+"
"+ "Direccion:"+datos.direccion);}pagina1.php

Veamos que datos podemos enviarle a la funcin $.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 comunicacin ser asincrnica (true) o sincrnica (false) type : Indica el mtodo que se envan los datos (pudiendo ser GET o POST) dataType : Indica el tipo de datos que se va a recuperar (pudiendo ser "html","xml","json","script") contentType : Indicamos como se empaquetan los datos para enviarlos al servidor (normalmente "application/x-www-form-urlencoded") url : Indicamos el nombre de la pgina que procesar la peticin de datos. data : Indicamos los datos a enviar al servidor. beforeSend : Indicamos el nombre de la funcin que se ejecutar previo al envo de datos (en nuestro ejemplo mostramos el gif animado que indica que se inici el pedido de datos al servidor) success : Indicamos la funcin que se ejecuta cuando finaliz el envo de datos del servidor y adems ocurri todo en forma correcta (en nuestro ejemplo recuperamos el dato devuelto y lo mostramos en la pgina) timeout : El tiempo mximo a esperar por la peticin de datos. error : El nombre de la funcin que se ejecuta si los datos no llegan del servidor.30 - Funciones annimas en nuestro cdigo.

Si visitamos sitios sobre jQuery podremos comprobar que la sintaxis empleada es mucho ms compacta que todos los ejemplos que venimos viendo. El objetivo de este tutorial es aprender jQuery de una forma sencilla, pero estara inconcluso si no introducimos la forma ms habitual de programar con jQuery (funciones annimas y encadenamiento de llamadas con el objeto jQuery)Veamos como se organiza nuestro cdigo utilizando funciones annimas.Problema:Confeccionar una pgina que muestre dos ttulos de primer nivel, al ser presionados cambiar el color de fuente, fondo y la fuente del texto.pagina1.html

Problema

Primer ttuloSegundo ttulo

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 cdigo a quedado mucho ms compacto. Normalmente uno utiliza funciones annimos cuando el algoritmo contenido en la funcin solo se requiere para dicho evento.La sintaxis para definir una funcin annima:x.ready(function(){......})Como vemos llamamos al mtodo ready y entre parntesis incluimos la funcin tal como las venimos implementando en conceptos anteriores pero sin nombre.Tambin es interesante ver que podemos disponer otras funciones annimos dentro de una funcin annima: x.click(function () { ...... });

31 - Llamadas encadenadas de mtodos del objeto jQuery.

Otra caracterstica muy utilizada en la librera jQuery es la llamada sucesiva de mtodos, esto se puede hacer ya que casi todos los mtodos de la clase jQuery retornan un objeto de tipo jQuery.Para entender esta sintaxis implementaremos un problema.Problema:Confeccionar una pgina que muestre un recuadro con texto. Disponer dos botones, uno que cambie la opacidad lentamente hasta el valor 0.5, seguidamente oculte el recuadro tambin lentamente, y el otro botn que lo muestre en forma instantnea y aumente su opacidad al 100%.pagina1.html

Problema

HTML es el lenguaje que se emplea para el desarrollo de pginas de internet. Este lenguaje est constituido de elementos que el navegador interpreta y las despliega en la pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imgenes sobre una pgina, hipervnculos que nos permiten dirigirnos a otra pgina, listas, tablas para tabular datos, etc.Para poder crear una pgina HTML se requiere un simple editor de texto (en nuestro caso emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el navegador que en este preciso momento est utilizando (recuerde que usted est viendo en este preciso momento una pgina HTML con su navegador).Lo ms importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los que se presentan ya resueltos.Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabaj con el mismo. No pretende mostrar todas los elementos HTML en forma alfabtica.Como veremos, de cada concepto se presenta una parte terica, en la que se da una explicacin completa, luego se pasa a la seccin del ejercicio resuelto donde podemos ver el contenido de la pgina HTML y cmo la visualiza el navegador. Por ltimo y tal vez la seccin ms importante de este tutorial es donde se propone que usted haga pginas en forma autnoma (donde realmente podr darse cuenta si el concepto qued firme).

funciones.js$(document).ready(function () { $("#boton1").click(function () { $("#descripcion").fadeTo("slow",0.5).hide("slow"); }); $("#boton2").click(function () { $("#descripcion").show().fadeTo("slow",1); })})estilos.css.recuadro { background-color:#ffffcc; font-family:verdana; font-size:14px;

border-top-color:#ffaa00; border-right-color:#ff0000; border-bottom-color:#ff0000; border-left-color:#ffaa00;}Como podemos observar en la siguiente lnea 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 funcin $ nos retorna un objeto jQuery que utilizamos directamente para llamar al mtodo fadeTo para aumentar su opacidad lentamente. Seguidamente el mtodo fadeTo nos retorna la referencia del objeto jQuery y la utilizamos para llamar al mtodo hide indicndole que oculte el div lentamente.Es importante notar que los mtodos se ejecutan de izquierda a derecha.Recordemos como era nuestro cdigo cuando comenzamos a estudiar jQuery:var x;x=$(document);x.ready(inicializarEventos);

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

Implementaremos un problema utilizando todos los conceptos aprendidos hasta ahora.ProblemaImplementar un Tooltip con jQuery recuperando la informacin a mostrar del servidor en forma asincrnica.Agregar una imagen al tooltip. En el servidor ya hay cuatro imgenes llamadas imagen1.jpg, imagen2.jpg etc. y se encuentran en el directorio inmediatamente superior a donde se almacenan las pginas. ( )pagina1.html

Problema

Entre con el mouse al recuadro.

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('hhhh'); $("#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

Como podemos ver el cdigo JavaScript utilizando la librera jQuery queda muy compacto y reducido:$(document).ready(function () { $("body").append('hhhh'); $("#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); })})

Guia de JQuery

Documents

Transcript of Guia de JQuery