Jquery Framework Javascript

Dogram Code
https://dogramcode.com/programacion
jQuery
El framework JavaScript para sitios dinámicos e interactivos (3ª edición)
Este libro se dirige a expertos o posibles expertos en la creación de sitios Web. Conocer, incluso controlar JavaScript,
las hojas de estilo CSS, del DOM y de AJAX, son requisitos previos indispensables para entender y poner en práctica
este libro.
En él, el autor ha dado prioridad a un enfoque estructurado y progresivo. Cada tema de jQuery se ilustra con
ejemplo, antes de pasar a practicar sobre aplicaciones más puntuales.
Esta nueva edición del libro coincide con una evolución importante del framework jQuery. La versión jQuery 3.1 se
caracteriza por un tamaño reducido del API para acelerar la carga; desaparecen numerosos métodos y se modifican
funciones. Los lectores que quieran iniciarse en jQuery empezarán con una librería remodelada cuyos principios
seguirán siendo los mismos durante mucho tiempo. Para los desarrolladores que utilicen una versión más antigua de
jQuery y que deseen migrar a esta nueva versión, el autor avisa a lo largo del libro de los problemas que se pueden
encontrar en esta migración.
Después de una presentación del framework, el autor dedica un capítulo a los selectores, que no solo muestran la
diversidad de jQuery para acceder de manera sencilla a cualquier elemento de la página, sino que también son un
concepto fundamental en el aprendizaje de jQuery. En los capítulos siguientes, el lector descubrirá los elementos
interactivos de jQuery; en primer lugar, cómo manipular los atributos (añadir, modificar o eliminar sobre la marcha) y
después la aplicación de hojas de estilo CSS. Le siguen los eventos clásicos de JavaScript, pero sobre todo los que
aporta jQuery. Después se presentan los efectos visuales, tan numerosos como originales, el estudio de DOM y de
AJAX remodelados por jQuery. El capítulo final revisa alguno de los numerosos plugins desarrollados por la
comunidad jQuery, que permiten añadir, en pocas líneas de código, efectos cuanto menos espectaculares.
Cuando termine de leer el libro, el lector podrá desarrollar aplicaciones web más interactivas, ricas e innovadoras
todo ello con una facilidad de escritura de JavaScript insospechada.
Los elementos adicionales se pueden descargar en esta página. d e s c a r g a do,en: e y b,o oks. c o m
Los capítulos del libro:

Prefacio – Primeros pasos con jQuery – Los selectores en jQuery – Trabajar con los atributos y las propiedades –
Trabajar con las hojas de estilo CSS – Los eventos – Los efectos – Recorrer el DOM – Trabajar con el DOM – Filtrar el
DOM – AJAX en jQuery – Algunas utilidades – Los formularios – Los plug ins jQuery
Christophe AUBRY Luc VAN LANCKER

Responsable pedagógico en un centro de formation y formador sobre las tecnologías Web y las Artes Gráficas durante
más de quince años, Christophe Aubry es hoy directivo de la sociedad netPlume especializada en la redacción
pedagógica y creación de sitio en internet. Autor de numerosos libros y vídeos de Ediciones ENI (HTML/CSS, RWD,
WordPress, Drupal, Joomla… siempre está al corriente de las novedades en relación a la concepción de sitios Web
gracias a su atenta mirando del entorno tecnológico.
Desde los comienzos de Internet, Luc Van Lancker, entusiasmado por la idea de la comunicación universal que
vehiculaba este concepto, se dedicó completamente a este entorno. Es un formador apasionado, actualizado
constantemente en las nuevas tecnologías relacionadas con el entorno Web y gran pedagogo. Luc Van Lancker es
autor de libros de Ediciones ENI sobre HTML 4 y 5, XHTML, AJAX… en diferentes colecciones.
© Éditions ENI – Todos los derechos reservados – Copia personal de jhossua jhossua - 1-
Introducción
JavaScript se consideró durante mucho tiempo como un elemento accesorio en la creación de sitios web. Sin embargo,
desde la aparición de AJAX y la Web 2.0, la importancia de JavaScript en las aplicaciones web ha crecido
exponencialmente. La mejor muestra de esta importancia es la integración de los motores JavaScript en los
navegadores actuales y la aparición de las API JavaScript en HTML5.
Las evoluciones de JavaScript, que han pasado de la versión 1.1 a la 1.8, han hecho de JavaScript un lenguaje de
programación cada vez más potente y, al mismo tiempo, más complejo. Han aparecido frameworks de JavaScript para
facilitar la integración en las aplicaciones web y el aumento de la productividad del desarrollo.
Gracias al enfoque innovador de su joven inventor, John Resig, jQuery replantea completamente el valor y la forma de
escribir JavaScript. De hecho, era obligatorio tener en cuenta las evoluciones del DOM y de las hojas de estilo CSS,
que aparecieron después de JavaScript. También era importante volver a una sintaxis más intuitiva de JavaScript.
Muy rápidamente, un gran número de informáticos y sitios Web como Google y Microsoft han adoptado jQuery. Ahora,
esto se cumple incluso en la suite de herramientas de desarrollo de Visual Studio de Microsoft.
Muy respaldado por una comunidad dinámica, el crecimiento de jQuery es constante y rápido. De hecho, las diferentes
versiones se suceden rápidamente, lo que hace crecer el impacto de jQuery con relación a sus competidores. Por
tanto, podemos afirmar que jQuery se ha convertido en la referencia absoluta en materia de frameworks JavaScript.
En este contexto, parece evidente que es imprescindible un conocimiento profundo de HTML (o XHTML) y de las hojas
de estilo CSS. También es importante tener buenas nociones de JavaScript. jQuery se dirige a un público que conoce
estas diferentes técnicas.
En este libro vamos a examinar los diferentes temas que trata jQuery. El autor ha aplicado un enfoque estructurado y
progresivo. Cada punto de jQuery se ilustra con un ejemplo, antes de pasar a las aplicaciones más importantes.
Llamamos la atención del lector sobre el capítulo dedicado a los selectores (capítulo Los selectores en jQuery). No
solo ilustra la diversidad de jQuery para trabajar de manera sencilla con cualquier elemento de una página web, sino
que es un elemento esencial en el aprendizaje de jQuery. Después se tratan los aspectos más interactivos, como los
eventos, el uso de las hojas de estilo y del DOM, los efectos visuales, AJAX para jQuery y los plugins.
Esta edición coincide con la aparición de jQuery 3. Esta nueva versión consiste mayoritariamente en una API
"limpiada" para ser más ligera y más rápida en la carga. Algunos métodos se han declarado obsoletos y no deberían
utilizarse en futuros desarrollos. Otros métodos ven su funcionalidad más definida.
Aquellos que se quieran iniciar en jQuery empezarán con una librería remodelada cuyos principios seguirán siendo los
mismos durante mucho tiempo. No olvidamos a los desarrolladores que utilicen una versión más antigua de jQuery y
que deseen migrar a esta nueva versión, avisando de los problemas que se podrían encontrar en esta migración.
Cuando termine su aprendizaje sus aplicaciones web serán, sin ninguna duda, más interactivas, ricas e innovadoras,
y todo ello con una facilidad y concisión en la escritura de JavaScript insospechadas.
La descarga de archivos
Puede descargar todos los ejemplos estudiados en este libro. Se llama a cada archivo HTML de descarga en relación
al capítulo y título en el que se encuentra. Por ejemplo, para los ejemplos del capítulo 8, la carpeta de descarga se
llama Capitulo 08. Para el título 8.5, el archivo de descarga es C088.5.html. En cada carpeta encontrará el archivo
JavaScript jquery.js, así como las imágenes necesarias.
El regreso de JavaScript
Las aplicaciones web actuales se sitúan en un entorno dinámico. Nunca antes los sitios Web habían sido tan ricos en
términos de presentación visual y otras funcionalidades, basadas en la gestión de la información.
Desde el comienzo de la Web, JavaScript ha sido un compañero privilegiado en el diseño de páginas HTML gracias a la
interactividad que permitía añadir a estas páginas. Pero su presencia e influencia permanecieron mucho tiempo
limitadas, debido sobre todo a las dificultades para construir scripts verdaderamente compatibles con los diferentes
navegadores de la época.
La aparición del DOM (Document Object Model), que permite acceder o actualizar el contenido, la estructura y el estilo
de los documentos HTML, fue el primer factor en la renovación de JavaScript. Más allá del DOM, la recomendación del
W3C fue adoptada por todos los navegadores, lo que permitió reducir los problemas de interoperabilidad de los
scripts.
Después llegó AJAX (Asynchronous JavaScript and XML) y las consultas XMLHttpRequest asociadas, que permitieron el
nacimiento del JavaScript asíncrono, ofreciendo la posibilidad de modificar una parte de las páginas web sin tener que
volver a cargarlas completamente. La puerta quedaba abierta a aplicaciones JavaScript mucho más ricas, que
respondían mejor a aspectos relativos a la interactividad de las aplicaciones web. Aquí también ganó la
compatibilidad.
El concepto de la Web 2.0, con sus objetivos de mayor usabilidad y ergonomía, ha fortalecido, a su vez, la
interactividad de las páginas y la demanda de aplicaciones ampliadas. Y así es como JavaScript se convierte en un
elemento imprescindible en el desarrollo de aplicaciones web.
Seguramente, la mejor prueba del posicionamiento de JavaScript sea la aparición de nuevos motores JavaScript en los
navegadores más actuales. Ya sea Google Chrome con su motor JavaScript open source V8, Opera con Carakan,
Safari con JavaScriptCore o Firefox con IonMonkey, todos buscan mejorar (y algunas veces de manera importante) el
tratamiento de JavaScript. Internet Explorer, mucho tiempo rezagado, también ha adoptado un nuevo motor
JavaScript llamado Chakra.
Dogram Code
Accede a Gratis a la Biblioteca Online +300 Libros en PDF

https://dogramcode.com/biblioteca
Únete al canal de Telegram
https://t.me/bibliotecagratis_dogramcode
Únete al Grupo de Facebook
https://www.facebook.com/groups/librosyrecursosdeprogramacion
Presentación de jQuery
jQuery es un framework JavaScript libre y Open Source, del lado cliente, que se centra en la interacción entre el DOM,
JavaScript, AJAX y HTML. El objetivo de esta librería JavaScript es simplificar los comandos comunes de JavaScript. De
hecho, el lema de jQuery es « Escribir menos para hacer más » Write less, do more
jQuery, al menos en su origen, es obra de una sola persona: John Resig. Este joven prodigio de JavaScript desarrolló
la primera versión de jQuery en enero de 2006. En aquel momento tenía solo 20 años. Resig continúa siendo el motor
de jQuery, pero ahora le ayuda una comunidad de apasionados.
Las especificaciones de jQuery son numerosas, pero lo principal es asegurar la flexibilidad que aporta para acceder a
todos los elementos del documento HTML a través de la gran cantidad de selectores que existen (consulte el capítulo
Los selectores en jQuery). Esta característica se utilizó para dar nombre a este framework: j para JavaScript y Query
para buscar o acceder a los elementos.
También podemos observar que esta librería jQuery está en constante evolución. Las actualizaciones y las nuevas
versiones se suceden a un ritmo regular:
l Agosto de 2006: versión estable de jQuery 1.0.
l Enero de 2007: jQuery 1.1.
l Mayo de 2011: jQuery 1.6.
l Marzo de 2012: jQuery 1.7.
l Noviembre de 2012: jQuery 1.8.
l Febrero de 2013: jQuery 1.9.
l Junio de 2013: jQuery 1.10 y jQuery 2.0.
l Junio de 2016: jQuery 3.0.
l Julio de 2016: jQuery 3.1.
Las grandes firmas de la Web y de la informática reconocen la calidad de jQuery. Por ejemplo, podemos mencionar,
entre otros, a Google, Mozilla, Dell, IBM, WordPress, Amazon y Twitter. Microsoft lo ha incorporado en su última
versión de Visual Studio. Su crecimiento es rápido y supone una seria competencia para otros frameworks como
Prototype, Dojo Toolkit y Scriptaculous, por citar algunos.
Los puntos fuertes de jQuery
El framework jQuery es cada vez más aceptado por los desarrolladores, ya que las aportaciones a este entorno son
numerosas.
El enfoque de jQuery no consiste solo en una codificación más intuitiva y concisa de los scripts, sino que su filosofía
permite concentrarse en el conjunto de elementos que gestiona el DOM. El JavaScript tradicional, en su evolución
histórica, se ha tenido que acoplar al Document Object Model. Con jQuery, John Resig ha reconsiderado de alguna
forma el JavaScript manteniéndolo como un verdadero lenguaje de programación, basado en el DOM. Es esto lo que
cambia totalmente la manera de aprender y escribir JavaScript.
jQuery permite acceder fácilmente a todos los elementos del DOM. Los métodos getElementById getElementsByName y
getElementsByTagName de JavaScript muestran pronto sus límites, especialmente cuando el diseñador quiere acceder a
los atributos y otras propiedades de estilo. jQuery da acceso de manera muy sencilla y sobre todo intuitiva a todos
los elementos del documento. El siguiente capítulo, dedicado a los selectores, ilustrará la diversidad que aporta
jQuery en este aspecto.
El enfoque de jQuery es completo. Los métodos y funciones de jQuery no se limitan a algunas animaciones de tipo
estético. Con pocas líneas de código, jQuery puede modificar texto, insertar imágenes, ordenar tablas o reorganizar
completamente la estructura del documento HTML. Este framework aporta una nueva visión de JavaScript y, tras un
corto aprendizaje, simplifica mucho el diseño y la escritura de scripts. Durante todo el libro se remarcará el código tan
conciso que se genera.
El código jQuery es compatible con los diferentes navegadores. La desviación de los navegadores, pequeña o más
pronunciada, en relación con los estándares del DOM y de las hojas de estilo es una lamentable realidad en el
desarrollo de aplicaciones web evolucionadas. Gracias a la interfaz de software que añade jQuery, el código de las
aplicaciones es compatible con los principales navegadores del mercado. Hay que rebuscar por las profundidades de
los foros especializados para encontrar algunos conflictos, relacionados habitualmente con detalles poco utilizados.
Esta compatibilidad se centra, en particular, en los elementos de las hojas de estilo CSS3 que, de momento, los
navegadores solo soportan de manera muy fragmentada. Como ejemplo, podemos mencionar la opacidad de los
elementos. Los métodos jQuery fadeIn() fadeOut() y fadeTo() permiten modificar esta opacidad de manera
compatible con todos los navegadores.
jQuery se sustenta gracias a una comunidad dinámica de desarrolladores. Esta comunidad, basada en los principios
históricos de pasión y compartición de Internet, proporciona una gran variedad de plug ins, es decir, extensiones de
jQuery dedicadas a tareas concretas. Estos plug ins, a menudo maravillas de programación, están disponibles
libremente en la Web y los diseñadores de los sitios web los tienen en cuenta. Un carrusel de imágenes o una tabla
ordenable implementada en pocos minutos y pocas líneas de código simplifica mucho el trabajo de los
desarrolladores.
Las diferentes versiones de jQuery
La evolución entre las versiones 1.10 y 2.0
Las dos versiones marcan una gran evolución en las funcionalidades de jQuery. De hecho, la comunidad jQuery ha
señalado que la API ocupaba un tamaño en KB cada vez más importante y que era momento de iniciar una ”dieta”
Este exceso de peso (relativo) ralentiza la carga de la página, especialmente, en la llamada de jQuery por CDN (que
verá más adelante en este capítulo).
Esta reducción de peso pasa por la eliminación de una serie de métodos como live() die() load() unload() size
() browser(), etc. así como por modificaciones más sutiles en otros métodos como ajaxSend() por citar alguno.
Si bien estos cambios no deberían afectar a los nuevos usuarios, existe el riesgo de ocasionar algún problema a los
desarrolladores que utilicen versiones anteriores de jQuery que quieran migrar a estas nuevas versiones. jQuery
ofrece el plug in Migrate para simplificar la transición desde versiones anteriores. Este plug in en su versión
comprimida (compressed) restaura las funcionalidades obsoletas de manera que el código antiguo sigue funcionando
correctamente. Se genera una versión descomprimida (uncompressed) cuando tiene mensajes en la consola para
identificar los problemas vinculados a esta migración.
jQuery 2.0
Esta versión es la más compacta con 81,6 KB. Para su información, el peso de la versión 1.7 era de 92,4 KB, un 12%
más. Pero esta versión 2.0 de jQuery no tiene en cuenta Internet Explorer 6, 7 y 8. Esto se justifica por la baja
utilización de las hojas de estilo CSS modernas en estas versiones del navegador.
Esta situación es delicada para los desarrolladores. Si su aplicación o sitio web tiene que ser compatible para todo el
mundo, se privará de en torno al 40% de los usuarios de Internet Explorer en la red. Sin embargo, en los próximos
años, la parte del mercado de estas versiones excluidas irá disminuyendo y este inconveniente será menos
importante.
jQuery 1.10
Las funcionalidades de la versión 1.10 son idénticas a las de la versión 2.0, excepto aquellas que soportan todavía
las versiones 6, 7 y 8 de Internet Explorer.
Esta mayor compatibilidad comporta un aumento de peso bastante sensible con sus 94,1 KB.
La comunidad jQuery afirma que las versiones 1.x tendrán los mismos desarrollos que las versiones 2.x. Pero según
el autor, hay que ser realista. Cuando las versiones de Internet Explorer afectadas sean más frágiles, se puede
prever que se abandonará la serie de versiones 1.x.
jQuery 3.0 y 3.1
La nueva versión 3.0 de jQuery se caracteriza por una API "limpiada" para conseguir ser más ligera y por lo tanto más
rápida en cargar. Se han declarado algunas propiedades obsoletas ( .load .unload y .error) y no se deberían
volver a utilizar en sus futuros desarrollos. Se han mejorado algunas propiedades ( width() height() show() y
hide()). La compatibilidad de jQuery con los navegadores ha sido redefinida al alza: Microsoft Internet Explorer
versión 9 y posteriores, Google Chrome, Microsoft Edge, Apple Safari, Mozilla Firefox y Opera son compatibles con las
versiones actuales y n 1 desde Junio Julio 2016. Para los dispositivos móviles, las versiones Android 4.0 y posteriores
y Apple Safari Mobile iOS 7 y posterior son compatibles.
En la siguiente URL encontrará todos los cambios y novedades de esta versión 3.0 de jQuery:
https://jquery.com/upgradeguide/3.0/#jquerycore30upgradeguide
Puede observar que la versión minimizada de jQuery 3.0 pesa 86 KB y la versión slim solo 69 KB. La versión slim no
incluye AJAX, ni los efectos o las funciones.
La versión 3.1 aporta algunas modificaciones y correcciones menores: http://blog.jquery.com/2016/07/07/jquery310

releasednomoresilenterrors
- 2- © Éditions ENI – Todos los derechos reservados – Copia personal de jhossua jhossua
Aplicación de jQuery
Por CDN
Numerosos CDN (Content Delivery Network), servidores que proporcionan datos de manera ultrarrápida, albergan la
librería jQuery. Basta simplemente con llamarla mediante la etiqueta <script>. Gracias al tamaño reducido de jQuery,
su carga es del orden de 30 milisegundos.
Los CDN son jQuery en sí mismos (a través de MaxCDN), Google, Microsoft y CDNJS.
jQuery
<script src="http://code.jquery.com/jquery número de versión.min.js"> </script>
Google
<script src="https://ajax.googleapis.com/ajax/libs/jquery/número de versión/jquery.min.js"></script>
Microsoft
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery número de versión.min.js"></script>
CDNJS
<script src=http://cdnjs.cloudflare.com/ajax/libs/jquery/número de versión/jquery.min.js></script>
Ejemplos
l <script src="http://code.jquery.com/jquery3.1.0.min.js"></script>
l <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
l <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery3.1.0.min.js"></script>
l <script src=http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js></script>
Esta llamada mediante CDN se debe colocar entre las etiquetas <head>...</head>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
...
</head>
...
Además de la rapidez de los CDN, la librería jQuery quizá ya está presente en la caché del navegador del usuario
después de su utilización en la Web, lo que acelera todavía más su carga.
En local
En primer lugar, debe descargar la librería jQuery en su máquina. La dirección más indicada para ello es la del sitio
Web jQuery en la dirección: http://jquery.com/download/
En la página de descarga podrá descargar la versión más reciente de jQuery, es decir la versión 3.2.1. Dispone de
dos archivos distintos:
l Download the compressed, production jQuery 3.2.x: es la versión comprimida de jQuery, la que debe utilizar
para la puesta en producción.
l Download the uncompressed, development jQuery 3.2.x: es la version no comprimida de jQuery, que permite
tener acceso al código de la librería. Es la versión mejor adaptada para la fase de desarrollo.
Para descargar la versión comprimida, de producción, haga clic en el enlace Download the compressed, production
jQuery 3.1.0. Se abre en el navegador la librería. Elija Guardar como, guárdelo donde desee y renombre el
archivo como jquery3.1.0.min.js. El fichero pesa 86 kb.
Para descargar la versión no comprimida, de desarrollo, haga clic en el enlace Download the uncompressed,
development jQuery 3.2.1. Haga lo mismo para guardar el archivo llamado jquery3.2.1.js, con un tamaño de
262 KB.
En el momento de escribir este libro, el archivo que se descarga se llama jquery-3.2.1.min.js . En adelante, lo
llamaremos jquery.js . Después de descargar este archivo, tendrá que ubicarlo en el mismo directorio que la página
HTML5 que utilice un script que use jQuery.
La llamada a la librería se debe colocar entre las etiquetas <head>...</head>
<!doctype html>
<html lang="es">
<head>
<script src="jquery.js"></script>
...
</head>
...
Si desea utilizar una versión más antigua de jQuery, abajo en la página de descarga ( http://jquery.com/download/), en
la zona Past Releases, haga clic en el enlace All past releases can be found on the jQuery CDN
Dispone entonces de las últimas versiones de las ramas 1, 2 y 3:
l jQuery 3.x: uncompressed, minified, slim, slim minified.
l jQuery Core 2.x: uncompressed, minified.
l jQuery Core 1.x: uncompressed, minified.
Iniciar un script jQuery
Una vez que el framework se ha configurado y está preparado para utilizarse, es preciso, antes que nada, adquirir
algunas nociones teóricas.
Todas las instrucciones o, para ser más precisos, todos los scripts jQuery, se articulan alrededor de un modelo único.
Este es:
jQuery(function(){
//contenido que se ejecuta cuando se carga el documento
});
Para ahorrar pulsaciones del teclado, se utiliza casi siempre el signo dólar ($), que funciona como un alias de jQuery.
$(function(){
//contenido externo que se ejecuta cuando se cargue el documento
});
Haciendo referencia a este modelo, todo script jQuery empieza por:
<script>
$(document).ready(function() {
// código jQuery
});
</script>
Es decir, crear un objeto jQuery ($) a partir del documento (document), cuando esté preparado (ready
La particularidad de esta función es que carga los elementos del DOM tan pronto como estén disponibles, es decir,
antes de la carga completa de la página.
Esta función de jQuery lo diferencia del JavaScript clásico. Por ejemplo, este usa el clásico window.onload = function
(), que espera a que la página y todos los elementos que contiene estén completamente cargados. Esto puede ser
muy largo, especialmente cuando hay imágenes con un tamaño importante. Es una particularidad esencial de jQuery
que se basa, recordemos, de manera nativa en los elementos del DOM.
Este modo de funcionamiento presenta muchas ventajas:
l Todos los elementos de la página están incluidos en un objeto que los selectores, los métodos y las funciones de jQuery
pueden manejar.
l El código HTML está desprovisto de cualquier mención JavaScript, como por ejemplo las notaciones <a
href="javascript:void(0);">enlace</a> . Todo el código JavaScript/jQuery se sitúa en una parte separada de la
página HTML (entre las etiquetas <head>...</head>) o en un archivo js externo, lo que respeta completamente el
principio de separación del contenido y de la presentación.
Con $(document).ready(), los elementos de la página están a disposición del desarrollador antes de la carga
completa y su visualización. Esto es muy práctico para activar los efectos del navegador de aparición o desaparición
de la página.
En la Web se encuentran scripts jQuery que comienzan con la escritura abreviada:
$(function () {
// código jQuery
});
A lo largo del libro, vamos a adoptar la instrucción $(document).ready(), más académica pero también más expresiva.
El signo $ también se utiliza en otros frameworks, como por ejemplo Prototype. El método jquery.noconflict
(consulte el capítulo Algunas utilidades Evitar los conflictos) permite evitar los conflictos en la llamada del alias $ con
otra librería que también use esta nomenclatura para alguna de sus funciones.
La primera aplicación jQuery
Para entrar en materia, vamos a construir un menú de navegación vertical desplegable.
Aquí el objetivo no es entender los métodos jQuery utilizados, que se estudiarán más adelantes, sino obtener una
visión general de la implantación y de la organización general de los scripts jQuery. El objetivo de esta primera
aplicación es familiarizarse con el enfoque que sigue el autor en nuestra exploración de jQuery.
Esta es la apariencia al cargarse la página:
Esta es la apariencia al hacer clic sobre Capítulo 1
Se presenta de la siguiente manera el archivo HTML de inicio:
<!DOCTYPE html>
<html lang="es">
<head>
<meta ="utf-8">
<script>
$(document).ready(function(){
$("div.menu_punto").hide();
$("p.menu_capitulo").click(function(){
$(this).next("div.menu_punto").slideDown(300)
.siblings("div.menu_punto").slideUp("slow");
});
});
</script>
<style>
body
{ margin: 10px;
font: 0.8em Arial, Helvetica, sans-serif;}
.menu {
width: 150px;
}
.menu_capitulo {
padding: 5px;
cursor: pointer;
position: relative;
margin: 0 0 3px 0;
font-weight:bold;
border: 1px solid black;
}
.menu_punto a { display:block;
color:black;
background-color:white;
padding-left:30px;
text-decoration:none;
}
.menu_punto a:hover {
color: black;
text-decoration:underline;}
</style>
</head>
<body>
<div>
<div class="menu">
<p class="menu_capitulo">Capítulo 1</p>
<div class="menu_punto">
<a href="#">Punto 1</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
El archivo a descargar es C0107.html
Detallamos el script jQuery paso a paso.
Suponemos que la librería jquery.js se ha descargado e incorporado en el directorio que contiene el archivo HTML
anterior.
Llamamos a jQuery, poniendo entre las etiquetas <head> y </head> la siguiente etiqueta <script>
El script puede empezar.
<script>
...
});
</script>
Con esta primera instrucción jQuery se carga el árbol del DOM relativo al documento en un objeto jQuery.
Hay que realizar una primera operación, que consiste en ocultar solo los submenús, es decir, las divisiones <div>
cuya clase es menu_punto
<script>
...
});
</script>
De esta manera, jQuery ($) selecciona estas divisiones <div>, cuya clase es menu_punto ("div.menu_punto")), y las
oculta (hide()
Pasemos ahora a la parte que se encarga de desplegar el submenú cuando se pulsa uno de los capítulos.
<script>
});
});
</script>
Detallemos esta parte:
Hacer clic en uno de los párrafos <p> cuya clase es menu_capitulo (de manera codificada $("p.menu_capitulo")
genera una función que se detallará en las siguientes líneas (click(function()
A partir de este elemento (this), el script busca el elemento <div> que le sigue y que tiene la clase menu_punto (es
decir, next("div.menu_punto")). Después mostramos esta división <div> con un efecto de deslizamiento hacia abajo
slideDown(300)
Hay que cerrar las divisiones abiertas de los demás capítulos. Se pide a jQuery seleccionar los hermanos inmediatos
siblings) de cada división <div> que tenga una clase menu_punto siblings("div.menu_punto")) y cerrar estas
divisiones usando un efecto de deslizamiento hacia arriba (slideUp("slow")
Observe que se han codificado muchas acciones en una misma instrucción. Estas diferentes operaciones se unen
simplemente por un punto.
});
Para terminar esta función relativa a un clic en un párrafo.
});
Fin del ready y fin del script.
Habrá observado lo conciso que es el código jQuery. Bastan unas pocas líneas para desarrollar este script.
La documentación de jQuery
La documentación de jQuery es abundante en la Web, aunque la mayor parte está en inglés.
La referencia es la documentación de jQuery en línea, muy completa e ilustrada con ejemplos, disponible en el sitio
oficial: http://api.jquery.com/
El sitio w3schools ofrece tutoriales de gran calidad. El tutorial relativo a jQuery se puede consultar en la URL:
http://w3schools.com/jquery/
Encontrará una referencia rápida muy valiosa en la url http://oscarotero.com/jquery. Este sitio redirige a la
documentación oficial para el detalle de los diferentes métodos.
Por último citaremos http://jqapi.com que se ofrece como una alternativa a la documentación oficial.
La documentación y los tutoriales relativos a jQuery no siempre están actualizados a la última versión del framework.
En caso de duda, la documentación oficial de jQuery ( http://api.jquery.com ) es la referencia.
Herramientas de desarrollo y de depuración
Recordemos que jQuery es un framework del lado cliente. Esto significa que solo necesita un número reducido de
herramientas; un navegador y un editor de texto. Sin embargo, para los scripts AJAX (consulte el capítulo AJAX en
jQuery), hay que prever la instalación de un servidor web local, aunque abordaremos este tema cuando estudiemos
ese capítulo.
A efectos de depuración, no existe una solución milagrosa para depurar el código JavaScript. Sin embargo, los
navegadores (Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Internet Explorer y Microsoft Edge) proponen
soluciones innovadoras que permiten inspeccionar y depurar las páginas web y su entorno, es decir, HTML, las hojas
CSS, el DOM, la utilización de la red, los scripts, etc. En el caso del aprendizaje de jQuery, la herramienta Consola de
estas herramientas de desarrollo será particularmente valiosa para arreglar los errores de código de sus primeras
pruebas.
En Google Chrome se puede acceder a estas herramientas de desarrollo en el menú Herramientas Herramientas
para desarrolladores o con el atajo de teclado [Ctrl][Mayús] en Windows o [Alt][Cmd] en MAC. También se
pueden abrir haciendo clic con el botón derecho en algún elemento de la página y seleccionando la opción
Inspeccionar elemento. Hay un tutorial completo en la URL: https://developers.google.com/chromedevelopertools/
Para Mozilla Firefox existe la extensión Firebug, muy conocida entre los desarrolladores. No olvide consultar el
excelente tutorial en la URL: https://www.desarrolloweb.com/manuales/manualfirebugdebugjavascritp.html
Con Apple Safari debe habilitar las herramientas de desarrollo en las preferencias Avanzado. Seguidamente dispone
del menú Desarrollo con todas las funcionalidades deseadas.
Microsoft Internet Explorer ha renovado completamente sus herramientas de desarrollo a partir de su versión 11. Se
puede acceder a ellas desde el atajo de teclado [F12]. Si bien su estética es particularmente atractiva, su uso resulta
menos intuitivo. Se puede consultar un tutorial en http://msdn.microsoft.com/eses/library/ie/bg182636%28v=vs.85%
29.aspx
Observe que estas herramientas permiten emular navegadores, tamaños de pantalla y ubicaciones GPS.
Con Edge, Microsoft ha lanzado un navegador de última generación, técnicamente moderno, fiable y conforme a las
normas W3C. Para acceder a las herramientas de desarrollo, haga clic en el menú Más y seleccione Herramientas de
desarrollo o utilice el atajo de teclado [F12].
Introducción
Los selectores son uno de los aspectos más importantes de la librería jQuery. Utilizan una sintaxis que recuerda a la
de las hojas de estilo CSS. Permiten a los diseñadores identificar de forma rápida y sencilla cualquier elemento de la
página y aplicar métodos concretos de jQuery.
Entender correctamente qué son los selectores jQuery es un elemento clave para entender cómo usar jQuery.
Hay un sitio web que ilustra de maravilla el papel de estos selectores: www.codylindley.com/jqueryselectors/
Los selectores básicos
Estos selectores de jQuery no son más que una reformulación de los métodos getElementById
getElementsByClassName y getElementsByTagName de JavaScript tradicional.
La notación de jQuery tiene la ventaja de ser más concisa y mucho más intuitiva.
Estos selectores de base se usan muy a menudo en los scripts jQuery. Asimilarlos correctamente es imprescindible
para la buena comprensión de los múltiples ejemplos de este libro.
1. Selección por identificador
#$("#identificador")
Selecciona el elemento HTML único cuyo identificador es id="identificador"
$("#box"): selecciona el elemento cuyo id es box.
Es la notación jQuery de getElementById en JavaScript clásico.
Recordemos que este identificador debe ser único en la página. Si, por error, no es el caso, jQuery selecciona el
primer elemento con este identificador.
Ejemplo
Rodeamos con un borde el segundo párrafo, cuyo identificador es "dos".
Partiendo del siguiente archivo HTML:
<!doctype html>
<html lang="es">
<head>
<script src="jquery.js" ></script>
<script>
$(document).ready(function
() {
$("#dos").css("border","1px solid black");
});
/script>
<style>
p {
width: 200px;
padding: 3px;
}
</style>
</head>
<body>
<p>Párrafo 1</p>
<p id="dos">Párrafo 2</p>
<p>Párrafo 3</p>
</body>
</html>
El archivo a descargar es el C022.1.html
Vamos a explicar el script jQuery:
Inicialización de jQuery. El script está preparado para operar tan pronto como se cargue el DOM.
$("#dos").css("border","1px solid black");
Al elemento con identificador "dos" ($("#dos")) se aplica el método jQuery que permite modificar las
propiedades CSS, en este caso añadir un borde (css("border","1px solid black")). Este método
jQuery css() se estudiará con más detalle en el capítulo Trabajar con las hojas de estilo CSS.
});
Fin del script.
2. Selección por nombre del elemento
$("elemento")
Selecciona todos los elementos HTML con el nombre del elemento especificado.
$("div"): selecciona todas las capas <div> de la página.
Es la notación jQuery de getElementsByTagName en JavaScript clásico.
Ejemplo
Rodeamos con un borde todos los párrafos del documento HTML.
doctype html>
<html lang="es">
<head>
<script>
$("p").css("border","1px solid black");
});
</script>
<style>
p {
width: 200px;
padding: 3px;
}
div {
padding: 3px;
}
</style>
</head>
<body>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<div>División 1</div>
</body>
</html>
$("p").css("border","1px solid black");
jQuery selecciona todos los elementos de tipo párrafo <p> ($("p")) y les aplica un borde con el método css()
3. Selección por clase
$(".clase")
Selecciona todos los elementos HTML con la clase especificada.
$(".texto"): selecciona todos los elementos con el atributo class="texto"
Ejemplo
Rodeamos con un borde el párrafo que tiene la clase negrita .
doctype html>
<html lang="es">
<head>
<script>
$(".negrita").css("border","1px solid black");
});
</script>
<style>
p {
width: 200px;
padding: 3px;
}
.negrita {
font-weight: bold;
}
</style>
</head>
<body>
<p class="negrita">Párrafo 1</p>
<p>Párrafo 2</p>
<p>Párrafo 3</p>
</body>
</html>
$(".negrita").css("border","1px solid black");
jQuery selecciona el elemento con la clase negrita con ($(".negrita")). Después le aplica un borde.
Comentarios
Podríamos haber escrito: $("p.negrita").css("border","1px solid black"). De esta manera, jQuery selecciona los
elementos <p> con la clase negrita
Según los especialistas, esta notación sería más eficaz, ya que jQuery puede encontrar directamente los elementos
<p> en el DOM y después filtrar los que tengan una clase negrita
La notación que usa varias clases es intuitiva. $(".clase1.clase2") selecciona todos los elementos que tienen la
clase clase1 o clase2
El selector estrella * permite seleccionar todos los elementos HTML.
$("*").css("border","1px solid black");
jQuery permite asociar varios selectores.
$("div,span,p.nombre_clase").css("border","1px solid black");
Los selectores jerárquicos
La notación DOM con sus padres, descendientes, hijos y hermanos (siblings) está muy relacionada con la escritura de
JavaScript. La librería jQuery utiliza estas posibilidades.
1. Selección de los descendientes
$("ascendiente descendiente")
Selecciona todos los descendientes del elemento "descendiente" con respecto al elemento padre "ascendiente".
$("#box p"): selecciona todos los descendientes de <p> contenidos en el elemento ascendiente identificado por box
Los descendientes pueden ser los hijos o los nietos, a cualquier nivel.
Ejemplo
Estudiamos las capas que contienen varios elementos. Buscaremos todos los descendientes del elemento identificado por
id="box".
<html lang="es">
<head>
<script>
$("#box *").css("border", "2px dashed black");
$("br").css("border", "0");
});
</script>
<style>
span#box {
display: block;
}
}div {
width: 200px;
height: 100px;
margin: 5px;
float: left;
background: #eee;
}
p {
margin: 20px;
text-align: center;
}
div span {
padding: 20px;
}
</style>
</head>
<body>
<span id="box">
<div> </div>
<div>
<p>X <img src="jquery.png" alt=""> X</p>
</div>
<div>
<p>Párr<br><span>a</span><br>fo</p>
</div>
</span>
</body>
</html>
$("#box *").css("border", "2px dashed black");
El script jQuery selecciona todos los descendientes del elemento con identificador box ($("#box *")) y los rodea con
un borde.
Observe que se rodean con un borde no solo los hijos, es decir, las capas <div>, sino también los nietos, es decir,
los elementos <p> y los biznietos, es decir, los elementos <img> y <span>
2. Selección de los hijos
$("padre > hijo")
Selecciona todos los elementos llamados "hijo" que son hijos directos del elemento padre llamado "padre".
$("#box > p"): selecciona todos los hijos inmediatos de <p>, contenidos en el elemento padre identificado por box
Ejemplo
Volvemos al ejemplo anterior. Buscamos los hijos (y solo los hijos) del elemento identificado por id="box".
doctype html>
<html lang="es">
<head>
<script>
$("#box > *").css("border", "2px dashed black");
});
</script>
<style>
span#box {
display: block;
}
div {
width: 200px;
height: 100px;
margin: 5px;
float: left;
background: #eee;
}
p {
text-align: center;
}
</style>
</head>
<body>
<span id="box">
<div> </div>
<div>
<p>X <img src="jquery.jpg" alt=""> X</p>
</div>
<div>
<p>Párr<br><span>a</span><br>fo</p>
</div>
</span>
</body>
</html>
$("#box > *").css("border", "2px dashed black");
El script jQuery selecciona todos los hijos directos del elemento con identificador box ($("#box > *")) y los rodea
con un borde.
Observe que los nietos <p> y los biznietos <img> o <span> no se rodean con un borde.
Podríamos haber escrito:
$("#box > div").css("border", "2px dashed black");
3. Selección de los hermanos siguientes
$("predecesor ~ hermanos")
Obtiene los elementos anotados "hermanos" situados después del elemento identificado por el selector
"predecesor".
$("#prev ~ div") encuentra todas las capas <div> hermanas, después del elemento con identificador #prev
Ejemplo
Partamos de una lista no ordenada. Buscamos los elementos hermanos del primer ítem de la lista.
doctype html>
<html lang="es">
<head>
<meta charset="utf-8"> µ
<script>
$("li.uno ~ li").css("border", "1px solid black");
});
</script>
<style>
li {
width: 150px;
margin-top: 5px;
}
</style>
</head>
<body>
<ul>
<li class="uno">Item 1</li>
<li class="dos">Item 2</li>
<li class="tres">Item 3</li>
<li class="cuatro">Item 4</li>
<li class="cinco">Item 5</li>
</ul>
</body>
</html>
$("li.uno ~ li").css("border", "1px double black");
El script selecciona todos los hermanos del elemento lista <li> con la clase uno $("li.uno ~ li")). Se seleccionan
también el resto de ítems de la lista.
4. Selección del elemento siguiente
$("predecesor + siguiente")
Obtiene el elemento inmediatamente anotado "siguiente", situado después del elemento identificado por el selector
"predecesor".
$("#prev + div") encuentra la capa <div> que sigue al elemento con identificador #prev
Ejemplo:
Partamos de una lista no ordenada. Buscamos el elemento siguiente al primer ítem de la lista.
<!doctype html>
<html lang="es">
<head>
<script>
$("li.uno + li").css("border", "1px double black");
});
</script>
<style>
li {
width: 150px;
margin-top: 3px;
}
</style>
</head>
<body>
<ul>
<li class="uno">Item 1</li>
<li class="dos">Item 2</li>
<li class="tres">Item 3</li>
<li class="cuatro">Item 4</li>
<li class="cinco">Item 5</li>
</ul>
</body>
</html>
$("li.uno + li").css("border", "1px double black");
Encuentra el hermano inmediatamente siguiente, entre los hermanos del elemento de lista <li>, con la clase uno
$("li.uno + li")
Los filtros jQuery básicos
jQuery enumera todos los elementos del DOM, por lo que se convierte en una tarea sencilla filtrar determinados
elementos como el primero, el último, etc.
1. El primer elemento
$(":first")
Selecciona la primera ocurrencia de un elemento.
$("li:first"): selecciona la primera ocurrencia de lista <li> del docu mento.
El selector :first selecciona un único elemento, mientras que :first-child (consulte Los filtros hijos El primer
hijo en este capítulo) permite seleccionar varios, es decir, uno para cada padre.
Ejemplo
Cambiemos el color de fondo a la primera fila de una tabla.
doctype html>
<html lang="es">
<head>
<script>
$("tr:first").css("background", "#9cf");
});
</script>
<style>
table {
width: 210px;
border-collapse: collapse;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</body>
</html>
$("tr:first").css("background", "#9cf");
Selecciona el primer elemento <tr> y le aplica un color de fondo azul.
2. El último elemento
$(":last")
Selecciona la última ocurrencia de un elemento.
$("li:last"): selecciona la última ocurrencia de lista <li> del documento.
Ejemplo:
Cambiemos el color de fondo a la última celda de una tabla.
doctype html>
<html lang="es">
<head>
<script>
$("td:last").css("background", "#9cf");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
border: 1px solid black;}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
$("td:last").css("background", "#9cf");
$("td:last"): el script selecciona el último elemento <td> y le aplica un fondo azul.
3. Los elementos pares
$(":even")
Selecciona los elementos pares según un índice que empieza por 0.
$("tr:even"): selecciona las filas con índice JavaScript 0, 2, 4, es decir, las filas 1, 3, 5 de la pantalla.
Ejemplo
Aplicamos un efecto de listing a una tabla, configurando un color de fondo a una de cada dos filas.
doctype html>
<html lang="es">
<head>
<script>
$("tr:even").css("background", "#9cf");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
$("tr:even").css("background", "#9cf");
jQuery selecciona los elementos <tr> pares y aplica un fondo azul.
Este efecto, que necesita muchas líneas de código en JavaScript clásico, se programa en jQuery con una sola línea.
Este ejemplo muestra cómo de conciso es el código que se crea en jQuery.
4. Los elementos impares
$(":odd")
Selecciona los elementos impares según un índice que empieza por 0.
$("tr:odd"): selecciona las filas con índice JavaScript 1, 3, 5, es decir las filas 2, 4, 6... de la pantalla.
Ejemplo
Aplicamos el mismo efecto de listing a una tabla, configurando un color de fondo a una de cada dos filas, pero con las filas
<tr> impares, o sea las opuestas a las del ejemplo anterior.
doctype html>
<html lang="es">
<head>
<script>
$("tr:odd").css("background", "#9cf");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
$("tr:odd").css("background", "#9cf");
jQuery selecciona los elementos <tr> impares y aplica un color de fondo azul.
5. Un elemento concreto
$(":eq(índice)")
Selecciona el elemento concreto con el valor del índice.
Como los índices JavaScript empiezan por cero, el selector :eq(0) selecciona el primer elemento, :eq(1) el segundo
y así sucesivamente.
$("td:eq(2)"): selecciona la tercera celda de una tabla.
Ejemplo
Partamos de una lista con viñetas. Buscamos el elemento de lista <li> que aparece en segundo lugar de la pantalla.
doctype html>
<html lang="es">
<head>
<script>
$("li:eq(1)").css("background", "#9cf");
});
</script>
<style>
li {
width: 150px;
}
</style>
</head>
<body>
<ul>
<li>Item de lista 1</li>
</ul>
</body>
</html>
El segundo elemento <li> se selecciona y el script le aplica un color de fondo azul.
6. Los elementos siguientes
$(":gt(índice)")
Selecciona los elementos con un valor de índice superior (greater than) al valor proporcionado en el parámetro.
Recordemos que los índices en JavaScript empiezan por 0.
$("a:gt(1)"): selecciona todos los enlaces <a> de la página, empezando por el tercero (es decir, después del
segundo elemento).
Ejemplo
Partamos de una lista con viñetas. Vamos a seleccionar los elementos <li> de lista <ul> a partir del tercero hasta el final.
<!doctype html>
<html lang="es">
<head>
<script>
$("li:gt(1)").css("background", "#9cf");
});
</script>
<style>
li {
width: 150px;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>
$("li:gt(1)").css("background", "#9cf");
("li:gt(1)"): selecciona todos los elementos <li> de la lista que siguen al ítem 2.
7. Los elementos anteriores
$(":lt(índice)")
Selecciona los elementos con un valor de índice inferior (less than) al valor del parámetro.
Recordemos que los índices en JavaScript empiezan por 0.
$("p:lt(3)"): selecciona todos los párrafos <p> situados antes del cuarto, es decir, los tres primeros párrafos.
Ejemplo
Partamos de una lista con viñetas <ul> . Vamos a seleccionar los cuatro primeros elementos <li> de la lista.
<!doctype html>
<html lang="es">
<head>
<script>
$("li:lt(4)").css("background", "#9cf");
});
</script>
<style>
li {
width: 150px;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>
$("li:lt(4)").css("background", "#9cf");
Selecciona todos los elementos <li> de lista anteriores al ítem 5 y aplica un color de fondo azul.
8. Las etiquetas de título
$(":header")
Devuelve todos los elementos de título como <h1> <h2> <h3>, etc.
$(":header"): selecciona todos los elementos de título de la página.
Ejemplo
Vamos a seleccionar todos los elementos de título de la página.
doctype html>
<html lang="es">
<head>
<script>
$(":header").css("background", "#9cf");
});
</script>
<style>
h1, h2, h3 {
margin: 3px 0;
}
</style>
</head>
<body>
<h1>Título de nivel 1</h1>
<p>Contenido</p>
<p>Contenido</p>
<p>Contenido</p>
</body>
</html>
$(":header").css("background", "#9cf");
Selecciona todos los elementos de título de la página y aplica un color de fondo azul.
9. Exclusión de un elemento
$(":not(selector)")
Excluye de la selección todos los elementos que responden al criterio que especifica el selector.
$("div:not(#box)"): selecciona todas las capas <div> salvo las que tengan identificador box.
Ejemplo
Vamos a seleccionar todos los elementos de una lista, salvo los ítems primero y último.
doctype html>
<html lang="es">
<head>
<script>
$("li:not(:first,:last)").css("background", "#9cf");
});
</script>
<style>
li {
width: 150px;
}
</style>
</head>
<body>
<ul>
- 10 - © Éditions ENI – Todos los derechos reservados – Copia personal de jhossua jhossua
</ul>
</body>
</html>
$("li:not(:first,:last)").css("background", "#9cf");
Selecciona todos los elementos de lista <li> salvo el primero y el último y aplica un fondo azul.
Hay que prestar atención al orden y la ubicación de los paréntesis abiertos y, sobre todo, de los cerrados.
10. Los elementos según su tipo
La especificación jQuery 1.9 introdujo nuevos selectores que permiten encontrar elementos según su tipo.
Selecciona todos los elementos que son el enésimo hijo de sus padres respecto a
:nth-of-type los hermanos con el mismo nombre de etiqueta.
Selecciona todos los elementos que son el enésimo hijo de sus padres, contando
:nth-last-of-type desde la última etiqueta a la primera.
Selecciona todos los elementos que son el primero de los hermanos con el mismo
:first-of-type nombre de etiqueta.
Selecciona todos los elementos que son el último de los hermanos con el mismo
:last-of-type nombre de etiqueta.
Selecciona todos los elementos que no tienen hermanos con el mismo nombre de
:only-of-type etiqueta.
Ejemplo
Encontremos el cuarto elemento <div>.
doctype html>
<html lang="es">
<head>
<script>
$("div:nth-of-type(4)").css("background", "#9cf");
© Éditions ENI – Todos los derechos reservados – Copia personal de jhossua jhossua - 11 -
});
</script>
<style>
div {
width: 150px;
}
</style>
</head>
<body>
<div>Caja 1</div>
<div>Caja 2</div>
<div>Caja 3</div>
<div>Caja 4</div>
<div>Caja 5</div>
</body>
</html>
En este caso la numeración empieza en 1 porque la implementación de este selector proviene de la especificación
CSS.
Los filtros hijos
En este capítulo ya hemos tratado los selectores jerárquicos que permiten seleccionar los hijos. Los filtros hijos
ordenan los hijos de un elemento.
1. El primer hijo
$(":firstchild")
Selecciona todos los elementos que son el primer hijo de su padre.
$("ul:first-child"): selecciona el primer hijo es decir, el primer elemento de lista <li>, de la lista no ordenada
<ul>
El selector :first-child puede seleccionar varios elementos, uno por cada padre. No hay que confundir esto
con :first , que selecciona un único elemento (consulte la sección Los filtros jQuery básicos El primer elemento,
en este capítulo).
Ejemplo
Buscamos el primer enlace dentro de un párrafo.
<!doctype html>
<html lang="es">
<head>
<script>
$("p a:first-child").css("background", "#9cf");
});
</script>
</head>
<body>
<p>
<a href="#">Enlace 1</a><br />
<a href="#">Enlace 5</a>
</p>
</body>
</html>
$("p a:first-child").css("background", "#9cf");
$("p a:first-child"): selecciona el primer enlace <a> hijo del elemento <p>
2. El último hijo
$(":lastchild")
Selecciona todos los elementos que son el último hijo de su padre.
$("ul:last-child"): selecciona el último hijo, es decir, el último elemento <li> de la lista no ordenada <ul>
El selector :last-child puede seleccionar varios elementos, uno por cada padre. No hay que confundir esto
con :last, que selecciona un único elemento (consulte la sección Los filtros jQuery básicos El último elemento, en
este capítulo).
Ejemplo
Buscamos el último enlace dentro de un párrafo.
<!doctype html>
<html lang="es">
<head>
<script>
$("p a:last-child").css("background", "#9cf");
});
</script>
</head>
<body>
<p>
<a href="#">Enlace 5</a>
</p>
</body>
</html>
$("p a:last-child").css("background", "#9cf");
$("p a:last-child"): selecciona el último enlace <a> hijo del elemento <p>
3. El enésimo hijo
$(":nthchild(índice)")
Selecciona los elementos que son el enésimo hijo de su padre. La posición la indica el parámetro índice.
A diferencia de lo que sucede con muchos índices en jQuery, el índice empieza por 1, y no por 0.
$("ul li:nth-child(2)"): selecciona el segundo elemento <li> de la lista <ul>
Volvamos a esta famosa excepción respecto al índice. La mayor parte de los índices que usa jQuery llaman a
funciones nativas de JavaScript y respetan la convención de empezar los índices por 0. El selector :nth-child
selector específico de jQuery, deriva estrictamente de las especificaciones CSS. Por lo tanto, el valor de índice 1
significa que se trata del primer elemento.
La confusión con :eq(índice), que hemos visto en la sección Los filtros jQuery básicos Un elemento concreto, en
este capítulo, cuyo índice empieza por 0, puede ser una fuente de errores difícilmente detectables en algunos
scripts jQuery.
Ejemplo
Buscamos el elemento de lista <li> que aparece en segunda posición en la pantalla. Recuerde que, para este tipo de
selectores, la numeración empieza en 1.
<!doctype html>
<html lang="es">
<head>
<script>
$("li:nth-child(2)").css("background", "#9cf");
});
</script>
<style>
li {
width: 150px;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>
$("li:nth-child(2)").css("background", "#9cf");
El script selecciona todos los elementos de lista <li> que están en segunda posición en el orden de los hijos.
Con el filtro :eq() hubiéramos usado la notación:
4. Los hijos pares e impares
Variante del selector anterior. El selector nth-child permite seleccionar los elementos pares e impares.
$(":nthchild(even u odd)")
Selecciona los enésimos elementos que son hijos pares (even) o impares ( ) de su padre.
Como con :nth-child, que es una variante, el índice empieza en 1.
$("table tr:nth-child(odd)"): selecciona las filas impares <tr> de la tabla.
También aquí puede haber confusión con :even y :odd (consulte las secciones Los filtros jQuery básicos Los
elementos pares y Los filtros jQuery básicos Los elementos impares, en este capítulo) ya que su índice empieza
por 0.
<!doctype html>
<html lang="es">
<head>
<script>
$("table tr:nth-child(odd)").css("background", "#9cf");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
</table>
</body>
</html>
$("table tr:nth-child(odd)").css("background", "#9cf");});
El script selecciona todos los elementos de fila <tr> que están en el rango impar, en el orden de los hijos del
elemento <table>
5. Los hijos únicos
$(":onlychild")
Selecciona todos los elementos que son hijos únicos de su padre. Si el padre tiene varios hijos, no se selecciona
nada.
$("div button:only-child"): encuentra los botones (elemento <button>) que no tienen hermanos en todas las
cajas <div> encontradas.
Ejemplo
Encontremos el enlace que es hijo único de un párrafo <p> .
<!doctype html>
<html lang="es">
<head>
<script>
$("p a:only-child").css("background", "#9cf");
});
</script>
<style>
p {
width: 200px;
border: 1px dotted black;
padding-left: 10px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<p><a href="#">Enlace 1</a> | <a href="#">Enlace 2</a> | <a
href="#">Enlace 3</a><br /></p>
<p><a href="#">Enlace 1</a></p>
<p><a href="#">Enlace 1</a> | <a href="#">Enlace 2</a></p>
</body>
</html>
$("p a:only-child").css("background", "#9cf");
$("p a:only-child"): jQuery revisa los distintos párrafos <p>, examina los enlaces <a> existentes y se queda con
el párrafo que solo tenga un enlace.
Los filtros de contenido
1. Un texto determinado
$(":contains(texto)")
Selecciona los elementos que contengan un determinado texto o fragmento de texto que se pasa como argumento.
Observe que el argumento texto distingue entre mayúsculas y minúsculas (case sensitive
$("div:contains(Eni)"): selecciona las capas que contienen el texto "Eni"
Ejemplo:
Resaltamos los párrafos que contienen el fragmento de texto "Que" .
<!doctype html>
<html lang="es">
<head>
<script>
$("p:contains(Que)").css("background", "#9cf");
});
</script>
<style>
p {
width: 300px;
padding: 10px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<p>Que frameworks JavaScript</p>
<p>Dinamizar los sitios web</p>
<p>La sintaxis jQuery</p>
</body>
</html>
$("p:contains(Que)").css("background", "#9cf");
$("p:contains(Que)"): resalta los párrafos que contienen las letras "Que".
2. Un contenido vacío
$(":empty")
Selecciona todos los elementos que no tienen hijos o contenido de texto.
$("div:empty"): selecciona las cajas <div> vacías.
Ejemplo
Buscamos las celdas vacías de una tabla.
<!doctype html>
<html lang="es">
<head>
<script>
$("td:empty").css("background", "#9cf");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<br>
<table>
<tr><td>1</td><td>2</td><td></td></tr>
<tr><td></td><td>5</td><td></td></tr>
<tr><td>7</td><td></td><td>9</td></tr>
</table>
</body>
</html>
$("td:empty").css("background", "#9cf");});
El script encuentra las celdas de tabla <td> vacías y aplica un fondo azul.
3. Ser padre
$(":parent")
Selecciona los elementos que son padre, es decir, que tienen elementos hijos, incluidos los nodos de texto.
$("div:parent"): selecciona las capas que tiene elementos hijos.
Este selector es, de alguna manera, el selector inverso del anterior.
Ejemplo
Volvamos a nuestra tabla y busquemos las celdas no vacías.
<!doctype html>
<html lang="es">
<head>
<script>
$("td:parent").css("background", "#9cf");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<br>
<table>
<tr><td>1</td><td>2</td><td></td></tr>
<tr><td></td><td>5</td><td></td></tr>
<tr><td>7</td><td></td><td>9</td></tr>
</table>
</body>
</html>
$("td:parent").css("background", "#9cf");});
El script encuentra las celdas de tabla <td> que tienen un contenido y que, por tanto, son padres y les aplica un
fondo azul.
4. Un selector concreto
$(":has(selector)")
Selecciona los elementos que contienen el selector que se pasa como argumento.
$("div:has(p)"): selecciona las cajas <div> que contienen uno o varios párrafos <p>
Ejemplo:
Buscamos el párrafo que contiene un enlace.
<!doctype html>
<html lang="es">
<head>
<script>
$("p:has(a)").css("background", "#9cf");
});
</script>
<style>
p {
width: 200px;
padding: 10px;
}
</style>
</head>
<body>
<p>Párrafo 1</p>
<p>Párrafo 2 con un <a href="#">enlace</a> <code><a></code></p>
<p>Párrafo 3</p>
</body>
</html>
$("p:has(a)").css("background", "#9cf");
$("p:has(a)"): encuentra el párrafo <p> que tiene un enlace <a>
Los filtros de visibilidad
1. Elemento visible
$(":visible")
Selecciona los elementos que son visibles.
$("p:visible"): selecciona los párrafos <p> visibles.
Para este filtro de jQuery, un elemento se considera como visible si ocupa espacio en el documento. Las propiedades
CSS de visibilidad no se tienen en cuenta.
Ejemplo
Cambiamos el color de fondo a las cajas visibles.
doctype html>
<html lang="es">
<head>
<script>
$(document).ready(function()
{
$("div:visible").css("background", "#9cf");
});
</script>
<style>
.hidden {
display:none;
}
div {
width: 40px;
height: 40px;
margin: 5px;
float: left;
}
p {
text-align: center;
}
</style>
</head>
<body>
<div> </div>
<div class="hidden"> </div>
<div> </div>
<div> </div>
<div> </div>
</body>
</html>
$("div:visible").css("background", "#9cf");
El script solo selecciona las cajas visibles y les aplica un fondo azul.
2. Elemento oculto
$(":hidden")
Selecciona los elementos ocultos.
$("p:hidden"): selecciona los párrafos <p> ocultos.
Ejemplo
Este script va a mostrar las cajas ocultas <div> cuando se haga clic en el botón.
La ventana tras la carga de la página:
La ventana después de hacer clic en el botón:
<!doctype html>
<html lang="es">
<head>
<script>
{
$("button").click(function()
{
$("div:hidden").css("background", "#9cf").show();
});
});
</script>
<style>
.hidden {
display:none;
}
div {
width: 40px;
height: 40px;
margin: 5px;
float: left;
}
</style>
</head>
<body>
<p><button>Mostrar los <div> ocultos</button></p>
<div class="box"> </div>
<div class="box"> </div>
</body>
</html>
Vamos a explicar brevemente este script.
$("button").click(function () {
$("div:hidden").css("background", "#9cf").show();
});
Al hacer clic en el botón ($("button").click(function()), las cajas <div> ocultas (("div:hidden")) se muestran
show() (con un fondo azul (css ("background", "#9cf")
Los filtros de atributo
Los atributos son numerosos en HTML. Por ejemplo, title alt src href style, etc.
En alguna documentación disponible en la Web puede encontrar la notación [@attr] relativa a los filtros de atributo.
Esta notación ya no existe desde la versión jQuery 1.3. Basta con eliminar el signo @ de los selectores para que el
script sea compatible con las especificaciones más recientes.
1. El atributo
$("[atributo]")
Selecciona los elementos que tienen el atributo especificado.
$("div[id]"): selecciona los elementos <div> que tienen un atributo id
Ejemplo
Buscamos los elementos de lista <li> con el atributo class.
<!doctype html>
<html lang="es">
<head>
<script>
{
$("li[class]").css("border", "1px solid black");
});
</script>
<style>
li {
width: 150px;
margin-top: 10px;
}
.cursiva {
font-style: italic;
}
</style>
</head>
<body>
<ul>
<li class="cursiva">Item de lista 1</li>
</ul>
</body>
</html>
$("li[class]").css("border", "1px solid black");
El script selecciona entre los elementos de lista <li> aquellos que tienen un atributo de clase y les aplica un borde.
2. El atributo con un determinado valor
$("[atributo=valor]")
Selecciona los elementos que tienen un atributo con un valor concreto. Es sensible a mayúsculas y minúsculas (case
sensitive
$("input[name=’newsletter’]") selecciona el elemento de formulario <input> con un atributo name="newsletter"
Ejemplo
Resaltamos los elementos de lista con el atributo de clase class="negrita" .
<!doctype html>
<html lang="es">
<head>
<script>
{
$("li[class=’negrita’]").css("background", "#9cf");
});
</script>
<style>
li {
width: 150px;
margin-top: 10px;
}
.cursiva {
font-style: italic;
}
.negrita {
font-weight: bolder;
}
</style>
</head>
<body>
<ul>
<li class="cursiva">Ítem de lista 1</li>
<li class="negrita">Ítem de lista 3</li>
<li class="negrita">Ítem de lista 5</li>
</ul>
</body>
</html>
$("li[class=’negrita’]").css("background", "#9cf");
El script selecciona entre los elementos de lista <li> aquellos que tienen un atributo de clase class="negrita"
y aplica un fondo azul.
3. El atributo que no tiene un valor determinado
$("[atributo!=valor]")
Selecciona los elementos que no tienen el atributo especificado y aquellos que tienen el atributo especificado pero
no con el valor indicado. El valor distingue entre mayúsculas y minúsculas (case sensitive
$("input[name!=’newsletter’]") selecciona los elementos de formulario <input> que no tienen el atributo name y
aquellos que lo tienen pero con un valor diferente a newsletter
Ejemplo
Buscamos los enlaces que no tienen el atributo title="enlace interno".
<!doctype html>
<html lang="es">
<head>
<script>
{
$("a[title!=’enlace interno’]").css("background", "#9cf");
});
</script>
<style>
a {
color: black;
}
</style>
</head>
<body>
<p><a href="#" title="enlace interno">Enlace 1</a></p>
<p><a href="#" title="enlace externo">Enlace 3</a></p>
<p><a href="#" title="enlace externo">Enlace 5</a></p>
</body>
</html>
$("a[title!=’enlace interno’]").css("background", "#9cf");
Entre los enlaces <a>, nos quedamos con los que no tienen el atributo title="enlace interno" y les aplicamos un
fondo azul.
4. El atributo cuyo valor empieza por
$("[atributoˆ =valor]")
Selecciona los elementos que tienen el atributo especificado y cuyo valor empieza por los caracteres que se indican.
Se distingue entre mayúsculas y minúsculas (case sensitive
$("input[nameˆ=’news’]") selecciona los elementos de formulario <input> con un atributo name cuyo valor empieza
por los caracteres "news".
Ejemplo
Entre los enlaces disponibles, nos quedamos con aquellos cuyo atributo title empieza por la letra X.
<!doctype html>
<html lang="es">
<head>
<script>
{
$("a[titleˆ=’X’]").css("background", "#9cf");
});
</script>
</head>
<body>
<p><a href="#" title="Html">Html</a> y <a href="#"
title="Xhtml">Xhtml</a></p>
<p><a href="#" title="Dhtml">Dhtml</a> y <a href="#"
title="Xml">Xml</a></p>
<p><a href="#" title="Xslt">Xslt</a> y <a href="#"
title="Xpath">Xpath</a></p>
<p><a href="#" title="Xforms">Xforms</a> y <a href="#"
title="CSS">CSS</a></p>
<p><a href="#" title="Wml">Wml</a> y
<a href="#" title="Rds">Rds</a></p>
</body>
</html>
$("a[titleˆ=’X’]").css("background", "#9cf");
Entre los enlaces <a>, el script selecciona aquellos cuyo atributo title empieza por la letra X y aplica un fondo
azul.
5. El atributo cuyo valor termina por
$("[atributo$=valor]")
Selecciona los elementos que tienen el atributo especificado y cuyo valor termina por los caracteres que se indican.
Se distingue entre mayúsculas y minúsculas (case sensitive
$("input[name$=’letra’]") selecciona los elementos de formulario <input> con un atributo name cuyo valor termina
por los caracteres "letra".
Ejemplo
Volviendo al ejemplo anterior, nos quedamos con los enlaces cuyo atributo title termina por las letras "ml".
<!doctype html>
<html lang="es">
<head>
<script>
{
$("a[title$=’ml’]").css("background", "#9cf");
});
</script>
</head>
<body>
<p><a href="#" title="Html">Html</a> y <a href="#"
<p><a href="#" title="Xslt">Xslt</a> y <a href="#"
title="Xpath">Xpath</a></p>
<p><a href="#" title="Xforms">Xforms</a> y <a href="#"
title="CSS">CSS</a></p>
<p><a href="#" title="Wml">Wml</a> y <a href="#"
title="Rds">Rds</a></p>
</body>
</html>
$("a[title$=’ml’]").css("background", "#9cf");
Entre los enlaces <a>, el script selecciona aquellos cuyo atributo title termina por las letras "ml" y aplica un
fondo azul.
6. El atributo cuyo valor contiene
$("[atributo*=valor]")
Selecciona los elementos que tienen el atributo especificado y cuyo valor contiene los caracteres que se indican. Se
distingue entre mayúsculas y minúsculas (case sensitive
$("input[name*=’slet’]") selecciona los elementos de formulario <input> con un atributo name cuyo valor contiene
los caracteres "slet".
Se respeta la secuencia (u orden) de las letras.
Ejemplo
Retomando el ejemplo anterior, resaltamos los enlaces cuyo atributo title contiene las letras "tm ".
<!doctype html>
<html lang="es">
<head>
<script>
{
$("a[title*=’tm’]").css("background", "#9cf");
});
</script>
</head>
<body>
<p>
<a href="#" title="Html">Html</a> y <a href="#"
<p><a href="#" title="Xslt">Xslt</a> y
<a href="#" title="Xpath">Xpath</a></p>
<p><a href="#" title="Xforms">Xforms</a> y
<a href="#" title="CSS">CSS</a></p>
<p><a href="#" title="Wml">Wml</a> y
<a href="#" title="Rds">Rds</a></p>
</body>
</html>
$("a[title*=’tm’]").css("background", "#9cf");
Entre los enlaces <a>, el script selecciona aquellos cuyo atributo title contiene las letras "tm" y les aplica un
fondo azul.
7. Los filtros múltiples de atributo
$("[filtro de atributo 1][filtro de atributo 2][filtro de atributo 3]...")
Selecciona los elementos que responden a todos los filtros de atributos especificados.
$("input[id][name$=’man’]") selecciona las etiquetas <input> que tienen un identificador id y cuyo atributo name
termina por "man".
Ejemplo:
Nos quedamos con los enlaces cuyo atributo title empieza por "enlace ", termina por "interno" y contiene "capítulo1".
<!doctype html lang="es">

<head>
<script>
{
$("a[titleˆ=’enlace’][title$=’interno’] [title*=’capítulo1’]")
.css("background", "#9cf");
});
</script>
</head>
<body>
<p><a href="#" title="enlace capítulo1 interno">Enlace 1</a></p>
<a href="#" title="enlace capítulo2 interno">Enlace 2</a></p>
<a href="#" title="enlace externo">Enlace 5</a></p>
</body>
</html>
$("a[titleˆ=’enlace’][title$=’interno’][title*=’capítulo1’]")
Entre los enlaces <a>, nos quedamos con aquellos cuyo atributo title empieza por "enlace", termina por "interno" y
contiene "capítulo1".
Los selectores y filtros de formularios
Los formularios merecen un lugar aparte en nuestro estudio de jQuery, por lo que los selectores y los filtros relativos
a los formularios se abordarán en el capítulo Los formularios.
Los selectores y los caracteres especiales
Los símbolos que se usan en la sintaxis de jQuery son un problema cuando se utilizan en la parte literal del código.
Por este motivo, hay que indicar que estos caracteres no son símbolos jQuery. Para ello, tenemos que poner delante
de los caracteres especiales dos barras oblicuas inversas \\ (backslashes
Por ejemplo:
#foo\\:bar
#foo\\[bar\\]
#foo\\.bar
La lista completa de caracteres especiales de la sintaxis de jQuery es: # ; & , . + * ~ ’ : " ! ˆ $ [ ] ( ) = >
| /
Lo más razonable es simplemente evitar su uso.
Introducción
Después de presentar los numerosos selectores de jQuery, en este capítulo vamos a estudiar el aspecto dinámico de
JavaScript y de jQuery, el cual permite modificar los elementos.
Añadir o eliminar una clase CSS
addClass(clase)
Añade la clase CSS especificada a todos los elementos seleccionados.
$("p:last").addClass("seleccion"): añade la clase seleccion al último párrafo.
Este método devuelve un objeto jQuery.
Comentarios
Observe que este método no sustituye a una clase, sino que la añade.
Es posible añadir más de una clase al mismo tiempo. Para hacer esto, basta con especificarlas una detrás de otra,
separadas por un espacio:
addClass(clase1 clase2 clase3)
Este método addClass() se asocia normalmente con el método removeClass(), lo que permite crear un efecto de
conmutación.
removeClass(clase)
Elimina la clase especificada de todos los elementos seleccionados.
$("p:last").removeClass("seleccion"): elimina la clase seleccion del último párrafo.
Ejemplo
Al pasar el ratón por encima de un párrafo, lo resaltamos dándole un color de fondo. Este efecto se consigue añadiendo una clase
al movimiento del ratón.
La ventana sin pasar por encima de ningún párrafo.
La ventana al pasar por encima de un párrafo.
El archivo HTML completo:
<!doctype html>
<html lang="es">
<head>
<script>
{
$("div").mouseover(function()
{
$(this).addClass("colorDefondo");
});
$("div").mouseout(function()
{
$(this).removeClass("colorDefondo");
});
});
</script>
<style>
div {
width: 150px;
padding : 5px;
margin-bottom : 10px;
border : 1px solid black;
text-align: center;
}
.colorDefondo {
background-color: #9cf;
cursor :pointer;
}
</style>
</head>
<body>
<div>Importante</div>
</body>
</html>
El archivo a descargar es el C032.html
Detallemos el script.
Cuando se carga el DOM.
$("div").mouseover(function(){
$(this).addClass("colorDefondo");
});
Al pasar el ratón (mouseover) por encima de una capa <div>, el script añade (addClass()) a esta capa (this) la clase
colorDefondo
$("div").mouseout(function(){
$(this).removeClass("colorDefondo");
});
Cuando el cursor sale de la capa (mouseout), jQuery elimina (removeClass()) de esta capa (this) la clase
colorDefondo
});
Fin del script.
En lugar de pasar una cadena de caracteres (el nombre de la clase), desde la versión 1.4 de jQuery es posible añadir
una o varias clases (separadas por un espacio) a los elementos seleccionados mediante una función.
addClass(función(índice, clase actual))
Donde:
l función especifica una función que devuelve uno o varios nombres de clase que se deben añadir.
l índice (opcional) es la posición del índice del elemento seleccionado.
l clase actual (opcional) es el nombre de la clase actualmente presente.
Ejemplo:
$("p").addClass(function(1){
addedClass = "nuevaClase";
return addedClass;
});
Añade la clase nuevaClase al segundo párrafo.
También es posible utilizar una función para eliminar una clase.
removeClass(función(índice, clase actual))
Comprobar la presencia de una clase CSS
hasClass(clase)
Comprueba si la clase CSS que se pasa como argumento está presente para los elementos de destino. Devuelve true
si la clase especificada está presente para al menos uno de los elementos de destino; false en caso contrario.
$("#p1").hasClass("box"): comprueba si el elemento identificado por p1 tiene la clase box
El método devuelve un booleano (true o false
Al pasar el ratón por encima, el script jQuery debe dotar de un color de fondo y de un borde solo a los párrafos con la
clase new
La ventana tras la carga de la página:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
{
$("p").mouseover(function()
{
if ($(this).hasClass("new") )
{
$(this).addClass("colorDefondo")
};
});
});
</script>
<style>
p {
width: 150px;
cursor: pointer;
}
.colorDefondo {
}
</style>
</head>
<body>
<p>Párrafo 1</p>
<p class="new">Nuevo párrafo</p>
<p>Párrafo 2</p>
<p class="new">Nuevo párrafo</p>
</body>
</html>
La explicación del script es:
$("p").mouseover(function(){
Al cargar el DOM y cuando se pasa el ratón por encima de los párrafos.
if ($(this).hasClass("new") ) {
$(this).addClass("colorDefondo")
};
El script comprueba si (if) el elemento (this) sobre el que está el ratón tiene la clase new hasClass("new")). En caso
afirmativo, se le añade la clase colorDefondo addClass()). Observe que nada impide mezclar JavaScript clásico con
JavaScript jQuery.
});
});
Fin del script.
Cambiar entre dos clases CSS
La librería jQuery tiene varios métodos que permiten desencadenar algunas veces una acción y otras veces una
acción diferente. Este efecto de permutación se llama toggle. Lo encontraremos varias veces a lo largo de nuestra
exploración de jQuery.
Al margen de los efectos espectaculares, estos métodos ahorran muchas líneas de código.
toggleClass(clase)
Añade la clase CSS especificada si no existe, o la elimina si está presente.
$(p).toggleClass("clase1"): aplica la clase clase1 a los párrafos <p> si no existe. Si existe, la elimina.
Desde la versión 1.4 de jQuery, es posible realizar este efecto de permutación mediante una función.
toggleClass(función(índice, clase actual), [conmutador])
Donde:
l función especifica una función que devuelve el nombre de la clase que se tiene que permutar.
l clase actual (opcional) es el nombre de la clase actual.
l conmutador es un valor booleano (true o false ) que determina si la clase se tiene que añadir o eliminar.
Ejemplo
$(’div.pequeña’).toggleClass(function() {
if ($(this).parent().is(’.forma’)) {
return ’clase1’;
}
else {
return ’clase2’;
}
});
Este ejemplo va a permutar la clase clase1 para los elementos <div class="pequeña"> si su elemento padre tiene
una clase forma. En caso contrario va a cambiar a la clase clase2
Ejemplo
Tras la carga de la página:
Haciendo clic en el enlace, haremos que se muestre o se oculte una caja <div> de la página.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
{
$("a").click(function()
{
$("div").toggleClass("ocultar");
});
});
</script>
<style>
a{
color: black
}
div {
width: 255px;
padding: 3px;
}
.ocultar {
display: none;
}
</style>
</head>
<body>
<p><a href="#">Mostrar / Ocultar</a></p>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor.</div>
<p>Resto de la página...</p>
</body>
</html>
Exploremos el script paso a paso.
Cuando se carga la página o, para ser preciso, el DOM.
$("a").click(function(){
Al hacer clic con el ratón en el enlace <a>
$("div").toggleClass("ocultar");
Permuta (toggleClass()) la clase ocultar en la capa <div>
});
});
Fin del script.
Hay otras formas de conseguir este efecto en jQuery; por ejemplo, con los métodos show() y hide() (consulte el
capítulo Los efectos).
Conocer el valor de un atributo HTML
Este método jQuery corresponde a getAttribute() del JavaScript clásico.
attr(nombre del atributo)
Accede al valor del atributo HTML correspondiente.
Este método resulta muy útil para encontrar el valor de un atributo del elemento seleccionado, o del primer elemento
seleccionado si hay varios. Si el elemento HTML no tiene el atributo con este nombre, se devuelve el valor undefined
$("a").attr("title"): recupera el valor del atributo title del primer enlace <a> que se encuentra.
Ejemplo
Al hacer clic en el botón, buscamos el estilo del elemento <span>JavaScript</span> . El resultado se mostrará en una caja
<div> prevista para este efecto.
El documento HTML completo:
<!doctype html>
<html lang="es">
<head>
<script>
$("button").click(function(){
var style_css = $("span").attr("style");
$("div").text(style_css);
});
});
</script>
<style>
div {
width: 150px;
height: 18px;
}
</style>
</head>
<body>
<p><button>Mostrar el estilo CSS</button></p>
<p>jQuery es un framework <span style="font-style:italic">
JavaScript</span> libre.</p>
<p>El estilo CSS del elemento <span> es:</p>
<div></div>
</body>
</html>
Detallamos el script jQuery.
Cuando se carga el DOM y se hace clic en el botón.
var style_css = $("span").attr("style");
El script carga en la variable style_css el valor del atributo style de la etiqueta <span>
$("div").text(style_css);
Esta variable se mostrará como texto (text(style_css)) en la caja <div> prevista para este efecto.
});
});
Fin del script.
Añadir un atributo HTML y su valor
attr(atributo, valor)
Asigna un par atributo/valor a todos los elementos HTML afectados.
$("#foto").attr("alt","parque eólico"): asigna al elemento identificado por #foto el atributo alt="parque eólico"
También es posible añadir un atributo con la función
attr(nombre del atributo, función(índice, valor actual)
Donde:
l función especifica una función que devuelve el nuevo valor del atributo.
l valor actual (opcional) es el valor actual o anterior del valor del atributo.
Ejemplo 1
$(’#foto’).attr(’alt’, function(i, val) {

return val + ’Vacaciones en Francia’
});
Ejemplo 2
Tras cargar la página:
Al hacer clic en el botón, se mostrará una tabla de datos con una longitud más grande, para que sea más sencillo leerla.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
{
{
$("table").attr("width","240px");
});
});
</script>
<style>
table {
}
td {
text-align: center;
}
</style>
</head>
<body>
<p><button>Agrandar la tabla</button></p>
<table>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
El script jQuery es:
Cuando se carga el DOM y al hacer clic en el botón.
$("table").attr("width","240px");
El atributo width, con un valor de 240 px, se añade al elemento de tabla <table>
});
});
Fin del script.
Un efecto espectacular con poco código.
Añadir varios atributos HTML y sus valores
attr({propiedades})
Permite asignar un conjunto de pares atributo/valor a los elementos HTML seleccionados.
Las diferentes propiedades se separan por una coma.
$("img").attr({ src: "hat.gif", alt: "Logo jQuery!" }): asigna los atributos src y alt a las imágenes.
Ejemplo
Pasamos de una imagen a otra simplemente haciendo clic en un enlace.
Ventana al cargar:
Aspecto conseguido después de hacer clic en el enlace:
Las imágenes del ejemplo están disponibles en el espacio de descarga reservado a este libro.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
{
{
$("img").attr({ src: "panelsolar2.png",
alt: "Panel solar 2",
title: "Ecología"
});
});
});
</script>
<style>
a { color: black;}
</style>
</head>
<body>
<p><a href="#">Imagen siguiente</a></p>
<div>
<img src="panelsolar1.png" alt="Panel solar 1"/>
</div>
</body>
</html>
El script jQuery:
Cuando se carga jQuery (el DOM) y al hacer clic en el enlace.
$("img").attr({ src: "panelsolar2.png",

alt: "Panel solar 2",
title: "Ecología"
});
En primer lugar, el script añade a la etiqueta <img> el atributo src. Esto permite cargar la nueva imagen.
Adicionalmente, también se añaden los atributos alt y title
});
});
Fin del script.
Eliminar un atributo HTML
removeAttr(nombre del atributo)
Elimina un atributo de los elementos HTML afectados.
$("#div1").removeAttr("disabled"): elimina el atributo disabled del elemento identificado por div1
Ejemplo
Eliminamos el atributo de estilo de la capa para que la lectura sea más sencilla.
Al cargar:
Aspecto obtenido después de hacer clic en el enlace:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
{
{
$("div").removeAttr("style");
});
});
</script>
</head>
<body>
<p><a href="#">Sin estilo CSS</a></p>
<div style="background-color: #9cf; border: 2px solid black;
color: white; font-weight: bold;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Sed non risus. Suspendisse lectus
tortor, dignissim sit amet, adipiscing nec, ultricies sed,
dolor.</div>
</body>
</html>
El script jQuery:
Cuando se carga el DOM y se hace clic en el enlace.
$("div").removeAttr("style");
El script elimina el atributo de estilo actual style de la división.
});
});
Fin del script.
Conocer el valor del atributo value
Este punto se refiere a los formularios y su atributo value
val()
Recupera, en forma de cadena de caracteres, el contenido del atributo value del primer elemento de la selección.
$("input").val(): recupera el contenido del atributo value del primer campo del formulario de tipo <input>
Este método devuelve una cadena de caracteres.
Ejemplo
Recuperamos el valor del botón de radio que se ha marcado.
Tras la carga:
Selección del usuario y clic en el botón Mostrar la selección:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
{
{
var eleccion = $(’input:radio:checked’).val();
$("div").text(eleccion);
});
});
</script>
<style>
div {
width: 150px;
height: 16px;
border: 1px dotted black;
}
</style>
</head>
<body>
<p>Su navegador:</p>
<form action="">
<input type="radio" name="1" value="Edge" />Edge<br>
<input type="radio" name="1" value="Firefox">Firefox<br>
<input type="radio" name="1" value="Safari">Safari<br>
<input type="radio" name="1" value="Opera">Opera<br>
<input type="radio" name="1" value="Google">Google<br>
<input type="radio" name="1" value="Otro">Otro
</form>
<p> <button>Mostrar la selección</button></p>
<p>Su selección es:</p>
<div></div>
</body>
</html>
Explicaciones:
var eleccion = $(’input:radio:checked’).val();
El contenido del botón de radio seleccionado (’input:radio:checked’ se almacena en la variable eleccion
$("div").text(eleccion);
El contenido de la variable eleccion se muestra (text(eleccion)) en el elemento <div>
});
});
Fin del script.
Modificar el atributo value
Es una variante de val(), que hemos visto en la sección anterior. En este caso, jQuery permite modificar el atributo
value
val(valor)
Asigna un nuevo valor al atributo value del elemento seleccionado.
$("#input").val("Test"): añade el valor Test a una línea de texto.
Ejemplo
Aspecto al cargar:
Después de un primer envío del formulario, se modifica el texto del botón de envío.
El archivo HTML:
<!doctype html>
<html lang="es">
<head>
<script>
{
$("#enviar").click(function()
{
$("#enviar").val("Ya ha realizado un envío");
return false;
});
});
</script>
<style>
a { color: black;}
</style>
</head>
<body>
<form action="">
<p>Mail: <input type="text" id="input1" value="Valor
obligatorio"></p>
<p><input type="submit" id="enviar" value="Un solo envío
por usuario"></p>
</form>
</body>
</html>
El script jQuery:
$("#enviar").click(function(){
Cuando se carga el DOM y al hacer clic en el botón de envío.
$("#enviar").val("Ya ha realizado un envío");

return false;
Un nuevo valor ("Ya ha realizado un envío") se transmite al botón de envío. Observe que la mención anterior
también se sustituye.
});
});
Fin del script.
Conocer la propiedad de un elemento HTML
prop(propiedad)
Accede al valor de la propiedad del elemento en el DOM.
Este método recupera el valor de la propiedad del elemento HTML seleccionado o del primer elemento si hay varios. Si
el elemento no tiene ninguna propiedad que responda a la indicada en el código, se devuelve el valor undefined
$("input[type=’checkbox’]").prop("checked") recupera el valor true o false de la propiedad

checked de la casilla de verificación, si esta se ha seleccionado o no.
Al cargar la página, el navegador crea el DOM (Document Object Model) de la página a partir de las etiquetas y los
atributos HTML.
Por ejemplo, el atributo checked de una casilla de verificación en el código fuente solo se utiliza para determinar el
valor inicial de la casilla. El atributo checked no cambia con el estado de esta casilla de verificación. Por el contrario, en
el DOM, la propiedad checked cambia (true o false) según el usuario marque o desmarque esta casilla.
El método prop() permite acceder a los elementos del DOM como nodeName nodeType selectedIndex y
childNodes que no tienen equivalente en los atributos de HTML y que, por esta razón, no son accesibles a través
del método attr()
Como propiedades que se puede modificar, podemos citar:
l checked de las etiquetas <input> de tipo radio o checkbox.

l selected de la etiqueta <option>.
l disabled de las etiquetas <input>, <textarea>, <button>, <select>, <option> y <optgroup>.
l readonly de las etiquetas <input> de texto o de contraseña y <textarea>.
l multiple de la etiqueta <select>.
La diferencia entre prop() y attr() es que el método attr() coge el atributo que se ha determinado en el
código HTML, mientras que el método prop() coge una propiedad del DOM.
Ejemplo
Ilustremos en el siguiente ejemplo la diferencia entre atributo (attr()) y propiedad (prop()).
<!doctype html>
<html lang="es">
<head>
</head>
<body>
<input type="checkbox" checked="checked">
<p> </p>
<script>
$("input").change(function() {
var $input = $( this );
$("p").html(
"<b>Atributo</b> .attr(\"checked\"): <b>" +
$input.attr("checked") + "</b><br>" +
"<b>Propiedad</b> .prop(\"checked\"): <b>" +
$input.prop("checked")) + "</b>";
})
.change();
});
</script>
</body>
</html>
Observe que el atributo checked del campo de formulario <input> posee el valor checked
Al cargar la página:
El método attr("checked") devuelve el valor del atributo checked, en este caso checked, como se indica en
el código. El método prop("checked") devuelve el valor booleano que representa el estado de la casilla de
verificación, en este caso true
Si se desmarca la casilla de verificación:
Como el código HTML de la página es idéntico, el método attr("checked") devuelve siempre el valor del atributo
checked, en este caso checked. Por el contrario, el valor del método prop("checked") devuelve el valor
false que corresponde al nuevo estado de la casilla de verificación.
Modificar la propiedad de un elemento HTML
prop(propiedad, valor)
Asigna un valor a una propiedad de los elementos HTML seleccionados.
$("input[type=’checkbox’]").prop("checked", true): asigna el valor true a la propiedad checked

de la casilla de verificación.
También es posible agregar una propiedad mediante una función.
Ejemplo
Al hacer clic sobre un botón, activaremos los campos de texto que se encontraban inicialmente desactivados en el código HTML:
disabled="disabled".
Al hacer clic en el botón:
<!doctype html>
<html lang="es">
<head>
</head>
<body>
<input type="text" disabled="disabled" value="Valor 1"><br>
<button>Activar los campos</button>
<p> </p>
<script>
$("input").prop("disabled",false);
});
});
</script>
</body>
/html>
Eliminar la propiedad de un elemento HTML
removeProp(propiedad)
Elimina una propiedad de los elementos.
$("input[type=’checkbox’]").removeProp("checked"): elimina la propiedad checked de la casilla de

verificación.
La documentación de jQuery especifica que para propiedades como checked disabled o selected, una vez
eliminada la propiedad con
removeProp() no será posible volver a agregarla. Es más indicado usar el método
prop() con un valor false
Ejemplo
Haciendo clic en el segundo botón, suprimiremos una propiedad añadida inicialmente con un clic en el primer botón.
Al hacer clic en el primer botón, añadimos la propiedad:
Al hacer clic en el segundo botón, eliminamos la propiedad:
<!doctype html>
<html lang="es">
<head>
</head>
<body>
<button id="btn-anadir">Añadir la propiedad</button><br>
<button id="btn-suprimir">Suprimir la propriedad</button>
<div id="color-anadir"> </div>
<div id="color-suprimir"> </div>
<script>
$("#btn-anadir").click(function(){
var $mi_caja = $("#color-anadir");
$mi_caja.prop("color","Verde esmeralda");
$mi_caja.append("El color es
<strong>"+$mi_caja.prop("color")+"</strong>.");
});
$("#btn-suprimir").click(function(){
var $mi_caja = $("#color-suprimir");
$mi_caja.removeProp("color");
});
});
</script>
</body>
</html>
Comentario
$("#btn-anadir").click(function(){
var $mi_caja = $("#color-anadir");
$mi_caja.prop("color","Verde esmeralda");
$mi_caja.append("El color es <strong>"+$mi_caja.prop
("color")+"</strong>.");
});
Al hacer clic en el primer botón identificado con #btn-anadir
Creamos una variable $mi_caja que contiene la caja <div id="color-anadir">
Para esta variable, añadimos una propiedad llamada color con $mi_caja.prop. Esta propiedad posee el valor
Verde esmeralda
En la caja <div id="color-anadir"> mostramos este valor.
$("#btn-suprimir").click(function(){
var $mi_caja = $("#color-suprimir");
$mi_caja.removeProp("color");
});
Al hacer clic sobre el segundo botón identificado con #btn-suprimir
Para la variable $mi_caja definida anteriormente, le aplicamos como nuevo valor la caja <div id="color-
suprimir">. El contenido cambia, pero la propiedad anteriormente añadida se sigue utilizando.
Para esta variable suprimimos la propiedad color con $mi_caja.remoProp("color")
Después en la caja <div id="color-suprimir"> mostramos el valor de la variable color. El resultado es

undefined ya que no existe este valor.
Introducción
¿Es necesario resaltar la importancia de las hojas de estilo en la escritura del código de las páginas web? Con jQuery,
la modificación dinámica de las propiedades de estilo CSS se hace más fácil de implementar.
El método css() que estudiamos en los tres primeros puntos de este capítulo recuerda al método attr() del capítulo
anterior.
Acceder a una propiedad de estilo
El método css() se usa de tres maneras diferentes. La primera solo permite acceder a la propiedad de estilo CSS de
un elemento determinado.
css(nombre)
Este método permite acceder a la propiedad de estilo CSS del primer elemento encontrado.
El nombre es una cadena de caracteres con el nombre de la propiedad de estilo CSS a la que se va a acceder.
Este método devuelve una cadena de caracteres (string
$("p").css("color");
En este ejemplo, el método devuelve el valor de la propiedad CSS color del párrafo <p>
Ejemplo
Supongamos que tenemos una página con tres cajas <div> idénticas:
El documento HTML completo:
doctype html>
<html lang="es">
<head>
<script>
$("#div1").click(function () {
var color = $(this).css("background-color");
$("#resultado").html("El color de fondo es <strong>" +
color + "</strong>.");
});
var borde = $(this).css("border-color");
$("#resultado").html("El color del borde es <strong>" +
borde + "</strong>.");
});
var ancho = $(this).css("width");
$("#resultado").html("El ancho es <strong>" + ancho
+ "</strong>.");
});
});
</script>
<style>
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
background-color:#9cf;
}
p {
clear: both;
}
</style>
</head>
<body>
<div id="div1"> </div>
<p id="resultado"> </p>
</body>
</html>
Al hacer clic en las tres cajas <div> el script mostrará respectivamente, de izquierda a derecha, el color de fondo, el
color del borde y el ancho.
Detallemos el script jQuery:
Tan pronto como se carga el DOM.
var color = $(this).css("background-color");
El clic del ratón en la primera caja (id="div1") carga en la variable color la propiedad del color de fondo de este
elemento, usando css("background-color")
$("#resultado").html("El color de fondo es <strong>" + color +

"</strong>.");
});
El valor de la propiedad de estilo se muestra como HTML en el elemento <p>, identificado por resultado
var border = $(this).css("border-color");
El clic del ratón en la segunda caja (id="div2") carga en la variable borde el color del borde de este elemento, usando
css("border-color")
$("#resultado").html("El color del borde es <strong>" + borde +

"</strong>.");
});
El valor se mostrará en la página HTML.
var ancho = $(this).css("width");
El clic del ratón en la tercera caja (id="div3") carga en la variable ancho el ancho de este elemento, usando css
("width")
$("#resultado").html("El ancho es <strong>" + ancho +

"</strong>.");
});
El valor se mostrará en la página.
});
Fin del script.
Modificar las propiedades de estilo
La función css(), que admite parámetros, también permite modificar las propiedades de estilo de los elementos de la
página.
css({propiedad de estilo})
Esta función modifica las propiedades de estilo CSS de un elemento concreto usando la notación CSS clave/valor para
las propiedades de estilo a modificar.
$("p").css({ color: "red", background: "blue" });
Observe la presencia de las etiquetas habituales para las declaraciones de estilo.
Si la clave contiene un guion de unión, como por ejemplo background-color, esta se debe ubicar entre comillas
"background-color"
También se puede adoptar la notación JavaScript (CamelCase), es decir backgroundColor, en lugar de background-
color
Desde la versión 1.6 de jQuery, podemos usar valores relativos para modificar el valor de una propiedad de estilo
CSS. Esto se puede codificar con "+=" o " =", con respecto al valor actual.
$ ("#item").css("left", "+=10px")
En este ejemplo desplazamos el elemento item 10 píxeles a la izquierda.
Ejemplo
Vamos a ilustrar este método de jQuery con un ejemplo. Al pasar el ratón por encima de un párrafo, este tomará un color de
fondo y el tipo de letra se mostrará en itálica.
Al pasar por encima del primer párrafo:
El documento HTML:
doctype html>
<html lang="es">
<head>
<script>
$("p").mouseover(function () {
$(this).css({’background-color’: ’#9cf’, ’font-style’:
’italic’});
});
$("p").mouseout(function () {
$(this).css({’background-color’: ’’, ’font-style’: ’’});
});
});
</script>
<style>
p {
font: Arial sans-serif;
}
</style>
</head>
<body>
<p>Pasar el ratón por encima de este texto.</p>
<p>Ídem que para el texto anterior.</p>
</body>
</html>
El script jQuery:
Carga del DOM.
$(this).css({’background-color’: ’#9cf’, ’font-style’: ’italic’});
});
Al pasar el ratón por encima (mouseover()) del párrafo <p>, la función css() modifica su color de fondo y pone los
caracteres en itálica (css({’background-color’: ’#9cf’, ’font-style’: ’italic’})
$(this).css({’background-color’: ’’, ’font-style’: ’’});
});
Cuando el cursor sale del párrafo (mouseout()), las modificaciones se anulan.
});
Fin del script.
Las propiedades que se usan según la notación CSS también se pueden usar en notación JavaScript. El script sería:
<script>
$(this).css({backgroundColor: ’#9cf’, fontStyle: ’italic’});
});
$(this).css({backgroundColor: ’’, fontStyle: ’’});
});
});
</script>
Desde la versión 1.4 de jQuery es posible modificar una propiedad de estilo de los elementos de la selección usando
una función.
En ese caso, la sintaxis es:
css(nombre de la propiedad, función(índice, valor actual))
Donde:
l función especifica una función que devuelve el nuevo valor.
l valor actual (opcional) es el valor actual o el anterior.
Ejemplo:
$(this).css({top: function(índice, valor) {

return parseFloat(valor) * 1.2;
}
});
Asignar las propiedades de estilo
La función css() de jQuery proporciona una notación para aplicar propiedades de estilo.
css(clave,valor)
Modifica las propiedades de estilo de un elemento dado usando la notación clave/valor para las propiedades de estilo
que se van a transformar.
l clave (cadena de caracteres) corresponde al nombre de la propiedad de estilo que se va a modificar.
l valor (cadena de caracteres o número) es el nuevo valor de la propiedad. Si se especifica un número, jQuery lo
convierte automáticamente a píxeles.
$("p").css("color","red");
Ejemplo
Tomemos dos cajas superpuestas. Con un script jQuery, vamos a modificar el orden de estas capas al pasar por encima el ratón.
<!doctype html>
<html lang="es">
<head>
<script>
$("#caja1").mouseover(function () {
$(this).css(’z-index’ , ’10’);
});
$("#caja1").mouseout(function () {
$(this).css(’z-index’ , ’’);
});
});
</script>
<style>
#caja1, #caja2 {
position: absolute;
width: 80px;
height: 50px;
padding: 4px;
border: 2px solid #000;
}
#caja1 {
left: 20px;
top: 20px;
}
#caja2 {
left: 50px;
top: 65px;
background-color: #fff;
}
p {
text-align: center;
}
</style>
</head>
<body>
<div id="caja1">
<p>z-index 1</p>
</div>
<div id="caja2">
<p>z-index 2</p>
</div>
</body>
</html>
Observemos que ninguna propiedad de estilo relativa a la superposición de las capas (z-index) está presente en el
código del archivo de inicio.
Detallamos el script jQuery:
$("#caja1").mouseover(function () {
$(this).css(’z-index’ , ’10’);
});
Al pasar el ratón por encima (mouseover()), a la capa cuyo identificador es caja1 se le asigna un valor para z-index
igual a 10, lo que la pone al frente con respecto a la capa identificada por caja2
$("#caja1").mouseout(function () {
$(this).css(’z-index’ , ’’);
});
Cuando el cursor sale de la capa caja1, se restaura el valor por defecto de z-index
});
Fin del script.
El dimensionamiento
jQuery proporciona una serie de métodos relativos a la dimensión de los elementos.
height()
Devuelve la altura de un elemento, expresada en píxeles.
$("p").height();
height(valor)
Asigna una altura a los elementos especificados. Si no se especifica la unidad (como em o %), la unidad por defecto
será px
$("p").height(120);
width()
Devuelve la anchura de un elemento, expresada en píxeles.
$("p").width();
width(valor)
Asigna una anchura a los elementos especificados. Si no se especifica ninguna unidad (como em o %), la unidad por
defecto será px
$("p").width(120);
Desde la versión 1.4 de jQuery, es posible usar una función para modificar la altura y la anchura de los elementos de
una selección.
Con la versión 3 de jQuery estas propiedades saben cómo devolver valores con decimales.
En este caso, la sintaxis sería:
height(función(índice, valor actual))
width(función(índice, valor actual))
Donde:
l función especifica una función que devuelve el nuevo valor de la altura o de la anchura.
l valor actual (opcional) es el valor actual o el anterior.
Ejemplo:
$("div").height(30)
Fija la altura de las capas a 30 píxeles.
Vamos a mencionar algún método más:
l innerHeight(): devuelve la altura interior (el borde está excluído, pero el padding está incluído) del primer elemento
de la selección.
l innerWidth(): recupera la anchura interior (el borde está excluído, pero el padding está incluído) del primer elemento
de la selección.
l outerHeight(options): devuelve la altura exterior (por defecto se incluyen el borde y el padding) del primer elemento
de la selección.
l outerWidth(options): devuelve la anchura exterior (por defecto se incluyen el borde y el padding) del primer
elemento de la selección.
Estos métodos funcionan tanto para los elementos visibles como para los no visibles.
Ejemplo
Al hacer clic en una caja <div>, un script jQuery detecta la anchura y la altura, y se doblan estas dimensiones.
Aspecto después de hacer clic sobre la caja:
doctype html>
<html lang="es">
<head>
<script>
$("div").click(function () {
altura=$(this).height();
anchura=$(this).width();
$(this).height(altura*2).width(anchura*2);
});
});
</script>
<style>
div {
position: relative;
width: 75px;
height: 75px;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
El script jQuery:
$("div").click(function () {
Después de la carga y al hacer clic en la caja <div>
altura=$(this).height()
anchura=$(this).width()
La altura y la anchura del elemento seleccionado se almacenan en una variable.
$(this).height(altura*2).width(anchura*2);
La altura y la anchura del elemento se multiplican por 2.
});
});
Fin del script.
El posicionamiento
De manera paralela a los métodos de jQuery relacionados con los elementos, jQuery tiene métodos para determinar
la posición de los mismos.
position()
Devuelve el valor top y left de la posición de un elemento en relación a su elemento padre.
$("p:first").position();
Este método devuelve un objeto de tipo object{top,left}
offset()
Devuelve el valor top y left de la posición de un elemento en relación al documento.
$("p:first").offset();
Este método devuelve un objeto de tipo object{top,left}
Los métodos scrollTop(valor) y scrollLeft(valor) son más particulares, ya que permiten modificar la separación
con respecto al borde superior o al borde izquierdo de un elemento. En cierto modo, estos métodos permiten
controlar la amplitud de las barras de desplazamiento vertical y horizontal.
scrollTop(valor)
Modifica la separación (en píxeles) entre el borde superior del documento (top) y el elemento seleccionado, tomando
el valor que se pasa como argumento.
valor: número positivo que representa la nueva distancia que se quiere aplicar (en píxeles).
$("div").scrollTop(300);
scrollLeft(valor)
Modifica la separación (en píxeles) entre el borde izquierdo del documento (left) y el elemento seleccionado,
tomando el valor que se pasa en el argumento.
valor: número positivo que representa la nueva distancia que se quiere aplicar (en píxeles).
$("div").scrollLeft(300);
Ejemplo
Vamos a ilustrar esto con un ejemplo. Al hacer clic en un botón, vamos a permitir al usuario ir directamente al segundo párrafo
de un texto.
Aspecto después de hacer clic sobre el botón "Ir al párrafo 2":
Haciendo clic en el botón "Volver al aspecto inicial" volvemos al inicio del texto en la caja <div>
El documento HTML:
doctype html>
<html lang="es">
<head>
<script>
$("#go").click(function () {
});
$("#reset").click(function () {
});
});
</script>
<style>
div {
position: relative;
width: 250px;
height: 130px;
margin-top: 10px;
padding: 3px;
font-size: 0.9em;
overflow: auto;
}
p {
margin:2px;
width:225px;
text-align: justify;
}
</style>
</head>
<body>
<button id="go">Ir al párrafo 2</button>
<button id="reset">Volver al aspecto inicial</button>
<div class="demo">
<p><strong>Párrafo 1</strong> Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer id semper enim. Vestibulum
metus felis, elementum sit amet tristique non, pulvinar vitae
metus. Pellentesque interdum, felis non placerat volutpat, nisi
justo eleifend magna, at tincidunt massa velit non dolor</p>
<p><strong>Párrafo 2</strong> In sem velit, placerat vel vestibulum
vel, interdum at tortor. Suspendisse vitae metus sem, ut venenatis
eros. Sed iaculis dapibus diam, in tempor eros tincidunt in. Ut id
vestibulum risus. Integer eu mauris at odio pharetra convallis.
In sem velit, placerat vel vestibulum vel, interdum at tortor.
Suspendisse vitae metus sem, ut venenatis eros. Sed iaculis
dapibus diam, in tempor eros tincidunt in. Ut id vestibulum risus.
Integer eu mauris at odio pharetra convallis.</p>
</div>
</body>
</html>
Explicación del script jQuery:
$("#go").click(function () {
});
Al hacer clic en el botón go, se modifica la posición del texto con respecto al borde superior de la capa, para ir al
segundo párrafo.
$("#reset").click(function () {
});
El botón reset restaura la separación hacia arriba a su posición inicial, para que aparezca de nuevo el primer
párrafo.
});
Fin del script.
Aplicaciones
1. Redimensionar el tamaño de los caracteres
Vamos a permitir al usuario modificar el tamaño de los caracteres a su voluntad, para mejorar la comodidad de la
lectura.
Aspecto inicial:
<!doctype html>
<html lang="es">
<head>
<script>
$(’input’).click(function(){
var texto = $(’p’);
var tamaño = texto.css(’fontSize’);
var numero = parseFloat(tamaño, 10);
var unidad = tamaño.slice(-2);
if(this.id == ’mas’) {
numero *= 1.2;
}
else if (this.id == ’menos’){
numero /=1.2;
}
texto.css(’fontSize’, numero + unidad);
});
});
</script>
<style>
p {
font-size: 1em;
}
</style>
</head>
<body>
<input type="button" value="Más grande" id="mas">
<input type="button" value="Más pequeño" id="menos">
<p>Lorem ipsum dolor sit amet, magna adipiscing elit. Quisque at
cursus est. Phasellus id ligula massa. Quisque id lacus mauris.
Suspendisse vehicula tortor eu magna.</p>
</body>
</html>
Al hacer clic en un botón, el script jQuery va a permitir aumentar el tamaño de los caracteres. Existe un segundo
botón para disminuirlo.
Aspecto del texto con un tamaño mayor de los caracteres:
Aspecto del texto con un tamaño menor de los caracteres:
El detalle del script jQuery:
$(’input’).click(function(){
Al hacer clic en uno de los botones.
var texto = $(’p’);

var tamaño = texto.css(’fontSize’);
El tamaño de los caracteres (fontSize) del texto se almacena en una variable (tamaño
var numero = parseFloat(tamaño, 10);
La función JavaScript parseFloat() convierte esta cadena de caracteres en un número (base 10).
var unidad = tamaño.slice(-2);
Con la función slice() de jQuery obtenemos la unidad que se usa para el tamaño de letra (px o em). El valor
negativo permite empezar desde el final de la selección.
if(this.id == ’mas’) {
numero *= 1.2;
}
Si se pulsa el botón mas, el tamaño de los caracteres aumenta un 20%.
else if (this.id == ’menos’) {

numero /=1.2;
}
Si se activa el botón menos, el tamaño de los caracteres disminuye en la misma proporción.
texto.css(’fontSize’, numero + unidad);
Se asigna el nuevo valor del tamaño de letra.
});
});
Fin del script.
2. Zoom sobre una imagen con una leyenda
Imaginemos una página que presenta las imágenes en miniatura. Al pasar el ratón por encima de una imagen, esta
se mostrará en su tamaño real con una leyenda.
Las imágenes de esta aplicación están disponibles para su descarga desde la página Información.
Aspecto inicial:
Aspecto al pasar por encima de la imagen:
El archivo HTML:
<!doctype html>
<html lang="es">
<head>
<script>
this.zoom_imagen = function(){
xOffset = 10;
yOffset = 30;
$("a.zoom").hover(function(e){
this.texto = this.title;
this.title = "";
var leyenda = (this.texto != "") ? "<br>" + this.texto: "";
$("body").append("<p id=’zoom’><img src=’"+ this.href +"’
alt=’Visualización de la imagen’>"+ leyenda +"</p>");
$("#zoom")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("slow");
},
function(){
this.title = this.texto;
$("#zoom").remove();
});
$("a.zoom").mousemove(function(e){
$("#zoom")
.css("left",(e.pageX + yOffset) + "px");
});
};
zoom_imagen();
});
</script>
<style>
body {
margin: 0px;
padding: 10px;
font:80% Arial, sans-serif;
}
h2 {
clear:both;
font-size:160%;
font-weight:normal;
margin: 0px;
padding-top: 10px;
padding-bottom: 15px;
}
a {
text-decoration:none;
color:black;}
img {
}
ul,li {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
float: left;
display: inline;
margin-right: 10px;
}
#zoom {
position: absolute;
background: #333;
padding: 3px;
display: none;
color: #fff;
}
</style>
</head>
<body>
<h2>Efecto de zoom sobre las imágenes y <br>aparición
de leyendas</h2>
<ul>
<li><a href="oso1.jpg" class="zoom" title="Oso polar en
peligro"><img src="pt_oso1.jpg" alt=""></a></li>
</ul>
</body>
</html>
Comentarios
La leyenda que aparece en la imagen agrandada se toma del atributo title del enlace.
Gracias al enlace a la imagen en su dimensión inicial, la página permanece accesible a los usuarios que hubieran
desactivado JavaScript.
El funcionamiento del script jQuery:
this.zoom_imagen = function(){
xOffset = 10;
yOffset = 30;
Antes de ejecutar jQuery y el efecto que aporta, será necesario escribir la función zoom_imagen. Vamos a empezar
creando dos variables (xOffset e yOffset), que definen el desplazamiento horizontal y vertical del pop up de la
imagen con respecto al cursor. El diseñador de la página puede ajustar estos valores.
$("a.zoom").hover(function(e){
El script aplica el método hover() a los enlaces con la clase zoom. El evento que se asocia al cursor se pasa como
parámetro a la función (function(e)
this.title = "";
Al pasar el ratón por encima de la miniatura, el texto del atributo title se toma de la variable texto
var leyenda = (this.texto != "") ? "<br>" + this.texto: "";
Si el atributo title no está vacío, la leyenda de la imagen (variable leyenda) se construye a partir de su texto.
$("body").append("<p id=’zoom’><img src=’"+ this.href +"’

alt=’Visualización de la imagen’>"+ leyenda +"</p>");
El script inserta (append()) en el body un párrafo con el identificador zoom, que contiene la imagen cuya dirección se
proporciona en el enlace (img src=’"+ this.href), así como la leyenda.
$("#zoom")
.fadeIn("slow");
Este párrafo (id=’zoom’ se muestra según las propiedades de estilo top y left, añadiendo el desplazamiento que
se ha definido más arriba a la posición del cursor. Se añade un efecto de fadeIn()
},
Fin de la primera función del método hover()
function(){
$("#zoom").remove();
Cuando el cursor sale de la miniatura ($("#zoom")), el pop up de la imagen desaparece.
});
Fin de la segunda función del método hover()
$("a.zoom").mousemove(function(e){
Hay que prever que el usuario, siempre sobre la miniatura ($("a.zoom")), pueda mover el cursor del ratón
mousemove()). El evento asociado al cursor se transmite como parámetro a la función (function(e)
$("#zoom")
});
El pop up contiene la imagen que sigue a los movimientos del cursor.
};
Fin de hover()
zoom_imagen();
});
Ahora que se han presentado todas las funciones, jQuery puede aplicar la función zoom_imagen() al cargar el DOM.
3. Un tooltip con jQuery
Al pasar el ratón sobre algunas palabras, mostramos un tooltip.
El aspecto del tooltip al pasar por encima de una palabra determinada:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
this.popup = function(){
xOffset = 10;
yOffset = 20;
$("a.tooltip").hover(function(e){
this.title = "";
$("body").append("<p id=’tooltip’>"+ this.texto +"</p>");
$("#tooltip")
.fadeIn("fast");
},
function(){
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
});
};
popup();
});
</script>
<style>
body {
margin: 0;
padding-left: 10px;
padding-right: 10px;
font: 90% Arial, sans-serif;
}
a {
text-decoration: none;
border-bottom: 1px dashed black;
color: black;
}
#tooltip {
position: absolute;
background: #9cf;
padding:2px 5px;
display: none;
}
</style>
</head>
<body>
<p>jQuery es un framework <a href="#" class="tooltip"
title="Lenguaje de scripts que se usa en las páginas web
interactivas">JavaScript</a> libre que se centra en la interacción
entre HTML y JavaScript.</p>
<p>jQuery incluye el <a href="#"class="tooltip"
title="Document Object Model">DOM</a> y
<a href="#" class="tooltip" title="Asynchronous JavaScript and
XML">AJAX </a>.</p>
</body>
</html>
Observemos que el atributo title del enlace contiene el texto del tooltip.
Vamos a explicar este script, que es muy parecido a la aplicación anterior.
this.popup = function(){
xOffset = 10;
yOffset = 20;
Aplicación de la función popup, que define el desplazamiento horizontal y vertical.
$("a.tooltip").hover(function(e){
Al pasar el ratón por encima de un enlace con una clase tooltip ($("a.tooltip")), se aplica un método jQuery hover
()
this.title = "";
$("body").append("<p id=’tooltip’>"+ this.texto +"</p>");
$("#tooltip")
.fadeIn("fast");
},
Cuando el cursor se sitúa en el enlace, el contenido del atributo title del enlace se toma de la variable texto. El
script añade (append()) al cuerpo (body) del documento un párrafo cuyo identificador es tooltip, que contiene la
variable texto y lo muestra en la página con las coordenadas top y left. Esta visualización se lleva a cabo con un
efecto (fadeIn("fast")
function(){
$("#tooltip").remove();
});
Cuando el cursor sale del enlace, el tooltip se elimina (remove()
$("a.tooltip").mousemove(function(e){
$("#tooltip")
});
};
Vamos a prever el caso de que el usuario mueva ligeramente el cursor (mousemove()) cuando esté situado en el
enlace. Esto permite al script acompañar estos movimientos.
popup();
});
Ahora que están definidas todas las funciones, el script jQuery puede activar la función popup()
Introducción
Los eventos son los desencadenantes de la interactividad que aporta JavaScript. Se pueden asociar funciones y
métodos a las acciones del usuario. Con la librería jQuery, el principio sigue siendo el mismo, aunque se han
adaptado algunos administradores de eventos y se han introducido nuevos métodos.
Los administradores de eventos
La librería de jQuery pone a disposición de los desarrolladores administradores de eventos bastante similares a los
del JavaScript tradicional. De esta manera, a onmouseover de JavaScript le corresponde mouseover en jQuery. El prefijo
"on" simplemente ha desaparecido.
1. Al hacer clic con el ratón
click()
Asocia una función al evento clic de los elementos de la selección.
$("p").click();
Ejemplo
Al hacer clic en un párrafo, este se oculta con un efecto.
Al hacer clic con el ratón, se oculta el tercer párafo:
<!doctype html>
<html lang="es">
<head>
<script>
$("p").click(function () {
$(this).slideUp();
});
});
</script>
<style>
p {
cursor: pointer;
}
</style>
</head>
<body>
<p>Párrafo</p>
<p>Párrafo</p>
<p>Párrafo</p>
</body>
</html>
Veamos el script jQuery:
$("p").click(function () {
Al hacer clic en un párrafo, se ejecuta la siguiente función.
$(this).slideUp();
Desaparece el elemento pulsado (this), deslizándose hacia arriba.
});
});
Fin del script.
2. Al hacer doble clic
dblclick()
Asocia una función al evento doble clic de los elementos de la selección.
$("div").dblclick();
La Web es el reino del clic único; el doble clic está poco extendido.
Ejemplo
Al hacer doble clic en un título <h1>, <h2> o <h3>, este aparece rodeado por un borde.
Aspecto obtenido después de un doble clic en el primer título <h1>:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("h1, h2, h3").dblclick(function () {
$(this).toggleClass(’borde’);
});
});
</script>
<style>
.borde {
}
h1, h2, h3 {
cursor: pointer;
}
</style>
</head>
<body>
</body>
</html>
Echemos un vistazo al script:
$("h1, h2, h3").dblclick(function () {
Al hacer doble clic en un título de nivel 1, 2 o 3.
$(this).toggleClass(’borde’);
Se activa o se desactiva (toggleClass()) la clase borde
});
});
Fin del script.
3. El foco
focus()
Asocia una función al evento focus de los elementos especificados.
$("p").focus();
La versión jQuery 1.4 ha añadido los eventos focusin() y focusout()
focusin()
Asocia una función cuando un elemento, o cualquiera de sus elementos hijo, obtiene el foco.
$("p").focusin(function() {
$(this).find("span").css(’display’,’inline’).fadeOut(1000);
});
focusout()
Asocia una función cuando un elemento, o cualquiera de sus elementos hijo, pierde el foco.
Seguramente algunos lectores se preguntarán la diferencia entre los eventos focus y focusin o blur (consulte la
siguiente sección) y focusout
Los eventos focusin y focusout propagan el evento a los elementos hijo, mientras que focus y blur no
desencadenan esta propagación de eventos. Para obtener más detalles sobre la propagación de eventos, consulte
la sección Entrada y salida del cursor de este capítulo.
Ejemplo:
Al situar el foco en una línea de texto, añadimos "Valor obligatorio".
Aspecto inicial:
Aspecto obtenido después de hacer clic en el campo de texto, al obtener el foco:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#mail").focus(function () {
$(this).val("Valor obligatorio");
});
});
</script>
</head>
<body>
<p>Mail: <input id="mail" type="text" value=""></p>
</body>
</html>
Algunas explicaciones respecto al script:
$("#mail").focus(function () {
Al obtener el foco la línea de texto mail
$(this).val("Valor obligatorio");
Agregamos el valor (val("Valor obligatorio")
});
});
Fin del script.
4. Perder el foco
blur()
Desencadena el evento que se produce cuando el elemento pierde el foco. El efecto permite desencadenar todas
las funciones asociadas a este evento para los elementos seleccionados.
$("input").blur();
Ejemplo
Después de rellenar el campo relativo al nombre y salir de él, el fondo se colorea y se añade "OK" a la derecha.
Aspecto al cargar la página:
Aspecto después de introducir un valor en el campo Nombre y perder el foco:
<!doctype html>
<html lang="es">
<head>
<script>
$("#nombre").focus();
$("#nombre").blur(function () {
$(this).css({"background-color":"#9cf"});
$("p:first").append(" OK");
});
});
</script>
</head>
<body>
<p>Nombre: <input id="nombre" type="text" value=""></p>
<p>Haga clic en el siguiente campo de texto.</p>
<p>Mail: <input id="mail" type="text" value=""></p>
</body>
</html>
Algunos detalles relativos al script:
$("#nombre").focus();
Inicialmente, el script sitúa el foco en la línea de texto correspondiente al nombre.
$("#nombre").blur(function () {
$("p:first").append(" OK");
Al salir del campo, el fondo del campo se colorea y se añade "OK".
});
});
Fin del script.
5. La barra de desplazamiento
scroll()
Asocia una función al uso de la barra de desplazamiento de un elemento.
$(window).scroll();
Ejemplo
Aparece un texto cuando el usuario utiliza la barra de desplazamiento de un campo de texto.
Aspecto inicial:
Aspecto obtenido después de utilizar la barra de desplazamiento del campo de texto:
<!doctype html>
<html lang="es">
<head>
<script>
$("textarea").scroll(function () {
$("span").css({"display": "inline"}).fadeOut("slow");
});
});
</script>
<style>
span {
display:none;
}
</style>
</head>
<body>
<p>Utilice la barra de desplazamiento del campo de texto.</p>
<textarea cols="28" rows="5">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Sed non risus. Lectus tortor,
dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras
elementum ultrices diam. Maecenas ligula massa, varius a, semper
congue, euismod non, mi. Proin porttitor, orci nec nonummy
molestie, enim es eleifend mi, non fermentum diam nisl sit amet
erat. Duis semper.</textarea>
<p><span>¡Está utilizando la barra de desplazamiento!</span></p>
</body>
</html>
Explicaciones:
$("textarea").scroll(function () {
Cuando se usa la barra de desplazamiento del campo de texto (<textarea>
$("span").css({"display": "inline"}).fadeOut("slow");
El texto del elemento <span> se muestra con un efecto.
});
});
Fin del script.
6. El botón del ratón
mousedown()
Asocia una función a los elementos seleccionados cuando el usuario pulsa un botón del ratón.
$("p").mousedown();
mouseup()
Asocia una función a los elementos de la selección cuando el usuario suelta el botón del ratón.
$("p").mouseup();
Observe bien que el evento click se activa cuando se detecta un mousedown y se detecta un mouseup
Ejemplo
Al hacer clic en una caja <div>, detallamos los eventos mousedown, mouseup y click .
Aspecto inicial:
Aspecto obtenido cuando el usuario hace clic en el botón del ratón y mantiene dicho clic:
Aspecto obtenido cuando el usuario suelta el botón del ratón:
El documento HTML:
doctype html>
<html lang="es">
<head>
<script>
$("input").mousedown(function(){
$("#salida").append("mousedown<br>");
});
$("input").mouseup(function(){
$("#salida").append("mouseup<br>");
});
$("input").click(function(){
$("#salida").append("click<br>");
});
});
</script>
<style type="text/css">
div {
width: 200px;
height: 70px;
overflow: auto;
border: solid 1px black;
padding-left: 10px;
}
</style>
</head>
<body>
<p><input type="button" value="Haga clic aquí" /></p>
<div id="salida"></div>
</body>
</html>
Exploremos el script jQuery:
$("input").mousedown(function(){
$("#salida").append("mousedown<br>");
});
Al presionar el botón del ratón (mousedown()), el texto "mousedown" se inserta en la capa identificada por salida
$("input").mouseup(function(){
$("#salida").append("mouseup<br>");
});
Al soltar el botón del ratón (mouseup()), el texto "mouseup" se inserta en la capa.
$("input").click(function(){
$("#salida").append("click<br>");
});
Cuando se detecta el evento click, se añade el texto "click".
});
Fin del script.
7. El desplazamiento del cursor
Detectar el menor movimiento del cursor del ratón es un evento interesante, pero es necesario ser consciente del
elevado consumo de recursos de sistema que implica. De hecho, las acciones asociadas al movimiento del ratón se
desencadenan cuando el cursor se mueve un píxel. Este proceso puede disminuir el rendimiento y el uso de un sitio
web.
mousemove()
Asocia una función cuando el usuario mueve el cursor del ratón.
$("div").mousemove();
Ejemplo
Mostramos las coordenadas del cursor del ratón en cada uno de sus movimientos.
Aspecto inicial, el cursor del ratón no se encuentra en el cuadro de la caja <div>:
Aspecto obtenido cuando el cursor del ratón se encuentra encima del cuadro de la caja:
El documento HTML:
doctype html>
<html lang="es">
<head>
<script>
$("div").mousemove(function(e){
var paginaCoords = "X = " + e.pageX + ",
Y = " + e.pageY + ".";
$("#coords").text("Posición del cursor: " + paginaCoords);
});
$("div").mouseout(function(e){
$("#coords").text("");
});
});
</script>
<style>
div {
width:240px;
height:100px;
margin-left:10px;
border:1px solid black;
}
p {
margin-left:10px;
}
span {
display:block;
}
</style>
</head>
<body>
<p>Pasar el ratón por encima de la capa.</p>
</p>
<div> </div>
<p id="coords"> </p>
</body>
</html>
Detallemos el script:
$("div").mousemove(function(e){
Al mover el cursor por la capa.
var paginaCoords = "X = " + e.pageX + ", Y = " + e.pageY + ".";
Las posiciones horizontales y verticales del cursor se almacenan en la variable paginaCoords
$("#coords").text("Posición del cursor: " + paginaCoords);

});
La posición se mostrará como texto en el párrafo <p id="#coords">
$("div").mouseout(function(e){
$("#coords").text("");
});
Cuando el cursor sale de la capa (mouseout()), no se muestra nada (text("")
});
Fin del script.
8. Entrada y salida del cursor
Quienes estén habituados a JavaScript, se reencuentran con onmouseover y onmouseout que con jQuery se
convierten en mouseover y mouseout
mouseover()
Asocia una función cuando el usuario sitúa el cursor del ratón encima de un elemento.
$("div").mouseover();
mouseout()
Asocia una acción al evento cuando el cursor del ratón sale de un elemento.
$("div").mouseout();
De forma (a priori) muy similar, jQuery añade los eventos mouseenter y mouseleave
mouseenter()
Ejecuta una función cuando el cursor entra en un elemento.
$("div").mouseenter();
mouseleave()
Desencadena una función cuando el cursor sale de un elemento.
$("div").mouseleave();
Sin embargo, el funcionamiento del administrador de eventos es diferente. De hecho, mouseover, heredada de
JavaScript onmouseover, propaga el evento a la jerarquía de objetos de la página. Este fenómeno se conoce como
propagación de eventos o desbordamiento de eventos. Por el contrario, mouseenter evita esta propagación del
evento.
Sucede lo mismo para mouseout, que se desencadena cada vez que el cursor se mueve hacia un elemento hijo o
desde él. A la inversa, mouseleave solo se desencadena una vez: cuando el cursor sale del elemento actual.
En algunas situaciones de programación, esta propagación puede ser molesta y jQuery aporta una solución.
Vamos a ver esta diferencia, más bien tenue, entre mouseover y mouseenter usando los siguientes ejemplos.
Ejemplo
Inicialmente, nos centramos en mouseover .
doctype html>
<html lang="es">
<head>
<script>
var i = 0;
var j = 0;
$("div.overout").mouseover(function(){
$("#mover").text("mouseover");
$("#nummover").text(++i);
})
.mouseout(function(){
$("#mout").text("mouseout");
$("#nummout").text(++j);
});
});
</script>
<style>
div.out {
width: 220px;
height: 125px;
margin-left: 15px;
}
div.in {
width: 70%;
height: 50%;
margin: 15px auto;
}
</style>
</head>
<body>
<div class="out overout">
<div class="in overout"> </div>
</div>
<p>Evento <span id="mover"> </span> : <span
id="nummover"> </span> veces.</p>
<p>Evento <span id="mout"> </span> : <span
id="nummout"> </span> veces.</p>
</body>
</html>
El archivo a descargar es el C052.8.1.html
Aspecto inicial:
Cuando el cursor del ratón pasa por encima (mouseover) de la caja coloreada, el contador implementado en el script
indica la cifra 1.
Después, cuando el cursor del ratón pasa por encima de la capa blanca (elemento hijo de la capa coloreada), el
contador marca, no 2, sino la cifra 3. El evento de pasar por encima del elemento hijo se propaga al evento de pasar
sobre el elemento padre. Por tanto, tenemos 3 eventos.
Al mismo tiempo, el cursor deja de pasar por encima de la caja coloreada, se detecta el evento mouseout. El
contador se incrementa en 1.
Después al salir el cursor de las dos cajas, el contador nummout se incrementa hasta 4 y el contador nummover en
1, por lo tanto pasa a 4.
Ejemplo
Volvemos al mismo código, pero esta vez con mouseenter y mouseleave.
El documento HTML:
doctype html>
<html lang="es">
<head>
<script>
var i = 0;
var j = 0;
$("div.overout").mouseenter(function(){
$("#menter").text("mouseenter");
$("#nummenter").text(++i);
})
.mouseleave(function(){
$("#mleave").text("mouseleave");
$("#nummleave").text(++j);
});
});
</script>
<style>
div.out {
width: 220px;
height: 125px;
margin-left: 15px;
}
div.in {
width: 70%;
height: 50%;
margin: 15px auto;
}
</style>
</head>
<body>
<div class="out overout">
<div class="in overout"> </div>
</div>
<p>Evento <span id="menter"> </span> : <span
id="nummenter"> </span> veces.</p>
<p>Evento <span id="mleave"> </span> : <span
id="nummleave"> </span> veces.</p>
</body>
</html>
El aspecto inicial:
Cuando el cursor del ratón entra (mouseenter) en la capa coloreada, el contador que se implementa en el script
indica la cifra 1.
Y cuando el cursor del ratón entra en la capa blanca (elemento hijo de la capa coloreada), el contador marca la
cifra 2. El evento mouseenter no se propaga. Naturalmente el evento mouseleave no se detecta.
Cuando el cursor sale de la zona de las dos cajas, se detecta el evento mouseleave dos veces únicamente, para
cada una de las dos cajas.
El desbordamiento del evento incluye efectos indeseables cuando hay elementos padres con elementos hijos y se
aplica un mouseover o un mouseout al elemento padre. El movimiento del ratón en los elementos hijo puede
desencadenar un evento mouseout en sus elementos padres. El evento empieza por el elemento hijo y pasa de
padre a padre. La propagación es ascendente.
Para saber más, realice una búsqueda en Google con las palabras clave "propagación de evento", "desbordamiento
de evento" o "event bubbling".
Volvemos a nuestros eventos jQuery, por ejemplo mouseenter y mouseleave
Ejemplo
Al pasar el ratón por encima de la caja <div>, se aplica un color de fondo. Cuando el cursor sale, se restaura la situación
inicial.
Aspecto inicial: el color de fondo es blanco cuando el cursor se encuentra fuera de la caja.
Aspecto obtenido cuando el cursor se encuentra encima de la caja: el color de fondo es azul.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("div").mouseenter(function(){
})
$(this).css({"background-color":"#fff"});
});
});
</script>
div {
width: 200px;
height: 90px;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
Explicaciones del script.
$("div").mouseenter(function(){
})
Al pasar el ratón (mouseenter()) por encima de la capa <div>, se modifica su propiedad CSS de color de fondo (css
({"background-color":"#9cf"})
$(this).css({"background-color":"white"});
});
Cuando el cursor sale de la capa (mouseleave()), el color de fondo se restaura a blanco (css({"background-
color":"#fff"})
});
Fin del script.
Comentario
Como en este ejemplo la capa no tiene elemento hijo, el uso de mouseover y de mouseout hubiera tenido el mismo
resultado.
9. Enviar una consulta
submit()
Desencadena el evento de envío del formulario.
$("form").submit();
Ejemplo:
Consideremos un formulario que solicita una contraseña ("password" en nuestro ejemplo) para acceder un sitio web. Cuando se
envía, si la contraseña es correcta, se redirige al usuario a la dirección deseada. En caso contrario, se muestra un mensaje de
error.
Aspecto inicial:
Aspecto obtenido al introducir una contraseña equivocada:
El documento HTML:
doctype html>
<html lang="es">
<head>
script>
$("form").submit(function() {
if ($("input:first").val() == "password") {
return true;
}
$("#no-valida").html("<b>Contraseña no válida.
</b><br>Cámbiela.").show();
return false;
});
});
</script>
</head>
<body>
<p>Introduzca "password" para acceder al sitio web.</p>
<form action="javascript:window.location.href=
’http://www.ediciones-eni.com’;">
<div>
<input type="password" size="10">
<input type="submit">
</div>
</form>
<p id="no-valida"> </p>
</body>
</html>
El archivo a descarger es el C052.9.html
Pasemos a explicar el script.
$("form").submit(function() {
Al enviar el formulario.
if ($("input:first").val() == "password") {
return true;
}
Si la contraseña introducida es correcta, se ejecuta la acción que se define en el código.
$("no-valida").html("<b>Contraseña no válida.</b><br>Cámbiela.").show();
return false;
Si la contraseña no es correcta, se inserta un mensaje HTML de error en el elemento <p id="no-valida"> y se

muestra.
});
});
Fin del script.
10. Otros eventos
Existen otros eventos, pero se usan menos. Vamos a repasarlos rápidamente.
l change(): desencadena un evento cuando se modifica un control de formulario, por ejemplo cuando se activa una
casilla de selección de formulario.
l keydown(), keyup() y keypress(): desencadenan un evento cuando se pulsa una tecla del teclado (hacia abajo),
se suelta (hacia arriba) y cuando se escribe un carácter.
l resize(): asocia un evento cuando se modifica el tamaño de un elemento, normalmente la ventana del navegador.
l select(): se produce cuando el usuario selecciona un texto (o una parte de él). Algunas veces se aplica a los campos
de formulario de tipo línea de texto o zona de texto (textarea).
No olvidemos el evento básico de todo script jQuery, es decir, ready(), que asocia una función cuando el DOM está
preparado para ser manejado.
Métodos o administradores de eventos avanzados
1. Unir un evento a un objeto (on)
on(evento, [selector], [datos], función)
Asigna el evento a un elemento determinado:
l evento (cadena de caracteres): designa el evento asociado. Si se especifican varios eventos, se deben separar
simplemente por un espacio.
l selector (opcional): un filtro para seleccionar los hijos del elemento sobre el que se aplica el evento.
l datos (opcional): datos que se le pueden proporcionar a la función. Su uso es poco frecuente.
l función : el código que se ejecuta al producirse el evento.
$("button").on("click", function() {
alert($(this).text());
});
function saludo(event) {
alert("Buenos días " + event.data.nombre);
}
$("boton").on("click", {nombre: "Carlos"}, saludo);
El método off() elimina las acciones asociadas a un evento mediante el método on()
Los métodos on() y bind() (consulte Unir un evento a un objeto (bind) de este capítulo) son más potentes que
los eventos específicos, como click() o mouseover(), que hemos visto anteriormente.
El método permite no solamente asignar uno o varios eventos a un objeto jQuery, en el que se ejecutará la función
que se pasa como argumento, sino también pasar datos a esta función. De esta manera, un clic en un enlace o
pasar el ratón por encima de una imagen puede enviar información diferente al administrador de eventos. Por tanto,
la función relacionada con el evento se podrá ejecutar de manera diferente según el contexto que proporcionen los
datos.
El método on() se introdujo en la versión 1.7 de jQuery después de una reescritura completa de la API que
implementa la gestión de eventos para asegurar una mayor coherencia y un mejor rendimiento. El uso de este
método on() está muy recomendado en la documentación de jQuery ya que está destinado a reemplazar los
métodos más antiguos de gestión de eventos como bind() delegate() y live(). Este último ya quedó
obsoleto a partir de la versión 1.7 y se eliminó en las siguientes versiones.
La gestión de los eventos por el método on puede utilizarse no solo sobre los elementos existentes sino también
sobre los elementos futuros que se pueden crear desde un script. Esta última característica está vinculada al filtro
selector que permite ampliar el administrador de eventos a elementos hijos todavía no creados.
Ejemplo
Vinculemos los eventos mouseenter y mouseleave a un elemento de párrafo. Esta nueva asociación define como acción
mostrar o no un color de fondo.
Aspecto inicial: el cursor del ratón no se encuentra encima del párrafo (evento mouseleave), el fondo es blanco.
Aspecto obtenido al pasar por encima con el ratón (evento mouseenter): el fondo pasa a color azul.
<!doctype html>
<html lang="es">
<head>
<script>
$("p").on("mouseenter mouseleave", function(e){
$(this).toggleClass("over");
});
});
</script>
<style>
p {
cursor: pointer;
padding: 10px;
}
p.over {
background: #9cf;
}
</style>
</head>
<body>
<h3>Pase por encima del párrafo siguiente.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor.</p>
</body>
</html>
Al cargar el DOM y tras la inicialización de jQuery.
$("p").on("mouseenter mouseleave", function(e){
Los eventos mouseover y mouseout se vinculan (on()) al párrafo <p>
$(this).toggleClass("over");
});
La función asociada es alternar ( toggleClass()) a la clase CSS over
});
Fin de script.
2. Unir un evento a un objeto (bind)
bind(evento, [datos], función)
Asigna el evento a un elemento determinado.
l evento (cadena de caracteres): designa el evento asociado. Si se especifican varios eventos, simplemente se tienen
que separar por un espacio.
l datos (opcional): datos que normalmente se proporcionan a la función.
l función : el código que se tiene que ejecutar cuando se desencadene el evento.
$("button").bind("click", function() {
alert($(this).text() );
});
var mensaje = "Bienvenido";

$("#ejemplo").bind( "click", {msg: mensaje}, function(event) {
alert( event.data.msg );
});
El método unbind() elimina las acciones que el método bind() ha asociado a un evento.
Este método bind() proviene del origen de jQuery (versión 1.0). No obstante, presenta ciertos límites:
l No permite agregar un administrador de eventos más que para elementos existentes.
l Puede consumir muchos recursos cuando se aplica a un selector que pueda señalar a numerosas ocurrencias. De
hecho, este método bind() une el administrador de eventos a todos los elementos identificados por la selección. Si
un evento click está asociado a un elemento de vínculo y su documento tiene 100 etiquetas <a> , se vincularán 100
administradores de eventos a su archivo. Esto disminuirá la velocidad de ejecución del script.
No es de extrañar que jQuery desaconseje el uso de este método bind() y dé preferencia al métodoon(), más
completo y más competitivo. Observe que con la versión 3, jQuery declara los métodos bind() y unbind() como
obsoletos.
El método live(), que también vinculaba un evento a un elemento, se ha eliminado. Para los que empiezan con
jQuery no será un problema ya que este método ya no existe. Por el contrario, para los desarrolladores que quieran
actualizar una aplicación jQuery más antigua utilizando este método, esta eliminación puede entrañar sorpresas
desagradables. Lo mismo ocurre con el método die(), que eliminaba las acciones asociadas a un evento mediante el
método live().
Ejemplo
Mostremos un mensaje de aviso al hacer clic en un botón.
<!doctype html>
<html lang="es">
<head>
<script>
$("button").bind("click", function(){
alert("Ha hecho clic en el botón.");
});
});
</script>
</head>
<body>
<button>Haga clic</button>
</body>
</html>
$("button").bind("click",function(){
El evento click está vinculado ( bind()) al botón (button
alert("Ha hecho clic en el botón.");

});
La función asociada consiste en mostrar un cuadro de aviso (alert) en JavaScript clásico.
});
Fin del script.
3. Delegar un evento
delegate(selector, evento, función)
Vincula una función a un evento para todos los elementos que correspondan al selector ahora y en el futuro.
Observe la introducción del selector al que lleva el evento directamente en la sintaxis del método.
Introducido en la versión 1.4 de jQuery, el método delegate() era el más utilizado para vincular un evento a un
elemento. Sin embargo, la documentación ya no aconseja su uso y recomienda el método on(). Observe que la
versión 3 de jQuery declara este método como obsoleto.
El método undelegate() elimina la asociación creada por delegate()
Ejemplo
Aspecto inicial:
Aspecto obtenido después de hacer clic en el primer párrafo:
Haciendo clic en el párrafo inicial, la función añade un nuevo párrafo (que no existía en el archivo inicial). Y así sucesivamente
con cada clic.
<!doctype html>
<html lang="es">
<head>
<script>
$("body").delegate("p", "click", function(){
$(this).after("<p>Otro párrafo</p>");
});
});
</script>
<style>
p {
cursor: pointer;
}
</style>
</head>
<body>
<p>¡Haga clic!</p>
</body>
</html>
4. Ejecutar una función solo una vez
one(evento,[datos],función)
Asocia una función a un evento determinado. La diferencia con la función bind() es que la función asociada al
evento solo se ejecutará, como máximo, una vez para cada elemento de la selección.
l evento (cadena de caracteres): tipo de evento implicado.
l datos (opcional): datos adicionales que se pasan al administrador de eventos. Su uso es poco frecuente.
l función : función que se asocia al evento.
$("p").one("click", function(){
alert( $(this).text() );
});
$("body").one("click", "#ejemplo", function() {
alert( "Me muestro si #ejemplo es el primer elemento
en el que se hace clic en el body.");
});
Esta función puede ser muy útil en algunos scripts.
Ejemplo
Imaginemos un botón que solo podemos pulsar una vez. Cuando se hace el primer clic, se muestra un mensaje.
Aspecto inicial:
Aspecto después de hacer clic en el botón:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("button").one("click", function(){
$("#alerta").html("<b>Es inútil pulsar más veces.</b>");
});
});
</script>
</head>
<body>
<p>Solo se permite 1 único clic</p>
<button>¡Sólo haga clic una vez!</button>
<p id="alerta"> </div>
</body>
</html>
$("button").one("click", function(){
Al hacer clic en el botón, se ejecuta la siguiente función.
$("alerta").html("<b>Es inútil pulsar más veces.</b>");

});
La frase "Es inútil pulsar más veces." se mostrará como HTML en el párrafo <p id="alerta">. Como se ha usado
el método one(), la frase solo se muestra una vez y cualquier otro clic en el botón no realizará ninguna acción.
});
Fin del script.
5. Desencadenar un evento particular
trigger(evento)
Desencadena un evento particular para los elementos de la selección. Esto también va a desencadenar la acción por
defecto del navegador para este tipo de evento (si existe). Por ejemplo, usar el tipo de evento ’submit’ en la
función también va a desencadenar el envío del formulario por parte del navegador. Esta acción por defecto se
puede evitar devolviendo "false" en una de las funciones asociadas al evento, para alguno de los elementos de la
selección.
También puede usar la función bind()
$("p").trigger("click");
Ejemplo
Aspecto inicial:
Al hacer clic en el enlace, el script marca la casilla, lo que desencadena un mensaje de alerta, cuando el usuario hace clic en OK
o Cerrar.
El documento HTML:
doctype html>
<html lang="es">
<head>
<script>
$(document).ready(function () {
$(’input’).on(’click’, function() {
alert(’Checkbox marcado’);
});
$(’a’).on(’click’, function() {
$(’input’).trigger(’click’);
return false;
});
});
</script>
</head>
<body>
<p><input type="checkbox">Casilla a seleccionar</p>
<p><a href="#">Desencadena el clic en la casilla a seleccionar</a>.</p>
</body>
</html>
6. Al pasar el ratón
Esta función, propia de jQuery, agrupa los eventos onmouseover y onmouseout de JavaScript o mouseover y mouseout
de jQuery, es decir, cuando el cursor pasa por encima de un elemento y sale de él.
hover(función 1, función 2)
El método hover()de jQuery une dos eventos que se usan muy frecuentemente en el elemento seleccionado;
cuando el cursor pasa por encima y cuando sale de él.
Por tanto, este método se ejecuta en dos partes. Cuando el cursor se sitúa sobre un elemento concreto, se ejecuta
la primera función que se ha pasado como parámetro. Cuando el cursor sale del ámbito del elemento, se ejecuta la
segunda función.
$("p").hover(function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
});
Al pasar el ratón por encima de los párrafos, se añade la clase hover. Cuando el cursor sale de la zona, se elimina la
clase. Este método devuelve un objeto jQuery.
Ejemplo
El clásico, una imagen que cambia cuando el ratón pasa por encima de ella.
Aspecto inicial, el cursor del ratón está fuera del área de la imagen ( mouseout):
Aspecto obtenido al pasar por encima el ratón ( mouseover):
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(’img’).hover(function () {
this.src = ’polucion2.jpg’;
},
function () {
});
});
</script>
<style>
.image {
position: absolute;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div class="image">
<img src="polucion1.jpg" alt="">
</div>
</body>
</html>
El script jQuery se escribe de la siguiente manera:
$(’img’).hover(function () {
Se aplica un método hover() a las imágenes.
},
En primer lugar, al pasar el cursor por encima, se carga la imagen "polucion2.jpg", modificando el atributo src del
elemento <img>
function () {
});
Después, cuando el cursor sale de la imagen, el script vuelve a la situación inicial.
});
Fin del script.
Aplicaciones
1. Un menú desplazado
Vamos a crear un menú de navegación interactivo. Los elementos del menú se desplazarán hacia la derecha al
pasar por encima el cursor del ratón.
El menú de navegación inicial:
Al pasar el ratón por encima de un ítem del menú de navegación, este se va a desplazar a la derecha:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(’ul#menu li a’).hover(function() {
$(this).stop().animate( { paddingLeft:"50px" }, 400 );
},
function() {
$(this).stop().animate( { paddingLeft:"0" }, 200 )
})
});
</script>
<style>
nav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
nav li a {
display: block;
height: 25px;
line-height: 25px;
width: 120px;
background: #99ccff;
border: 1px solid navy;
color: black;
text-align: center;
}
</style>
</head>
<body>
<nav>
<ul id="menu">
<li><a href="#">Menú Ítem 1</a></li>
</ul>
</nav>
</body>
</html>
Detallemos el script jQuery:
$(’ul#menu li a’).hover(function() {
El método hover() se ha asociado a los elementos de la lista que forman el menú de navegación.
$(this).stop().animate( { paddingLeft:"50px" }, 400 );

},
Al pasar el ratón por encima de cada ítem, el script detiene cualquier animación que se esté desarrollando (stop()
Después, aplica una anima ción (animate()), que consiste en aumentar la distancia con respecto al borde izquierdo
paddingLeft:"50px"
$(this).stop().animate( { paddingLeft:"0" }, 200 )

})
Cuando el cursor sale del ítem, la segunda parte del método hover() hace que el ítem regrese a su posición inicial.
});
Fin del ready y del script.
2. Zoom en una viñeta
Vamos a diseñar un script que permita mostrar una imagen en tamaño real al pasar el ratón por encima de una
viñeta de la misma.
La transcripción en papel no permite percibir la parte dinámica del script. Vaya al espacio de descarga para
disfrutarlo completamente.
El aspecto inicial, el cursor del ratón no se encuentra encima de ninguna imagen:
Aspecto obtenido al pasar por encima de una imagen:
El archivo HTML:
<!doctype html>
<html lang="es">
<head>
<title>Zoom</title>
<script>
$("ul.thumb li").hover(function() {
$(this).css({’z-index’: ’10’});
$(this).find(’img’).stop()
.animate({ marginTop: ’-90px’,
marginLeft: ’-50px’,
top: ’50%’,
left: ’50%’,
width: ’225px’,
height: ’150px’,
}, 200);
} ,
function() {
$(this).find(’img’).stop()
.animate({ marginTop: ’0’,
marginLeft: ’0’,
top: ’0’,
left: ’0’,
width: ’90px’,
height: ’60px’,
}, 400);
});
});
</script>
<style>
body {
padding: 3px;
margin: 0;
}
.container {
position: absolute;
top: 50px;
left: 10px;
}
ul.thumb {
padding: 0;
list-style-type: none;
margin: 0;
width: 260px;
float: left;
}
ul.thumb li {
position: relative;
padding: 0;
margin: 0;
width: 100px;
height: 100px;
float: left;
}
ul.thumb li img {
position: absolute;
padding: 0;
width: 90px;
height: 60px;
left: 0;
border: none;
}
</style>
</head>
<body>
<p>Pase por encima de la viñeta para hacer la imagen más grande.</p>
<div class="container">
<ul class="thumb">
<li><img alt="" src="iceberg1.jpg"></li>
<li><img alt="" src="iceberg2.jpg"></li>
</ul>
</div>
</body>
</html>
Este script jQuery necesita algunas aclaraciones:
$("ul.thumb li").hover(function() {
Se aplica un hover() en la viñeta.
.animate({ marginTop: ’-90px’,
marginLeft: ’-50px’,
top: ’50%’,
left: ’50%’,
width: ’225px’,
height: ’150px’,
}, 200);
} ,
Al pasar el ratón por encima de la viñeta, se modifica la propiedad de estilo z-index css({’z-index’: ’10’}) para
que la imagen pase al frente. Después, una animación (animate()) modifica una serie de parámetros.
function() {
$(this).find(’img’). stop()
.animate({ marginTop: ’0’,
marginLeft: ’0’,
top: ’0’,
left: ’0’,
width: ’90px’,
height: ’60px’,
}, 400);
});
Cuando el cursor sale de la imagen, la propiedad de estilo z-index se restablece a su estado inicial, lo que provoca,
a su vez, una animación (animate()) con una serie de parámetros.
});
Fin del script.
Introducción
Las animaciones visuales son una parte esencial de JavaScript. Cuando se usan adecuadamente y con moderación
permiten potenciar la funcionalidad de un elemento del contenido.
Hay que admitir que realizar una animación gráfica avanzada usando únicamente JavaScript se convierte rápidamente
en una pesadilla de programación, sobre todo si hay que tener en cuenta cada una de las particularidades de los
diferentes navegadores, incluso en cada versión de cada uno. El framework jQuery proporciona una serie de efectos
visuales fáciles de codificar y totalmente compatibles. En otras palabras, jQuery le ofrece también la posibilidad de
crear sus propias animaciones.
Este capítulo es muy visual, con efectos y otras animaciones. Se aconseja consultar los ejemplos que se proporcionan
en el espacio de descargas para entender el funcionamiento real.
Mostrar y ocultar
Los métodos show() y hide() de jQuery permiten mostrar y ocultar los elementos.
show(velocidad, función a la que se llama)
Muestra un elemento seleccionado (siempre que esté oculto).
La animación modifica dinámicamente la altura, la anchura y la opacidad del elemento. Desde la especificación jQuery
1.3, los márgenes externos e internos también se pueden modificar para obtener un efecto más fluido.
l velocidad (opcional): cadena de caracteres que representa una de las tres velocidades predefinidas ( ’slow’,
’normal’ o ’fast’ ) o el número en milisegundos correspondiente a la duración del efecto.
$(’p’).show(’slow’);
l función a la que se llama (callback) (opcional): función que se tiene que ejecutar cuando termina el efecto.
$(’p’).show(’slow’, function(){alert("Fin");});
hide(velocidad, función a la que se llama)
Oculta un elemento seleccionado (siempre que esté visible).
La animación modifica dinámicamente la altura, la anchura y la opacidad del elemento. Desde la especificación jQuery
1.3, los márgenes externos e internos también se pueden modificar para obtener un efecto más fluido.
$(’p’).hide(’fast’);
$(’p’).hide(’normal’, function(){alert("Fin");});
1. Mostrar y ocultar texto
El siguiente ejemplo propone al lector mostrar la continuación de un artículo, para lo que tiene que hacer clic en el
enlace.
Aspecto inicial:
El archivo HTML:
<!doctype html>
<html lang="es">
<head>
<script>
var $parrafo2 = $(’p:eq(1)’);
$parrafo2.hide();
$(’a.continuar’).on("click", function() {
if ($parrafo2.is(’:hidden’)) {
$parrafo2.show(’slow’);
$(this).text(’> Leer menos’);
} else {
$parrafo2.hide(’slow’);
$(this).text(’> Mostrar la continuación...’);
return false;
}
});
});
</script>
</head>
<body>
<h2>Regiones factae lingua Amano</h2>
<p>
Prodesse sonu primos quidem decere prodesse placeret adlocutus
addensque docens primos conperto quod consulens protectoribus.
</p>
<p>
Est quale Quod amantur ita congruamus utilitatis sensus quae
probitatis esset es potius ab in amant cogitatione bestiis quae
natura videamur quale quasi ita virtutis quam y et indigentia
Quod.
</p>
<div>
<a href="#" class="continuar">Mostrar la continuación...</a>
</div>
</body>
</html>
var $parrafo2 = $(’p:eq(1)’);
Cuando se carga el DOM, el segundo párrafo se carga en la variable $parrafo2. Recordemos que el método eq()
empieza en 0, como sucede normalmente en JavaScript.
Los programadores usan habitualmente la convención de asignar identificadores a las variables en un script jQuery
de modo que empiecen por el signo $.
$parrafo2.hide();
El segundo párrafo se oculta cuando se carga la página.
$(’a.continuar’).on("click", function() {
if ($parrafo2.is(’:hidden’)) {
$parrafo2.show(’slow’);
$(this).text(’> Leer menos’);
Al hacer clic en el enlace Mostrar la continuación..., si el segundo párrafo se ha ocultado correctamente (hidden
entonces se muestra a una velocidad lenta predefinida y el texto del enlace cambia por > Leer menos
} else {
$parrafo2.hide(’slow’);
$(this).text(’> Mostrar la continuación...’);
return false;
}
En caso contrario, se oculta el segundo párrafo y el texto del enlace cambia por "> Mostrar la continuación...".
});
});
Fin del script.
2. Desplegar listas anidadas
Vamos a permitir el despliegue de listas anidadas haciendo clic en una imagen.
Aspecto inicial, las listas no están desplegadas:
Aspecto obtenido después de hacer clic en las imágenes que permiten desplegar todas las listas de "Capítulo 3" y
"Capítulo 4".
Después cada lista se puede desplegar u ocultar individualmente:
Las imágenes mas.gif y menos.gif están disponibles para su descarga desde la página Información.
El archivo HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(’li:has(ul)’).click(function(){
if ($(this).children().is(’:hidden’)) {
$(this).css(’list-style-image’, ’url(menos.gif)’)
.children().show();
} else {
$(this).css(’list-style-image’,’url(mas.gif)’)
.children().hide();
}
return false;
})
.css(’cursor’,’pointer’)
.click();
$(’li:not(:has(ul))’).css({’cursor’: ’default’,
’list-style-image’:’none’});
});
</script>
/head>
<body>
<ul>
<li>Capítulo 1</li>
<li>Capítulo 3
<ul>
<li>Punto 3.1</li>
<li>Punto 3.2
<ul>
<li>Ítem 3.2.1</li>
<li>Ítem 3.2.3
<ul>
<li>Sub-ítem 3.2.3.1</li>
</ul>
</li>
</ul>
</li>
<li>Punto 3.3</li>
<li>Punto 3.4
<ul>
</ul>
</li>
</ul>
</li>
<li>Capítulo 4
<ul>
<li>Punto 4.1</li>
<li>Punto 4.2
<ul>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
$(’li:has(ul)’)
Cuando se carga el DOM, el script selecciona todos los elementos de lista (<li>) que contienen una lista anidada
<ul>
.click(function(){
Al hacer clic en estos elementos.
if ($(this).children().is(’:hidden’)) {
$(this).css(’list-style-image’,’url(menos.gif)’)
.children().show();
}
Si las listas anidadas de este elemento (es decir, las descendientes) están ocultas, la imagen se cambia a menos.gif
y se despliegan.
else {
$(this).css(’list-style-image’,’url(mas.gif)’)
.children().hide();
}
return false;
})
En caso contrario, se muestra la imagen mas.gif y las listas anidadas se ocultan.
.css(’cursor’,’pointer’)
.click();
Solo falta ocuparnos de la forma del cursor del ratón. Para los elementos seleccionados por las líneas de código
anteriores (li:has(ul)), el cursor se transforma en una mano (pointer
$(’li:not(:has(ul))’).css({cursor: ’default’,
’list-style-image’:’none’
});
Para los elementos que no tienen lista anidada (’li:not(:has(ul))’ se conserva la forma del cursor por defecto y
no se muestra ningún icono.
});
Fin del script.
Desplazar verticalmente
Las funciones slideDown() y slideUp() permiten jugar dinámicamente con la altura de un elemento, normalmente una
capa <div> ... </div>
slideDown(velocidad, función a la que se llama)
Desplazar hacia abajo (down) un elemento seleccionado.
La animación modifica solo la altura. Desde la especificación jQuery 1.3, los márgenes verticales, externos e internos
también se pueden modificar para obtener un efecto más fluido.
$(’div’).slideDown(’fast’);
$(’div’).slideDown(’fast’, function(){alert("Fin");});
slideUp(velocidad, función a la que se llama)
Desplazar hacia arriba (up) un elemento seleccionado.
La animación modifica solo la altura. Desde la especificación jQuery 1.3, los márgenes verticales, externos e internos
$(’div’).slideUp(’fast’);
$(’div’).slideUp(’fast’, function(){alert("Fin");});
1. Desplazar una capa
Al hacer clic en el botón, vamos a desplegar una capa.
Aspecto inicial, la caja <div> se oculta:
Aspecto obtenido después de hacer clic en el botón, la caja se muestra desplegándose:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("button").on("click", function () {
if ($("div").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").slideUp("slow");
}
});
});
</script>
<style>
div {
width:94px;
height:150px;
background: #9cf;
display:none;
}
</style>
</head>
<body>
<p>
<button>Haga clic aquí</button>
</p>
<div> </div>
</body>
</html>
El script jQuery:
$("button").on("click", function () {
Cuando se ha cargado el DOM, al hacer clic con el ratón en el elemento <button>
if ($("div").is(":hidden")) {
$("div").slideDown("slow");
}
Si la caja (<div>) está oculta, se desplaza hacia abajo.
else {
$("div").slideUp("slow");
}
En caso contrario, la caja se desplaza hacia arriba.
});
});
Fin del script.
2. Un menú desplegable vertical
Vamos a construir un menú desplegable vertical muy sencillo.
El archivo HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(’div.capitulo’).click(function() {
$(’div.items’).slideUp(’normal’);
$(this).next().slideDown(’normal’);
});
$("div.items").hide();
});
</script>
<style>
a {
color: black;
}
.capitulo {
width: 100px;
background: #9cf;
border-bottom: 1px solid black;
cursor: pointer;
text-align: center;
}
.items {
width: 100px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div class="capitulo">Capítulo 1</div>
<div class="items">
<a href="">Punto 1</a><br />
<a href="">Punto 3</a>
</div>
<div class="items">
</div>
<div class="items">
</div>
<div class="items">
</div>
</body>
</html>
El script jQuery:
$(’div.capitulo’).click(function() {
Cuando se carga el DOM, al hacer clic en la caja cuya clase es capitulo
$(’div.items’).slideUp(’normal’);
Las cajas items se cierran (se desplazan hacia arriba).
$(this).next().slideDown(’normal’);
});
El script consigue llegar a los elementos siguientes (next) del elemento seleccionado (this) gracias al clic en la caja
capitulo
$("div.items").hide();
Se ocultan las cajas items, para que el menú se presente colapsado cuando se abra la página.
});
Fin del script.
Hacer un efecto de fundido
Este efecto de aparición o desaparición de un elemento, modificando progresivamente su opacidad, posiblemente

resulte ser el efecto más bonito de jQuery de todos los que se presentan en este capítulo dedicado a los efectos.
fadeIn(velocidad, función a la que se llama)
Hace aparecer el elemento seleccionado, siguiendo un efecto de fundido.
Esta animación se obtiene ajustando solo la opacidad. El elemento seleccionado debe tener una anchura y una altura
concretas.
$(’p:first’).fadeIn(4000);
$(’p:first’).fadeIn(4000, function(){alert("Fin");});
fadeOut(velocidad, función a la que se llama)
Hace desaparecer el elemento seleccionado, siguiendo un efecto de fundido.
Esta animación se obtiene ajustando solo la opacidad. El elemento seleccionado debe tener una anchura y una altura
concretas.
$(’p:first’).fadeOut(4000);
$(’p:first’).fadeOut(4000, function(){alert("Fin");});
fadeTo(velocidad, opacidad, función a la que se llama)
Modifica la opacidad del elemento seleccionado hasta el valor que se proporciona en el script.
$(’p:first’).fadeTo(’slow’, 0.33);
l opacidad (número): determina el valor de la opacidad que se tiene que alcanzar (número comprendido entre 0 y 1).
$(’p:first’).fadeTo(’slow’, 0.33, function(){alert("Fin");});
1. Aparición y desaparición progresiva
Pongamos en acción estos métodos de jQuery en una imagen.
Las imágenes de este ejemplo están disponibles para descarga desde la página Información.
Al cargar la página se muestra en su estado inicial:
Haciendo clic en el botón Fade Out, la imagen se oculta progresivamente:
Haciendo clic en el botón Fade In, la imagen se muestra progresivamente:
<!doctype html>
<html lang="es">
<head>
<script>
$("#botonFadeOut").click(function () {
$("#imagen").fadeOut();
});
$("#botonFadeIn").click(function () {
$("#imagen").fadeIn();
});
});
</script>
<style>
#bloc {
width: 210px;
height: 117px;
margin-top: 15px;
}
#imagen {
margin: 5px;
}
</style>
</head>
<body>
<div>
<input type="button" id="botonFadeOut" value="Fade Out">
<input type="button" id="botonFadeIn" value="Fade In">
</div>
<div id="bloc">
<img src="molino3.jpg" alt="" width="200" height="107"
id="imagen" />
</div>
</body>
</html>
Detallamos el script:
$("#botonFadeOut").click(function () {
$("#imagen").fadeOut();
});
Después de cargar el DOM, hacer clic en el botón Fade Out provoca la desaparición de la imagen con un efecto de
fundido.
$("#botonFadeIn").click(function () {
$("#imagen").fadeIn();
});
El clic en el botón Fade In hace aparecer la imagen con un efecto de fundido.
});
Fin del script.
2. Jugar con la opacidad
En este ejemplo, las imágenes se muestran con una opacidad del 50%. Al pasar por encima con el ratón, se
muestran con una opacidad del 100%.
Las imágenes de este ejemplo están disponibles para su descarga desde la página Información.
Al cargar la página, las imágenes tienen una opacidad del 50%:
Al pasar por encima, la imagen se muestra con una opacidad del 100%:
El archivo HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(".imagen").fadeTo("slow", 0.5);
$(".imagen").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("fast", 0.5);
});
});
</script>
<style>
.imagen {
margin-left: 8px;
}
</style>
</head>
<body>
<p>Pase por encima de la imagen con el cursor del ratón</p>
<div>
<img src="molino1.jpg" alt="" width="120"
height="180" class="imagen">
<img src="molino2.jpg" alt="" width="120"
height="180" class="imagen">
</div>
</body>
</html>
Explicaciones:
$(".imagen").fadeTo("slow", 0.5);
Cuando se carga el DOM, se muestran las imágenes sombreadas, con una opacidad de 0,5.
$(".imagen").hover(function(){
$(this).fadeTo("slow", 1.0);
Al pasar el ratón por encima de la imagen, esta se mostrará con su claridad normal (opacidad 1). El efecto de
fundido es lento.
},function(){
$(this).fadeTo("fast", 0.5);
Cuando el cursor sale de la imagen, esta vuelve a su estado inicial (opacidad 0,5).
});
});
Fin del script.
Cambiar de un efecto a otro
Este cambio de un estado a otro o de una función a otra es un clásico de jQuery y ya se ha tratado en el capítulo Los
eventos.
toggle()
Permite cambiar el estado de visualización del elemento seleccionado. Si el elemento se muestra, la función lo hace
desaparecer (con la función hidden()) y al revés (con la función show()
$("p").toggle();
toggle(función 1,función2)
Permite cambiar (toggle) entre dos funciones con cada clic en el elemento seleccionado. Con el clic inicial, se ejecuta la
primera función. Con el siguiente clic, se ejecuta la segunda. Si se hace clic de nuevo, se vuelve a ejecutar la primera
función y así sucesivamente.
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
Este efecto de cambio también se aplica a la función de deslizamiento (consulte la sección Desplazar verticalmente, en
este capítulo).
slideToggle(velocidad, función a la que se llama)
Esta función desplaza hacia abajo un elemento que está en estado "Up" y desplaza hacia arriba un elemento que
está en estado "Down".
La animación solo modifica la altura. Desde la especificación jQuery 1.3, los márgenes verticales, externos e internos
$(’div’).slideToggle(’fast’);
$(’div’).slideToggle(’fast’, function(){alert("Fin");});
fadeToggle(velocidad, función a la que se llama)
Muestra u oculta los elementos modificando su opacidad.
’normal’ , ’fast’ ) o el número en milisegundos correspondiente a la duración del efecto.
$("p:first").fadeToggle("slow");
l función a la que se llama (opcional): función que se tiene que ejecutar cuando termina el efecto.
$("p:last").fadeToggle("fast", function () {
$("#log").append("<div>Terminado</div>");
});
Este efecto se ha agregado con la versión 1.4.4.
1. Ejemplo del efecto de cambio
Presentamos un script sencillo para describir esta función toggle()
Al cargar la página, se muestra una caja <div>
Al hacer clic en el enlace "Haga clic aquí", la caja desaparece progresivamente:
Al final, la caja se oculta totalmente:
Con un clic en el enlace, la caja se muestra completamente de forma progresiva:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#start").click(function () {
$("#div_toggle").toggle("slow");
});
});
</script>
<style>
#div_toggle {
width: 150px;
height: 150px;
}
p {
cursor: pointer;
}
</style>
</head>
<body>
<p id="start">Haga clic aquí</p>
<div id="div_toggle"> </div>
</body>
</html>
Explicaciones:
$("#start").click(function () {
Al hacer clic en el párrafo identificado por id="start"
$("#div_toggle").toggle("slow");
Se aplica la función de cambio (toggle) a la capa.
});
});
Fin del script.
2. Un menú acordeón
Presentamos un menú vertical que se despliega y se pliega cuando hacemos clic con el ratón.
La imagen arrow.gif de este menú está disponible para su descarga desde la página Información.
Al cargar la página, las cortinas del acordeón están todas cerradas:
Al hacer clic en el título de una de las cortinas, esta se despliega. Si se despliega otra cortina, la anterior se cierra:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(".acordeon p").hide();
$(".acordeon h3").on("click", function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("activa");
$(this).siblings("h3").removeClass("activa");
});
});
</script>
<style>
.acordeon {
width: 250px;
border-bottom: solid 1px black;
}
.acordeon h3 {
margin: 0;
background: #9cf url(arrow.gif) no-repeat right
-51px;
padding: 7px 15px;
font: bold 0.9em Arial, sans-serif;
border-bottom: none;
cursor: pointer;
}
.acordeon h3:hover {
background-color: #ccecff;
}
.acordeon h3.activa {
background-position: right 5px;
}
.acordeon p {
margin: 0;
font: 0.9em Arial, sans-serif;
padding: 10px 15px 10px;
border-left: solid 1px black;
border-right: solid 1px black;
}
</style>
</head>
<body>
<div class="acordeon">
<h3>Hypertext Markup Language</h3>
<p>- Versión 3.2<br>- Versión 4.1<br>- Versión 5</p>
<h3>Cascading Style Sheet</h3>
<p>- Versión 2<br>- Versión 3</p>
<h3>JavaScript</h3>
<p>- DOM<br>- Ajax<br>- jQuery</p>
</div>
</body>
</html>
Observe el uso de una única imagen (arrow.gif) para mostrar tanto la flecha hacia arriba como la flecha hacia abajo.
La flecha hacia abajo se obtiene con una posición en el fondo de 51 píxeles, mientras que la flecha hacia arriba (la
clase activa) tiene una posición de 5 píxeles.
$(".acordeon p").hide();
Cuando se carga la página (el DOM, para ser más precisos), el método hide() carga todos los submenús.
$(".acordeon h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
Al hacer clic con el ratón en un elemento del menú (.acordeon h3) el script llama al elemento siguiente (es decir, un
elemento <p>) y despliega el párrafo que contiene los submenús. Los elementos hermanos del elemento <p> que
son visibles, es decir, los demás submenús, se desplazan hacia arriba para desaparecer.
$(this).toggleClass("activa");
$(this).siblings("h3").removeClass("activa");
Estas dos líneas de código aseguran la visualización de la pequeña flecha hacia arriba o hacia abajo de los
elementos del menú. Después del clic que se ha hecho antes, la flecha apunta hacia arriba, como define la clase
activa. Para los demás elementos del menú, la flecha apuntará hacia abajo porque se ha eliminado la clase activa
});
});
Fin del script.
Retrasar un efecto
delay(duración)
Permite retrasar la ejecución de un efecto.
l duración es un número entero que expresa, en milisegundos, el retardo que se debe considerar a la hora de ejecutar
el siguiente efecto.
Ejemplo:
Vamos a hacer que aparezcan las cajas en dos tiempos, con un retraso de 2 segundos para la segunda, con respecto a la
aparición de la primera.
Estado inicial, se muestran las dos cajas:
Al hacer clic en el botón, en primer lugar se ocultan las dos cajas:
Después solo se muestra la caja 1:
Después la caja 2 aparece con un retraso de 2 segundos:
El código es el siguiente:
<!doctype html>
<html lang="es">
<head>
<script>
$("button").click(function() {
$("div.primero").slideUp(300).fadeIn(600);
$("div.segundo").slideUp(300).delay(2000).fadeIn(600);
});
});
</script>
<style>
div {
width: 60px;
height: 60px;
float: left;
font-size: 52px;
text-align: center;
}
.primero {
background-color: white
}
.segundo {
margin-left: 10px;
}
</style>
</head>
<body>
<p><button type="button">Run</button></p>
<div class="primero">1</div>
<div class="segundo">2</div>
</body>
</html>
Explicaciones.
Cuando se ha cargado el DOM, al hacer clic en el botón.
$("div.primero").slideUp(300).fadeIn(600);
La caja con la clase primero $("div.primero")) se desplaza hacia arriba (slideUp(300)) y aparece progresivamente
fadeIn(600)
$("div.segundo").slideUp(300).delay(2000).fadeIn(600);
La caja con la clase segundo $("div.segundo")) se desplaza hacia arriba (slideUp(300)). Se produce una pausa de
2000 milisegundos (delay(2000)). Cuando termina esta pausa, aparece progresivamente (fadeIn(600)
});
});
Fin del script.
Crear una animación
La función animate() le permite crear y configurar sus propias animaciones, siguiendo su propia creatividad.
animate(parámetros, velocidad, easing, función a la que se llama)
El aspecto clave de esta función es el objeto que componen las propiedades de estilo en las que se basará la
animación. Cada parámetro del objeto representa una propiedad en la que se apoyará la animación (por ejemplo:
height top u opacity). El valor asociado a la clave indica cómo se animará la propiedad. Si el valor es un número, el
estilo de la propiedad pasará de su valor actual al valor especificado. Si se especifican los valores hide show o toggle
se construye una animación por defecto para esta propiedad.
Observe que estas propiedades se tienen que especificar siguiendo la notación JavaScript (CamelCase). Por ejemplo
marginLeft en lugar de la notación CSS margin-left
l parámetros : contenedores de atributos de estilo que desea animar y con qué valor.
animate( {fontSize:"24px", left:300, width: "200px", opacity: 0.5} , 1000 )
$("p").animate({ height: ’toggle’, opacity: ’toggle’ }, "slow");
l easing (opcional): nombre del efecto personalizado que desea usar (se necesita el plugin).
l función a la que se llama (opcional): función que se tiene que ejecutar cuando termina la animación.
Ejemplo
$("#boton").click(function() {
$("#contenido").animate({"height": "300px", "width": "250px"},
"slow", "linear", function(){
$(this).html("Animación terminada");
});
});
Comentario
Todos los efectos jQuery, los del método animate() incluidos, se pueden desactivar usando la instrucción
jQuery.fx.off = true, hecho que valorarán los usuarios que tengan problemas de visión.
1. Una animación en una capa
Aspecto tras cargar la página:
Al hacer clic en el botón Lanzar animación, la caja Ediciones ENI se desplaza hacia la derecha, se hace más grande
y se aplica una opacidad del 50%:
Seguidamente aparece el texto con un tamaño de caracteres más grande, la opacidad pasa a un 100% y el borde
de la izquierda de la caja se muestra muy grueso:
Finalmente, el botón "Reinicializar" permite volver al estado inicial de la animación.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(’#start’).click(function(){
$(’#box’).animate({left:150,
width: "200px",
opacity: 0.5
}, 1500)
.animate( { fontSize:"24px" } , 1000 )
.animate( { borderLeftWidth:"15px" }, 1000)
.animate( { opacity: 1 }, 1000);
$("#reset").click(function(){
$("#box").css({width:"",left:"",fontSize:"",
opacity:"",borderWidth:""});
});
});
});
</script>
<style>
#box {
position: relative;
width: 110px;
height: 25px;
margin: 20px 0px;
padding-left: 20px;
padding-top: 5px;
border: 1px solid #0000c0;
}
</style>
</head>
<body>
<input type="button" id="start" value="Ejecutar la animación">
<input type="button" id="reset" value="Reinicializar">
<div id="box">Ediciones Eni</div>
</body>
</html>
Detallamos esta animación.
$(’#start’).click(function(){
Al hacer clic en el botón Ejecutar la animación
$(’#box’).animate({left: 150,
width: "200px",
opacity: 0.5
}, 1500)
La caja box se desplaza hacia la derecha 150 píxeles (left: 150), su anchura pasa a ser de 200 píxeles y su
opacidad disminuye hasta la mitad. La animación dura 1500 milisegundos.
.animate( { fontSize:"24px" } , 1000 )
Después, el tamaño de la letra se agranda.
.animate( { borderLeftWidth:"15px" }, 1000)
El grosor del borde izquierdo pasa a ser de 15 píxeles.
.animate( { opacity: 1 }, 1000);
Y, para terminar, la opacidad pasa a valer 1.
$("#reset").click(function(){
$("#box").css({width:"",left:"",fontSize:"",opacity:"",borderWidth:""});
El clic en el botón Reinicializar vuelve a poner la caja en su posición inicial, anulando todas las modificaciones que
se han realizado en la anchura, la posición y la opacidad, así como en la anchura del borde izquierdo.
});
});
});
Fin del script.
2. Una animación avanzada
En este ejemplo vamos a desplazar una caja al mismo tiempo que modificamos su opacidad y sus dimensiones.
Aspecto inicial:
Los desplazamientos y las modificaciones de la opacidad y de las dimensiones:
El archivo HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(".go").click(function(){
$("#box").animate({opacity: "0.4", left: "+=270"}, 1200)
.animate({opacity: "0.7", top: "+=120", height: "20",
width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "50", width:
"50"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown()
return false;
});
});
</script>
<style>
a {
color: black;
font-weight: bold;
font: Arial 10px;
}
#box {
position: relative;
width: 50px;
height: 50px;
background: #9cf;
}
</style>
</head>
<body>
<p>
<a class="go" href="#">Go</a></p>
<div id="box"> </div>
/body>
</html>
Explicación del script:
$(".go").click(function(){
Al hacer clic en el enlace.
$("#box").animate({left: "+=270", opacity: "0.4"}, 1200)
La caja (box) se desplaza hacia la derecha 270 píxeles (left: "+=270) y su opacidad disminuye a 0,4. Esta
animación dura 1200 milisegundos.
.animate({top: "+=120", opacity: "0.7", height: "20", width: "20"},
"slow")
La caja se desplaza hacia abajo 120 píxeles, su opacidad pasa a 0,7, su anchura se reduce a 20 píxeles, igual que
su altura.
.animate({left: "0", opacity: "1", height: "50", width: "50"}, "slow")
Vuelve a su posición horizontal y aspecto iniciales (opacidad 1, altura y anchura de 50 píxeles).
.animate({top: "0"}, "fast")
La caja vuelve a su posición vertical inicial.
.slideUp()
.slideDown()
return false;
Una animación final desplaza la caja hacia arriba para descender después.
});
});
Fin del script.
3. Un efecto original al pasar el ratón por encima
Este es el aspecto inicial, la imagen aparece en un cuadro:
Al pasar el ratón por encima, la imagen se desplaza hacia la derecha y deja aparecer su leyenda:
Al final de la animación, la imagen se desplaza fuera del cuadro y su leyenda se muestra completamente:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(’ul.hover_bloc li’).hover(function(){
$(this).find(’img’).animate({left:’300px’},{duration:500});
}, function(){
});
});
</script>
<style>
ul{
margin-left:-12px;
}
ul.hover_bloc li {
position: relative;
width: 184px;
height: 136px;
padding: 16px;
color: black;
overflow: hidden;
}
ul.hover_bloc li img {
position: absolute;
top: 8px;
left: 8px;
border: 0px;
}
</style>
</head>
<body>
<ul class="hover_bloc">
<li>
<img alt="" src="parque_eolico.jpg">
Parque eólico off-shore más importante del mar del Norte de Dinamarca
</li>
</ul>
</body>
</html>
$(’ul.hover_bloc li’).hover(function(){
Al pasar el ratón por encima de la zona.
El script encuentra la imagen (find(’img’) y la desplaza hacia la derecha 300 píxeles (left:’300px’ La animación
dura 500 milisegundos.
}, function(){
Cuando el cursor sale de la zona, la imagen vuelve a su posición inicial.
});
});
Fin del script.
Es admirable la concisión del código generado por jQuery.
Introducción
El DOM, que permite al diseñador acceder a cada uno de los elementos de la página, ha relanzado el JavaScript. Pero
hay que admitir que el acceso de padres a hijos y a otros hermanos no siempre es sencillo. En otras palabras, una
simple modificación implica normalmente una reescritura completa del código. La librería de jQuery remedia en gran
medida estos inconvenientes, gracias a sus numerosos selectores (consulte el capítulo Los selectores en jQuery) y
métodos específicos para recorrer y manejar los elementos del DOM.
Para este capítulo vamos a usar una página tipo. Esta contiene una lista no ordenada con 5 elementos y una tabla
con una fila y 5 columnas.
Observe también las cajas ejemplo y contenido, que intervendrán más adelante en nuestro estudio.
<!doctype html>
<html lang="es">
<head>
<style>
table {
border-collapse:collapse;
width: 210px;
}
td {
text-align: center;
}
.contenido {
width: 210px;
}
.borde {
}
.colorDefondo {
}
</style>
</head>
<body>
<div id="ejemplo">
<h3>Ejemplo</h3>
<div class="contenido">
<p>Lista</p>
<ul>
<li>Ítem de lista 1</li>
</ul>
<table>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Encontrar los hijos
children()
Devuelve un grupo de elementos que contiene los hijos inmediatos de cada uno de los elementos incluidos en la
selección.
$("div").children()
Ejemplo:
Vamos a añadir un borde a los hijos de la capa <div class="contenido"> y un fondo a los hijos de la celda 3 de la
tabla.
Aspecto obtenido:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(".contenido").children().addClass("borde");
$("#select_table").children().addClass("colorDefondo");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
.contenido {
width: 210px;
}
.borde {
}
.colorDefondo {
}
</style>
</head>
<body>
<div id="ejemplo">
<h3>Ejemplo children()</h3>
<p>Lista</p>
<ul>
</ul>
<table>
<tr>
<td>1</td><td>2</td><td id="select_table"><i>3
</i></td><td>4</td><td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>
$(".contenido").children().addClass("borde");
El método children() se aplica a la capa con la clase contenido y dibuja un borde a sus hijos inmediatos, es decir, el
párrafo <p>Lista</p> y la lista no ordenada <ul> ... </ul>
$("#select_table").children().addClass("colorDefondo");
El método children() se aplica a la celda cuyo identificador es select_table y añade un fondo de color a sus hijos
inmediatos, es decir, su contenido, la cifra 3.
Comentario
Es posible filtrar los elementos que devuelve jQuery usando una expresión opcional. En este caso, la forma del
método children() es children(expresión), lo que permite recuperar solo los elementos hijos que responden a la
expresión que se ha introducido.
Ejemplo
Vemos el extracto de código siguiente:
<ul>
<li class="selected">Ítem de lista 1</li>
</ul>
Es posible quedarse, entre los hijos del elemento <ul>, solo con los elementos con la clase selected
El código jQuery es:
$("ul").children(.selected);
Encontrar los padres directos
parent()
Devuelve un grupo de elementos que contiene los padres inmediatos de cada uno de los elementos incluidos en la
selección.
$("span").parent()
Ejemplo
Rodeamos con un borde los padres inmediatos del tercer elemento de la lista resaltado con letra itálica. Añadimos un color de
fondo a los padres inmediatos de la tercera celda de la tabla resaltados con letra itálica.
Aspecto obtenido:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#select_li").parent().addClass("borde");
$("#select_table").parent().addClass("colorDefondo");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
.contenido {
width: 210px;
}
.borde {
}
.colorDefondo {
}
</style>
</head>
<body>
<div id="ejemplo">
<h3>Ejemplo parent()</h3>
<p>Lista</p>
<ul>
<li id="select_li"><i>Ítem de lista 3</i></li>
</ul>
<table>
<tr>
</i></td><td>4</td><td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>
$("#select_li").parent().addClass("borde");
El método parent() se aplica al tercer elemento de la lista (id="select_li") y rodea con un borde a sus padres, es
decir, el elemento <ul> únicamente.
$("#select_table").parent().addClass("colorDefondo");
El método parent() se aplica a la tercera celda de la tabla (select_table) y añade un fondo a sus padres directos, es
decir, el elemento de tabla <table> únicamente.
Comentario
Con parent(expresión) es posible filtrar los elementos devueltos para quedarse solo con aquellos que cumplan una
determinada expresión.
Encontrar todos los padres
parents()
Devuelve un grupo de elementos que contiene todos los padres de cada uno de los elementos incluidos en la
selección.
$("li").parents()
El método parents() devuelve todos los ascendientes, mientras que children() solo tiene en cuenta los elementos
hijos inmediatos.
Ejemplo
Rodeamos con un borde los padres del tercer elemento de la lista resaltado con letra itálica.
Aspecto obtenido:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#select_li").parents().addClass("borde");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
.contenido {
width: 210px;
}
.borde {
}
.colorDefondo {
}
</style>
</head>
<body>
<div id="ejemplo">
<h3>Ejemplo parents()</h3>
<p>Lista</p>
<ul>
</ul>
<table>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>
$("#select_li").parents().addClass("borde");
El método parents() se aplica al tercer ítem de la lista (id="select_li") y rodea con un borde todos sus padres, es
decir, el elemento <ul>, la caja contenido y el elemento <body>
Comentario
Con parents(expresión) es posible filtrar los elementos devueltos para quedarse solo con aquellos que cumplan una
Encontrar los padres hasta
parentsUntil(selector o elemento)
Devuelve los padres de cada elemento hasta (no incluido) el elemento que se especifica en el selector.
$(’div.box’).parentsUntil(’body’);
Todos los elementos padres de la caja con la clase box hasta el elemento <body>
Este método es una novedad de la versión 1.4 de jQuery.
Ejemplo
Supongamos que tenemos una caja con una lista de cuatro elementos (División 2). Esta caja está dentro de otra caja (División 1).
Añadimos un color de fondo a los padres del ítem 3 de la lista hasta el elemento <body> .
Aspecto obtenido:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(’li.start’).parentsUntil(’body’)
.css(’background-color’, ’#9cf’);
});
</script>
<style>
#division1 {
width: 250px;
padding: 2px;
}
#division2 {
width: 200px;
margin-left: 25px;
padding: 2px;
}
</style>
</head>
<body>
<p id="párrafo">Ejemplo</p>
<div id="division1">División 1
<div id="division2">División 2
<ul>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li class="start">Ítem 3</li>
<li>Ítem 4</li>
</ul>
</div>
</div>
</body>
</html>
$(’li.start’).parentsUntil(’body’)
Desde el ítem de lista con la clase start ($(’li.start’) recuperar todos sus padres hasta (parentsUntil) el
elemento <body> parentsUntil(’body’) no incluido.
El párrafo <p> no se recupera, ya que no forma parte de los padres del elemento de inicio.
Encontrar los hermanos
siblings()
Devuelve la lista de los hermanos inmediatos de cada elemento de la selección.
$("div").siblings()
Ejemplo
Rodeamos con un borde los hermanos del tercer elemento de la lista y añadimos un color de fondo a los hermanos de la tercera
celda de la tabla.
Aspecto obtenido:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#select_li").siblings().addClass("borde");
$("#select_table").siblings().addClass("colorDefondo");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
.contenido {
width: 210px;
}
.borde {
}
.colorDefondo {
}
</style>
</head>
<body>
<div id="ejemplo">
<h3>Ejemplo siblings()</h3>
<p>Lista</p>
<ul>
</ul>
<table>
<tr>
</i></td><td>4</td><td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>
$("#select_li").siblings().addClass("borde");
El método siblings() se aplica al tercer ítem de la lista (id="select_li") y rodea con un borde sus hermanos
inmediatos, es decir, los demás elementos <li>
$("#select_table").siblings().addClass("colorDefondo");
El método siblings() se aplica a la tercera celda de la tabla (select_table) y añade un fondo a sus hermanos
inmediatos, es decir, los demás elementos <td>
Comentario
Con siblings(expresión) es posible filtrar los elementos devueltos para quedarse solo con aquellos que cumplan una
Encontrar el hermano anterior
prev()
Devuelve el hermano inmediato anterior de cada elemento de la selección.
$("td").prev()
Ejemplo
Rodeamos con un borde el hermano anterior del tercer elemento de la lista y añadimos un color de fondo al hermano anterior de
la tercera celda de la tabla.
Aspecto obtenido:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#select_li").prev().addClass("borde");
$("#select_table").prev().addClass("colorDefondo");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
&ensp;.contenido {
width: 210px;
}
&ensp;.borde {
}
&ensp;.colorDefondo {
}
</style>
</head>
<body>
<div id="ejemplo">
<h3>Ejemplo prev()</h3>
<p>Lista</p>
<ul>
</ul>
<table>
<tr>
<td>1</td><td>2</td><td id="select_table"><i>3</i>
</td><td>4</td><td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>
$("#select_li").prev().addClass("borde");
El método prev() se aplica al tercer ítem de la lista (id="select_li") y rodea con un borde su hermano
inmediatamente anterior, es decir, el elemento <li>Ítem de lista 2</li>
$("#select_table").prev().addClass("colorDefondo");
El método prev() se aplica a la tercera celda de la tabla (select_table) y añade un fondo a su hermano
inmediatamente anterior, es decir, el elemento <td>2</td>
Comentario
Con prev(expresión) es posible filtrar los elementos devueltos para quedarse solo con aquellos que cumplan una
Encontrar los hermanos anteriores
prevAll()
Devuelve los hermanos inmediatos anteriores de cada elemento de la selección.
$("td").prevAll()
Ejemplo
Rodeamos con un borde los hermanos anteriores del tercer elemento de la lista y añadimos un color de fondo a los hermanos
anteriores de la tercera celda de la tabla.
Aspecto obtenido:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#select_li").prevAll().addClass("borde");
$("#select_table").prevAll().addClass("colorDefondo");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
.contenido {
width: 210px;
}
.borde {
}
.colorDefondo {
}
</style>
</head>
<body>
<div id="ejemplo">
<h3>Ejemplo prevAll()</h3>
<p>Lista</p>
<ul>
</ul>
<table>
<tr>
</i></td><td>4</td><td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>
$("#select_li").prevAll().addClass("borde");
El método prevAll() se aplica al tercer ítem de la lista (id="select_li") y rodea con un borde sus hermanos
anteriores, es decir, los elementos <li>Ítem de lista 1</li> y <li>Ítem de lista 2</li>
$("#select_table").prevAll().addClass("colorDefondo");
El método prevAll() se aplica a la tercera celda de la tabla (select_table) y añade un fondo a sus hermanos
anteriores, es decir, los elementos <td>1</td> y <td>2</td>
Comentario
Con prevAll(expresión) es posible filtrar los elementos devueltos para quedarse solo con aquellos que cumplan una
Encontrar los hermanos anteriores hasta
prevUntil(selector o elemento)
Devuelve los hermanos anteriores de cada elemento hasta (no incluido) el elemento que especifica el selector.
$(’p’).prevUntil(’h1’).
Devuelve los párrafos anteriores hasta el elemento <h1>.
Se trata de una novedad de la versión 1.4 de jQuery.
Ejemplo
Supongamos una lista de definición (elemento <dl>) que tiene dos definiciones (elemento <dt>). Añadimos un color de fondo a
los elementos anteriores a la segunda definición hasta la primera definición, no incluida.
Aspecto obtenido:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#def2").prevUntil("dt")
.css("background-color", "#9cf")
});
</script>
<style>
dd {
width: 150px;
}
</style>
</head>
<body>
<dl>
<dt>Definición 1</dt>
<dd>Descripción 1a</dd>
<dd>Descripción 1b</dd>
<dd>Descripción 1c</dd>
<dd>Descripción 1d</dd>
<dt id="def2">Definición 2</dt>
<dd>Descripción 2a</dd>
<dd>Descripción 2b</dd>
</dl>
</body>
</html>
$("#def2").prevUntil("dt")
Empezando por el elemento identificado con id="def2" ($("#def2")), recuperar todos los elementos hermanos hasta
prevUntil) el elemento <dt> prevUntil("dt")) no incluido.
Encontrar el hermano siguiente
next()
Devuelve el hermano inmediato siguiente de cada elemento de la selección.
$("td").next()
Ejemplo
Rodeamos con un borde el hermano siguiente del tercer elemento de la lista y añadimos un color de fondo al hermano siguiente
de la tercera celda de la tabla.
Aspecto obtenido:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#select_li").next().addClass("borde");
$("#select_table").next().addClass("colorDefondo");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
.contenido {
width: 210px;
}
.borde {
}
.colorDefondo {
}
</style>
</head>
<body>
<div id="ejemplo">
<h3>Ejemplo next()</h3>
<p>Lista</p>
<ul>
</ul>
<table>
<tr>
</i></td><td>4</td><td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>
$("#select_li").next().addClass("borde");
El método next() se aplica al tercer ítem de la lista (id="select_li") y rodea con un borde su hermano
inmediatamente siguiente, es decir, el elemento <li>Ítem de lista 4</li>
$("#select_table").next().addClass("colorDefondo");
El método next() se aplica a la tercera celda de la tabla (select_table) y añade un fondo a su hermano
inmediatamente siguiente, es decir, el elemento <td>4</td>
Comentario
Con next(expresión) es posible filtrar los elementos devueltos para quedarse solo con aquellos que cumplan una
Encontrar los hermanos siguientes
nextAll()
Devuelve los hermanos inmediatos siguientes de cada elemento de la selección.
$("td").nextAll()
Ejemplo
Rodeamos con un borde los hermanos inmediatamente siguientes del tercer elemento de la lista y añadimos un color de fondo a
los hermanos inmediatamente siguientes de la tercera celda de la tabla.
Aspecto obtenido:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#select_li").nextAll().addClass("borde");
$("#select_table").nextAll().addClass("colorDefondo");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
.contenido {
width: 210px;
}
.borde {
}
.colorDefondo {
}
</style>
</head>
<body>
<div id="ejemplo">
<h3>Ejemplo nextAll()</h3>
<p>Lista</p>
<ul>
</ul>
<table>
<tr>
</i></td><td>4</td><td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>
$("#select_li").nextAll().addClass("borde");
El método nextAll() se aplica al tercer ítem de la lista (id="select_li") y rodea con un borde sus hermanos
siguientes, es decir, los elementos <li>Ítem de lista 4</li> y <li>Ítem de lista 5</li>
$("#select_table").nextAll().addClass("colorDefondo");
El método nextAll() se aplica a la tercera celda de la tabla (select_table) y añade un fondo a sus hermanos
siguientes, es decir, los elementos <td>4</td> y <td>5</td>
Comentario
Con nextAll(expresión) es posible filtrar los elementos devueltos para quedarse solo con aquellos que cumplan una
Encontrar los hermanos siguientes hasta
nextUntil(selector o elemento)
Devuelve los hermanos siguientes de cada elemento hasta (no incluido) el elemento que especifica el selector.
$("ul >:first").nextUntil( ":last" );
Devuelve todos los ítems de lista comprendidos entre el primero y el último.
Se trata de una novedad de la versión 1.4 de jQuery.
Ejemplo
Ocultamos y mostramos las filas de la tabla según un criterio de selección basado en una clase CSS.
Aspecto inicial:
Aspecto obtenido después de hacer clic en el botón Cambiar:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("tr:first").nextUntil(’tr:not(.linea)’).toggle();
});
});
</script>
<style>
table {
margin-top: 20px;
width: 260px;
}
td {
text-align: center;
}
.top {
}
</style>
</head>
<body>
<table>
<tr class="top">
<td>top 1</td>
<td>top 1</td>
<td>top 1</td>
</tr>
<tr class="linea">
<td>línea 1</td>
<td>línea 1</td>
<td>línea 1</td>
</tr>
<tr class="linea">
<td>línea 2</td>
<td>línea 2</td>
<td>línea 2</td>
</tr>
<tr class="linea">
<td>línea 3</td>
<td>línea 3</td>
<td>línea 3</td>
</tr>
<tr class="top">
<td>top 2</td>
<td>top 2</td>
<td>top 2</td>
</tr>
<tr class="linea">
<td>línea 4</td>
<td>línea 4</td>
<td>línea 4</td>
</tr>
</table>
<p><button type="button">Cambiar</button></p>
</body>
</html>
$("tr:first").nextUntil("tr:not(.bt)").toggle();
Empezando por la primera fila de la tabla ($("tr:first")), seleccionar las filas hasta (nextUntil) la fila, no incluida,
con una clase diferente a linea nextUntil("tr:not(.linea)")) y ocultarlas o mostrarlas (toggle()
Observe que la fila 4, que no pertenece al criterio de selección, permanece visible.
Encontrar el contenido
contents()
Encuentra todos los nodos hijos situados en los elementos de la selección (incluyendo los nodos de texto).
Si el elemento especificado es un elemento <iframe> contents() encuentra el contenido del documento.
$("p").contents()
Ejemplo:
Rodeamos con un borde el contenido del tercer elemento de la lista y añadimos un color de fondo al contenido de la tercera celda
de la tabla.
Aspecto obtenido:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#select_li").contents().addClass("borde");
$("#select_table").contents().addClass("colorDefondo");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
.contenido {
width: 210px;
}
.borde {
}
.colorDefondo {
}
</style>
</head>
<body>
<div id="ejemplo">
<h3>Ejemplo contents()</h3>
<p>Lista</p>
<ul>
</ul>
<table>
<tr>
</i></td><td>4</td><td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>
$("#select_li").contents().addClass("borde");
El método contents() se aplica al tercer ítem de la lista (id="select_li") y rodea con un borde su nodo de texto hijo,
es decir, las palabras "Ítem de lista 3"
$("#select_table").contents().addClass("colorDefondo");
El método contents() se aplica a la tercera celda de la tabla (select_table) y añade un fondo a su nodo de texto
hijo, es decir, la cifra 3.
Comentario
Con contents(expresión) es posible filtrar los elementos devueltos para quedarse solo con aquellos que cumplan una
Encontrar determinados padres
closest(selector)
Devuelve el conjunto de elementos que contiene el padre más cercano del elemento seleccionado que responde al
selector, incluido el elemento de inicio.
En primer lugar, el método closest() comprueba si el elemento actual responde a la expresión especificada. En caso
afirmativo, devuelve simplemente el elemento especificado. En caso contrario, sigue recorriendo el documento hacia
arriba, padre a padre, hasta encontrar un elemento que responda a la condición de la expresión. Si no encuentra
ningún elemento, el método no devuelve nada.
$("div").closest("p")
Ejemplo
Buscamos los padres del tercer elemento de la lista hasta la caja con la clase contenido y añadimos un color de fondo.
Aspecto obtenido:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#select_li").closest(".contenido").addClass("colorDefondo");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
.contenido {
width: 210px;
}
.borde {
}
.colorDefondo {
}
</style>
</head>
<body>
<div id="ejemplo">
<h3>Ejemplo closest()</h3>
<p>Lista</p>
<ul>
</ul>
<table>
<tr>
</i></td><td>4</td><td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>
$("#select_li").closest(".contenido").addClass("colorDefondo");
Con el método closest(), vamos a recorrer el DOM hasta la capa con la clase contenido
Es posible realizar otras operaciones:
$("#select_li").closest("#ejemplo").addClass("colorDefondo");
$("#select_li").closest("ul").addClass("colorDefondo");
Comentario
Con closest(expresión) es posible filtrar los elementos devueltos para quedarse solo con aquellos que cumplan una
Encontrar determinados descendientes
find(expresión o selector)
Busca los elementos descendientes que responden a las condiciones del selector especificado.
$("div").find("p")
Este método find() no busca el elemento especificado, sino sus descendientes.
Ejemplo:
Encontrar el elemento no ordenado <ul> que es un descendiente de la caja identificada por ejemplo.
Aspecto obtenido:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#ejemplo").find("ul").addClass("colorDefondo");
});
</script>
<style>
table {
width: 210px;
}
td {
text-align: center;
}
.contenido {
width: 210px;
}
.borde {
}
.colorDefondo {
}
</style>
</head>
<body>
<div id="ejemplo">
<h3>Ejemplo find()</h3>
<p>Lista</p>
<ul>
</ul>
<table>
<tr>
<td>1</td><td>2</td><td id="select_table"><i>3</i>
</td><td>4</td><td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>
$("#ejemplo").find("ul").addClass("colorDefondo");
Empezando por la capa id="ejemplo", encontramos entre los descendientes una lista no ordenada (<ul>) y se le
asigna un color de fondo.
Es posible realizar otras operaciones:
$("#ejemplo").find("p").addClass("colorDefondo");
$("ul").find("#select_li").addClass("colorDefondo");
Añadir elementos a la selección
add(selector o elemento(s) o HTML)
Añade los elementos que se pasan como argumento al conjunto de los elementos seleccionados en la búsqueda.
Los parámetros pueden ser:
l un selector jQuery: $("p").add("span");
l uno o varios elementos: $("p").add(document.getElementById("a"));
l código HTML: $("p").add("<span>Again</span>") .
Ejemplo
Después de seleccionar los elementos de la lista <li>, añadimos a la selección la celda de la tabla identificada por el
identificador select_table . Después aplicamos un fondo a esta selección.
Aspecto obtenido:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("ul").children().add("#select_table")
.addClass("colorDefondo");
});
</script>
<style>
table {
}
td {
text-align: center;
width: 210px;
}
.contenido {
width: 210px;
}
.borde {
}
.colorDefondo {
}
</style>
</head>
<body>
<div id="ejemplo">
<h3>Ejemplo add()</h3>
<p>Lista</p>
<ul>
</ul>
<table>
<tr>
</i></td><td>4</td><td>5</td>
</tr>
</table>
</div>
</div>
</body>
</html>
$("ul").children().add("#select_table").addClass("colorDefondo");
});
Usando $("ul").children(), se seleccionan los elementos <li> de la lista. El código añade la celda de la tabla con
add("#select_table"). A todos estos elementos se les cambia el color de fondo: addClass("colorDefondo")
Una lupa para agrandar las viñetas
Al pasar el ratón por encima de una viñeta, vamos a hacer que aparezca una lupa para que el usuario pueda ampliar
esa viñeta.
Las diferentes imágenes están disponibles para su descarga desde la página Información.
El archivo HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#galeria a").append("<span></span>");
$("#galeria a").hover(function(){
$(this).children("span").fadeIn(600);
}, function(){
$(this).children("span").fadeOut(200);
});
});
</script>
<style>
#galeria {
width: 100%;
overflow: hidden;
}
#galeria a {
position:relative;
float:left;
margin:5px;
}
#galeria a span {
background-image:url(lupa.png);
background-repeat:no-repeat;
width:30px;
height:30px;
display:none;
position:absolute;
left:15px;
top:15px;
}
#galeria img {
padding:5px;
}
</style>
</head>
<body>
<div id="galeria">
<a href="tornado.jpg"><img src="tornado_min.jpg" alt=""></a>
<a href="tornado1.jpg"><img src="tornado1_min.jpg" alt=""></a>
</div>
</body>
</html>
Aspecto inicial:
El script jQuery hace aparecer una lupa, con un efecto de visualización progresivo, al pasar por encima de la viñeta:
El truco consiste en añadir usando jQuery un elemento <span> que contiene la lupa y hacerlo aparecer al pasar por
encima el cursor del ratón.
Inicio de jQuery.
$("#galeria a").append("<span></span>");
El método append() añade un elemento <span> al elemento <a> de la caja galeria
$("#galeria a").hover(function(){
$(this).children("span").fadeIn(600);
},
Al pasar el ratón por encima (hover) del enlace <a>, el script selecciona, entre los hijos del enlace, aquellos que
contienen un elemento <span> children("span")) y les aplica un efecto de aparición progresiva (fadeIn(600)
function(){
$(this).children("span").fadeOut(200);
});
Cuando el cursor sale del enlace, este elemento <span> desaparece.
});
Fin del script jQuery.
Introducción
La integración del DOM ha modificado profundamente la escritura de JavaScript gracias al acceso a los elementos.
Pero su verdadera revolución es, sin ninguna duda, la posibilidad de modificar y añadir elementos en la página HTML
sobre la marcha.
Modificar el contenido
text()
Devuelve el contenido de texto del elemento correspondiente.
Este método funciona para los documentos HTML, XHTML y XML.
$("div").text(): devuelve, en formato texto, el contenido de la etiqueta <div>
text(valor)
Asigna un nuevo contenido de texto (ver el argumento valor) a los elementos correspondientes.
$("div").text("los nuevos elementos de texto"): inserta, en formato texto, el contenido "los nuevos elementos de
texto" en el elemento <div>
text(función)
Desde la versión 1.4, el método text() permite definir el contenido de texto llamando una función.
$(’ul li’).text(function(index) {
return ’item number ’ + (index + 1);
});
html()
Devuelve, en formato HTML, el contenido del elemento correspondiente.
Este método no funciona para los documentos XML (excepto los documentos XHTML).
$("div").html(): devuelve, en formato HTML, el contenido del elemento <div>
html(valor)
Asigna un nuevo contenido HTML (ver el argumento valor) a los elementos correspondientes.
Esta propiedad no está disponible para los documentos XML, aunque sí para los documentos HTML.
$("div").html("<b>nuevo contenido</b>"): inserta como HTML en el elemento <div> los elementos que se pasan
como argumento.
html(función)
Desde la versión 1.4, el método html() permite definir el contenido de texto pasándole una función.
$(’div.demo’).html(function() {
return "<p>Nuevo contenido</p>";
});
Con los métodos text(valor) y html(valor), el nuevo contenido elimina el contenido anterior.
Los métodos html() de jQuery usan la propiedad de JavaScript innerHTML. Como recordatorio, esta propiedad,
originalmente de Internet Explorer, ha sido adoptada por los demás navegadores, aunque su interpretación
plantea algunas veces problemas de compatibilidad.
Ejemplo:
Vamos a añadir texto con los métodos html(valor) y text(valor).
Al cargar la página, tenemos un texto en una caja: "Texto inicial en la caja".
Al hacer clic en el botón "Añadir texto", se inserta y reemplaza el texto de la caja por el texto "jQuery" con formato. Después se
añade este mismo texto en otra caja con el título "El texto añadido".
Observe que el contenido anterior se elimina.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#boton").click(function(){
$("#box").html("<p><strong>jQuery</strong></p>");
var contenido = $("#box").text();
$("#resultado").text(contenido);
});
});
</script>
<style>
#box {
width: 200px;
height: 70px;
margin-top: 15px;
padding: 5px;
}
p {
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<input id="boton" type="button" value="Añadir texto">
<div id="box">Texto inicial en la caja</div>
<h4>El texto añadido</h4>
<div id="resultado"></div>
</body>
</html>
El script jQuery:
$("#box").html("<p><strong>jQuery</strong></p>")
Al hacer clic en el botón, <p><strong>jQuery</strong></p> se inserta en la caja box como HTML.
var contenido = $("#box").text();

$("#resultado").text(contenido);
El método text() recupera el nuevo contenido de la caja box en la variable contenido y se muestra en la caja
resultado
});
});
Fin del script.
Insertar en el interior
1. Primer método
append(contenido)
Añade el contenido al final del elemento especificado, sin suprimir el contenido existente.
El contenido puede ser una cadena de caracteres, código HTML o un objeto jQuery.
append(función)
Desde la versión 1.4 de jQuery, el elemento que se añade también puede estar incluido en una función.
$("p").append("<b>Hello</b>"): inserta al final del párrafo los elementos que se pasan como argumento.
Los expertos en JavaScript y en escritura del DOM habrán reconocido el método appendChild()
prepend(contenido)
Añade el contenido al comienzo del elemento especificado, sin suprimir el contenido existente.
prepend(función)
Desde la versión 1.4 de jQuery, el elemento que se añade también puede estar incluido en una función.
$("p").prepend("<b>Hello</b>"): inserta al inicio del párrafo los elementos que se pasan como argumento.
Ejemplo:
Añadimos contenido al inicio y al final del elemento caja del ejemplo anterior.
Aspecto inicial:
Aspecto obtenido después de hacer clic en el botón "Insertar el texto":
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#box").prepend("<div><b>Al inicio</b></div>");
$("#box").append("<div><b>Al final</b></div>");
});
});
</script>
<style>
#box {
width: 200px;
height: 70px;
margin-top: 15px;
padding: 5px;
}
p {
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<input id="boton" type="button" value="Insertar el texto">
<div id="box">
<p>JQuery</p>
</div>
</body>
</html>
Cuando se ha cargado el DOM y al hacer clic en el botón.
$("#box").prepend("<div><b>Al inicio</b></div>");
El script añade, con el método prepend(), el contenido del argumento al inicio del elemento caja box
$("#box").append("<div><b>Al final</b></div>");
El script añade, con el método append(), el contenido del argumento al final del elemento caja box
});
});
Fin del script.
En la captura de pantalla anterior se puede observar que los elementos se han insertado en el interior del elemento
caja.
2. Segundo método
Los métodos appendTo() y prependTo() realizan las mismas tareas que append() y prepend(). La única diferencia es
la ubicación del contenido y del destino en el código. Con append() o prepend(), el selector que precede al método
es el contenedor en el que se inserta el contenido. Con appendTo() o prependTo(), el contenido precede al método y
se inserta entonces en el contenedor de destino. El siguiente ejemplo mostrará claramente todo esto.
appendTo()
Añade los elementos especificados por el selector A al final de los especificados por B, según la expresión
$(A).appendTo(B)
$("p").appendTo("#box"): añade el contenido de los elementos <p> a la capa con identificador "box" y al final de
esta.
prependTo()
Añade los elementos especificados por el selector A al inicio de los especificados por B, según la expresión
$(A).prependTo(B)
$("p").prependTo("#box"): añade el contenido de los elementos <p> a la capa con identificador "box" y al inicio de
esta.
Ejemplo:
Agregamos nuevo contenido al principio y al final del elemento caja.
Tras la carga de la página se muestran los dos textos que se han añadido: "Inicio" y "Fin". Están situados antes de la caja.
Aspecto obtenido después de hacer clic en el botón "Insertar texto". Se suprimen los dos textos y se añaden antes y después
del contenido existente.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#inicio").prependTo("#box");
$("#fin").appendTo("#box");
});
});
</script>
<style>
#box {
width: 200px;
height: 70px;
margin-top: 15px;
padding: 5px;
}
p {
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<input id="boton" type="button" value="Insertar texto">
<div id="inicio">Inicio</div>
<div id="fin">Fin</div>
<div id="box">
<p>JQuery</p>
</div>
</body>
</html>
Lo detallamos a continuación.
$("#inicio").prependTo("#box");
Añade los elementos especificados por el selector #inicio al inicio de los elementos especificados por el selector
#box. Dicho de otra manera, añade la capa <div id="inicio">Inicio</div> al inicio de los elementos incluidos en el
elemento caja box
$("#fin").appendTo("#box");
Añade los elementos especificados por el selector #fin al final de los elementos especificados por #box. Es decir,
añade la capa <div id="inicio">Fin</div> al final de los elementos incluidos en el elemento caja box
});
});
Fin del script.
Insertar en el exterior
after(contenido)
Añade el contenido que se pasa como argumento después del elemento de selección.
$("p").after("<b>Hello</b>"): añade, después del elemento de párrafo <p>, el contenido que se pasa como
argumento.
after(función)
La versión 1.4 de jQuery también permite pasar como argumento una función que devuelve los elementos que se van
a insertar.
$(’p’).after(function() {
return "<div>Inserción</div>";
});
Este ejemplo inserta un elemento <div> después de cada párrafo.
before(contenido)
Añade el contenido que se pasa como argumento antes de cada elemento de la selección.
$("p").before("<b>Hello</b>"): añade, antes del elemento de párrafo <p>, el contenido que se pasa como
argumento.
before(función)
La versión 1.4 de jQuery permite también pasar como argumento una función que devuelve los elementos que se van
a insertar.
$(’p’).before(function() {
return "<div>Inserción</div>";
});
Este ejemplo inserta un elemento <div> antes de cada párrafo.
Los expertos en JavaScript clásico y en la notación del DOM habrán reconocido el método insertBefore()
Ejemplo
Añadimos el contenido antes y después del elemento caja en el ejemplo anterior.
Aspecto inicial:
Aspecto obtenido después de hacer clic en el botón "Insertar texto":
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#box").before("<div><b>Antes</b></div>");
$("#box").after("<div><b>Después</b></div>");
});
});
</script>
<style>
input{
margin-bottom: 10px;
}
div {
width: 200px;
padding: 5px;
}
#box {
width: 200px;
height: 40px;
margin-top: 10px;
padding: 5px;
}
p {
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<div id="box">
<p>JQuery</p>
</div>
</body>
</html>
El script jQuery:
Cuando se ha cargado el DOM y al hacer clic en el botón.
$("#box").before("<div><b>Antes</b></div>");
El script añade con el método before() una nueva caja antes del elemento caja box
$("#box").after("<div><b>Después</b></div>");
El script añade con el método after() una nueva caja después del elemento caja box
});
});
Fin del script.
En la captura de pantalla se puede observar que los elementos se han insertado en el exterior del elemento caja
inicial (box
Rodear un elemento
wrap(HTML o elemento)
Rodea cada elemento seleccionado con el elemento que se pasa como argumento. Este procedimiento es muy útil
para inyectar una estructura de código adicional en un documento sin modificar su semántica original.
$("p").wrap("<div class=’wrap’></div>");
Desde la versión 1.4, esta acción también se puede hacer por una función.
wrapAll(HTML o elemento)
Rodea todos los elementos de la selección con un único elemento. Es diferente de la función wrap(), que rodea cada
elemento de la selección con un nuevo elemento (ver los siguientes ejemplos).
$("p").wrapAll("<div></div>");
wrapInner(HTML o elemento)
Rodea los hijos de un elemento (los nodos de texto incluidos) con otro elemento.
$("p").wrapInner("<b></b>");
Desde la versión 1.4, esto también se puede hacer con una función.
unwrap()
Desde la versión 1.4, el método unwrap() permite anular la acción realizada con wrap()
$("#afectar”).click(function() {
$("p").wrap("<div></div>");
});
$("#suprimir").click(function() {
$("p").unwrap();
});
Ejemplo
Aplicamos estos métodos a un ejemplo similar a los anteriores.
Aspecto inicial donde se muestran los párrafos <p> con el texto "jQuery".
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
});
});
</script>
<style>
input{
}
.wrap {
border: 2px dashed black;
margin: 10px;
}
#box {
width: 200px;
background-color: white;
}
p {
padding-left: 3px;
}
</style>
</head>
<body>
<div id="box">
<p>jQuery</p>
<p>jQuery</p>
<p>jQuery</p>
</div>
</body>
<html>
El script jQuery con wrap()
El método wrap() rodea cada ocurrencia de párrafo <p> con la caja que tiene la clase wrap, con un color de fondo y un
borde punteado.
Con el método wrapAll() el script se transforma en:
<script>
$("p").wrapAll("<div class=’wrap’></div>");
});
});
</script>
El método wrapAll() rodea todas las ocurrencias de párrafo <p> con una única caja que tiene la clase wrap, con un
color de fondo y un borde punteado.
Para terminar, con el método wrapInner() el script sería:
<script>
$("p").wrapInner("<div class=’wrap’></div>");
});
});
</script>
El método wrapInner() rodea todos los hijos de los párrafos <p> (en este caso el nodo de texto) con la caja que tiene
la clase wrap, con un color de fondo y un borde punteado.
Sustituir un elemento
replaceWith()
Sustituye el elemento actual por el contenido especificado, en formato de código HTML o de objeto DOM. La función
devuelve el elemento jQuery que se acaba de sustituir y lo elimina del DOM.
$("#div1").replaceWith("<div>Nueva capa</div>");
Comentarios
El método html() sustituye el contenido del elemento, mientras que replaceWith() sustituye el elemento en sí mismo.
Ejemplo
Modificamos el botón de envío de formulario después de hacer clic en él. Las imágenes del ejemplo están disponibles para su
descarga desde la página Información.
Aspecto inicial donde se muestra la imagen original del botón:
Después de hacer clic en el botón, se reemplaza su imagen:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("img").replaceWith("<img src=’no.gif’ alt=’’ />");
$("span").css("text-decoration","line-through");
});
});
</script>
<style>
button {
cursor: pointer;
}
img {
float: left;
width: 30px;
height: 30px;
}
span {
float: left;
margin-top: 7px;
font: 1.2em arial,sans-serif
}
</style>
</head>
<body>
<p>mail: <input type="text" size="30"/></p>
<p><button id="yes"><img src="yes.gif" alt="">
<span>Enviar</span> </button></p>
</body>
</html>
El script jQuery:
$("img").replaceWith("<img src=’no.gif’ alt=’’ />");
Sustituye la imagen inicial por la que se pasa como argumento al método replaceWith()
$("span").css("text-decoration","line-through");
Modifica el estilo del elemento <span> tachando el texto.
});
});
Fin del script.
Eliminar un elemento
1. Borrar un elemento
remove() o remove(selector)
Elimina del árbol del DOM todos los elementos que responden a los criterios de selección.
$("p").remove(): elimina los párrafos <p>
$(’div’).remove(’.box’) elimina las cajas <div> con la clase box.
detach() o detach(selector)
La versión 1.4 de jQuery introdujo el método detach(). Es idéntico a remove(), pero conserva todos los datos
asociados a los elementos que se eliminan. Puede resultar útil cuando los datos que se eliminan se insertan más
adelante en el script.
$("p").detach(":contains(’Bienvenido’)") elimina el párrafo <p> que contiene el dato "Bienvenido".
Ejemplo
Pensemos en un botón de tipo casilla de selección (checkbox). Cuando se selecciona, se muestra un campo de línea de texto.
Cuando se deselecciona, el campo de texto desaparece.
Aspecto inicial:
Aspecto obtenido después de seleccionar la casilla:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#clic").click(function(){
if ($(this).is(":checked")){
$("#mail").append("<input id=’mas’ type=’text’>");
} else {
$("#mas").remove();
}
});
});
</script>
<style>
#mas {
margin-left: 15px;
}
</style>
<style>
</head>
<body>
<p id="mail"><input id="clic" type="checkbox"> Dirección de mail</p>
</body>
</html>
Vamos a detallar los elementos del script.
Cuando se carga el DOM y se marca la casilla de selección.
Si la casilla de selección está marcada.
$("#mail").append("<input id=’mas’ type=’text’ />");

}
El campo de texto se añade en el párrafo.
else {
Si la casilla de selección no está marcada.
$("#mas").remove();
El campo de texto se elimina.
});
});
Fin del script.
Comentario
El mismo efecto se puede obtener con los métodos show() y hide() (consulte el capítulo Los efectos Mostrar y
ocultar):
<script>
$("#mas").css("display","none");
$("#mas").show("fast");
}
else {
$("#mas").hide("fast");
}
});
});
</script>
2. Vaciar un elemento
empty()
Vacía el elemento seleccionado de todos sus nodos hijos.
$("p").empty(): elimina el contenido del párrafo.
Ejemplo
Usamos un ejemplo para ver la diferencia entre los métodos empty() y remove() .
Aspecto inicial:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#boton1").click(function () {
$("#div1").empty();
});
$("#div2").remove();
});
});
</script>
<style>
#div1, #div2 {
margin-top: 15px;
width: 100px;
height: 100px;
text-align: center;
float: left;
}
#div1 {
margin-left: 30px;
}
#div2 {
margin-left: 15px;
}
</style>
</head>
<body>
<div>
<button id="boton1">Vaciar (empty)</button>
<button id="boton2">Eliminar (remove)</button>
</div>
<div id="div1">
<p>Texto<br>Texto<br>Texto<br>Texto</p>
</div>
<div id="div2">
<p>Texto<br>Texto<br>Texto<br>Texto</p>
</div>
</body>
</html>
Al hacer clic en el botón Vaciar (empty), se elimina el contenido de la primera caja <div id="div1">, es decir
los nodos hijos. Pero la caja, que se muestra con un borde, sigue mostrándose.
Al hacer clic en el botón Eliminar (remove), el método remove() elimina toda la caja.
Al cargar el DOM.
$("#div1").empty();
});
Al hacer clic en el botón 1, el contenido de la capa 1 se vacía.
$("#div2").remove();
});
Al hacer clic en el botón 2, la capa 2 se elimina.
});
Fin del script.
Copiar un elemento
clone()
Selecciona y copia (clona) los elementos del DOM encontrados. Esta función es útil para crear copias de elementos y
desplazarlas hacia otro lugar concreto del DOM.
$("p").clone(): copia el párrafo.
Parámetros (opcional): se indica true si se desea clonar los administradores de eventos asociados a la selección.
Ejemplo
Clonamos una caja y su contenido ( <div id="div1"> ) para desplazarla a otro lugar de la página (<div id="div2"> ).
Aspecto inicial:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#div2").hide();
$("#div1").clone().prependTo("#div2");
$("#div2").show();
});
});
</script>
<style>
button {
}
#div1 {
width: 110px;
font: 0.9em arial, sans-serif;
float: left;
text-align: center;
}
#div2 {
margin-left: 20px;
float: left;
}
</style>
</head>
<body>
<button id="boton">Clonar</button><br>
<div id="div1">
<p>El reciclaje<br>
<img src="reciclaje.gif" alt=""><br>
Por el planeta</p>
</div>
</body>
</html>
Aspecto obtenido después de hacer clic en el botón "Clonar":
El código jQuery:
$("#div2").hide();
Cuando se carga el script, la caja 2 se oculta.
Al hacer clic en el botón.
$("#div1").clone().prependTo("#div2");
La caja 1 se copia (clone()) y se inserta (prependTo()) en la segunda caja.
$("#div2").show();
Se muestra la caja 2.
});
});
Fin del script.
Algunas aplicaciones
1. Añadir un pie de página y los enlaces de regreso
Vamos a añadir, con algunas líneas de jQuery, un pie de página y los enlaces de regreso hacia la parte superior de
la página.
El archivo HTML:
<!doctype html>
<html lang="es">
<head>
</head>
<body>
<h2>Título de la página</h2>
<div id="contenido">
<p> Lorem ipsum dolor sit amet...</p>
<p>Praesent commodo cursus...</p>
<p>Maecenas sed diam eget...</p>
<p>Donec ullamcorper nulla...</p>
</div>
</body>
</html>
En este estado, los pies de página y los enlaces de regreso no aparecen en el archivo HTML.
Aquí tiene el aspecto inicial:
Añadimos el código jQuery.
<script>
$(’<a id="top" name="top"></a>’).prependTo(’body’);
$("p").after("<a href=’#top’>Inicio de página</a>");
$("#contenido").after("<div id=’foot’><i>Notas de pie de
página</i></div>");
});
</script>
Explicaciones.
Inicialización del DOM en jQuery.
En primer lugar, ponemos el ancla (<a id="top" name="top"></a>)) al inicio de la página. El método prepend() se
aplica al elemento <body> y permite situar el ancla justo después.
Esta línea de código sitúa el enlace de regreso hacia la parte superior de la página (<a href=’#top’>Inicio de
página</a>) después de cada aparición del elemento <p> ... </p>
$("#contenido").after("<div id=’foot’><i>Notas de pie de página

</i></div>");
En cuanto al pie de página (<div id=’foot’><i>Notas de pie de página</i></div>), se insertará después de la

caja que contiene los diferentes párrafos.
});
Fin del script.
Este ejemplo ilustra bien, en nuestra opinión, cómo de conciso puede llegar a ser el código jQuery incluso para llevar
a cabo operaciones complicadas.
El resultado:
El archivo completo es el siguiente, con el script jQuery:
<!doctype html>
<html lang="es">
<head>
<script>
$("#contenido").after("<div id=’foot’><i>Notas de pie
de página</i></div>");
});
</script>
<style>
#foot {
border-top: 1px solid black;
margin-top: 15px;
}
</style>
</head>
<body>
<h2>Título de la página</h2>
<div id="contenido">
<p>Lorem ipsum dolor sit amet...</p>
<p>Praesent commodo cursus...</p>
<p>Maecenas sed diam eget...</p>
<p>Donec ullamcorper nulla...</p>
</div>
/body>
</html>
2. Añadir y eliminar elementos de una lista
Supongamos una lista no ordenada. Al hacer clic en un enlace, añadimos un elemento a la lista. Al hacer clic en otro
enlace, eliminamos un elemento de la lista.
Aspecto inicial:
Aspecto obtenido después de hacer clic en el enlace "Añadir un ítem":
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
var i = $(’li’).length + 1;
$(’a#add’).click(function() {
$(’<li>Item ’ + i + ’</li>’).appendTo(’ul’);
i++;
});
$(’a#remove’).click(function() {
$(’li:last’).remove();
i--;
});
});
</script>
</head>
<body>
<ul>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ul>
<p><a href="#" id="add">Añadir un ítem</a></p>
<p><a href="#" id="remove">Eliminar un ítem</a></p>
</body>
/html>
El script jQuery se articula en base a las dos operaciones siguientes.
$(’<li>Item ’ + i + ’</li>’).appendTo(’ul );
Al hacer clic en el enlace Añadir un ítem se añade, como último elemento, un elemento <li> ... </li> a la lista no
ordenada.
Al hacer clic en el enlace Eliminar un ítem se elimina el último elemento <li> ... </li> li:last
Sin embargo, hay que añadir un contador para incrementar o disminuir el número asociado al ítem.
var i = $(’li’).length + 1;
$(’<li>Item ’ + i + ’</li>’).appendTo(’ul );
i++;
});
Se añade un contador (var i). Se inicia con el número de elementos de la lista (length). Tendremos que añadir una
unidad ya que, como sucede normalmente en JavaScript, empieza sus contadores por 0. Cuando se ha añadido el
elemento de lista, se incrementa la variable i en una unidad (i++
i--;
});
De manera parecida, cada vez que se elimina un elemento de la lista, el contador i se decrementa en una unidad.
});
Fin del script.
3. Añadir un icono a los enlaces externos
Muchas veces encontramos un pequeño icono después de algunos sitios web. jQuery permite añadir fácilmente
estas pequeñas imágenes.
Aspecto obtenido después de la ejecución del script:
El icono está disponible para su descarga desde la página Información.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("a").filter(function() {
return this.hostname !== location.hostname;
})
.after(’<img src="externo.png" class="externa">’);
});
</script>
<style>
.externa {
border: none;
margin-left: 10px;
}
</style>
</head>
<body>
<p><a href="http://www.ediciones-eni.com/" title="Enlace
externo">Ediciones Eni</a></p>
<p><a href="#">Enlace interno</a></p>
<p><a href="#">Enlace interno</a></p>
</body>
</html>
Para identificar los enlaces externos, comprobamos el nombre de dominio de la página (location.hostname) con
respecto al nombre de dominio (this.hostname) de los enlaces. Nos aseguramos de que los dos son diferentes
this.hostname !== location.hostname;
.after(’<img src="externo.png" class="externa">’);
Cuando se aplica este filtro, el script inserta después del enlace (after) el icono de enlace externo (<img
src="externo.png" class="externa">
Introducción
Recorrer el DOM y trabajar con él son nociones que ya existían en JavaScript tradicional. La librería jQuery permite que
estas acciones resulten más fáciles y, sobre todo, menos tediosas. Cuando se introduce la noción de filtrado de los
elementos, jQuery, con el afán de recuperar más rápidamente los elementos, aporta un concepto innovador que
permite reducir los resultados de la búsqueda según los criterios especificados por el desarrollador.
El filtrado de los elementos del DOM
El filtrado se puede llevar a cabo en base a dos criterios:
l Mediante una expresión
l Mediante una función
1. Por una expresión
filter(expresión)
Recupera todos los elementos de la selección que responden al filtro que se pasa como parámetro.
l expresión (cadena de caracteres): expresión que se desea buscar.
$("div").filter(".selected")
Es posible prever varias expresiones, separadas por comas, para aplicar múltiples filtros de búsqueda.
$("div").filter(".selected,:first")
El método devuelve un objeto jQuery.
Ejemplo
En esta página tenemos 5 cajas <div>. Tres de ellas poseen la clase middle. Al hacer clic en un botón, pedimos a jQuery
que recupere solo los elementos con la clase middle . Otro botón restituye la página a su estado inicial.
Aspecto inicial:
Aspecto obtenido al hacer clic en el botón "Filtro clase middle":
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#filtro").click(function(){
$("div").filter(".middle")
.css("border-color", "black");
});
$("#init").click(function(){
.css("border-color", "white");
});
});
</script>
<style>
div {
width:40px;
height:40px;
margin:5px;
float:left;
border:2px solid white;
}
</style>
</head>
<body>
<p><button id="filtro">Filtro clase middle</button>
<button id="init">Estado inicial</button></p>
<div> </div>
<div class="middle"> </div>
<div> </div>
</body>
</html>
Explicaciones:
$("#filtro").click(function(){
Cuando se carga el DOM y al hacer clic en el botón Filtro clase middle
});
Aplicamos a la selección de todas las capas ($("div")) un filtro sobre la clase middle filter(".middle"). Se aplica
un borde negro a los elementos devueltos.
$("#init").click(function(){
});
Al hacer clic en el botón Estado inicial, se restablece el estado inicial aplicando un borde blanco.
});
Fin del script.
Es interesante mostrar la flexibilidad de este método usando la aplicación de otros filtros.
$("div").filter(":first").css("border-color", "black");
Se selecciona la primera caja.
$("div").filter(":last").css("border-color", "black");
Se seleccionan la última caja.
$("div").filter(":even").css("border-color", "black");
Se seleccionan las cajas impares.
$("div").filter(":odd").css("border-color", "black");
Se seleccionan las cajas pares.
$("div").filter(": first,:odd").css("border-color", "black");
Se seleccionan la primera caja y las pares.
2. Por una función
Este filtrado también se puede crear con una función que se pasa como argumento. El valor devuelto por la función
true o false) para cada elemento de la selección determinará si se conserva o no. Si la función devuelve false, el
elemento se descarta. Si la función devuelve true, el elemento se conserva.
filter(función)
Conserva todos los elementos de la selección que respondan a los criterios del filtro pasado como argumento.
$("p").filter(function(index) {
return $("ol", this).length == 0;
})
Selecciona todos los párrafos y después conserva los que tienen como elemento hijo una lista ordenada <ol>
La versión 1.4 de jQuery facilita el trabajo del desarrollador permitiendo especificar simplemente un elemento del
DOM o un objeto jQuery.
$("div").filter(document.getElementById("unico"))
$("div").filter( $("#unico"))
Devuelve todas las capas y filtra la selección conservando solo la que tiene el identificador "unico".
Ejemplo
En esta página tenemos 5 cajas <div>. Disponen de un identificador ( id) con los valores un, dos, tres, cuatro y
cinco respectivamente.
El script jQuery seleccionará la segunda y la quinta caja.
Aspecto inicial:
Aspecto obtenido después de hacer clic en el botón Filtro:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#on").click(function(){
$("div").filter(function (index) {
return index == 1 || $(this).attr("id") == "cinco";
})
});
$("#out").click(function(){
})
});
});
</script>
<style>
div {
width:40px;
height:40px;
margin:5px;
float:left;
border:2px solid white;
}
</style>
</head>
<body>
<p><button id="on">Filtro</button> <button id="out">Estado
inicial</button></p>
<div id="uno"> </div>
<div id="dos"> </div>
<div id="tres"> </div>
<div id="cuatro"> </div>
<div id="cinco"> </div>
</body>
</html>
El script jQuery recupera la segunda y la quinta caja y las rodea con un borde negro.
Vamos a detallar este script.
$("#on").click(function(){
Cuando se carga el DOM y al hacer clic en el botón Filtro
})
Las cajas se filtran por una función. Esta función indica que los elementos que se tienen que recuperar son la
segunda caja (index == 1) y la que tiene el atributo id con el valor cinco attr("id") == "cinco"). Recordemos que
en JavaScript la numeración empieza por 0.
});
Se añade un borde negro a los elementos devueltos por el código anterior.
$("#out").click(function(){
Al hacer clic en el botón Estado inicial
})
Se aplica el mismo filtro a las cajas.
El borde se vuelve blanco para dejar las cajas en su estado inicial.
});
});
Fin del script.
Encontrar un elemento concreto
El método eq() eq significa "equal") permite filtrar la búsqueda directamente a un elemento específico.
eq(index)
Reduce el resultado de la búsqueda a un elemento cuya posición se pasa como argumento (índice).
l índice (entero): determina la posición del elemento. El intervalo de las posiciones empieza en 0 y termina en el
tamaño del índice 1.
Desde la versión 1.4 de jQuery es posible usar un entero negativo. La cuenta se efectúa a partir del último elemento
hasta el primero.
$("p").eq(1): selecciona el segundo párrafo.
Ejemplo
Supongamos una tabla de cuatro filas y tres columnas. Al hacer clic en el enlace, la celda 8 adquiere un color de fondo azul.
Aspecto inicial:
Aspecto obtenido al hacer clic en el enlace:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("td").eq(7).addClass("azul");
});
});
</script>
<style>
.azul {
}
table {
width: 210px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<p><a href="#">Encontrar la celda 8</a></p>
<table>
</table>
</body>
</html>
El script jQuery:
Cuando se carga el DOM y al hacer clic en el enlace.
$("td").eq(7).addClass("azul");
Las celdas de la tabla se cargan en un objeto jQuery ($("td")). Entre ellas, se devuelve la celda cuya posición de
índice es 7 (eq(7)). A continuación se le aplica la clase azul addClass("azul")
Como las posiciones de índice empiezan por 0 (al igual que en JavaScript clásico), la posición 7 corresponde por lo
tanto a la celda 8.
});
});
Fin del script.
Encontrar una secuencia de elementos
slice(posición de inicio [,posición de fin])
Extrae una secuencia entre los elementos de la búsqueda.
l posición de inicio (entero): indica la posición del primer elemento de la secuencia. Este entero puede ser negativo.
En este caso, la selección empieza desde el final de la selección inicial.
l posición de fin (entero) (opcional): indica la posición (no incluida, estrictamente inferior) del último elemento de la
secuencia.
El índice de las posiciones empieza en 0.
$("div").slice(4, 6).css("background", "yellow");
Ejemplo
Volvamos a la tabla de cuatro filas y tres columnas. Vamos a rellenar con un color de fondo las celdas de la 4 a la 9 (es decir, la
segunda y la tercera fila).
Aspecto inicial:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("td").slice(3,9).addClass("azul");
});
});
</script>
<style>
.azul {
}
table {
width: 210px;
}
td {
text-align: center;
}
</style>
</head>
<body>
<p><a href="#">Encontrar las celdas de la 4 a la 9</a></p>
<table>
</table>
</body>
</html>
Explicaciones del script jQuery paso a paso:
Después de la carga y al hacer clic en el enlace.
El script selecciona las celdas ($("td")). Extrae la secuencia desde la posición 3 (es decir, la celda 4) hasta la posición
9 no incluida (es decir, hasta la celda 10 no incluida, por lo tanto hasta la celda 9).
});
});
Fin del script.
Comentarios
$("td").slice(3).addClass("azul");
Si no se indica la posición final, la secuencia empieza en la posición de inicio hasta el final de la selección.
Esta formulación solo devuelve un elemento de la secuencia.
$("td").slice(-2).addClass("azul");
Un valor negativo indica que la selección empieza al final de la secuencia. El valor 2 significa que devuelve dos
elementos comenzando desde el final.
$("td").slice(2,-1).addClass("azul");
El código slice(2,-1) devuelve una secuencia desde el tercer elemento hasta el penúltimo.
$("td").slice(0).addClass("azul");
De esta manera, se devuelven todos los elementos en la secuencia.
Encontrar un elemento según un criterio
is(expresión)
Indica si la selección responde al criterio que se especifica en el argumento expresión. Devuelve true o false
l expresión (cadena de caracteres): expresión que corresponde al criterio que se va a comprobar.
$(":checkbox").parent().is("form")
El método devuelve un booleano.
A partir de la versión 1.6 de jQuery, un elemento del DOM o un objeto jQuery también pueden servir de selector.
$("p").is(document.getElementById("unico"))
$("p").is( $("#único"))
Comprueba si la selección es el elemento identificado por el id="unico".
Ejemplo
Supongamos una lista de cinco elementos. Tras cada clic en un elemento de la lista, se le añade un color de fondo.
Aspecto inicial:
Aspecto obtenido después de hacer clic en el tercer elemento <li> de la lista:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("ul").click(function(event){
if ($(event.target).is("li")) {
$(event.target).addClass(’azul’);
}
});
});
</script>
<style>
.azul {
}
li {
width: 120px;
cursor: pointer;
}
</style>
</head>
<body>
<p>Demostración de <code>is()</code>:</p>
<ul>
</ul>
</body>
</html>
$("ul").click(function(event){
Cuando se carga el DOM y al hacer clic en un elemento de la lista no ordenada <ul>
if ($(event.target).is("li")) {
$(event.target).addClass(’azul’);
}
Si el clic (event.target) se realiza sobre un elemento <li> de la lista, este se resalta usando un color de fondo
addClass(’azul’)
});
});
Fin del script.
Reducir al primer elemento
first()
Reduce un conjunto de elementos seleccionados al primer elemento.
$("p span").first()
Selecciona el primer elemento <span> en los párrafos <p>
Este método devuelve un objeto jQuery
El método first() está disponible desde la versión 1.4 de jQuery.
Ejemplo
Reducimos el conjunto de elementos de una lista al primer elemento y le aplicamos una clase.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("li").first().addClass("style");
});
</script>
<style>
.style{
}
li {
width: 120px;
}
</style>
</head>
<body>
<ul>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ul>
</body>
</html>
$("li").first().addClass("style");
Del conjunto de los elementos de la lista <li> ($("li")), se recupera el primer elemento (first()) y se le añade la
clase estilo (addClass("style")
Reducir al último elemento
last()
Reduce un conjunto de elementos seleccionados al último elemento.
$("p span").last()
Selecciona el último elemento <span> en los párrafos <p>
El método last() está disponible desde la versión 1.4 de jQuery.
Ejemplo
Reducimos el conjunto de elementos de una lista al último elemento y le aplicamos una clase.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(’li’).last().addClass(’style’);
});
</script>
<style>
.style{
}
li {
width: 120px;
}
</style>
</head>
<body>
<ul>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ul>
</body>
</html>
Explicaciones:
$("li").last().addClass("style");
Del conjunto de los elementos de una lista <li> $("li")), se recupera el último elemento (last()) y se le añade la
clase style addClass("style")
Reducir a un elemento concreto
has(selector)
Reduce el conjunto de elementos seleccionados a los descendientes que corresponden al selector.
$("li").has("ul")
Selecciona los elementos <li> que tienen como descendiente el elemento <ul>
El método has()está disponible desde la versión 1.4 de jQuery.
Ejemplo
Supongamos dos listas anidadas. Añadimos un color de fondo al elemento <li> que contiene una anidación con el elemento
<ul>.
<!doctype html>
<html lang="es">
<head>
<script>
$(’li’).has(’ul’).addClass(’style’);
});
</script>
<style>
.style{
}
li {
width: 120px;
}
</style>
</head>
<body>
<ul>
<li>Ítem 1</li>
<li>Ítem 2
<ul>
<li>subítem 2a</li>
<li>subítem 2b</li>
<li>subítem 2c</li>
</ul>
</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
</ul>
</body>
</html>
Explicaciones:
$("li").has("ul").addClass("style");
Del conjunto de los elementos de la lista <li> ($("li")), recupera el elemento que contiene un elemento <ul>
entre sus descendientes (has("ul")) y le añade la clase style addClass("style")). En nuestro ejemplo, solo el ítem
2 cumple esta condición.
Eliminar un elemento
La función not() se usa para eliminar un elemento de un conjunto de elementos seleccionados.
not(selector o expresión)
Elimina de la selección el elemento que responde a la expresión especificada.
$("p").not("#selected")
Selecciona todos los párrafos que no poseen el identificador #selected
Ejemplo
Supongamos una lista no ordenada de cinco elementos.
El archivo HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(’#ejemplo li’).not(’:even’).addClass(’azul’);
});
});
</script>
<style>
.azul {
}
li {
width: 120px;
}
</style>
</head>
<body>
<p><a href="#">Demostración de <code>not()</code>:</a></p>
<ul id="ejemplo">
</ul>
</body>
</html>
El script jQuery va a seleccionar las líneas pares y a eliminar de la selección las impares.
Explicaciones.
Después de la carga y al hacer clic en el enlace.
$(’#ejemplo li’).not(’:even’).addClass(’azul’);
El script elimina de la selección los elementos cuyo índice es un número par (not(’:even’) de la lista no ordenada
$(’#ejemplo li’) A los elementos que quedan se les aplica un color de fondo, es decir, los elementos cuyo índice
es un número impar. Recuerde que el índice en JavaScript empieza en 0.
});
});
Fin del script.
Comentario
Es posible combinar las expresiones. Por ejemplo:
$(’#ejemplo li’).not(’:odd,:first’).addClass(’azul’);
De esta manera, con el código anterior, el script elimina de la selección el primer elemento y aquellos cuyo índice es
impar.
El resultado es:
Formar una tabla (array) de elementos
map(función de callback)
Devuelve una tabla de elementos (array) como resultado de una acción sobre un conjunto de elementos. Cada fila de
la tabla es el resultado de la función que se aplica a un elemento.
Función de callback: función que se aplica a los elementos de destino.
map(function(){ return $(this).val();})
Ejemplo
Creamos una tabla de tipo array con los valores de los diferentes campos de texto de un formulario.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("p").append( $("input").map(function(){
return $(this).val();
})
.get().join(", ") );
});
</script>
</head>
<body>
<form action="">
Nombre: <input type="text" name="nombre" value="Alex"><br>
Ciudad: <input type="text" name="ciudad" value="Barcelona"><br>
País: <input type="text" name="país" value="España"><br>
Mail: <input type="text" name="mail" value="alex@gmail.com">
</form>
<p><strong>Los valores son: </strong></p>
</body>
</html>
$("p").append($("input").map(function(){
return $(this).val();
})
.get().join(", ") );
El script inserta en el párrafo <p> $("p").append) los valores que devuelve el método map(), es decir, los valores (val
()) de los diferentes elementos <input> del formulario.
El método jQuery get() permite acceder a todos los elementos del formulario. Para terminar, el método JavaScript
clásico join() convierte la tabla array en una cadena de caracteres con todos los elementos separados por comas.
});
Fin del script.
Aplicaciones
1. Filtrar una lista
Supongamos una lista de frutas de diferentes variedades. Cuando se selecciona un elemento de formulario de tipo
<select>, el script solo mantendrá un tipo de fruta concreta (manzana, pera, uva o fresa).
Aspecto inicial:
Aspecto obtenido con las fresas:
Aspecto obtenido con las peras:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
var seleccion = $("#categoria").val();
//show all items
if (seleccion == "todos"){
$("li").filter(".item").show();
} else {
$("li").filter(".item").hide();
$("li").filter("."+seleccion).show();
}
});
});
</script>
<style>
ul {
width: 8em;
}
li {
padding-left: 5px;
}
</style>
</head>
<body>
<p>Seleccione la categoría:
<select id="categoria">
<option selected="selected" value="todos">Todos</option>
<option value="manzana">Manzanas</option>
<option value="pera">Peras</option>
<option value="uva">Uvas</option>
<option value="fresa">Fresas</option>
</select>
</p>
<p><input id="boton" type="button" value="Filtrar la lista"></p>
<ul>
<li class="item manzana">Arin</li>
<li class="item uva">Perleta</li>
<li class="item fresa">Marjolan</li>
<li class="item pera">Alexandrín</li>
<li class="item fresa">Charlot</li>
<li class="item manzana">Violet</li>
<li class="item manzana">Chopet</li>
<li class="item uva">Cardinal</li>
<li class="item fresa">Mami</li>
<li class="item pera">Peroil</li>
<li class="item uva">Calmeria</li>
</ul>
</body>
</html>
Después de la carga y al hacer clic en el botón Filtrar la lista
var seleccion = $("#categoria").val();
El script carga en la variable seleccion el valor que ha seleccionado el usuario de la lista de selección.
if (seleccion == "todos"){
$("li").filter(".item").show();
}
Si se selecciona Todos, se muestran todos los elementos de la lista no ordenada según un filtro que tiene la clase
item
else {
$("li").filter(".item").hide();
$("li").filter("."+seleccion).show();
}
Si se selecciona otro valor de la lista de selección, en primer lugar se oculta la lista completa de todos los elementos.
Después, los elementos de la lista no ordenada se filtran según el criterio almacenado en la variable seleccion y se
muestran.
});
});
Fin del script.
2. Filtrar una lista según dos criterios
Esta aplicación se parece a la anterior, pero esta vez se utilizan dos criterios de selección. Supongamos una lista de
coches. Una selección incluirá el año (2012, 2013, 2014) y otra el tipo de carburante (gasolina o diesel).
Aspecto inicial:
Aspecto obtenido con los criterios de selección: 2013 y Diesel.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
var año = $("#año").val();
var carburante = $("#carburante").val();
var selector_año = ’’;
var selector_carburante = ’’;
if (año == "todos" && carburante == "todos"){
$(".item").show();
} else {
if (carburante != "todos"){
selector_carburante = ’.’ + carburante;
}
if (año != "todos"){
selector_año = ’.’ + año;
}
$(".item").hide();
$("li"). filter(selector_carburante +
selector_año).show();
}
});
});
</script>
<style>
ul {
width: 11em;
}
li {
padding: 5px;
}
</style>
</head>
<body>
<p>Seleccione el año: <select id="año">
<option selected="selected" value="todos">Todos los años</option>
<option value="2014">2014</option>
</select>
</p>
<p>Seleccione el carburante: <select id="carburante">
<option selected="selected" value="todos" >Todos
los carburantes </option>
<option value="gasolina">Gasolina</option>
<option value="diesel">Diesel</option>
</select>
</p>
<p><input id="boton" type="button" value="Filtrar la lista"></p>
<ul>
<li class="item 2014 gasolina">Renault Twingo</li>
<li class="item 2013 gasolina">Renault Clio</li>
<li class="item 2012 diesel">Renault Laguna</li>
<li class="item 2013 diesel">Renault Scenic </li>
<li class="item 2012 diesel">Peugeot 607</li>
<li class="item 2014 gasolina">Peugeot 207</li>
<li class="item 2012 gasolina">Citroen C2</li>
<li class="item 2013 diesel">Citroen C3 Picasso</li>
<li class="item 2012 diesel">Citroen C4</li>
<li class="item 2014 diesel">Citroen C6 </li>
</ul>
</body>
</html>
Detallamos el script.
Después de la carga y al hacer clic en el botón.
var año = $("#año").val();

var carburante = $("#carburante").val();
var selector_año = ’’;
var selector_carburante = ’’;
Creamos una serie de variables. La variable año toma el valor que se selecciona de la primera lista de selección. La
variable carburante el de la segunda. Las variables selector_año y selector_carburante contendrán (como su
propio nombre indica) los selectores de clase del filtrado.
if (año == "todos" && carburante == "todos"){

$(".item").show();
}
Si el valor de selección de la lista de años es Todos los años y también el de la lista de carburantes Todos los
carburantes, se muestran todos los elementos de la lista no ordenada (.item
else {
if (carburante != "todos"){
selector_carburante = ’.’ + carburante
}
En caso de que no sea así, el script comprueba si la lista de selección relativa al carburante no tiene seleccionada la
opción Todos los carburantes. En este caso, la variable selector_carburante contendrá un punto (para la
clase) y el tipo de carburante devuelto.
if (año != "todos"){
selector_año = ’.’ + año
}
De manera análoga, si la lista de selección de los años no tiene seleccionada la opción Todos los años, la
variable selector_año contendrá la clase con el año devuelto.
$(".item").hide();
$(selector_carburante + selector_año).show();
Se oculta la lista completa de los elementos de la lista no ordenada. Y se muestra la lista filtrada según el
carburante y el año devueltos.
Fin del else
});
});
3. Navegación por pestañas
Esta aplicación es muy frecuente. Dependiendo de la pestaña que se pulse, se muestra un contenido diferente en la
página o, para ser más precisos, en una capa de esta.
Aspecto inicial, se muestra la página 1
Aspecto obtenido después de hacer clic en el botón página 2
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
var cajas_pagina = $(’div.menu > div’);
cajas_pagina.hide().filter(’:first’).show();
$(’div.menu ul.navegacion a’).click(function () {
cajas_pagina.hide();
cajas_pagina.filter(this.hash).show();
$(’div.menu ul.navegacion a’).removeClass(’selected’);
$(this).addClass(’selected’);
return false;
});
});
</script>
<style>
body {
padding: 0px;
margin: 15px;
font: 90% arial, sans-serif;
}
ul.navegacion {
padding: 0px;
line-height: 40px;
overflow: hidden;
}
ul.navegacion li {
display: inline;
}
ul.navegacion li a {
padding-top: 3px;
background-color: #ccc;
padding-left: 5px;
padding-right: 5px;
color: #000;
line-height: 27px;
overflow: hidden;
}
ul.navegacion li a.selected {
color: #000;
padding-top: 7px;
}
ul.navegacion li a:hover {
color: #000;
padding-top: 7px;
}
div.menu > div {
padding: 5px;
margin-top: 3px;
}
#uno {
margin-top: 25px;
padding-left: 7px;
padding-right: 7px;
}
#dos {
margin-top: 25px;
padding-left: 7px;
padding-right: 7px;
}
#tres {
margin-top: 25px;
padding-left: 7px;
padding-right: 7px;
}
</style>
</head>
<body>
<div class="menu">
<ul class="navegacion">
<li><a href="tabs.htm#uno">página 1</a></li>
<li><a href="tabs.htm#dos">página 2</a></li>
<li><a href="tabs.htm#tres">página 3</a></li>
</ul>
<div id="uno">
<h3>página 1</h3>
<p>lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore y dolore magna aliqua. ut
enim ad minim veniam, quis nostrud exercitación ullamco laboris nisi
ut aliquip ex ea commodo consequat.</p>
</div>
<div id="dos">
<h3>página 2</h3>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus
dolor auctor. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Vestibulum id ligula porta felis
euismod semper. Donec id elit non mi porta gravida at eget metus.</p>
</div>
<div id="tres">
<h3>página 3</h3>
<p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor
sit amet, consectetur adipiscing elit,. Maecenas sed diam eget risus
varius blandit sit amet. Donec sed odio dui. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Lorem ipsum dolor sit met,
consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.</p>
</div>
</div>
</body>
</html>
Explicaciones:
var cajas_pagina = $(’div.menu > div’);
Cuando se carga la página, se cargan los elementos <div> hijos de <div id="menu"> en la variable cajas_pagina
cajas_pagina.hide()
.filter(’:first’).show();
En primer lugar, las diferentes páginas se ocultan para reiniciar el proceso. Sin embargo, se mostrará por defecto la
primera página (filter(’:first’)
$(’div.menu ul.navigation a’).click(function () {

cajas_pagina.hide();
cajas_pagina.filter(this.hash).show();
Al hacer clic en una pestaña, se oculta el contenido anterior (hide()) y el método de filtrado (filter(this.hash)) se
aplica para devolver la pestaña correspondiente, la cual se muestra (show()). Se usa la propiedad JavaScript
(clásica) window.location.hash, que permite recuperar el enlace de una URL.
$(’div.menu ul.navigation a’).removeClass(’selected’);
$(this).addClass(’selected’);
return false;
Se aplica la clase selected a la pestaña que ha seleccionado el usuario.
});
});
Fin del script.
Introducción
En algunos años, AJAX (Asynchronous JavaScript and XML) se ha hecho un hueco indiscutible en el diseño de páginas
web. Su aparición responde al concepto de Web 2.0 que, de alguna manera, ha sido el responsable por su enfoque
innovador y por las técnicas nuevas que aporta.
La librería de jQuery tenía que contemplar AJAX. Vamos a ver en este capítulo la extrema concisión del código y la
facilidad que aporta jQuery en esta materia.
Todo nuestro estudio se ha desarrollado, hasta ahora, en el lado cliente, lo que resultaba muy práctico, ya que basta
con un editor de texto y un navegador. Es este capítulo dedicado a AJAX es útil, aunque no imprescindible, la
instalación de un servidor web local, también llamado servidor web personal, para probar el código sin pasar por el
procedimiento obligatorio de descarga por FTP.
Para utilizar un servidor local en Windows puede utilizar WAMPserver http://www.wampserver.com o XAMPP
https://www.apachefriends.org/es/index.html. Son paquetes de servidores gratuitos (Apache, MySQL y PHP) muy fáciles
de instalar y usar. En Mac MAMPP https://www.mamp.info/en/, resulta igual de fácil de utilizar.
Las consultas AJAX abreviadas
1. Cargar un archivo
El método load() permite cargar un archivo de manera muy sencilla, siguiendo el procedimiento que aplica AJAX.
Más adelante detallaremos el método ajax() (consulte la sección La consulta AJAX completa, en este capítulo), que
permite efectuar la misma operación de manera más sofisticada y detallada. Para el desarrollador principiante o
para las aplicaciones sencillas, el método load() es suficiente y, gracias a su sencillez, hace las delicias de los
diseñadores.
load(url[, datos,][, función])
Carga el código HTML (o XHTML) a partir de un archivo determinado y lo sitúa en el elemento seleccionado.
l url: una cadena de caracteres que contiene la URL del archivo HTML que se quiere cargar.
l datos (opcional): lista de pares en forma de clave/valor que se enviarán como datos al servidor.
l función (opcional): la función que se debe ejecutar si la consulta tiene éxito. Por defecto, los datos se cargan en el
elemento seleccionado.
$("div").load("test.htm"): carga los datos del archivo test.htm y los ubica en la capa <div>
Se devuelve el método GET por defecto, salvo si se pasan los datos como argumento.
Cuidado, tenga en cuenta que la versión 3 de jQuery indica que los métodos load() y unload() son obsoletos.
Presentamos este ejemplo en un afán de retrocompatibilidad con antiguos desarrollos.
Ejemplo
Cargar en una misma capa contenidos diferentes que provengan de dos archivos HTML distintos usando dos botones.
Aspecto inicial:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#boton1").click(function() {
$("div").load("fichero1.html");
});
});
});
</script>
<style>
div {
width: 300px;
height: 250px;
padding: 5px;
}
</style>
</head>
<body>
<p><button id="boton1">Fichero 1</button>
<button id="boton2">Fichero 2</button></p>
<div> </div>
</body>
</html>
Entre otras cosas prevemos también en el servidor el archivo fichero1.html que contiene solamente el siguiente
código HTML:
<!doctype html>
<html lang="es">
<head>
</head>
<body>
<h3>Fichero 1</h3>
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Donec ullamcorper nulla non metus auctor
fringilla. Duis mollis, est non commodo luctus, nisi erat
porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed
diam eget risus varius blandit sit amet non magna. Etiam porta
sem malesuada magna mollis euismod. Donec id elit non mi porta
gravida at eget metus.</p>
</body>
</html>
Este es el contenido del archivo fichero2.html
<!doctype html>
<html lang="es">
<head>
</head>
<body>
<h3>Fichero 2</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Curabitur blandit tempus porttitor. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
Donec id elit non mi porta gravida at eget metus. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Donec sed odio
dui.</p>
</body>
</html>
El script jQuery debe, al hacer clic en el botón 1, cargar en la caja <div> el archivo fichero1.html y, al hacer clic en
el botón 2, el archivo fichero2.html
Carga del primer archivo:
Carga del segundo archivo:
Inicialización de jQuery al cargar el DOM.
});
Al hacer clic en el botón 1 ($("#boton1").click()), cargamos el archivo fichero1.html(load

("fichero1.html")) en la caja <div>
});
Al hacer clic en el botón 2 ($("#boton2").click()), cargamos el archivo fichero2.html(load

("fichero2.html")) en la caja <div>
});
Fin del script.
2. Cargar solo en caso de modificación
El método loadIfModified(), equivalente al método load() que hemos visto en el punto anterior, solo carga el
archivo si se ha modificado desde la última consulta.
loadIfModified(url[, datos,][, función])
Carga el código HTML a partir de un archivo determinado y lo ubica en el elemento seleccionado si el archivo se ha
modificado desde la última consulta.
l url: una cadena de caracteres que contiene la URL del archivo HTML que se va a cargar.
l función (opcional): la función que se debe ejecutar si la consulta tiene éxito. Por defecto, los datos se cargan en el
elemento seleccionado.
$("div").loadIfModified("test.htm"): carga los datos del archivo test.htm y solo los ubica en la capa <div> si el
archivo ha cambiado desde la última consulta.
3. Cargar siguiendo el método GET o POST
Otras formas abreviadas que ofrece jQuery para realizar consultas AJAX son los métodos $.get() y $.post()
$.get(url[, datos][, función][, tipo])
Carga un archivo del servidor mediante una consulta HTTP GET.
l url: una cadena de caracteres que contiene la URL del archivo que se quiere cargar.
l función (opcional): la función que se debe ejecutar si la consulta tiene éxito.
l tipo (opcional): cadena de caracteres que especifica el tipo de datos que se transmiten a la función: "xml", "html",
"script", "json", "jsonp" o "text".
$.get("test.html", function(data){
$("#resultado").html(data);
});
$.get("test.cgi", {nombre: "Román", cuidad: "Tarragona"},
function(data){alert("Datos cargados: " + data);}
);
Este método devuelve un objeto XMLHttpRequest.
$.post(url[, datos][, función][, tipo])
Carga un archivo del servidor mediante una consulta HTTP POST.
l url: una cadena de caracteres que contiene la URL del archivo que se quiere cargar.
l función (opcional): la función que se debe ejecutar si la consulta tiene éxito.
l tipo (opcional): cadena de caracteres que especifica el tipo de datos que se transmiten a la función: "xml", "html",
"script", "json", "jsonp" o "text".
$.post("test.html", function(data){
});
$.post("resultado.php", {nombre: "Carla"},

function(data){$("#box").html(data);}
);
Ejemplo
Al hacer clic en un botón, cargamos y mostramos en una capa el contenido bruto de un archivo HTML. Se usa el método $.get
() .
Aspecto inicial:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#boton").on("click", function() {
$.get("lorem.htm", function(contenido){
$("#caja").append(contenido);
});
});
});
</script>
<style>
#caja {
width: 215px;
height: 100px;
}
</style>
</head>
<body>
<p><button id="boton">Cargar</button></p>
<div id="caja"> </div>
</body>
</html>
El archivo que se carga en el servidor (lorem.html) tiene el contenido siguiente:
Lorem ipsum curabitur blandit tempus porttitor. Cum sociis natoque

penatibus et magnis dis parturient montes, nascetur ridiculus mus.
El script jQuery usa $.get() para cargar el archivo desde el servidor y lo muestra en la caja "caja", rodeada con un
borde.
Aspecto obtenido al hacer clic en el botón:
Inicialización del DOM y de jQuery.
$("#boton").on("click", function() {
$.get("lorem.html", function(contenido){
$("#caja").append(contenido);
});
La consulta se hace por $.get(), que pide el archivo lorem.html. Después, una función añade (append()) el
contenido del archivo en la caja identificada por caja
});
});
Comentario
En paralelo a loadIfModified( url[, datos,][, función]), también existe el método $.getIfModified( url[,
datos][, función][, tipo]). Su funcionamiento es idéntico.
Por el contrario, no existe la opción IfModified con $.post(), ya que con POST las páginas nunca van a la caché.
4. Cargar un script
$.getScript(url[, función])
Carga un script JavaScript del servidor usando el método HTTP GET y ejecutándolo.
l url: una cadena de caracteres que indica la dirección en la que se encuentra el script que desea cargar.
l función (opcional): una función que se debe ejecutar si la consulta tiene éxito. Normalmente, esta función no es
necesaria, ya que el script se ejecuta automáticamente.
$.getScript("test.js");
Ejemplo
Mostrar un mensaje de alerta para indicar que el JavaScript se ha cargado desde el servidor.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#boton").click(function() {
$.getScript("alerta.js");
});
});
</script>
</head>
<body>
<p><button id="boton">Cargar el script</button></p>
</body>
</html>
El mensaje de alerta está incluido en el archivo alerta.js
alert("¡Vengo del servidor!");
El script jQuery va, al hacer clic en el botón, a cargar el archivo alerta.js y lo ejecuta.
La consulta AJAX completa
Este método permite realizar una consulta AJAX controlando los diferentes argumentos y etapas, gracias a las
numerosas opciones disponibles.
ajax(options)
Ejecuta una consulta HTTP asíncrona (AJAX).
$.ajax({
url: "test.htm",
success: function(data ) {
$().log("Terminada");
},
});
El método devuelve un objeto XMLHttpRequest.
Vamos a revisar las numerosas opciones disponibles.
l url (obligatoria): cadena de caracteres que contiene la dirección de la consulta.

l type (opcional): cadena de caracteres que define el método HTTP que se va a usar para la consulta (GET o POST). El
valor por defecto es GET. Se pueden usar otros métodos de envío HTTP, como PUT o DELETE, pero no están soportados
por todos los navegadores.
l dataType (opcional): cadena de caracteres que especifica el formato de los datos que se enviarán por el servidor
(xml, HTML, json o script). Si no se especifica nada, jQuery usa el tipo MIME para determinar el formato adecuado:
responseXML o ResponseText . Los tipos disponibles son:
n xml: devuelve un documento XML que podrá tratarse con jQuery.

n html: devuelve código HTML en formato texto.
n script: evalúa la respuesta en JavaScript y la devuelve en formato texto.
n json: evalúa la respuesta en JSON y devuelve un objeto JavaScript.
l ifModified (opcional): valor booleano que indica si el servidor debe comprobar que los datos devueltos sean
diferentes a la última consulta antes de devolver el archivo con éxito. Por defecto, esta opción vale false .
l timeout (opcional): número de milisegundos tras el cual la consulta se considera como fallida.
l global (opcional): valor booleano que permite lanzar la ejecución del visor de eventos global de AJAX. Por defecto,
el valor es true . Con un valor false , se ignoran la producción de eventos de tipo ajaxStart() o ajaxStop().
l beforeSend (opcional): función que se debe ejecutar antes del envío de la consulta. Permite modificar el objeto
XMLHttpRequest antes de que se envíe para especificar, por ejemplo, encabezados HTTP personalizados.
l error (opcional): función que se debe ejecutar si falla la consulta. La función recibe tres argumentos: el objeto
XMLHttpRequest , una cadena de caracteres que describe el tipo de error que se ha producido y un objeto exception, si
se ha creado.
l success (opcional): función que se invoca si la consulta se ejecuta con éxito. Solo se pasa un argumento, que
representa los datos devueltos por el servidor.
l complete (opcional): función que se tiene que ejecutar cuando la consulta termina. La función recibe dos
argumentos: el objeto XMLHttpRequest y una cadena de caracteres que describe el tipo de éxito de la consulta.
l data (opcional): datos que se envían al servidor. El objeto debe estar en forma de pares de clave/valor. Los datos se
convierten en cadena de caracteres (si no lo están ya). Consulte la opción processData más adelante para evitar
este proceso automático.
l processData (opcional): valor booleano que indica si los datos de la opción data se deben convertir a cadena de
caracteres. El valor por defecto es true . Para impedir la conversión, pase este valor a false .
l contentType (opcional): cadena de caracteres que contiene el MIME de los datos cuando se envían al servidor. Por
defecto, se conserva el MIME aplication/xwwwformurlencoded.
l async (opcional): valor booleano que indica si la consulta se debe efectuar de manera asíncrona. El valor por defecto
para una consulta AJAX es true .
Hay disponible otras opciones, aunque se usan con menos frecuencia. Algunas son:
l cache (opcional): valor booleano que, si su valor es false , impide ubicar en la caché del navegador la página
cargada.
l password (opcional): si el acceso HTTP de la consulta requiere una contraseña.

l username (opcional): si el acceso HTTP de la consulta requiere un nombre de usuario (username).
l scriptCharset (opcional): fuerza a las consultas de tipo script a interpretarse con un juego de caracteres
particular.
l xhr (opcional) permite crear el ActiveXObject (Internet Explorer) o el XMLHttpRequest (para el resto).
l statusCode (opcional) permite invocar a una función cuando se produce un error con un código específico. Es una
novedad de la versión 1.5. de jQuery.
El método ajax() se ha reescrito completamente en la versión 1.5 de jQuery para aumentar su rendimiento e integrar
las funciones diferidas (consulte la sección Las funciones diferidas, en este capítulo). Los desarrolladores de jQuery lo
usan para añadir algunos parámetros que sobrepasan, con mucho, el marco operativo de este libro (contents
header isLocal mimeType xhrFields). Los lectores que estén interesados pueden encontrar la documentación oficial
de jQuery en: http://api.jquery.com/jQuery.ajax/
Comentarios
La forma más sencilla de esta función $.ajax() debe especificar, al menos, la URL de los datos que se deben cargar.
$.ajax({
url: "test.htm",
});
En la sección Definir una consulta por defecto de este capítulo vamos a ver que, a su vez, este único parámetro
puede convertirse en opcional con el método ajaxSetup()
Observe que el método ajax() carga los contenidos de la URL especificada, pero (a diferencia de load(), por ejemplo)
no hace nada con dicho contenido. Para que este contenido aparezca en la página, hay que indicar las operaciones
que deben ejecutarse usando las funciones asociadas a las opciones success o complete
$.ajax({
url: "test.htm",
success: function(data ) {
$("div").html(data);
},
});
De esta manera, en caso de éxito de la consulta, los datos que carga en la dirección test.htm se muestran como HTML
en la capa <div>
Para operaciones tan sencillas como las del ejemplo es mejor usar load() o $.get()
Ejemplo
Al hacer clic en un enlace, cargamos y mostramos el contenido de un archivo HTML que proviene del servidor.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(’a’).click(function() {
$(’a’).hide();
$("#contenido").empty();
$.ajax({
url: ’peliculas.html’,
async: true,
type: ’GET’,
global: false,
cache: false,
success: function(html){
$("#contenido").append(html)
}
});
});
});
</script>
</head>
<body>
<p>Películas de culto frikis</p>
<p><a href="#">Cargar las películas</a></p>
<div id="contenido"> </div>
</body>
</html>
Aspecto inicial:
El archivo HTML que se va a cargar (peliculas.html) incluye la siguiente lista:
<!doctype html>
<html lang="es">
<head>
</head>
<body>
<ul>
<li>Regreso al futuro</li>
<li>Matrix</li>
<li>Tron</li>
<li>Star Wars</li>
<li>Star Trek</li>
<li>El señor de los anillos</li>
</ul>
</body>
</html>
El script jQuery debe ejecutar una consulta AJAX sobre el archivo peliculas.htm y mostrar el contenido en la capa
contenido de la página.
Aspecto obtenido después de la carga y la visualización:
Carga del DOM.
$(’a’).click(function() {
Al hacer clic en el enlace <a>
$(’a’).hide();
El enlace y su contenido se ocultan.
$("#contenido").empty();
Se vacía el contenido de la capa contenido
$.ajax({
url: ’peliculas.htm’,
async: true,
type: ’GET’,
global: false,
cache: false,
success: function(html){
$("#contenido").append(html)
}
});
La consulta AJAX de jQuery carga el archivo peliculas.htm. El proceso se lleva a cabo de modo asíncrono. Se usa el
método HTTP GET. El administrador de eventos global de AJAX se desactiva. El archivo que proviene del servidor no va
a la caché. Por último, si la consulta tiene éxito, los datos del archivo que se ha cargado se añaden a la capa
contenido
});
});
Fin del script.
Definir una consulta por defecto
Como se sugiere en el punto anterior, es posible definir la URL por defecto de las consultas AJAX de la página
(siempre y cuando sea idéntica para todas las consultas AJAX de la página).
ajaxSetup(parámetros)
Define los parámetros globales para todas las consultas AJAX de la página.
$.ajaxSetup( {
url: test.htm",
global: false,
type: "POST"
});
Todas las consultas AJAX de la página se configuran con la URL indicada, el administrador de eventos AJAX se
desactiva y los envíos se realizan usando el método POST, en lugar de GET.
De esta manera, la URL por defecto se puede definir con el código:
$.ajaxSetup({
url: "test.htm",
});
Cada vez que se realiza una consulta, la URL se usa automáticamente. De esta manera, basta con escribir:
$.ajax({});
Los eventos asociados a la consulta
1. ajaxSend()
ajaxSend(función)
Asigna una función que se ejecuta antes del envío de la consulta AJAX.
$(document).ajaxSend(function(){
$(this).show();
});
Desde la versión 1.8 de jQuery, los eventos asociados a la consulta como ajaxSend(), ajaxStart(),
ajaxStop(), ajaxSuccess(), ajaxComplete() y ajaxError() solo se pueden vincular con
document.
Ejemplo
Mostrar un mensaje antes de que empiece la consulta.
Aspecto inicial:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#mensaje").hide();
$("#resultado").hide();
$(document).ajaxSend(function() {
$("#mensaje").append("¡Mensaje antes de que arranque AJAX!").show();
});
$("a").click(function() {
$("#resultado").load("a.html");
});
});
</script>
<style>
#mensaje {
width: 260px;
}
</style>
</head>
<body>
<h3>ajaxSend()</h3>
<p><a href="#">Iniciar AJAX</a></p>
<div id="mensaje"> </div>
<div id="resultado"> </div>
</body>
</html>
Vamos a explicar las diferentes líneas del código jQuery.
Carga de jQuery.
Cuando se carga la página, se oculta la capa mensaje, que contendrá el mensaje asociado al evento ajaxSend()
Se oculta la capa resultado, que contendrá el contenido del archivo cargado, ya que este contenido no tiene
importancia en este ejemplo.
$(document).ajaxSend(function() {
$(this).append("¡Mensaje antes de que arranque AJAX!").show();
});
Cuando se produce el evento ajaxSend(), se añade la frase "¡Mensaje antes de que arranque AJAX!" a la capa
mensaje y se hace visible.
});
Al hacer clic en el enlace, se carga el archivo y se inserta en la capa resultado. Recuerde, esta capa se ha
ocultado al inicio del script.
});
Fin de jQuery.
2. ajaxStart()
ajaxStart(función)
Asigna una función que se tiene que ejecutar cuando comienza una consulta AJAX.
$(document).ajaxStart(function(){
$(this).show();
});
Ejemplo:
Aplicado al ejemplo anterior, con ajaxStart() el documento HTML se convierte en:
<!doctype html>
<html lang="es">
<head>
<script>
$(document).ajaxStart(function() {
$("#mensaje").append("¡La consulta AJAX va a comenzar!").show();
});
});
});
</script>
<style>
#mensaje {
width: 260px;
}
</style>
</head>
<body>
<h3>ajaxStart()</h3>
</body>
/html>
Aspecto después de hacer clic en el enlace:
3. ajaxStop()
ajaxStop(función)
Asigna una función que se ejecuta cada vez que termina una consulta.
Ejemplo
Aplicado al ejemplo anterior, con ajaxStop() el documento HTML se convierte en:
<!doctype html>
<html lang="es">
<head>
<script>
$(document).ajaxStop(function() {
$("#mensaje").append("¡La consulta AJAX ha terminado!").show();
});
});
});
</script>
<style>
#mensaje {
width: 260px;
}
</style>
</head>
<body>
<h3>ajaxStop()</h3>
</body>
</html>
4. ajaxSuccess()
ajaxSuccess(función)
Asigna una función que se ejecuta cada vez que termina con éxito una consulta AJAX.
Ejemplo
Aplicado al ejemplo anterior, con ajaxSuccess() el documento HTML se convierte en:
<!doctype html>
<html lang="es">
<head>
<script>
$(document).ajaxSuccess(function() {
$("#mensaje").append("¡La consulta AJAX ha sido exitosa!").show();
});
});
});
</script>
<style>
#mensaje {
width: 260px;
}
</style>
</head>
<body>
<h3>ajaxSuccess()</h3>
</body>
</html>
5. ajaxComplete()
ajaxComplete(función)
Asigna una función que se ejecuta cuando termina el proceso completo de la consulta AJAX.
Ejemplo:
Aplicado al ejemplo anterior, con ajaxComplete() el documento HTML se convierte en:
<!doctype html>
<html lang="es">
<head>
<script>
$(document).ajaxComplete(function() {
$("#mensaje").append("¡La consulta AJAX ha terminado!").show();
});
});
});
</script>
<style>
#mensaje {
width: 260px;
}
</style>
</head>
<body>
<h3>ajaxComplete()</h3>
div id="resultado"> </div>
</body>
</html>
6. ajaxError()
ajaxError(función)
Asigna una función que se ejecuta si la consulta AJAX falla.
Ejemplo
Retomamos nuestro archivo de ejemplo, pero (voluntariamente) con una URL que no existe en el servidor, por ejemplo x.html.
La ausencia de archivo impide que la consulte AJAX se ejecute correctamente y esto provoca un error.
Aplicado al ejemplo anterior, con ajaxError() el documento HTML se convierte en:
<!doctype html>
<html lang="es">
<head>
<script>
$(document).ajaxError(function() {
$("#mensaje").append("¡Error en la consulta!").show();
});
$("#resultado").load("x.html");
});
});
</script>
<style>
#mensaje {
width: 260px;
}
</style>
</head>
<body>
<h3>ajaxError()</h3>
</body>
</html>
Las funciones diferidas
La versión 1.5 de jQuery introdujo el concepto de objetos diferidos, que permiten administrar, en el futuro, los
elementos que no existen todavía en el instante presente. Esto es habitual en las consultas AJAX asíncronas.
En las versiónes anteriores de jQuery solo se gestionaban las situaciones de éxito (success) o fracaso (error) de las
consultas AJAX. Ahora, los objetos diferidos permiten externalizar las funciones de llamada fuera del contexto de la
consulta, sin preocuparse del momento en que termine la consulta AJAX.
Esta característica, importante en la gestión de las consultas AJAX, ya estaba presente en los frameworks JavaScript
Dojo y MochiKit. Los desarrolladores ahora pueden disponer en jQuery de este avance destacado a nivel de la
programación de los procesos asíncronos.
Con jQuery, estos objetos diferidos no se limitan a las consultas AJAX y también se pueden usar en otros contextos.
La siguiente tabla proporciona las principales funcionalidades de estos objetos diferidos.
jQuery.Deferred() Crea un nuevo objeto diferido. Este objeto diferido puede tener tres estados: no resuelto
(unresolved), resuelto (resolved) o rechazado (rejected). Este método Deferred() puede
recibir como parámetro una función que se ejecutará cuando se haya creado el objeto
diferido.
jQuery.when() Permite definir las funciones que se tienen que ejecutar cuando se han realizado una o
varias funciones.
deferred.then() Determina las funciones que se tienen que invocar cuando el objeto diferido se resuelve o
se rechaza. Este método recibe dos argumentos: la función que se invoca cuando el objeto
diferido tiene el estado de resuelto y la función que se invoca cuando el objeto diferido
tiene el estado rechazado.
deferred.done() Llamada de funciones cuando el objeto diferido se resuelve.
deferred.fail() Llamada de funciones cuando el objeto diferido se rechaza.
deferred.always() Llamada de funciones que siempre se ejecutarán, independientemente de si el objeto

diferido se resuelve o se rechaza.
deferred.isResolved Permite saber si el objeto diferido tiene el estado resuelto.
deferred.isRejected Permite saber si el objeto diferido tiene el estado rechazado.
deferred.resolve() Da al objeto diferido el estado resuelto e invoca a las funciones definidas por deferred.done
().
deferred.reject() Da al objeto diferido el estado rechazado e invoca a las funciones definidas por
deferred.fail().
Vamos a ver un primer ejemplo para ilustrar esta noción, muy abstracta, de los objetos diferidos.
Ejemplo 1
Ejecutamos una función diferida después de la ejecución de otras dos funciones (función 1 y función 2). Vamos a añadir un
temporizador setTimeout para separar la ejecución de estas dos funciones. Estas funciones no se ejecutan en un contexto de
consultas asíncronas.
Aspecto obtenido después de hacer clic en el botón "Comenzar":
A las 09:46:12, empieza la ejecución del script. Se crean los objetos diferidos 1 y 2. En este estado, el código de la
función diferida ya está presente, pero su ejecución está diferida.
A las 09:46:13, gracias al temporizador, se ejecuta la función 1 y el código da al objeto diferido 1 el estado resuelto.
A las 09:46:14, gracias al temporizador, se ejecuta la función 2 y el objeto diferido 2 toma a su vez el estado
resuelto.
Ahora que se han ejecutado las dos funciones, se ejecuta la función diferida.
El código es el siguiente:
<!doctype html>
<html lang="es">
<head>
<script>
function log(mensaje) {
var texto= $("#consola").html();
var time = new Date().toTimeString();
time = time.substring(0, time.indexOf(’ ’));
texto += time + ": " + mensaje + "<br>";
$("#consola").html(texto);
}
function funcion1() {
var deferred = $.Deferred(log("Creación del objeto diferido 1"));
setTimeout(function() {
log("La función 1 se ha realizado");
deferred.resolve(log("El objeto diferido 1 tiene el estado
resuelto"));
},
1000);
return deferred;
}
log("La función 2 se ha realizado");
deferred.resolve(log("El objeto diferido 2 tiene el estado
resuelto<div> <div>"));
},
2000);
return deferred;
}
function run() {
log("El script empieza");
$.when(funcion1(), funcion2())
.then(
function() {log("<b>La función diferida se ha realizado<b>");},
function() {log("<i>La función diferida no se ha realizado</i>");}
);
log("El script termina<div> <div>");
}
$(function() {
run();
});
});
</script>
#consola {
font-family: Arial;
font-size: 14px;
padding-left: 5px;
width: 320px;
}
#boton {
margin-top:15px;
}
</style>
</head>
<body>
<p><input type="button" value="Comenzar" id="boton" /></p>
<p>Consola:</p>
<div id="consola"> </div>
</body>
</html>
Todo esto invita a presentar algunas explicaciones.
}
Esta función log() sirve para mostrar en la caja consola los diferentes mensajes que produce este script.
Pasemos a la parte principal del script (la función run()
function run() {
Un primer mensaje indica que el script empieza.
$.when(funcion1(), funcion2()) .then(

function() {log("<b>La función diferida se ha realizado<b>");},
function() {log("<i>La función diferida no se ha realizado</i>");}
);
Esta parte aborda el código de la función diferida. Cuando (when) las funciones 1 y 2 se completan, entonces (then) se
muestra el texto "La función diferida se ha realizado" en la consola. Si este no es el caso, se muestra el texto "La
función diferida no se ha realizado".
log("El script termina<div> <div>");

}
Se muestra un pequeño mensaje para anunciar el fin del script principal.
Veamos el funcionamiento de la función 1 (funcion1
Empieza creando un objeto diferido (var deferred = $.Deferred), lo que se confirma con el mensaje.
setTimeout(function() {log("La función 1 se ha realizado");

deferred.resolve(log("El objeto diferido 1 tiene el estado resuelto"));},
1000);
return deferred;
}
El temporizador setTimeout ejecuta la función después de 1 segundo (1000). Esta consiste simplemente en mostrar
log) el texto "La función 1 se ha realizado" y en dar al objeto diferido el estado resuelto (deferred.resolve()), lo
que se confirma con otro mensaje.
La función 2 (funcion2()) se inspira en la función 1, fijando el temporizador en 2 segundos.
Ejemplo 2
Continuando con el ejemplo anterior, añadimos una casilla de selección que permite asignar el estado rechazado al objeto
diferido. Esta vez llamamos a consultas asíncronas.
Si no se rechaza ningún objeto diferido, se ejecuta la función diferida después de la ejecución de las dos consultas
AJAX.
Aspecto obtenido después de hacer clic en el botón "Comenzar":
Si un objeto diferido se rechaza, se muestra un mensaje de alerta después de la ejecución de las dos consultas AJAX.
Aspecto obtenido al seleccionar la opción "Rechazar el objeto diferido 1":
El código utilizado:
<!doctype html>
<html lang="es">
<head>
<script>
}
$.ajax({ url: "opcion1.htm",
success: log("La consulta AJAX 1 se ha realizado") });
interna();
},
1000);
return deferred;
function interna() {
if ($("#rechazar1:checked").val() == "on")
deferred.reject(log("La función 1 se ha rechazado"));
else
deferred.resolve();
}
}
interna();
},
2000);
return deferred;
else
deferred.resolve();
}
}
function run() {
$.when(funcion1(), funcion2()).then(
function() {log("<b>La función diferida se ha
realizado</b>");},
function() {alert("La función diferida no se ha ejecutado");}
);
log("El script termina");
}
$(function() {
run();
});
});
</script>
<style>
#consola { font-family: Arial;
font-size: 14px;
padding-left: 5px;
width: 350px;}
#boton { margin-top:15px;
}
</style>
</head>
<body>
<p><input type="checkbox" id="rechazar1"> Rechazar el objeto diferido 1</p>
<p><input type="checkbox" id="rechazar2"> Rechazar el objeto diferido 2</p>
<p><input type="button" value="Comenzar" id="boton"></p>
<div id="consola"> </div>
</body>
</html>
El archivo a descargar es el C106.b.html
Explicaciones:
...
}
Como en el ejemplo 1, la función log() sirve para mostrar los mensajes.
function run() {
Un primer mensaje indica que el script empieza.
$.when(funcion1(), funcion2()).then(
function() {log("<b>La función diferida se ha realizado</b>");},
function() {alert("La función diferida no se ha ejecutado");}
);
Esta parte aborda el código de la función diferida. Cuando (when) las funciones 1 y 2 se completan, entonces (then) se
muestra el texto "La función diferida se ha realizado" en la consola. En caso contrario, se muestra un mensaje de
alerta.
log("El script termina");

}
Se muestra un pequeño mensaje para anunciar el fin del script principal.
Veamos la función 1.
Creación del objeto diferido y visualización de un mensaje de confirmación.
interna();},
1000);
return deferred;
Se difiere (setTimeout) la ejecución de la consulta AJAX ($.ajax) un segundo. Esta carga el archivo opcion1.htm
url: "opcion1.htm") y muestra un mensaje cuando termina con éxito (success: log(...)). También llamamos a la
función interna(), que gestiona el estado del objeto diferido.
Si la primera casilla de selección está activada, el objeto diferido se rechaza (deferred.reject) y se muestra un
mensaje en la consola.
else
deferred.resolve();
}
}
Si la primera casilla de selección no está activada, el objeto diferido se marca como resuelto (deferred.resolve()
La función 2 usa el mismo esquema, pero con una consulta AJAX sobre el archivo opcion2.htm y un retraso de 2
segundos.
Serializar los datos
Este método transforma los datos de los campos del formulario en una cadena de caracteres que los contiene.
Este proceso resulta muy útil si se desea enviar estos datos al servidor para una consulta AJAX en un formato
compatible con la mayoría de lenguajes de programación del lado servidor.
Para el correcto funcionamiento del método serialize(), los campos del formulario deben tener un atributo name
serialize()
Transforma los datos de los campos del formulario en una cadena de caracteres.
$("form").serialize();
serializeArray()
Transforma los datos de los campos de formulario en una variable Array.
Este método devuelve un objeto Array.
Ejemplo
Supongamos un formulario de inicio.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(’button’).on("click", function() {
var str = $("form").serialize();
$("#resultado").text(str);
});
});
</script>
<style>
#resultado {
margin-top: 8px;
font-size:14px;
}
</style>
</head>
<body>
<form action="#">
<p>Apellido: <input type="text" name="apellidos" id="apellidos"></p>
<p>Nombre: <input type="text" name="nombre" id="nombre"></p>
<p>Mail: <input type="text" name="mail" id="mail"></p>
<p>
<input type="radio" name="masc"> Masculino<br>
<input type="radio" name="fem"> Feminino
</p>
<p>
Navegador utilizado:<br>
<input type="checkbox" name="ie"> Internet Explorer<br>
<input type="checkbox" name="ff"> Firefox<br>
<input type="checkbox" name="saf"> Safari<br>
<input type="checkbox" name="otro_nav"> Otro navegador
</p>
</form>
<p><button>Serializar</button></p>
<p id="resultado"> </p>
</body>
</html>
Al hacer clic en el botón, los datos introducidos por el usuario se serializan y se muestran:
Detallamos el script:
Inicialización de jQuery.
$(’button’).on("click", function() {
var str = $("form").serialize();
El formulario ($("form")) se serializa (serialize()) y almacena en la variable str
$("#resultado").text(str);
El contenido de la variable str se añade como texto (text(str)) en el párrafo identificado por resultado
});
});
Fin del script.
Aplicaciones
1. Un icono de carga
En ocasiones, las consultas AJAX pueden ser lentas a la hora de cargar el archivo externo, en función de su tamaño,
de la carga del servidor o de la calidad de la conexión.
Para evitar que el usuario se canse durante esos momentos de espera, el diseñador puede prever un pequeño
icono que indique que la carga está en curso. Este icono es una imagen gif animada que aparece al inicio de la
consulta y desaparece cuando la consulta termina con éxito.
El sitio ajaxload ( http://www.ajaxload.info/) ofrece una serie impresionante de este tipo de iconos animados para
descargarlos.
Su interfaz permite elegir el tipo de animación (Indicator type), el color de fondo (Background color) y el color de la
animación (Foreground color). El botón Generate it ! crea la imagen. El botón Download it ! le permite descargar el
icono animado. No hay nada más sencillo: perfecto para no perder el tiempo creando estas imágenes de espera. Por
supuesto, es gratuito.
Ejemplo
El archivo de partida simplemente incluye un botón y una caja destinada a mostrar el archivo cuando se carga.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(’#boton’).click(function() {
$(’#contenido’).hide().load(’lorembis.html’, function() {
$(this).fadeIn(4000);
});
return false;
});
$(’<div id="loading"><img src="ajax-loader.gif"></div>’)
.insertBefore(’#contenido’)
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
});
</script>
<style>
#contenido {
width: 250px;
border: solid 1px #000;
}
#loading {
margin: 30px 0 0 100px;
position: absolute;
/* display: none;*/
}
</style>
</head>
<body>
<p><button id="boton">Cargar</button></p>
<div id="contenido"> </div>
</body>
</html>
El archivo que se va a cargar desde el servidor se llama lorembis.htm. Durante la fase de desarrollo y de pruebas
internas, la aparición del icono de descarga puede no verse. Para visualizarlo, lo mejor es usar un archivo grande.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer

id semper enim. Vestibulum metus felis, elementum sit amet
tristica non, pulvinar vitae metus.Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer id semper enim. Vestibulum
metus felis, elementum sit amet tristica non, pulvinar vitae
metus.
...
El script jQuery debe tener en cuenta no solo la consulta AJAX, sino también la aparición y desaparición de la imagen
de carga.
Aspecto obtenido durante la espera de la carga del archivo:
Aspecto obtenido al final de la carga del archivo:
El icono está disponible para su descarga desde la página Información.
Este script jQuery necesita de algunas explicaciones.
$(’#boton’).click(function() {
$(’#contenido’).hide().load(’lorembis.htm’, function() {
$(this).fadeIn(4000);
});
Se realiza una consulta AJAX sobre el archivo lorembis.htm y su contenido se inserta en la capa contenido. Se añade
un efecto de aparición progresiva fadeIn(4000)
return false;
});
Fin de la parte de la carga.
$(’<div id="loading"><img src="ajax-loader.gif" /></div>’)
.insertBefore(’#contenido’)
La imagen ajax loader.gif de la capa loading se inserta (insertBefore) antes de la capa contenido
.ajaxStart(function() {
$(this).show();
})
Cuando se inicia la consulta AJAX (ajaxStart), esta imagen (this) se vuelve visible (show()
.ajaxStop(function() {
$(this).hide();
});
Cuando la consulta AJAX termina (ajaxStop), esta imagen (this) se oculta (hide()
});
2. Un léxico en AJAX
Vamos a elaborar un pequeño léxico informático, cuyas definiciones se cargan mediante consultas AJAX en la página
principal.
Esta página principal es la siguiente.
Aspecto initial:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(’#letra_a’).on("click", function() {
$(’#lexico’).hide().load(’letra_a.html’, function() {
$(this).slideDown(1000);
});
return false;
});
$(’#letra_b’).on("click", function() {
$(’#lexico’).hide().load(’letra_b.html’, function() {
});
return false;
});
});
</script>
<style>
body {
font: 62.5% Arial, Verdana, sans-serif;
}
a {
color: black;
}
#container {
font-size: 1.2em;
margin: 10px 20px;
width: 360px;
}
#header {
margin-top: 20px;
border-bottom: 1px solid black;
}
#alfabeto {
float: left;
width: 30px;
margin-right: 10px;
}
#lexico {
float: left;
width: 300px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h2>Pequeño léxico informático</h2>
</div>
<div id="alfabeto">
<div id="letra_a">
<h3><a href="#">A</a></h3>
</div>
<div id="letra_b">
<h3><a href="#">B</a></h3>
</div>
<div>
<h3>C</h3>
</div>
<div>
<h3>D</h3>
</div>
<div>
<h3>E</h3>
</div>
<div>
<h3>F</h3>
</div>
<div>
<h3>G</h3>
</div>
<div>
<h3>Etc</h3>
</div>
</div>
<div id="lexico"> </div>
</div>
</body>
</html>
El archivo de las definiciones de la letra A (letra_a.htm) es el siguiente:
<h3>ActiveX</h3>
<div>
Tecnología Microsoft. La tecnología ActiveX permite la creación
de componentes que se pueden incluir en las páginas Html.
</div>
<h3>AJAX</h3>
<div>
El acrónimo AJAX se aplica a un conjunto de técnicas de
programación de sitios de Internet y procede del inglés
Asynchronous JavaScript and XML.
</div>
<h3>AVI</h3>
<div>
Audio Video Interleave. Formato de archivo de Microsoft para los
datos de audio y vídeo.
</div>
El archivo de las definiciones de la letra B (letra_b.htm) es el siguiente:
<h3>Backup</h3>
<div>
Versión inglesa de copia de seguridad o de socorro.
</div>
<h3>Big Blue</h3>
<div>
Big Blue es el apodo de IBM, en referencia al Gran Hermano, que
es el inquietante personaje de Orwell en « 1984 ».
</div>
<h3>Bit</h3>
<div>
Acrónimo de Binary digit; sistema de numeración que usa solo
dos dígitos: 0 y 1.
</div>
Estos archivos están disponibles para su descarga desde la página Información.
Cuando los archivos tienen acentos, se recomienda guardarlos en formato UTF8.
Al hacer clic en la letra A o B, una consulta AJAX carga las definiciones correspondientes (letra_a.htm o letra_b.htm)
en la capa lexico
Aspecto obtenido después de hacer clic en la A
Aspecto obtenido después de hacer clic en la B
A estas alturas del libro, las explicaciones pueden ser más escuetas.
$(’#letra_a’).on("click", function() {
Al hacer clic en la letra A.
$(’#lexico’).hide().load(’letra_a.htm’, function() {
});
Se ejecuta una consulta AJAX en jQuery (load()) sobre el archivo letra_a.htm y su contenido se inserta en la capa
lexico. Se añade un efecto visual al script. En un primer momento, el contenido de lexico se oculta (hide()) y el
nuevo contenido aparece con un efecto de deslizamiento hacia abajo (slideDown(1000)
Introducción
Desde su origen, jQuery es un framework JavaScript completo. Incorpora asimismo una serie de funciones llamadas
utilidades. No es posible revisarlas todas en este libro. Se pueden consultar en la documentación de jQuery, en la
dirección: http://api.jquery.com/category/utilities
Aquí vamos a mostrar alguna de ellas.
Evitar los conflictos
Los frameworks JavaScript, como jQuery, Mootools o Prototype, se usan muy frecuentemente para el desarrollo de las
aplicaciones recientes. Cuando conviven, normalmente hay problemas ya que el signo $ lo usan todos ellos.
Recuerde que jQuery usa el $ como alias de "jQuery".
El método jQuery.noConflict() permite evitar los posibles conflictos con otros frameworks. De esta manera, la
llamada a $ en el código del script no se considerará como código jQuery y se reservará a las demás librerías. La
llamada inicial jQuery se tomará como código jQuery.
Para más detalles, puede leer: http://learn.jquery.com/usingjquerycore/avoidconflictsotherlibraries
Ejemplo
Supongamos dos cajas. El contenido de una lo gestiona jQuery y el de la otra Prototype.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<title>jQuery y Protoype</title>
<script src="prototype.js"></script>
<style>
div {
width: 160px;
height: 30px;
}
.jquery {
margin-top: 15px;
}
.prototype {
background-color: white;
font-style: italic;
}
</style>
</head>
<body>
<div id="jquery">Hecho en jQuery</div>
<div id="prototype">Hecho por Prototype</div>
<script type="text/javascript">
// Parte jQuery
jQuery.noConflict();
jQuery(’#jquery’).addClass(’jquery’);
// Parte Prototype
$(’prototype’).addClassName(’prototype’);
</script>
</body>
</html>
Explicaciones del script.
// Parte jQuery
jQuery.noConflict();
El método jQuery.noConflict() indica a jQuery que no tenga en cuenta las variables $
jQuery(’#jquery’).addClass(’jquery’);
jQuery sustituye al signo $
// Parte Prototype
$(’prototype’).addClassName(’prototype’);
Instrucción gestionada por Prototype. El signo $ ya no se considera como jQuery, gracias a la instrucción
jQuery.noConflict()
Iteraciones en jQuery
El clásico bucle for en JavaScript requiere siempre especificar múltiples datos (por ejemplo, for (i=1; i<6; i++)
Hay que indicar el nombre de la variable del contador, así como su valor inicial, la condición que fija el límite del bucle
y, finalmente, una instrucción que incrementa (o decrementa) el contador.
Para ello, jQuery propone el método each()
each(función)
Ejecuta la función que se pasa como argumento por cada aparición del objeto seleccionado.
La función debe tener un argumento (un entero), que representará la posición del elemento que se está tratando
actualmente.
$("img").each(function(i){
this.src = "test" + i + ".jpg";
});
Ejemplo
Al hacer clic en un botón, el script rellena los elementos de una lista <ul>.
Aspecto inicial:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(document).ready( function() {
$("#lista").find("li").each( function(i) {
$(this).html( $(this).html() + " Item " + (i+1) );
});
});
});
</script>
</head>
<body>
<p><button class="boton">Lista</button></p>
<ul id="lista">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
Explicaciones.
$(document).ready( function() {
$("#lista").find("li").each( function(i) {
$(this).html( $(this).html() + " Item " + (i+1) );
});
El script hace un bucle por cada elemento (each) de la lista ($("#lista").find("li")). Observe el argumento de la
función asociada a each() (function(i)). Por cada elemento <li> encontrado, la función añade la mención "Ítem" y
el valor de i aumentado en 1.
});
});
Fin del script.
Almacenar y recuperar datos
El método data() permite almacenar y recuperar cualquier dato.
Almacenar datos
Para asociar un valor a un elemento de la página, por ejemplo una división <div>
data(clave, valor)
l clave: cadena de caracteres que especifica el nombre asignado a los datos almacenados.
l valor: los datos almacenados. Estos pueden encontrarse bajo la forma de una cadena de caracteres, de un array o
de un objeto.
$("div").data("numero",2015);
Recuperar datos almacenados
Para recuperar en el script un valor almacenado, basta con hacer una llamada con su nombre.
data(clave)
l clave: cadena de caracteres que recupera el nombre asignado a los datos almacenados.
$("div").data("numero")
Eliminar datos almacenados
Para no saturar la memoria del navegador, puede resultar útil eliminar los datos almacenados que ya no sirven.
removeData(clave)
l clave: cadena de caracteres que recupera el nombre asignado a los datos almacenados.
$("div").removeData("numero");
Para los expertos en JavaScript, el método data() puede ser un truco para transformar una variable local en global.
Ejemplo
Creamos una página donde, al hacer un clic en un botón, se almacenarán datos. Otro botón mostrará estos datos en un cuadro
de diálogo.
Aspecto inicial:
Aspecto obtenido al hacer clic en el botón "Almacenar los datos" y después en el botón "Mostrar los datos":
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#boton1").click(function(){
$("div").data("deseo", "¡Buen aprendizaje de jQuery!");
});
alert($("div").data("deseo"));
});
});
</script>
</head>
<body>
<p><button id="boton1">1- Almacenar los datos</button></p>
<p><button id="boton2">2- Mostrar los datos</button></p>
<div> </div>
</body>
</html>
Comentarios
$("div").data("deseo", "¡Buen aprendizaje de jQuery!");
});
Al hacer clic (click) en el botón 1 ( #boton1), el método
data() almacena en la división <div>, en la clave
deseo, la cadena de caracteres ¡Buen aprendizaje de jQuery! Esta acción no tiene ningún efecto visual.
alert($("div").data("deseo"));
});
Al hacer clic (click) en el botón 2 ( #boton2), el método data() recupera en la división <div> los datos
almacenados en la clave deseo y los muestra en un cuadro de diálogo ( alert
Encontrar un elemento del DOM
El método get() recupera los elementos del DOM especificados por un selector.
$(selector).get(index)
donde index (opcional) determina el enésimo elemento (numeración JavaScript).
Ejemplo
Mostramos el nombre del elemento HTML sobre el que se hace un clic en la página.
Aspecto obtenido después de hacer clic en un párrafo <p>:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<style>
div {
width: 270px;
margin-top: 15px;
padding-left: 4px;
}
body {
cursor: pointer;
}
</style>
</head>
<body>
<p><strong>Haga clic en un elemento de la página.</strong></p>
<h1>jQuery</h1>
<p>El framework JavaScript de los sitios interactivos</p>
<input type="text">
<ul>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
</ul>
<button>Botón</button>
<div> </div>
<script>
$("*", document.body).click(function(evt) {
event.stopPropagation();
var element_dom = $(this).get(0);
$("div").text( "Ha hecho clic en un elemento:
" + element_dom.nodeName );
});
</script>
</body>
</html>
Comentario
$("*", document.body).click(function(event) {
Al hacer clic en un elemento de la página ( $("*", document.body)
event.stopPropagation();
Impide la propagación del evento a los elementos padres.
var element_dom = $(this).get(0);

$("div").text( "Ha hecho clic en un elemento - " +
element_dom.nodeName );
});
La variable element_dom contiene la etiqueta ( get(0)) del elemento en el que se ha hecho clic ( $(this)). Esta
element_dom.nodeName) se muestra entonces en una división.
Buscar un elemento concreto
El método index() devuelve la posición del índice de los elementos especificados por un selector jQuery o un
elemento del DOM. Si no se encuentra ningún elemento, el método devuelve el valor -1
$(selector).index()
Ejemplo
Consideremos una lista de cinco elementos. Al hacer clic en un ítem, su posición se muestra en un cuadro de diálogo.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("li").on("click", function(){
alert($(this).index());
});
});
</script>
<style>
ul {
cursor: pointer;
}
</style>
</head>
<body>
<p><strong>Haga clic en un ítem para saber su posición
en el índice.</strong></p>
<ul>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ul>
</body>
</html>
Comentario
$("li").on("click", function(){
alert($(this).index());
});
Al hacer clic en un elemento de lista ( $("li")), un cuadro de diálogo ( alert) muestra la posición de índice (index
()) del elemento sobre el que se ha hecho clic ( $(this)
Conocer el número de elementos
El método length() devuelve el número de elementos que corresponden a un selector.
El método size() realiza la misma función pero está obsoleto ( deprecated) desde la versión 1.8 de jQuery.
$(selector).length()
Ejemplo
Al hacer clic en un botón, mostramos en un cuadro de diálogo, el número de elementos de una lista.
El documento HTML:
doctype html>
<html lang="es">
<head>
<script>
$("button").on("click", function(){
alert($("li").length);
});
});
</script>
</head>
<body>
<p><button>Número de elementos</button></p>
<ul>
<li>Ítem 1</li>
<li>Ítem 2</li>
<li>Ítem 3</li>
<li>Ítem 4</li>
<li>Ítem 5</li>
</ul>
</body>
</html>
Comentario
$("button").on("click", function(){
alert($("li").length);
});
Al hacer clic en el botón ($("button")), se muestra un cuadro de diálogo (alert) con el número de elementos (length
de la lista ($("li")
Convertir en array los elementos encontrados
El método toArray() devuelve los elementos del DOM en forma de array.
$(Selector).toArray()
Ejemplo
Devolvemos en un array los elementos de las cajas <div>.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
var y = [];
x=$("div").toArray();
for (i=0;i<x.length;i++){
y.push(x[i].innerHTML);
}
$("span").text(y);
});
</script>
<style>
span {
padding-left: 4px;
padding-right: 4px;
}
p {
margin-top: 20px;
}
</style>
</head>
<body>
<div>Uno</div>
<div>Dos</div>
<div>Tres</div>
<div>Cuatro</div>
<div>Cinco</div>
<p>Contenido del <code>Array</code> : <span></span></p>
</body>
</html>
Comentarios
var y = [];
Definición de y como una variable de tipo array
x=$("div").toArray();
La variable x contendrá los elementos <div> ($("div")) en forma de array (toArray()
for (i=0;i<x.length;i++){
y.push(x[i].innerHTML);
}
El buclefor pasa por los diferentes elementos del array x. Para cada elemento ( x[i]), la función push() añade su
contenido (innerHTML) al final del array y
$("span").text(y);
});
Al final del bucle, la variable y se muestra (text()) en la etiqueta <span> ($("span")
Introducción
Aunque jQuery no aporta nada nuevo en esta materia, dedicamos este capítulo a los formularios, ya que siempre
representan un desarrollo particular en la elaboración de los sitios web.
Los selectores de formularios
:input Selecciona todos los elementos del formulario (input, textarea, select y botones).
:text Selecciona todos los elementos del formulario de tipo línea de texto.
:password Selecciona todos los elementos del formulario de tipo contraseña.
:radio Selecciona todos los elementos del formulario de tipo botones de radio.
:checkbox Selecciona todos los elementos del formulario de tipo casillas de selección.
:submit Selecciona todos los elementos del formulario de tipo submit.
:image Selecciona todos los elementos del formulario de tipo imagen.
:reset Selecciona todos los elementos del formulario de tipo reset.
:button Selecciona todas las etiquetas <button> y todos los elementos de tipo button.
:file Selecciona todos los elementos del formulario de tipo archivo.
:hidden Selecciona todos los elementos del formulario de tipo hidden.
:focus Selecciona el elemento del formulario que tiene el foco. Se introdujo en la versión 1.6 de jQuery.
:enabled Selecciona todos los elementos activos.
:disabled Selecciona todos los elementos no activos.
:checked Conserva todos los elementos marcados o seleccionados.
:selected Conserva todos los elementos seleccionados.
Ejemplo
En esta página tenemos casillas de selección y botones de radio. Al hacer clic en el primer botón, seleccionamos las casillas de
selección, y al hacer clic en el segundo, los botones de radio.
Aspecto inicial:
Selección de las casillas de selección:
Selección de los botones de radio:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#test1").on("click",function(){
$("input:checkbox").parent().css({"background": "#9cf"});
});
$("input:radio").parent().css({"border":
"1px solid black"});
});
});
</script>
</head>
<body>
<p><input type="checkbox">Checkbox 1</p>
<p><input type="radio">Radio 1<br></p>
<p><input type="radio">Radio 2</p>
<p><button id="test1">Prueba checkbox</button>
<button id="test2">Prueba radio</button></p>
</body>
</html>
$("test1").on("click",function(){
$("input:checkbox").parent().css({"background": "#9cf"});
});
Cuando se hace clic en el botón ( $("test1")), el script encuentra las casillas de selección mediante el selector
$("input:checkbox")), sube al elemento padre ( parent()), es decir, los párrafos <p> y modifica su
propiedad de estilo (css) cambiando el color de fondo.
$("input:radio").parent().css({"border": "1px solid black"});
});
Al hacer clic en el botón ($("#test2")) el script busca los botones radio mediante el selector ($("input:radio")), sube
al elemento padre (parent()), es decir, las divisiones <div> y modifica la propiedad de estilo (css) de su borde.
Los filtros de selección
1. Los elementos marcados
:checked
Selecciona todos los elementos de tipo botón de radio o casillas de selección seleccionados.
Ejemplo
Al hacer clic en el botón, buscamos las casillas de selección seleccionadas.
Aspecto inicial:
Aspecto con la selección de las casillas de selección:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(":button").on("click", function (){
$("input:checked").parent().css({"background": "#9cf"});
});
});
</script>
</head>
<body>
<form action="">
<p><input type="checkbox" name="box" checked=> Elección 1</p>
<p><input type="checkbox" name="box"> Elección 2</p>
<p><input type="checkbox" name="box" checked> Elección 4</p>
</form>
<p><button>Test</button></p>
</body>
</html>
El script sigue el enfoque anterior. Por lo tanto, no son necesarias explicaciones adicionales. Simplemente observe el
selector input:checked, que permite recuperar solo los campos del formulario que están marcados.
2. Los elementos seleccionados
:selected
Devuelve todos los elementos de una lista desplegable que están seleccionados.
Ejemplo
Selección en una lista desplegable:
Visualización de la selección ( selected):
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#navegadores").change(onSelectChange);
});
function onSelectChange(){
var selected = $("#navegadores option:selected");
var output = "";
if(selected.val() != 0){
output = "Su selección: " + selected.text();
}
$("#resultado").html(output);
}
</script>
</head>
<body>
<p>¿Cuál es su navegador?</p>
<form action="">
<select id="navegadores">
<option selected="selected" value="0">Todos los navegadores</option>
<option value="1">Internet Explorer</option>
<option value="2">Firefox</option>
<option value="3">Opera</option>
<option value="4">Safari</option>
<option value="5">Google</option>
</select>
</form>
<p id="resultado"></p>
</body>
</html>
Explicaciones sobre el script.
$("#navegadores").change(onSelectChange);
});
Cuando se realiza un cambio en la lista de selección (change), se invoca a la función onSelectChange
function onSelectChange(){
var selected = $("#navegadores option:selected");
var output = "";
En primer lugar, la función onSelectChange define la variable selected para conservar el valor de la lista seleccionado
por el usuario ($("#navegadores option:selected")). Se inicializa la variable output, que contendrá el valor de la
selección del usuario.
if(selected.val() != 0){
output = "Su selección: " + selected.text();
}
Si el atributo valor de la selección es diferente de 0 ((selected.val() != 0)) se construye la variable output

teniendo en cuenta la selección hecha.
$("#resultado").html(output);
}
El valor de la variable output se mostrará en la capa identificada por resul tado.
Fin del script.
Aplicaciones
1. Seleccionar todas las casillas de selección
Muy popular en los sitios actuales, este script ofrece la posibilidad al usuario de activar todas las casillas de
selección con una sola acción.
Aspecto inicial:
Aspecto obtenido después de hacer clic en la opción Seleccionar todo
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#todos").click(function(){
var checked_status = this.checked;
$("input[name=casilla]").each(function(){
this.checked = checked_status;
});
});
});
</script>
</head>
<body>
La librería jQuery es:<br />
<p><input type="checkbox" name="casilla">Concisa</p>
<p><input type="checkbox" name="casilla">Flexible</p>
<p><input type="checkbox" name="casilla">Compacta</p>
<p><input type="checkbox" name="casilla">Rápida</p>
<p><input type="checkbox" name="casilla">Compatible</p>
<hr>
<p><input type="checkbox" id="todos"><b>Seleccionar todo</b></p>
</body>
</html>
El script jQuery:
$("#todos").click(function(){
Inicialización de jQuery y al hacer clic en la casilla de selección que permite seleccionar todos los elementos.
var checked_status = this.checked;
La variable checked_status comprueba si está marcada la casilla.
$("input[name=casilla]").each(function(){
this.checked = checked_status;
});
El método each() revisa todas las casillas de selección (input[name=casilla]) y las marca.
});
});
Fin del script.
2. Confirmar un comando
Reunimos en un campo de texto los elementos marcados de un formulario.
Aspecto inicial:
Aspecto obtenido al seleccionar dos opciones:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(’input:checkbox[name=postre]’).click(function(){
var check = this.checked;
var val = $(this).val();
var keys = $("input[name=’comando’]").val().split(’, ’);
var newKeys = new Array();
var inArray = false;
$.each(keys, function(i){
var key=this;
if (key == val) {
if (check){
newKeys.push(key);
}
inArray = true;
} else {
newKeys.push(key);
}
});
if (!inArray && check) newKeys.push(val);
$("input[name=’comando’]").val(newKeys.join(’ + ’));
});
});
</script>
</head>
<body>
<h3>Elija sus complementos:</h3>
<form action="">
<p><input value="chocolate" type="checkbox" name="postre"> Chocolate</p>
<p><input value="chantilly" type="checkbox" name="postre"> Chantilly</p>
<p><input value="merengue" type="checkbox" name="postre"> Merengue</p>
<p><input value="bizcocho" type="checkbox" name="postre"> Bizcocho</p>
<h3>Su pedido: </h3>
<p><input type="text" name="comando" size="45" value="Helado de vainilla"></p>
</form>
</body>
</html>
$(’input:checkbox[name=postre]’).click(function(){
Inicialización de jQuery y al hacer clic en una casilla de selección.
var check = this.checked;

var val = $(this).val();
La variable check comprueba que la casilla se ha marcado. La variable val devuelve el valor correspondiente a la
casilla.
var keys = $("input[name=’comando’]").val().split(’, ’);
Preparación del contenido de la línea de texto que confirma el pedido, obteniendo el valor inicial del atributo value
var newKeys = new Array();

var inArray = false;
Creación de un array llamado newKeys destinado a contener los títulos de las casillas marcadas.
$.each(keys, function(i){
var key=this;
if (key == val) {
if (check){
newKeys.push(key);
}
inArray = true;
}
else {
newKeys.push(key);
}
});
El método JavaScript clásico array.push() añade los títulos de las casillas marcadas al final del array newKeys
if (!inArray && check) newKeys.push(val);

$("input[name=’comando’]").val(newKeys.join(’ + ’));
La confirmación del pedido se muestra en la línea de texto, modificando su atributo value
});
});
Fin del script.
3. Un formulario de inscripción original
Los formularios de contacto o inscripción son una parte imprescindible de cualquier sitio web. Por lo general se
implementan en una página separada y raramente son creativos. Este ejemplo ilustra cómo crear con jQuery un
formulario disponible desde la página de inicio.
Aspecto inicial:
Al hacer clic en la caja Formulario de inscripción, aparece el formulario de contacto, deslizándose verticalmente
hacia abajo.
Aspecto del formulario:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$("#contact").click(function(){
if ($("#contactForm").is(":hidden")){
$("#contactForm").slideDown("slow");
} else{
$("#contactForm").slideUp("slow");
}
});
});
function closeForm(){
}
</script>
<style>
body{
margin: 0px;
font-family: Arial, Sans-Serif;
font-size: 0.75em;
}
.box {
margin: 0px auto;
background-color: #ffffff;
position: relative;
}
.content {
padding: 20px 30px;
}
#container {
position: absolute;
left: 100px;
float: right;
}
#contactForm {
height: 177px;
width: 248px;
display: none;
}
#contactForm fieldset {
padding: 30px;
border: none;
}
#contactForm label {
display: block;
color: black;
}
#contactForm input[type=text] {
display: block;
border: solid 1px #4d3a24;
height: 24px;
}
#contactForm input[type=submit] {
background-color: #4d3a24;
border: solid 1px #23150c;
color: #fecd28;
padding: 5px;
}
#contact {
height: 30px;
width: 246px;
display: block;
cursor: pointer;
font-size: 14px;
padding-top: 7px;
text-align: center;
}
p {
margin-top: 25px;
}
</style>
</head>
<body>
<div class="box">
<div id="container">
<div id="contactForm">
<fieldset>
<label for="Name">Nombre *</label>
<input id="name" type="text">
<label for="Email">Dirección Email *</label>
<input id="Email" type="text">
<input id="envio" type="submit"
name="submit" onclick="closeForm()">
</fieldset>
</div>
<div id="contact">Formulario de inscripción</div>
</div>
<div class="content">
<p>Lorem ipsum dolor... </p>
</div>
</div>
</body>
</html>
El script jQuery es (en este punto de su aprendizaje) relativamente sencillo.
$("#contact").click(function(){
Cuando se carga el DOM y al hacer clic en la capa contact
if ($("#contactForm").is(":hidden")){
$("#contactForm").slideDown("slow");}
Si el formulario de contacto (contactForm) está oculto (is(":hidden")), este aparece deslizándose lentamente hacia
abajo (slideDown("slow")
else{
}
En caso contrario, sube (slideUp("slow")) para volver a su posición inicial.
});
});
Fin del ready
function closeForm(){
}
Falta por definir la función (closeForm()), asociada al botón de envío. Esta hace que el formulario (slideUp("slow")
vuelva a su posición inicial.
Introducción
Los plug ins jQuery son scripts dedicados a tareas específicas, como ordenar una tabla, la implementación de un
carrusel de imágenes o la validación de formularios.
Estos plug ins, que se empezaron a construir por la comunidad de jQuery, son numerosos, en general de excelente
calidad y normalmente disponibles de forma libre en la Web. Puede hacerse una idea de su variedad en la dirección:
http://plugins.jquery.com
Estos plug ins ahorran tiempo, evitando reescribir un código que ya se ha escrito antes. En ocasiones también
permiten ejecutar operaciones con un nivel de programación superior al de un diseñador medio en jQuery. En este
capítulo, algunos ejercicios se deberán descargar como archivos .zip. Estos archivos contienen todo lo necesario.
Diseñar un plugin jQuery
1. Aspectos teóricos
La escritura de un plug in jQuery pasa por etapas concretas y hay que respetar determinadas reglas precisas.
El plug in jQuery adquiere la forma de un archivo JavaScript externo (extensión .js) que se ubica inmediatamente
después de la etiqueta de llamada de jQuery (consulte la sección Usar un plug in jQuery en este capítulo):
Asignar un nombre al plug
Un plug in siempre se debe nombrar con el formato jquery.nombre_del_plug in.js. De esta manera, se identifica
inmediatamente.
Aislar el código
En este nuevo archivo js, hay que englobar el código del plug in en una función anónima. De esta manera, todas las
variables del plug in no entrarán en conflicto con las de otros scripts de la página.
(function () {
// código jQuery
}) ()
Pasamos la variable jQuery usando su alias $ a esta función, lo que permitirá usar la variable $ dentro de ella.
(function ($) {
// código jQuery
}) ()
Añadir el nuevo método a jQuery
Casi estamos preparados para escribir nuestro plug in. Hay que añadir este nuevo método a los objetos jQuery
usando la instrucción $.fn.nombre_del_plug-in. En esta función, la palabra clave this representará al objeto jQuery
seleccionado por el usuario del plug in.
(function($) {
$.fn.nombre_del_plugin = function () {
// código jQuery
};
}) (jQuery)
La documentación de jQuery respecto al diseño de plug ins insiste en que cada método o función debe terminar con
un punto y coma. En caso contrario, se corre el riesgo de que el código no funcione después de comprimir el plug in.
Estas son las reglas fundamentales de la elaboración de un plug in. Sin embargo, no hay que perder de vista los
siguientes puntos:
l Cuando varios elementos están o pueden estar seleccionados, se recomienda el método each() para recorrer con un
bucle los elementos seleccionados.
l Es útil pasar argumentos al método del plugin para facilitar su personalización por parte del usuario.
l Salvo excepciones, el plugin debe devolver el objeto que se trata ( return this ).
Por último, aunque normalmente no es imprescindible, hay que comprimir el código para reducir el tiempo de
descarga del plug in. Existe una pequeña aplicación en línea ( http://dean.edwards.name/packer/) que hace esto a la
perfección. Copie su código y péguelo en el campo del formulario, marque Base62 encode y/o Shrink variables
haga clic en el botón Pack y se muestra el resultado.
El código obtenido empieza así:
eval(function(p,a,c,k,e,r){e=function(c){return(c...
2. Una aplicación práctica
El plug in de nuestro ejemplo añade un tooltip explicativo a los enlaces.
La primera etapa consiste en darle un nombre al plug in. Siguiendo las convenciones de jQuery, lo vamos a llamar
jquery.mi_tooltip.js
Abra un editor de texto y comience con la codificación.
Empezamos por determinar el entorno jQuery.
(function($){
jQuery.fn.mi_tooltip = function(opciones) {
// código del plug-in
};
})(jQuery)
Ahora incluimos el código del plug in propiamente dicho.
(function($){
jQuery.fn.mi_tooltip = function(opciones) {
var elemento = document.createElement("div");
$(element).addClass(opciones.tooltipcss).hide();
document.body.appendChild(element);
return this.each(function() {
$(this).hover(function() {
$(element).show();
$(element).html($(this).attr("rel"));
$(this).mousemove(function(e) {
$(element).css({ "position": "absolute",
"top": e.pageY + opciones.offsetY,
"left": e.pageX + opciones.offsetX
});
});
}, function() {
$(element).hide();
});
});
};
})(jQuery)
El script crea una caja <div> (la caja del tooltip), a la que añade la clase de estilo tooltipcss. Esta caja se añade al
cuerpo (body) del documento. Al pasar el ratón por encima del enlace, se muestra esta caja. Su contenido toma los
elementos del atributo rel del enlace. Hay que prever una leve separación horizontal y vertical del tooltip con
respecto al enlace (left y top).
Se van a configurar tres elementos:
l La clase que se encarga del aspecto del tooltip ( opciones.tooltipcss ).
l La separación vertical del tooltip con respecto al enlace (opciones.offsetY).
l La separación horizontal del tooltip con respecto al enlace (opciones.offsetX ).
Con esto, nuestro plug in está preparado para utilizarse.
Usar un plugin jQuery
El uso de un plug in es muy sencillo. Basta con llamarlo (por su nombre) en el código de la página.
Ejemplo
Vamos a usar nuestro plugin en una página con varios enlaces.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script src="jquery.mi_tooltip.js"></script>
<script>
var opciones = {
offsetX: 30,
offsetY: 5,
tooltipcss: "tooltip"
};
$("a.info").mi_tooltip(opciones);
});
</script>
</head>
<style>
.tooltip {
width: 150px;
padding: 3px;
background-color: #9CF;
border: black 1px solid;
color: black;
}
a {
color: black
}
</style>
</head>
<body>
<p><a href="#" rel="Explicación del enlace 1" class="info">Enlace 1</a></p>
</body>
</html>
El archivo a descargar es el C133.zip
Observaciones:
El atributo rel de las etiquetas del vínculo <a> ya contiene el texto del tooltip.
El aspecto del tooltip ya está previsto por la clase .tooltip
Explicamos el script:
var opciones = {
offsetX: 30,
offsetY: 5,
tooltipcss: "tooltip"
};
Determina los parámetros que se pasan al plug in, es decir, la separación vertical, horizontal y el nombre de la clase
de estilo de la ventana tooltip.
$("a.info").mi_tooltip(opciones);
Para todos los enlaces que tengan la clase info, se va a llamar al plug in mi_tooltip
Algunos plugins
Hemos visto algunos ejemplos de plug ins. Para apreciar en su totalidad su lado más espectacular, le invitamos a
consultar el espacio de descarga dedicado a este libro.
1. jQuery UI
a. Requisitos
jQuery UI (UI, del inglés User Interface) ofrece numerosos widgets para enriquecer la interfaz visual de sus
páginas o aplicaciones HTML como los cuadros de diálogo, los tooltips, los menús acordeón, los menús con
pestañas, los botones, arrastrar y soltar ( ), el redimensionamiento y la reorganización de los elementos.
Además de que estos elementos se han convertido en clásicos, jQuery UI integra a su vez las nuevas etiquetas de
HTML5 con los cursores, los calendarios, las barras de progreso, los contadores numéricos y los formularios con
sugerencias. Estos widgets permiten incorporar en el diseño de las páginas HTML estas etiquetas HTML5
innovadoras que por fin están operativas en todos los navegadores del mercado. ¡Incluso en los más antiguos!
Ante el número y la riqueza de estos módulos externos, jQuery UI se posiciona como un complemento
indispensable de jQuery. Tanto si desea aplicaciones web altamente interactivas, como si desea simplemente
añadir un widget como un calendario, jQuery se convierte en una excelente solución.
Estos widgets son altamente configurables mediante el sistema de opciones de jQuery UI y son perfectamente
adaptables a la identidad gráfica de su sitio mediante la herramienta ThemeRoller.
b. Instalación
Paso 1
jQuery UI ( http://jqueryui.com/) es una extensión del framework jQuery dedicada a la interfaz de sus aplicaciones.
De este modo, jQuery UI necesita a jQuery para funcionar. Esta capa de jQuery soporta toda la gestión de
funcionalidades JavaScript implementadas por los múltiples widgets introducidos por jQuery UI. Encontramos así
una llamada (en este caso por CDN) a la librería jQuery.
Ejemplo
<script src="http://code.jquery.com/jquery-3.0.js"></script>
Paso 2
Diferentes CDN ofrecen acceso a la API jQuery UI. Esta es la de jQuery:
<script src="http://code.jquery.com/ui/número de versión/jquery-ui.js">

</script>
Ejemplo
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js">
</script>
Paso 3
Solo queda ocuparse de la presentación gráfica de los widgets. jQuery UI ofrece una veintena de temas que
recogen todas las propiedades de estilo CSS que necesitan los widgets así como una combinación de color de
fondo, fuentes, bordes redondeados, sombras, etc. Recordemos que estos temas se pueden personalizar
mediante la herramienta ThemeRoller.
http://code.jquery.com/ui/número de versión de jQuery UI/themes/nombre

del tema/jquery-ui.css
Para nuestros ejemplos tomaremos el tema por defecto smoothness.
<link rel="stylesheet"
href=http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
El código completo de instalación de jQuery UI (mediante CDN) es:
<!doctype html>
<html lang="es">
<head>
<title>jQuery UI</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/
themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js">
</script>
</head>
...
c. El menú con pestañas
El menú con pestañas es una opción que permite agrupar la información de un sitio por asuntos o por temas. Es lo
que se consigue a través del método jQuery UI tabs()
Ejemplo
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/
smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function() {
$("#pestanas").tabs();
});
</script>
</head>
<body>
<div id="pestanas">
<ul>
<li><a href="#pestana-1">Pestaña 1</a></li>
</ul>
<div id="pestana-1">
<h3>Contenido pestaña 1</h3>
<p>Integer posuere erat a ante venenatis dapibus posuere velit
aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id
ligula porta felis euismod semper. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum
sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
dolor auctor. Curabitur blandit tempus porttitor. Donec sed odio
dui.</p>
</div>
<p>Etiam porta sem malesuada magna mollis euismod. Sed posuere
consectetur est at lobortis. Vestibulum id ligula porta felis euismod
semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur
et. Vestibulum id ligula porta felis euismod semper. Nullam quis risus
eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis
dapibus posuere velit aliquet.</p>
</div>
</div>
</body>
</html>
d. El menú en acordeón
La presentación llamada en acordeón es una alternativa interesante en la organización de la información en el

diseño de páginas web. Como recordatorio, este tipo de organización agrupa el contenido en paneles separados
que el usuario puede abrir o cerrar. Lo que permite un ahorro de espacio importante maximizando la cantidad de
información disponible. Los acordeones se implementan con la función jQuery UI accordion()
Ejemplo
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"> </script>
<script>
$(function() {
$("#acordeon").accordion();
});
</script>
</head>
<body>
<div id="acordeon">
<h3><a href="#">Ítem 1</a></h3>
<div>Contenido del ítem 1. Integer posuere erat a ante venenatis apibus
posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis
interdum. Donec id elit non mi porta gravida at eget metus. Etiam porta
sem malesuada magna mollis
euismod.</div>
<h3><a href="#"> Ítem 2</a></h3>
<div> Contenido del ítem 2. Curabitur blandit tempus porttitor. Aenean
eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
lacinia odio sem nec elit. Aenean eu leo quam. Pellentesque ornare
sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis
euismod semper. Donec sed odio dui. Etiam porta sem malesuada magna mollis
euismod.</div>
<h3><a href="#"> Ítem 3</a></h3>
<div> Contenido del ítem 3. Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod
semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor. Nullam quis risus eget urna mollis ornare vel eu leo.</div>
<h3><a href="#"> Ítem 4</a></h3>
<div> Contenido del ítem 4. Nullam id dolor id nibh ultricies vehicula
ut id elit. Maecenas faucibus mollis interdum. Cras mattis consectetur
purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo
luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis
consectetur purus sit amet fermentum.</div>
</div>
</body>
</html>
e. Los calendarios
Es útil mostrar los calendarios, que tienen un importante papel en las aplicaciones de reserva de habitaciones de
hotel, coches de alquiler, billetes de tren o de avión, etc. Utilizaremos el método jQuery UI datepicker()
Ejemplo
El documento HTML:
doctype html>
<html lang="es">
<head>
<script src="jquery.ui.datepicker-es.js"></script>
<script>
$(function() {
$("#calendario").datepicker({
firstDay: 1,
beforeShowDay: $.datepicker.noWeekends
});
});
</script>
</head>
<body>
<p><label for="calendario">Fecha:</label>
<input type="text" id="calendario"></p>
</body>
</html>
Comentario
<script src="jquery.ui.datepicker-es.js"></script>
Por defecto, el calendario muestra los meses y los días en inglés. Para los hispanohablantes es necesario llamar a
un script suplementario para la visualización en español.
$("#calendario").datepicker({
firstDay: 1,
beforeShowDay: $.datepicker.noWeekends
});
Los widgets de jQuery UI tienen numerosas opciones de configuración. En este script

firstday: 1 permite que
la semana comience en lunes y la opción beforeShowDay: $.datepicker.noWeekends excluye de la
selección los sábados y los domingos.
f. Los cuadros de diálogo
Los cuadros de diálogo del tipo mensaje de alerta forman parte de las páginas web desde hace muchos años. Es
una manera práctica de advertir al usuario o de pedirle que confirme su elección. Aunque su aspecto se ha
modificado últimamente, hay que admitir que tienen un estilo un tanto anticuado y por lo general son discordantes
con el aspecto general de la aplicación. jQuery UI renueva completamente la presentación de estos cuadros de
diálogo con bordes redondeados y permite personalizarlos tanto a nivel de sus funciones como a nivel gráfico. El
método jQuery UI dialog() implementa estos cuadros de diálogo.
Ejemplo
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script src="http://code.jquery.com/jquery-1.3.1.0.js"></script>
<script>
$(function() {
$("#dialogo").dialog();
});
</script>
</head>
<body>
<div id="dialogo" title="Consejo">
<p>Se recomienda comer cinco raciones de fruta y legumbres
diarias.</p>
</div>
</body>
</html>
g. Los botones
Los botones son quizás los elementos más fácilmente modificables por las CSS3 permitiendo decorarlos con
bordes redondos, degradados y sombras. Pero no todos los navegadores que podemos encontrar en la web
reconocen todavía las CSS3. Con jQuery UI, se dota a los botones de las mismas propiedades de estilo pero esta
vez de manera totalmente compatible. Estos se implementan mediante el método jQuery UI button()
Ejemplo
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(function() {
$("#boton1, #boton2").button();
});
</script>
</head>
<body>
<button id="boton1">Botón</button>
<div id="boton2">Botón</div>
</body>
</html>
h. Los tooltips
Un tooltip utilizado con prudencia puede aportar un complemento de información valioso. Estos se implementan
mediante el método jQuery UI tooltip()
Ejemplo
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(function() {
$(document).tooltip();
});
</script>
</head>
<body>
<p><label for="email">Email:</label>
<input id="email" title="Introduzca una dirección de email válida "></p>
</body>
</html>
i. Los cursores
Los cursores, introducidos por HTML5 ( <input type="range">), permiten al usuario determinar un valor
numérico modificando la posición de un tirador. Estos cursores innovadores e intuitivos todavía no están muy
desplegados en nuestras páginas web por miedo a no ser reconocidos por navegadores antiguos. Con jQuery UI
es posible incorporarlos sea cual sea el navegador del usuario. ¿Por qué no utilizarlos? Se implementan en jQuery
mediante el método slider()
Ejemplo
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(function() {
$("#cursor").slider();
});
</script>
<style>
#cursor {
margin-top: 30px;
margin-left: 10px;
width: 300px;
}
</style>
</head>
<body>
<div id="cursor"></div>
</body>
</html>
j. La barra de progreso
La barra de progreso es un elemento muy conocido que permite visualizar el avance de una tarea, como por
ejemplo la transferencia de un archivo o la inicialización de un programa. Ofrece al usuario un excelente feedback
visual. La barra de progreso se introdujo en HTML5 mediante la etiqueta <progress>, aunque solo la reconocen
las versiones más recientes de los navegadores. Para utilizarla hay que añadir el método jQuery UI
progressbar()
Ejemplo
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function() {
$("#progreso").progressbar();
var value = 0;
var timer = setInterval (function (){
$("#progreso").progressbar("value", value);
value++;
if (value > 100) clearInterval(timer);
}, 100);
});
</script>
</head>
<body>
<p>Barra de progreso: </p><div id="progreso"></div>
</body>
</html>
k. Los contadores numéricos
Los contadores numéricos resultan familiares en el mundo informático ya que los podemos encontrar en las
aplicaciones ofimáticas y otras suites. También se han integrado en HTML5 mediante la etiqueta <input
type="number">. En jQuery UI se implementan con el método spinner()
Ejemplo
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(function() {
$("#contador").spinner();
});
</script>
</head>
<body>
<input id="contador" value="0">
</body>
</html>
l. Arrastrar/soltar (drag/drop)
El arrastrar/soltar ( ) es una operación que se ha vuelto muy común en las páginas web. Podemos citar
como ejemplo las tiendas on line, donde se puede mover con el ratón la imagen del artículo elegido para
transferirla a la cesta de la compra. En jQuery el arrastrar/soltar se implementa mediante los métodos
draggable() y droppable()
Ejemplo
Aspecto inicial:
Aspecto obtenido después de realizar el desplazamiento:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script>
$(function() {
$("#box").draggable();
$("#drop").droppable();
});
</script>
<style>
#box {
width: 100px; height: 100px;
padding: 10px;
background: #9bafc3;
float: left;
}
#drop {
width: 150px; height: 150px;
margin-left: 100px;
padding-top: 15px;
padding-left: 35px;
float: left;
}
</style>
</head>
<body>
<div id="box" class="ui-widget-content">
<p>Arrástrame</p>
</div>
<div id="drop" class="ui-widget-content">
<p>¡Suéltame aquí!</p>
</div>
</body>
</html>
Y más...
jQuery ofrece incluso elementos redimensionables, la reorganización de los elementos y el formulario con
sugerencias.
2. Bordes variados
Los bordes redondeados son una aportación muy utilizada en las CSS3 y se anuncian nuevos bordes más variados
para las futuras CSS4. Por qué no anticiparlos con el plug in jquery.corner que ofrece bordes muy originales.
Se puede acceder al plug in y la documentación en la página jQuery Corner Demo en la dirección:

http://jquery.malsup.com/corner/
Ejemplo
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.12.0.min.js"> </script>
<script src="jquery.corner.js"></script>
<script>
$("#div1").corner("dog 20px");
$("#div2").corner("wicked 20px");
$("#div3").corner("cc:#009 notch");
});
</script>
<style>
div.ejemplo {
margin: 15px;
width: 250px;
height: 75px;
background: #9cf;
}
</style>
</head>
<body>
<div id="div1" class="ejemplo"></div>
</body>
</html>
El archivo a descargar es el C134.2.zip
3. Textos redondeados
Después del éxito de los bordes redondeados, ¿por qué no utilizar también textos redondeados? Esto es lo que
ofrece el plug in arctext
Una demostración, explicaciones y una descarga le esperan en la dirección:

http://tympanus.net/codrops/2012/01/24/arctextjscurvingtextwithcss3andjquery/
Ejemplo
El documento HTML:
doctype html>
<html lang="es">
<head>
<script src="jquery.arctext.js"></script>
<script>
$(’#ejemplo’).arctext({radius: 100});
});
</script>
<style>
h1 {
margin-left: 40px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1 id="ejemplo">Ediciones Eni</h1>
</body>
</html>
4. Tooltips
Un tooltip puede aportar un elemento de información apreciable para el usuario. Existen numerosos plug ins
disponibles en la red. Hemos elegido tooltipster en la URL: http://iamceege.github.io/tooltipster/
Ejemplo
El documento HTML:
doctype html>
<html lang="es">
<head>
<script type="text/javascript"
src="js/jquery.tooltipster.js"></script>
$(".tooltip").tooltipster({
theme: ".my-custom-theme"
});
});
</script>
<link rel="stylesheet" type="text/css" href="css/tooltipster.css">
<style>
.my-custom-theme {
border-radius: 5px;
background: #9cf;
color: #000;
}
.my-custom-theme .tooltipster-content {
font-family: sans-serif;
font-size: 14px;
line-height: 16px;
padding: 8px 10px;
}
a {
color: black;
}
</style>
</head>
<body>
<p>La sociedad internacional <a href="http://google.es"
class="tooltip" title="Ver el célebre motor de búsqueda">Google</a>
Inc. se fundó el 4 de septiembre de 1998 en el garaje Google en Silicon
Valley, en California, por Larry Page y Sergueï Brin...</p>
</body>
</html>
5. Desvelar las contraseñas
Cuando introduce una contraseña, los caracteres ocultos aparecen en forma de asteriscos. El hecho de ocultar así
las contraseñas no aumenta la seguridad sino que aumenta considerablemente las posibilidades de equivocación
debido a errores al teclear. Muchos sitios permiten ahora desvelar su contraseña al introducirla.
El plug in hideShowPassword http://cloudfour.github.io/hideShowPassword/) permite al usuario ocultar o no su

contraseña al teclearla.
Por defecto, al introducir la contraseña, esta está oculta:
En cualquier momento el usuario puede hacer clic en el botón en forma de ojo para mostrar la contraseña:
Entonces la contraseña aparece en claro:
El documento HTML:
<!doctype html>
<html class="no-js" lang="es">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1">
<title>hideShowPassword for jQuery</title>

<link rel="stylesheet" href="css/demo.css">

<link rel="stylesheet" href="css/example.wink.css">

<script src="vendor/modernizr.custom.js"></script>
<script>if(Modernizr.input.placeholder)document.getElementsByTagName
(’html’)[0].className+=’ inputplaceholder’;</script>
</head>
<body>
<header>
<h1><span class="for">Plugin</span> hideShowPassword<span class="for">
para jQuery</span></h1>
</header>
<figure>
<div class="login">
<label class="login-label" for="username-1">Usuario</label>
<input class="login-field login-field-username"
id="username-1" type="text" placeholder="Usuario">
<label class="login-label" for="password-1">Contraseña</label>
<input class="login-field login-field-password"
id="password-1" type="password" placeholder="Contraseña">
</div>
<figcaption>¡Para ver su contraseña haga clic en el ojo!
</figcaption>
</figure>

<script src="vendor/jquery.min.js"></script>

<script src="hideShowPassword.min.js"></script>
<script>
// Por defecto la contraseña está oculta
$(’#password-1’).hidePassword(true);
</script>
</body>
</html>
6. Hacer zoom sobre una imagen
El plug in jQuery Image Zoom permite hacer grande una parte de la imagen. Tiene numerosas opciones de
configuración como el redimensionamiento de la lupa, el posicionamiento interno o externo de la imagen sobre la
que hacemos el zoom, la utilización de la rueda del ratón para variar el zoom, etc.
La presentación y los primeros elementos de instalación los puede encontrar en la dirección

http://www.elevateweb.co.uk/imagezoom . También dispone de diferentes ejemplos en la página
http://www.elevateweb.co.uk/imagezoom/examples y la descarga del plug in en la url http://www.elevateweb.co.uk/image
zoom/download
El truco consiste en utilizar dos imágenes. Una en baja resolución para la imagen visible y la otra en alta resolución
para la imagen grande.
Ejemplo
Aspecto inicial de la imagen:
Aspecto de la imagen con el zoom:
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src=’jquery.elevatezoom.js’></script>
</head>
<body>
<p>
<img id="zoom" src=’images/small/hds.png’ data-zoom-image=
"images/large/hdl.jpg">
</p>
<script>
$("#zoom").elevateZoom({
zoomType: "inner",
cursor: "crosshair"
});
});
</script>
</body>
</html>
7. Ampliar una miniatura
Inicialmente introducido por Google Image, el efecto lightbox que permite ampliar una imagen con un fondo de color
se ha convertido en un clásico de las aplicaciones Web.
Entre los numerosos plug ins disponibles, hemos elegido Lightbox2. En la página
http://lokeshdhakar.com/projects/lightbox2/ puede encontrar ejemplos, documentación detallada y el enlace de
descarga.
Ejemplo
Aspecto inicial, con la imagen en miniatura:
Aspecto obtenido después de hacer clic en la miniatura:
El documento HTML:
doctype html>
<html lang="es">
<head>
<link rel="stylesheet" href="css/lightbox.css">
<script src="http://code.jquery.com/jquery-1.12.0.js"> </script>
<script src="js/lightbox-2.6.min.js"></script>
</head>
<body>
<p>
<a href="img/images/flor.jpg" data-lightbox="flor"
title="Una bonita flor...">
<img class="example-image" src="img/images/thumb-flor.jpg"
alt=""></a>
</p>
</body>
</html>
8. Un carrusel de imágenes
En la web hay numerosos scripts o plug ins de carrusel de imágenes. Hemos escogido Tiny Carousel por su
simplicidad en la implementación.
En la página http://baijs.com/tinycarousel/ puede encontrar ejemplos, opciones de configuración y el enlace de

descarga.
Ejemplo
El documento HTML:
doctype html>
<html lang="es">
<head>
<link rel="stylesheet" href="css/website.css">
<script src="js/jquery.tinycarousel.min.js"></script>
$("#slider1").tinycarousel();
});
</script>
</head>
<body>
<div id="slider1">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<li><img src="images/picture6.jpg"></li>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
</body>
</html>
9. Gráficos a partir de una tabla
Sin duda, un gráfico es más expresivo que una tabla de datos. Para mostrar un gráfico en las páginas HTML, solo
existía hasta ahora la alternativa de realizar una captura de pantalla de la tabla en una hoja de cálculo de tipo
Excel.
El plug in visualize permite crear un gráfico sobre la marcha a partir de los datos de una tabla y mostrarlo
directamente en la página. Este plug in es espectacular y resulta particularmente útil cuando la tabla de datos se
actualiza con mucha frecuencia.
Puede encontrar una documentación muy detallada y el plug in en la URL:

http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
Ejemplo
La tabla de datos:
Un gráfico:
Otro gráfico:
El documento HTML:
doctype html>
<html lang="es">
<head>
<link href="css/basic.css" type="text/css" rel="stylesheet">
<script src="http://filamentgroup.github.com/EnhanceJS/
enhance.js"> </script>
<script>
enhance({
loadScripts: [
{src: ’js/excanvas.js’, iecondition: ’all’},
’js/jquery.js’,
’js/visualize.jQuery.js’,
’js/example.js’
],
loadStyles: [
’css/visualize.css’,
’css/visualize-light.css’
]
});
</script>
</head>
<body>
<table >
<caption>Registro individual por ítem</caption>
<thead>
<tr>
<td></td>
<th>Ítem 1</th>
<th>Ítem 2</th>
<th>Ítem 3</th>
<th>Ítem 4</th>
<th>Ítem 5</th>
</tr>
</thead>
<tbody>
<tr>
<th>A</th>
<td>190</td>
<td>160</td>
<td>40</td>
<td>120</td>
<td>100</td>
</tr>
<tr>
<th>B</th>
<td>5</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>80</td>
</tr>
<tr>
<th>C</th>
<td>10</td>
<td>180</td>
<td>10</td>
<td>85</td> ì
<td>105</td>
</tr>
<tr>
<th>D</th>
<td>40</td>
<td>80</td>
<td>90</td>
<td>25</td>
<td>125</td>
</tr>
</tbody>
</table>
</body>
</html>
10. Ordenar una tabla de datos
Otra maravilla de la programación, el plug in tablesorter permite ordenar los datos de cualquier columna de una
tabla, en orden ascendente o descendente. El script detecta automáticamente el tipo de información que contiene la
columna. Reconoce, entre otros, números, fechas, direcciones IP, etc.
La documentación (muy completa) y el plug in están disponibles en la dirección: http://tablesorter.com/docs/
Ejemplo
La tabla al cargar la página:
Es posible ordenar según la edad:
U ordenar descendientemente según el total.
El documento HTML:
<!doctype html>
<html lang="es">
<head>
<link href="css/jq.css" rel="stylesheet">
<link href="css/theme.default.css" rel="stylesheet">
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/jquery.tablesorter.widgets.min.js"></script>
<script>
$(function(){
$(’table’).tablesorter({
widgets : [’zebra’, ’columns’],
usNumberFormat : false,
sortReset : true,
sortRestart : true
});
});
</script>
</head>
<body>
<div class="demo">
<p>
<table class="tablesorter">
<thead>
<tr>
<th>Apellido</th>
<th>Nombre</th>
<th>Edad</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Martínez</td>
<td>Sofía</td>
<td>28</td>
<td>9.99</td>
</tr>
<tr>
<td>Díaz</td>
<td>Alan</td>
<td>33</td>
<td>19.99</td>
</tr>
<tr>
<td>Botero</td>
<td>Pedro</td>
<td>18</td>
<td>15.89</td>
</tr>
<tr>
<td>Ballarín</td>
<td>Amelia</td>
<td>45</td>
<td>153.19</td>
</tr>
<tr>
<td>Vílmez</td>
<td>Alberto</td>
<td>22</td>
<td>13.19</td>
</tr>
<tr>
<td>Parra</td>
<td>Carlota</td>
<td>22</td>
<td>42.98</td>
</tr>
</tbody>
</table>
</p>
</div>
</body>
</html>

Jquery Framework Javascript

Cargado por

Copyright:

Formatos disponibles

Jquery Framework Javascript

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Jquery Framework Javascript

Cargado por

Copyright:

Formatos disponibles

Dogram Code

Los capítulos del libro:

Christophe AUBRY ­ Luc VAN LANCKER

Accede a Gratis a la Biblioteca Online +300 Libros en PDF

l Agosto de 2006: versión estable de jQuery 1.0.

l Enero de 2007: jQuery 1.1.

l Enero de 2009: jQuery 1.3.

l Enero de 2010: jQuery 1.4.

l Enero de 2011: jQuery 1.5.

l Mayo de 2011: jQuery 1.6.

l Marzo de 2012: jQuery 1.7.

l Noviembre de 2012: jQuery 1.8.

l Febrero de 2013: jQuery 1.9.

l Junio de 2013: jQuery 1.10 y jQuery 2.0.

l Junio de 2016: jQuery 3.0.

l Julio de 2016: jQuery 3.1.

La evolución entre las versiones 1.10 y 2.0

jQuery 3.0 y 3.1

La versión 3.1 aporta algunas modificaciones y correcciones menores: http://blog.jquery.com/2016/07/07/jquery­3­1­0­

<script src="http://code.jquery.com/jquery número de versión.min.js"> </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/número de versión/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery número de versión.min.js"></script>

<script src=http://cdnjs.cloudflare.com/ajax/libs/jquery/número de versión/jquery.min.js></script>

La llamada a la librería se debe colocar entre las etiquetas <head>...</head>

Dispone entonces de las últimas versiones de las ramas 1, 2 y 3:

l jQuery 3.x: uncompressed, minified, slim, slim minified.

l jQuery Core 2.x: uncompressed, minified.

l jQuery Core 1.x: uncompressed, minified.

Haciendo referencia a este modelo, todo script jQuery empieza por:

Este modo de funcionamiento presenta muchas ventajas:

En la Web se encuentran scripts jQuery que comienzan con la escritura abreviada:

Para entrar en materia, vamos a construir un menú de navegación vertical desplegable.

Esta es la apariencia al cargarse la página:

Esta es la apariencia al hacer clic sobre Capítulo 1

Se presenta de la siguiente manera el archivo HTML de inicio:

El archivo a descargar es C01­07.html

Detallamos el script jQuery paso a paso.

Detallemos esta parte:

Para terminar esta función relativa a un clic en un párrafo.

Fin del ready y fin del script.

La documentación de jQuery es abundante en la Web, aunque la mayor parte está en inglés.

1. Selección por identificador

Selecciona el elemento HTML único cuyo identificador es id="identificador"

$("#box"): selecciona el elemento cuyo id es box.

Es la notación jQuery de getElementById en JavaScript clásico.

Rodeamos con un borde el segundo párrafo, cuyo identificador es "dos".

Partiendo del siguiente archivo HTML:

El archivo a descargar es el C02­2.1.html

Vamos a explicar el script jQuery:

$("#dos").css("border","1px solid black");

Fin del script.

2. Selección por nombre del elemento

$("div"): selecciona todas las capas <div> de la página.

Es la notación jQuery de getElementsByTagName en JavaScript clásico.

Rodeamos con un borde todos los párrafos del documento HTML.

El archivo a descargar es el C02­2.2.html

$("p").css("border","1px solid black");

3. Selección por clase

Selecciona todos los elementos HTML con la clase especificada.

Christophe AUBRY Luc VAN LANCKER

La versión 3.1 aporta algunas modificaciones y correcciones menores: http://blog.jquery.com/2016/07/07/jquery310

El archivo a descargar es C0107.html

El archivo a descargar es el C022.1.html

El archivo a descargar es el C022.2.html

El archivo a descargar es el C022.3.html

El archivo a descargar es el C023.1.html

El archivo a descargar es el C023.2.html

El archivo a descargar es el C023.3.html

El archivo a descargar es el C024.1.html

El archivo a descargar es el C024.2.html

El archivo a descargar es el C024.3.html

El archivo a descargar es el C024.4.html

El archivo a descargar es el C024.5.html

El archivo a descargar es el C024.6.html

El archivo a descargar es el C024.7.html

El archivo a descargar es el C024.8.html

El archivo a descargar es el C024.9.html

El archivo a descargar es el C024.10.html

El archivo a descargar es el C025.2.html

El archivo a descargar es el C025.3.html

El archivo a descargar es el C025.4.html