0% encontró este documento útil (0 votos)

66 vistas

J Query

El jQuery es una librería de JavaScript que simplifica el acceso y manipulación de objetos del DOM. Permite seleccionar elementos del documento mediante su ID usando $("#id") y asignar funciones a eventos como click. Esto provee una nueva forma de programar JavaScript de manera más simple y compatible entre navegadores.

Cargado por

Anderson DLeon

Derechos de autor

Formatos disponibles

Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

66 vistas

J Query

Cargado por

Anderson DLeon

Derechos de autor

Formatos disponibles

Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

Está en la página 1/ 97

1 - Que es el jQuery?

El jQuery es una librería de JavaScript para acceder a los objetos

del DOM de un modo simplificado.

El sitio oficial de la librería lo puedes acceder desde aquí donde

puedes descargar el archivo para tus proyectos, además de poder
enterarte de las mejoras constantes que se le hacen.

El autor de esta librería es John Resig que además trabaja para

Mozilla Corporation.

Las aplicaciones en internet son cada vez más 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
solución con muy poco tiempo, en este tipo de situaciones el
empleo de librerías como el jQuery nos facilitan el desarrollo de la
aplicación. Otra ventaja paralela es despreocuparnos cuando
codificamos en la compatibilidad de navegadores, ya que la librería
resolverá esto.

Para utilizar la librería como dijimos debemos descargarla del sitio

oficial y en cada página que lo requiera agregar:
<script type="text/javascript" src="jquery.js"></script>

Del sitio oficial de jQuery descargaremos la versión descomprimida

que ocupa alrededor de 60 Kb (es el archivo jquery.js) y cuando
subamos nuestro sitio es recomendable descargar la versión
comprimida que tiene un peso de 20 Kb.

La librería jQuery en resumen nos aporta las siguientes ventajas:

 Nos ahorra muchas líneas de código.

 Nos hace transparente el soporte de nuestra aplicación 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 página en forma muy sencilla.
 Integra funcionalidades para trabajar con AJAX.
 2 - 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');
}

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.

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:

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

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.

2 - Nueva manera de programar JavaScript

con jQuery.
Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Disponer dos párrafos. Capturar el evento click solo del primero

utilizando la librería jQuery.

Ver solución

pagina1.html

3 - 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.

funciones.js
var 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");
}
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:
var x;
x=$(document);
x.ready(inicializarEventos);

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:
ready
click

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.

3 - Selección de un elemento del documento

mediante el id.
Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Confeccionar una página que muestre una tabla con dos filas
cambiar el color de fondo cuando sea presionada con el mouse.
Ver solución

pagina1.html

4 - 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
var x;
x=$(document);
x.ready(inicializarEventos);

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.

4 - Selección de elementos por el tipo de

elementos.
Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Mostrar una lista no ordenada con 4 elementos 'li'. Ocultar el que se

presiona. Para ocultar un elemento jQuery tiene un método llamado
hide().

Ver solución

pagina1.html

5 - 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.js
var 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.

5 - Selección de elementos utilizando los

selectores CSS.
Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Confeccionar una página que muestre dos tablas con tres filas cada
una. Cambiar el color de fondo de cada fila de la primer tabla
cuando sea presionada con el mouse.

Ver solución

pagina1.html
funciones.js

- 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.

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

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.

6 - Selección de elementos utilizando las

clases CSS definidas.
Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Disponer un título de noticia y seguidamente la descripción de la

noticia (encerrarlo en un div con un nombre de clase), repetir esto
para tres noticias. Agregar tres botones que rescaten el nombre de
la clase para la descripción de la noticia y cambien su tamaño de
fuente.

Ver solución

pagina1.html

7 - 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.
<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>
<input type="button" value="Obtener el texto contenido en un
párrafo" id="boton1"><br>
<input type="button" value="Modificar el texto de un párrafo"
id="boton2"><br>
<input type="button" value="Modificar el texto de los elementos
td de una tabla" id="boton3"><br>
<p id="parrafo1">Texto del primer párrafo</p>
<table border="1">
<tr>
<td>celda 1,1</td><td>celda 1,2</td>
<td>celda 2,1</td><td>celda 2,2</td>
</tr>
</table>
</body>
</html>

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

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

function modificarDatosTabla()
{
var x=$("td");
x.text("texto nuevo");
}

Como vemos esta página tiene tres botones, al presionarse el

primero se dispara la función:
function extraerTexto()
{
var x=$("#parrafo1");
alert(x.text());
}

Obtenemos la referencia al párrafo mediante su id (recordemos que

en una página todos los valores de los id son distintos), luego
extraemos el contenido mediante el método text() y lo mostramos
en un alert.

La segunda función cambia el contenido del párrafo:

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

Obtenemos la referencia del párrafo mediante su id y llamamos al

método text enviándole el nuevo string a mostrar.

Por último la función:

function modificarDatosTabla()
{
var x=$("td");
x.text("texto nuevo");
}

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

elementos td del documento (es decir los td de todas las tablas) y
posteriormente mediante el método text modifica el contenido de
todos ellos (todos los td del documento se cambian por el string
"nuevo texto")

- Métodos text(), text(valor)

Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Crear una página que contenga dos tablas de 3 filas y 3 columnas

cada una con un texto en cada casillero. Luego al presionar un
botón cambiar por por la cadena "-" solo el contenido de la primer
tabla, dejando intacto el de la segunda.

Ver solución

pagina1.html

8 - 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
var x;
x=$(document);
x.ready(inicializarEventos);

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.

8 - Métodos attr(nombre de propiedad),

attr(nombre de propiedad,valor) y
removeAttr(nombre de propiedad)
Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)
Problema:

Definir un hipervínculo con la propiedad href con cadena vacía.

Luego disponer tres botones que permitar fijar distintos
hipervínculos para la propiedad href. Además actualizar el texto del
hipervínculo.

Ver solución

pagina1.html

9 - 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.

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
var x;
x=$(document);
x.ready(inicializarEventos);

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 addClass y removeClass.
Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Definir una tabla con un conjunto de filas y columnas. Definir dos

estilos, uno para la sección thead y otro para la sección tbody.
Mediante dos botones permitir asociar y desasociar clases.

Ver solución

pagina1.html

10 - 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.

10 - Métodos html() y html(valor)

Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Confeccionar una página que tenga dos botones. El primero debe

mostrar en un alert el contenido HTML de la cabecera de la página
y el segundo el contenido HTML del cuerpo de la página.

Ver solución
pagina1.html

11 - 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
var x;
x=$(document);
x.ready(inicializarEventos);

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.'

- Administración de eventos con jQuery.

Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Confeccionar una página que contenga algunas palabras con el

elemento 'strong', luego cuando sean presionadas ocultarlas.

Ver solución

pagina1.html
funciones.js

12 - 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
var x;
x=$(document);
x.ready(inicializarEventos);

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:
function entraMouse()
{
$(this).css("background-color","#ff0");
}
De forma similar la función saleMouse retorna al color original:
function saleMouse()
{
$(this).css("background-color","#fff");
}

12 - Eventos mouseover y mouseout.

Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Crear una tabla con dos filas y dos columnas, cambiar el color del
interior de la casilla cuando ingresamos con el mouse y dejarla con
dicho color cuando retiramos la flecha.

Ver solución

pagina1.html

3 - 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
var x;
x=$(document);
x.ready(inicializarEventos);

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

13 - Evento hover.
Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Crear una tabla con dos filas y dos columnas, cambiar el color del
interior de la casilla cuando ingresamos con el mouse y regresarla
al original cuando salimos.

Ver solución

pagina1.html
funciones.js

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 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
var x;
x=$(document);
x.ready(inicializarEventos);

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

14 - Evento mousemove.
Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Crear un div de 200 pixeles de ancho y alto. Mostrar luego la

coordenada donde se encuentra la flecha del mouse cuando está
dentro del div. Mostrar un mensaje si no se encuentra dentro del
div.

Ver solución

pagina1.html

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 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.

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

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

15 - Eventos mousedown y mouseup.

Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Crear una página con dos botones. Al ser presionados cambiar su

color de fondo. Retornar al color original cuando se suelta el botón
del mouse.

Ver solución

16 - 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.

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.

16 - Evento dblclick.
Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Disponer un div de 800x70 píxeles. Al hacer doble clic

redimensionarlo a 250x250 píxeles y si se hace doble clic
nuevamente retornar al tamaño 800x70.

Ver solución

pagina1.html

17 - Evento focus.

El evento focus se produce cuando se activa el control. Podemos

capturar el evento focus de un control de tipo text, textarea, button,
checkbox, fileupload, password, radio, reset y submit.

Es 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
var x;
x=$(document);
x.ready(inicializarEventos);

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

17 - Evento focus.
Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Disponer dos controles de tipo text con algún contenido. Fijar de

color azul su fuente. Al tomar foco el control cambiar a color rojo.

Ver solución

pagina1.html

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 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.

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

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

18 - Evento blur.
Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Confeccionar un formulario que contenga un text. Si al perder el

foco su contenido es una cadena vacía mostrar mediante un alert
tal situación.

Ver solución

pagina1.html
19 - 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>

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

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('<li>Primer item.</li><li>
Segundo item.</li><li>Tercer item.</li><li>Cuarto item.</li>');
}

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

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

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

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

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

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

Para borrar todos los elementos contenidos en una lista obtenemos

la referencia de la lista mediante la 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();
}

20 - 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 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
var x;
x=$(document);
x.ready(inicializarEventos);

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

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.

20 - Efectos con los métodos show y hide.

Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Confeccionar una página que contenga un div con un conjunto de

párrafos. Cuando se presione con el mouse dentro del div ocultarlo
lentamente y cuando esté completamente oculto hacer que
aparezca lentamente otro bloque de texto.

Ver solución

pagina1.html
21 - 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 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
var x;
x=$(document);
x.ready(inicializarEventos);

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

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.

21 - Efectos con los métodos fadeIn y

fadeOut.
Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:
Confeccionar una página que contenga un div con un conjunto de
párrafos. Cuando se presione con el mouse dentro del div ocultarlo
por decoloración y cuando esté completamente oculto hacer que
aparezca lentamente otro bloque.

Ver solución

pagina1.html

22 - 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>

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

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

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

22 - Efecto con el método fadeTo.

Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Confeccionar una página que contenga un div con un conjunto de

párrafos. Cuando se presione con el mouse dentro del div reducir
su opacidad a 0.20 y cuando esté completamente oculto hacer que
aparezca lentamente otro bloque.

Ver solución

pagina1.html

23 - 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í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
var x;
x=$(document);
x.ready(inicializarEventos);

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

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

24 - 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.js
var 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.

24 - Iteración por los elementos (each)

Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:
Una página tiene una lista de hipervínculos. Resaltar todos los
subdominios .ar
Utilizar el método indexOf de la clase String para verificar si una
cadena se encuentra en otra.

Ver solución

pagina1.html

25 - Ajax: método load.

Para el entendimiento de los próximos conceptos se recomienda

haber realizado el tutorial de AJAX 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.

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

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
<?php
header('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:
function inicializarEventos()
{
var x;
x=$("#menu a");
x.click(presionEnlace);
}
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.

26 - Ajax: métodos ajaxStart y ajaxStop

Estos 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

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

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('<img src="../cargando.gif">');
}

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 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.

26 - Ajax: métodos ajaxStart y ajaxStop

Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

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.

Disponer el gif en otro div. Ocultarlo cuando finalice la carga

(ajaxStop)

27 - $.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>

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

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

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

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

pagina1.php
<?php
header('Content-Type: text/txt; charset=ISO-8859-1');
$nombre='';
$apellido='';
$direccion='';
if ($_REQUEST['dni']=='1')
{
$nombre='Juan';
$apellido='Rodriguez';
$direccion='Colon 123';
}
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'
}";
?>

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:
<?php
header('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'
}";
?>

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

1. Método load
2. Funciones $.get y $.post
3. $.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>

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

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:

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.

30 - 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.

funciones.js
var 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 () {
......
});

30 - Funciones anónimas en nuestro código.

Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:
Confeccionar una página que muestre una tabla con dos filas
cambiar el color de fondo cuando sea presionada con el mouse.

Ver solución

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

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;
}
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:
var x;
x=$(document);
x.ready(inicializarEventos);

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.

31 - Llamadas encadenadas de métodos del

objeto jQuery.
Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de
texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

Confeccionar un problema que muestre una lista de hipervínculos

32 - 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"> )

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
<?php
if ($_REQUEST['cod']=='c1')
{
echo "<img src=\"../imagen1.jpg\">";
echo "<p>Primer tooltip.</p>";
echo "<p>aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaa";
echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaa";
echo "aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa aaaaaaa";
echo "aaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaa";
echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaaaa</p>";
}
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);
})
})

También podría gustarte

Curso HTML y CSS Completo Con Dalto - Temario
Aún no hay calificaciones
Curso HTML y CSS Completo Con Dalto - Temario
3 páginas
Tarea 2 Semana Programación Web II - I
Aún no hay calificaciones
Tarea 2 Semana Programación Web II - I
7 páginas
Tarea 2 Semana Programación Web II - I
Aún no hay calificaciones
Tarea 2 Semana Programación Web II - I
7 páginas
JQuery
Aún no hay calificaciones
JQuery
56 páginas
JQUERY2
Aún no hay calificaciones
JQUERY2
13 páginas
Javascript - Clase 6
Aún no hay calificaciones
Javascript - Clase 6
8 páginas
El Framework Jquery para Principiantes
Aún no hay calificaciones
El Framework Jquery para Principiantes
6 páginas
API WebWorkers
Aún no hay calificaciones
API WebWorkers
13 páginas
Guia JQuery Inces
Aún no hay calificaciones
Guia JQuery Inces
10 páginas
4 6030707435948213825
Aún no hay calificaciones
4 6030707435948213825
80 páginas
Manual de Jquery
Aún no hay calificaciones
Manual de Jquery
16 páginas
Exercises Cue 10
Aún no hay calificaciones
Exercises Cue 10
33 páginas
JQuery UI Widgets
Aún no hay calificaciones
JQuery UI Widgets
54 páginas
Javascript Ejemplos2018
Aún no hay calificaciones
Javascript Ejemplos2018
7 páginas
HTML Act 3
Aún no hay calificaciones
HTML Act 3
3 páginas
(UOC / PROGRAMACIÓ WEB) - PAC 3 - Rubén Mejias Alonso
Aún no hay calificaciones
(UOC / PROGRAMACIÓ WEB) - PAC 3 - Rubén Mejias Alonso
9 páginas
Lectura 4 - Document Object Model (DOM)
Aún no hay calificaciones
Lectura 4 - Document Object Model (DOM)
10 páginas
Principios JQUERY PDF
Aún no hay calificaciones
Principios JQUERY PDF
62 páginas
Material Apoyo Lectura - Ejecutar funciones creadas de JavaScript al hacer click en un botón
Aún no hay calificaciones
Material Apoyo Lectura - Ejecutar funciones creadas de JavaScript al hacer click en un botón
4 páginas
Ud 3
Aún no hay calificaciones
Ud 3
204 páginas
DHTML Ya
Aún no hay calificaciones
DHTML Ya
7 páginas
Cómo Usar La Librería JQUERY en Un HTML
Aún no hay calificaciones
Cómo Usar La Librería JQUERY en Un HTML
28 páginas
Aprendiendo Jquery
Aún no hay calificaciones
Aprendiendo Jquery
5 páginas
Ejercicios JQuery Resueltos, Distintas Dificultades
0% (1)
Ejercicios JQuery Resueltos, Distintas Dificultades
11 páginas
Desarrollo Web
Aún no hay calificaciones
Desarrollo Web
43 páginas
PasoaPaso MVC
Aún no hay calificaciones
PasoaPaso MVC
15 páginas
Sljavam 2
Aún no hay calificaciones
Sljavam 2
40 páginas
00508521000is05s11035900lp2 (Julca) Sesion02 Jquery Bootstrap Ajax
Aún no hay calificaciones
00508521000is05s11035900lp2 (Julca) Sesion02 Jquery Bootstrap Ajax
25 páginas
Comenzando Con Jquery
Aún no hay calificaciones
Comenzando Con Jquery
15 páginas
Uso Práctico de Vistas y Layouts
Aún no hay calificaciones
Uso Práctico de Vistas y Layouts
4 páginas
S8 - Guia de Contenido
Aún no hay calificaciones
S8 - Guia de Contenido
10 páginas
Android
Aún no hay calificaciones
Android
137 páginas
Material Jquery
Aún no hay calificaciones
Material Jquery
50 páginas
Tutorial PHP
Aún no hay calificaciones
Tutorial PHP
41 páginas
Ejercicio Guiado 2
Aún no hay calificaciones
Ejercicio Guiado 2
8 páginas
Diseño de Sitios Web
Aún no hay calificaciones
Diseño de Sitios Web
25 páginas
Desarrollo de Una WebPart para SharePoint 2010 Con Visual Studio 2010
Aún no hay calificaciones
Desarrollo de Una WebPart para SharePoint 2010 Con Visual Studio 2010
15 páginas
Prog Datasci 5 API Tutorial Scrapy
Aún no hay calificaciones
Prog Datasci 5 API Tutorial Scrapy
6 páginas
Semana 4 Js JQuery, Programacion Web II
100% (1)
Semana 4 Js JQuery, Programacion Web II
6 páginas
Java Script
Aún no hay calificaciones
Java Script
32 páginas
DWEC03 - Modelo de Objetos Predefinidos en JavaScritp
Aún no hay calificaciones
DWEC03 - Modelo de Objetos Predefinidos en JavaScritp
24 páginas
Manual Jquery Basico
Aún no hay calificaciones
Manual Jquery Basico
16 páginas
DOM Document Object Model
Aún no hay calificaciones
DOM Document Object Model
3 páginas
Adaptando Paso A Paso
Aún no hay calificaciones
Adaptando Paso A Paso
12 páginas
Jquery para Aspnet
Aún no hay calificaciones
Jquery para Aspnet
3 páginas
PHP - Variables de Sesión
Aún no hay calificaciones
PHP - Variables de Sesión
9 páginas
Clase 6 Javascript
Aún no hay calificaciones
Clase 6 Javascript
34 páginas
Resumen Mod 07
100% (1)
Resumen Mod 07
12 páginas
Practica 3.1JavaScriptBasico1
Aún no hay calificaciones
Practica 3.1JavaScriptBasico1
8 páginas
Editor Pane
Aún no hay calificaciones
Editor Pane
8 páginas
GUI VII Efectos en JavaScript PDF
Aún no hay calificaciones
GUI VII Efectos en JavaScript PDF
4 páginas
Ajax Ya
Aún no hay calificaciones
Ajax Ya
109 páginas
S4 - Semana 4
Aún no hay calificaciones
S4 - Semana 4
7 páginas
Eventos JavaScript
Aún no hay calificaciones
Eventos JavaScript
13 páginas
Tarea 2 Semana Programación Web II - I
Aún no hay calificaciones
Tarea 2 Semana Programación Web II - I
7 páginas
Tarea 2 Semana Programación Web II - I
Aún no hay calificaciones
Tarea 2 Semana Programación Web II - I
7 páginas
Carlos Sanchez Control 2
Aún no hay calificaciones
Carlos Sanchez Control 2
7 páginas
La programación JavaScript
De Everand
La programación JavaScript
Preston Prescott
Aún no hay calificaciones
Aprende a Programar Ajax y jQuery
De Everand
Aprende a Programar Ajax y jQuery
Ángel Arias
1/5 (1)
Elementos Basicos de HTML y CSS, Herramientas para Epubs
De Everand
Elementos Basicos de HTML y CSS, Herramientas para Epubs
Luis Brito
Aún no hay calificaciones
HTML para novatos
De Everand
HTML para novatos
Jose M Sepulveda
4.5/5 (7)
Ejemplos Básicos en JQuery
Aún no hay calificaciones
Ejemplos Básicos en JQuery
7 páginas
Lmsgi - Ut02 - Revision de Examen
Aún no hay calificaciones
Lmsgi - Ut02 - Revision de Examen
8 páginas
Plantilla para Informe Semanal RRSS y Analytics
Aún no hay calificaciones
Plantilla para Informe Semanal RRSS y Analytics
1 página
Como Aumentar La Velocidad de Descargas de Firefox Al Maximo
Aún no hay calificaciones
Como Aumentar La Velocidad de Descargas de Firefox Al Maximo
2 páginas
PPT 2022 05 U04 T05 Desarrollo de Servicios Web I (1915)
Aún no hay calificaciones
PPT 2022 05 U04 T05 Desarrollo de Servicios Web I (1915)
16 páginas
Evolucion de La WEB
Aún no hay calificaciones
Evolucion de La WEB
6 páginas
Mapa Conceptual Ingeniería Web
Aún no hay calificaciones
Mapa Conceptual Ingeniería Web
1 página
Modulo 3 Cómo Se Maqueta Una Página Web
Aún no hay calificaciones
Modulo 3 Cómo Se Maqueta Una Página Web
35 páginas
Aplicaciones SPA
Aún no hay calificaciones
Aplicaciones SPA
6 páginas
Funcionamiento de Los Navegadores
Aún no hay calificaciones
Funcionamiento de Los Navegadores
3 páginas
Ejercicios Extra HTML PDF
Aún no hay calificaciones
Ejercicios Extra HTML PDF
12 páginas
Guía de Estudio No. 1. HTML - Undécimo 11
Aún no hay calificaciones
Guía de Estudio No. 1. HTML - Undécimo 11
3 páginas
CV JR
Aún no hay calificaciones
CV JR
1 página
Desarrollo en Javascript Del Lado Del Cliente
Aún no hay calificaciones
Desarrollo en Javascript Del Lado Del Cliente
85 páginas
Lista de Etiqueta en HTML
Aún no hay calificaciones
Lista de Etiqueta en HTML
6 páginas
Unidad 3
Aún no hay calificaciones
Unidad 3
74 páginas
Documento Laravel
Aún no hay calificaciones
Documento Laravel
6 páginas
Desarrollo Web 1 - Aprende Programando
100% (1)
Desarrollo Web 1 - Aprende Programando
452 páginas
Curso de Diseño Web Resumen
Aún no hay calificaciones
Curso de Diseño Web Resumen
30 páginas
JOSE IGNACIO RAMALLO QUEVEDO - CV
Aún no hay calificaciones
JOSE IGNACIO RAMALLO QUEVEDO - CV
2 páginas
Programacion Gestion y Administracion Web
Aún no hay calificaciones
Programacion Gestion y Administracion Web
7 páginas
Desarrrollo Paginas Web Evaluacion 2 P
Aún no hay calificaciones
Desarrrollo Paginas Web Evaluacion 2 P
6 páginas
PDF. Desarrollo Web en Entorno Cliente. Tema 3
Aún no hay calificaciones
PDF. Desarrollo Web en Entorno Cliente. Tema 3
9 páginas
Tarea Formularios Boot Strap
Aún no hay calificaciones
Tarea Formularios Boot Strap
3 páginas
CSS Posicionamiento y Visualización
Aún no hay calificaciones
CSS Posicionamiento y Visualización
42 páginas
Webrtc2013 Video Chat Ubuntu Phpapp02
Aún no hay calificaciones
Webrtc2013 Video Chat Ubuntu Phpapp02
8 páginas
Identificación Del Lenguaje JavaScript
Aún no hay calificaciones
Identificación Del Lenguaje JavaScript
27 páginas
HTML 5
Aún no hay calificaciones
HTML 5
156 páginas
50 Ejemplos de Etiquetas en HTML
Aún no hay calificaciones
50 Ejemplos de Etiquetas en HTML
4 páginas