Manual del participante

ndice

ndice ............................................................................................................................................. 2
Formacin de la comunidad de aprendizaje ............................................................................ 4
Objetivo del curso ........................................................................................................................ 5
Objetivo .................................................................................................................................................. 5
Introduccin ........................................................................................................................................... 5

Unidad 1 Introduccin jQuery ................................................................................................... 6

Qu es jQuery?...................................................................................................................................... 6
Nuevas Maneras de programar JavaScript con Jquery...................................................................... 7
jQuery .........................................................................................................Error! Marcador no definido.
Aspectos importantes ........................................................................................................................... 7

Unidad 2 Carga de la librera...................................................................................................... 8

CDN ......................................................................................................................................................... 8
Nuestro servidor .................................................................................................................................. 10
Carga condicional ................................................................................................................................ 10

Unidad 3 Funcin Factora ........................................................................................................ 16

jQuery,$ ................................................................................................................................................ 16

Unidad 4 Selectores, CSS y XPath y personalizados .............................................................. 48

Selectores CSS3.................................................................................................................................... 48

Unidad 5 Alteraciones de estilos.............................................................................................. 61

Mtodos jQuery ................................................................................................................................... 63

Unidad 6 Los mtodos ............................................................................................................... 68

Mtodos addClass y removeClass ...................................................................................................... 68

Mtodos attr (nombre de propiedad) ............................................................................................... 69
attr (nombre de propiedad, valor) y removedAttr (nombre de propiedad) ................................. 69
llamadas encadenadas de mtodos del objeto jQuery .................................................................... 72
objeto jQuery ....................................................................................................................................... 72

Unidad 7 Eventos y Gestores de Eventos ................................................................................ 73

Administracin de eventos con jQuery ............................................................................................. 73

Eventos mouseover y mouseout ........................................................................................................ 73
Eventos hover....................................................................................................................................... 75
Eventos mousemove ........................................................................................................................... 75
Eventos mousedown y mouseup ....................................................................................................... 76
Evento dblclick .................................................................................................................................... 77
Evento focus ......................................................................................................................................... 78
Efecto blur ............................................................................................................................................ 78

Unidad 8 Efectos. Funciones Callback ..................................................................................... 79

Efectos con los mtodos show y hide ............................................................................................... 80
Efectos con los mtodos fandeln y fadeOut ..................................................................................... 81
Efectos con el mtodo fadeTo............................................................................................................ 82
Efecto con el mtodo toggle .............................................................................................................. 83

Unidad 9 DOM ............................................................................................................................ 84

Iteracin por los elementos (each) .................................................................................................... 84

Manual del participante

Navegacin ................................................................................................Error! Marcador no definido.

Manipulacin ....................................................................................................................................... 86
Mtodos text (), text (valor) ............................................................................................................... 89
val ................................................................................................................Error! Marcador no definido.

Unidad 10 Uso de plugins ......................................................................................................... 91

Ajax: mtodo load ............................................................................................................................... 92

Ajax: mtodo ajaxStart y ajaxStopo .................................................................................................. 95
$.get y $.post (Pasando datos al servidor por los mtodos GET y POST) ..................................... 99
$.getJSON ...................................................................................................Error! Marcador no definido.
$.ajax ...........................................................................................................Error! Marcador no definido.

Conclusiones finales ................................................................................................................ 102

Fuentes de consulta ................................................................................................................. 103

Cibergrafa ......................................................................................................................................... 103

Manual del participante

Formacin de la comunidad de aprendizaje

La formacin de la comunidad de aprendizaje es un proceso que debe llevarse a cabo para iniciar cada
uno de nuestros cursos.
Su finalidad es crear un clima propicio para la celebracin de la actividad instruccional, es decir, generar
un entendimiento previo entre el instructor y los participantes sobre los temas que se desarrollarn
durante sta, as como las estrategias educativas que se llevarn a cabo para lograr un mejor
aprendizaje.
Un adecuado manejo de la comunidad de aprendizaje es un elemento fundamental para garantizar la
satisfaccin de uno de los clientes involucrados en la imparticin de los cursos: los participantes.
Presentacin del
Instructor:

Nombre, profesin, aos de experiencia como instructor,

experiencia en la imparticin del curso, o cursos similares o
relacionados.

Alineacin de
expectativas:

El instructor recabar las expectativas de los participantes respecto

al curso, con el fin de dejarles claro el objetivo del mismo.
En caso de que alguna expectativa no coincida con los temas que el
curso contiene, el instructor dejar claro cules de las expectativas
expresadas no sern cubiertas con el curso y porqu.
Las expectativas alineadas sern anotadas en hojas de rotafolio
para su revisin al trmino del curso.
Durante el desarrollo del curso el instructor deber cubrir las
expectativas alineadas.

Presentacin del objetivo

del curso:

El instructor presentar a los participantes el objetivo del curso,

aclarando dudas al respecto si las hubiese.

Reglas de oro:

El instructor promover el establecimiento de reglas por parte de

los participantes que se observarn a travs del curso; por lo que
puede proponer: tiempo de tolerancia para iniciar las sesiones,
respeto hacia los compaeros, participacin de todos en tcnicas y
ejercicios grupales, etc.; se incluirn todos los puntos que los
participantes consideren pertinentes.
Se anotarn los acuerdos en hojas de rotafolio y se colocarn en un
espacio en el que sean visibles a lo largo de todo el curso.

Cumplimiento de
expectativas

Al finalizar el curso el instructor deber llevar a cabo una revisin

de las expectativas alineadas que se anotaron en hojas de rotafolio
al inicio del curso
Se revisar cada una de las expectativas alineadas palomeando las
que hayan sido cumplidas, y el instructor explicar de qu manera
se llev a cabo tal cumplimiento.

Manual del participante

Objetivo del curso

Objetivo

Al final del curso el participante, aprender a desarrollar aplicaciones

web profesionales a travs de las principales caractersticas de esta
ligera librera de JavaScript

Introduccin

Bienvenidos al manual sobre jQuery , con el que pretendemos clarificar a los usuarios el mtodo de
trabajo y programacin de aplicaciones del lado del cliente, compatibles con todos los navegadores
ms comunes.

Manual del participante

Unidad 1 Introduccin jQuery

Qu es jQuery?
Para simplificar, podramos decir que jQuery es un framework Javascript, pero quizs muchos de los
lectores se preguntarn qu es un framework. Pues es un producto que sirve como base para la
programacin avanzada de aplicaciones, que aporta una serie de funciones o cdigos para realizar tareas
habituales. Por decirlo de otra manera, framework son unas libreras de cdigo que contienen procesos o
rutinas ya listos para usar. Los programadores utilizan los frameworks para no tener que desarrollar ellos
mismos las tareas ms bsicas, puesto que en el propio framework ya hay implementaciones que estn
probadas, funcionan y no se necesitan volver a programar.
Por ejemplo, en el caso que nos ocupa, jQuery es un framework para el lenguaje Javascript, luego ser
un producto que nos simplificar la vida para programar en este lenguaje. Como probablemente
sabremos, cuando un desarrollador tiene que utilizar Javascript, generalmente tiene que preocuparse por
hacer scripts compatibles con varios navegadores y para ello tiene que incorporar mucho cdigo que lo
nico que hace es detectar el browser del usuario, para hacer una u otra cosa dependiendo de si es
Internet Explorer, Firefox, Opera, etc. jQuery es donde ms nos puede ayudar, puesto que implementa
una serie de clases (de programacin orientada a objetos) que nos permiten programar sin preocuparnos
del navegador con el que nos est visitando el usuario, ya que funcionan de exacta forma en todas las
plataformas ms habituales.
As pues, este framework Javascript, nos ofrece una infraestructura con la que tendremos mucha mayor
facilidad para la creacin de aplicaciones complejas del lado del cliente. Por ejemplo, con jQuery
obtendremos ayuda en la creacin de interfaces de usuario, efectos dinmicos, aplicaciones que hacen
uso de Ajax, etc. Cuando programemos Javascript con jQuery tendremos a nuestra disposicin una
interfaz para programacin que nos permitir hacer cosas con el navegador que estemos seguros que
funcionarn para todos nuestros visitantes. Simplemente debemos conocer las libreras del framework y
programar utilizando las clases, sus propiedades y mtodos para la consecucin de nuestros objetivos.
Adems, todas estas ventajas que sin duda son muy de agradecer, con jQuery las obtenemos de manera
gratuita, ya que el framework tiene licencia para uso en cualquier tipo de plataforma, personal o
comercial. Para ello simplemente tendremos que incluir en nuestras pginas un script Javascript que
contiene el cdigo de jQuery, que podemos descargar de la propia pgina web del producto y comenzar
a utilizar el framework.
El archivo del framework ocupa unos 56 KB, lo que es bastante razonable y no retrasar mucho la carga
de nuestra pgina (si nuestro servidor enva los datos comprimidos, lo que es bastante normal, el peso de
jQuery ser de unos 19 KB). Adems, nuestro servidor lo enviar al cliente la primera vez que visite una
pgina del sitio. En siguientes pginas el cliente ya tendr el archivo del framework, por lo que no
necesitar transferirlo y lo tomar de la cach. Con lo que la carga de la pgina slo se ver afectada por
el peso de este framework una vez por usuario. Las ventajas a la hora de desarrollo de las aplicaciones,
as como las puertas que nos abre jQuery compensan extraordinariamente el peso del paquete.

Manual del participante

Nuevas Maneras de programar JavaScript con Jquery

Cuando uno utiliza una librera debe adaptarse a sus mecanismos de uso, el tratar de
llevar los conocimientos que tenemos sobre un tema y aplicarlos a la fuerza en dicha
librera puede ser frustrante. Lo ms adecuado es ir viendo cual es la mecnica de
trabajar con dicha librera con problemas muy sencillos e ir complicndolo a medida
que entendemos su funcionamiento.
Lo forma de desarrollo evoluciona constantemente y el hecho de hacer uso de una
librera para poder seguir con nuestro desenvolvimiento dentro del rea es evolucionar
junto con la prctica y que mejor que aprendiendo las nuevas tecnologas diseadas
para el futuro y el futuro nos esta alcanzando.
Aspectos importantes
Es importante comentar que jQuery no es el nico framework que existe en el mercado.
Existen varias soluciones similares que tambin funcionan muy bien, que bsicamente nos
sirven para hacer lo mismo. Como es normal, cada uno de los frameworks tiene sus ventajas
e inconvenientes, pero jQuery es un producto con una aceptacin por parte de los
programadores muy buena y un grado de penetracin en el mercado muy amplio, lo que hace
suponer que es una de las mejores opciones. Adems, es un producto serio, estable, bien
documentado y con un gran equipo de desarrolladores a cargo de la mejora y actualizacin
del framework. Otra cosa muy interesante es la dilatada comunidad de creadores de plugins o
componentes, lo que hace fcil encontrar soluciones ya creadas en jQuery para implementar
asuntos como interfaces de usuario, galeras, votaciones, efectos diversos, etc.

Manual del participante

Unidad 2 Carga de la librera

CDN
Si utilizas jQuery, es una buena idea que cargues la librera desde un CDN (Content Delivery
Network).
Pero, qu es un CDN?
Es el nombre que recibe un grupo de servidores repartidos por todo el mundo en puntos
estratgicos y pensados para la distribucin de ficheros.
Hay varios CDNs gratuitos, entre ellos el de Google, el de Microsoft y el de Edgecast.
Tambien hay CDN's de pago. Algunos puede que te suenen como Akamai o Amazon
CloudFront
Cmo funciona un CDN?
La idea es que en vez de cargar las librerias desde tu servidor de hosting, las cargues
directamente desde el CDN. De este modo cuando se haga la peticin se cargar la librera (o
librerias solicitadas) desde el nodo mas cercano al cliente con lo que se cargar ms rapido.
Cmo lo utilizo en mi site?
Para cargar jQuery desde el CDN de Google, pondriamos en el HEADER de nuestro HTML lo
siguiente:
<script src="http://www.google.com/jsapi">
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script>
Y para cargarlo desde el CDN de Microsoft pondriamos esto:
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript">
</script>
Qu ventajas tiene usar un CDN?

Manual del participante

Usar CDN tiene varias ventajas:

Liberas a tu servidor de la carga de estos archivos

Incrementas las posibilidades de que el fichero est cacheado, ya que otros sitios que
usen tu CDN enlazaran al mismo fichero
Un CDN muy probablemente servir el fichero ms rapido que desde tu propio servidor
de hosting

Qu CDN gratuito me conviene utilizar?

Pues en Pingdom.com han hecho una comparativa de rendimiento entre los de Google,
Microsoft y Edgecast, y han llegado a unas interesantes conclusiones:

El CDN de Google es el ms lento de los 3 en America del Norte y en Europa

En Europa el CDN de Microsoft es el ms rapido
En Amrica del Norte, el CDN de Edgecast es el ms rapido
El CDN de Edgecast gana en terminos de rendimiento medio

Un ltimo factor a considerar es que el CDN ms usado es con el que tendras ms

posibilidades de tener tu archivo cacheado, pero por ahora no hay datos de cual es el CDN
ms utilizado.

Manual del participante

Nuestro servidor
Un servidor web es un equipo que esta en la escucha del puerto http(80), para nuestros fines
nos es suficiente con instalar apache web server, sin embargo cuando se habla de servidor
web casi siempre se incluye apache, php y msql,si deseas tener todos estos paquetes los
cuales te seran utiles a futuro te recomiendo instalar un xampp el cual esta disponible para:
GNU/Linux
Mac
Windows

Carga condicional

Por un lado hablamos de la carga de jQuery a travs de una red CDN y por otro lado la carga
a travs de nuestro propio servidor. Ambas opciones fueron descritas con detalle y
comentados los pros y contras, por lo que ahora vamos a ampliar un poco la informacin
presentando una manera nueva de cargar jQuery que aprovecha lo mejor de ambos mtodos.
En principio siempre es mejor cargar jQuery a travs de un CDN, que se supone que ser
mucho ms rpido que nuestro propio servidor. Sin embargo, en caso de fallo del CDN por
cualquier motivo, merece la pena ofrecer la posibilidad de acceder a jQuery a travs de una
copia de la librera en local. Esta tcnica nos ofrece total seguridad ante el uso de una copia
de jQuery o de otra librera trada desde un sitio web de terceros o CDN. La tcnica que
vamos a ver en este artculo es conocida como "fallback" y la vamos a implementar de
diversas maneras, para que cada uno escoja aquella que mejor le parezca.

Optimizar la carga de jQuery con la solucin proporcionada por Boilerplate

Boilerplate es un conjunto de herramientas y recursos para poder empezar a usar HTML5 con
garantas. Muchos de los lectores deben conocerlo. Entre otras muchas cosas, hemos sacado
de all un mtodo muy interesante para cargar jQuery, que es el que sigue.

10

Manual del participante

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
< script>window.jQuery || document.write('<script src="js/jquery1.7.1.min.js">x3C/script>')</script>

Como se puede ver, consiste en un par de scripts, colocados uno detrs de otro, que sirven
para acceder a la librera jQuery por medio de dos fuentes. Primero se accede a un script
externo, dentro de ajax.googleapis.com, que es el CDN proporcionado por Google Code. Ese
CDN generalmente funcionar, pero en el caso que falle, tenemos el segundo script. En l se
evala window.jQuery y en caso que de un estado negativo (solo ser negativa la evaluacin
en el caso que jQuery no se haya podido cargar desde el CDN) se hace un document.write
para colocar otra llamada a un script distinto, que contiene la librera, pero traa de nuestro
propio servidor con una ruta relativa.
Nota: Quizs hayas reparado en la ruta del primer script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
y te haya extraado que comience con dos barras. Eso no es un error de omisin del protocolo de comunicacin, sino
una URL absoluta que utiliza el mismo protocolo que la pgina que se est consultando. Es decir, si estamos en un
servidor seguro, el navegador acceder al script en la ruta
https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js y si estamos en un servidor normal se acceder por el
habitual http, en lugar de https.

Por este mismo motivo, si accedes al archivo HTML con el protocolo "file:" (es decir, hiciste
doble click sobre el archivo HTML para ejecutar la copia que tienes en el disco duro, se
intentara acceder al CDN por file://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js y
esa ruta nunca funcionara. Osea, que este sistema de comenzar una ruta absoluta por dos
barras inclindadas // te funcionar bien solo si ests accediendo al archivo a travs de un
servidor web.
De este modo podemos estar seguros que el script jQuery se traer del lugar ms ptimo, es
decir, del CDN, y si no se puede, desde la ruta en nuestro propio servidor de alojamiento. Es
una frmula rpida, sencilla y extremamente efectiva de optimizar la carga de tu jQuery y se
puede aplicar a cualquier otra librera que ests utilizando.
Mtodo optimizado de carga de jQuery con Modernizr.load
Modernizr es una librera Javascript que tambin te ofrece una serie de herramientas y
utilidades que te vendrn como anillo al dedo cuando quieras desarrollar webs de la nueva
generacin en HTML5. Estamos tratando acerca de estas libreras en el Manual de Modernizr.
En este artculo os traemos un mtodo de carga de jQuery a travs del mtodo load de
Modernizr que ya se explic brevemente en Modernizr.load() y la carga condicional de
libreras Javascript y CSS. Sin embargo, en esta ocasin vamos a comentar un par de detalles
y a hablar sobre un posible problema que podemos encontrarnos al utilizar esta tcnica.

11

Manual del participante

Nota: Es interesante comentar como referencia que el mtodo load de Modernizr est desarrollado por autores
diferentes del propio Modernizr. Se trata de un mdulo implementado directamente en Modernizr llamado yepnope.js
que es un cargador asncrono y condicional de recursos que funciona sobre Javascript. Puedes saber ms atravs de
la propia web de yepnope.js.

Bsicamente vamos a hacer lo mismo, intentar traernos jQuery desde el CDN y si falla usar
una ruta de nuestro servidor. Pero antes de ver el cdigo para hacer esto voy a comentar la
ventaja que tiene este mtodo y tambin el inconveniente que le veo.
Como parte positiva destacamos que este mtodo de load de Modernizr es capaz de traerse
en paralelo varios scripts, aunque luego se ejecutan secuencialmente, o por el orden que
queramos. Incluso permite traernos scripts solo si se cumplen determinadas condiciones.
Osea, es algo un poco ms complejo que el mtodo de Boilerplate, pero tambin bastante
ms verstil. En casos en los que estemos adquiriendo muchos archivos de script puede ser
muy interesante, porque Modernizr.load se los descargar todos a la vez y no uno por uno, lo
que seguramente ahorrar tiempo de carga en nuestra pgina con respecto a otros mtodos
de carga.
En la parte negativa de este mtodo veo que te complica un poco las cosas a la hora de
colocar scripts en la pgina. Debido a las caractersticas del mtodo y la posibilidad de traerse
condicionalmente unos scripts y otros, estamos obligados a colocar algunos scripts en lugares
especficos, para que el propio flujo de carga y ejecucin de las libreras funcione bien. Si
colocamos scripts a la ligera, dispersos en el cdigo de la pgina, posiblemente tengamos el
problema de que se lleguen a ejecutar incluso antes que las libreras necesarias estn
disponibles.
Comencemos observando este cdigo:
Modernizr.load([
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
callback: function () {
if ( !window.jQuery ) {
Modernizr.load('js/jquery-1.7.1.min.js');
}
}
},
{
load: 'js/js-necesita-jquery.js'
}
]);

En esta llamada al mtodo load tenemos la carga secuencial de dos grupos de scripts,
definidos entre corchetes y enviados como parmetro a Modernizr.load. En el primer grupo
hacemos la carga de jQuery y en el segundo grupo se trae una librera que necesita jQuery.

12

Manual del participante

Nota: Como deca, todos esos scripts se descargan en serie, pero se ejecutan de manera secuencial.

Lo bonito est en la carga de jQuery por CDN y el enunciado "callback:" que nos permite
indicar cdigo a ejecutar cuando la carga del fichero ha sido realizada. El flujo de carga sera
el siguiente.
Primero intentamos cargar jQuery desde el CDN con este cdigo:
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
Luego definimos una funcin callback para intentar comprobar si jQuery fue cargado
correctamente.
callback: function () {
if ( !window.jQuery ) {
Modernizr.load('js/jquery-1.7.1.min.js');
}
}

Esta funcin callback se ejecuta despus de que la carga anterior del CDN se haya
completado, o en caso contrario, si se produjo un error o un timeout.
Nota: Si has ledo la documentacin de Modernizr quizs hayas notado que aqu estamos utilizando el enunciado
"callback", mientras que ellos colocan el enunciado "complete". En principio complete debera funcionar, pero en la
prctica no he conseguido un efecto deseable cuando falla la carga de jQuery desde el CDN. Ocurre que con
"complete" se ejecutan los scripts que requieren jQuery sin haber esperado a cargar la copia local de las libreras. En
GitHub el creador de yepnope (la librera que implementa el load en Modernizr) sugiere utilizar el "callback" y con ello
conseguimos que funcione como se deseaba. En la misma nota comenta que este caso se resolver en una versin
ms moderna de yepnope.js.

Simplemente, en caso que no exista window.jQuery se carga la librera desde local. Con esto
podemos estar seguros que jQuery estar disponible, si no era en el CDN, al menos en la
copia que tenemos en nuestro propio servidor.
A continuacin tenemos el segundo bloque de script con una carga de un cdigo que necesita
jQuery para funcionar.
load: 'js/js-necesita-jquery.js'

Ese segundo bloque se ejecutar solo cuando el primer bloque haya terminado. Por supuesto,
en el caso que el CDN hubiese fallado, se esperar a disponer la copia de jQuery local.

13

Manual del participante

Nota: Ante un fallo del CDN, Modernizr tardar 10 segundos en acceder a la copia en local. Esto es porque algunos
navegadores ofrecen el mismo tipo de seal ante una carga con xito y ante un error. Por ello ellos han preferido
utilizar un tiempo de timeout para saber si efectivamente una carga tuvo un error. Mientras espera el mtodo load
continua la descarga de otros scripts, pero no ejecuta nada hasta haber ejecutado la copia de jQuery que tenamos en
local.

Quizs todo esto te parezca mucho lio y demasiadas cosas a tener en cuenta para algo que
Boilerplate soluciona de una manera ms simple. Adems, debido al flujo de ejecucin del
mtodo Modernizr.load, estamos obligados a colocar en un lugar determinado todos aquellos
scripts que requieran de jQuery. Por ello personalmente, si nuestro nico objetivo es
implementar el fallback de jQuery, para usar una copia en local cuando falla el CDN, preferira
el mtodo de Boilerplate.
Ahora bien, podemos ver un segundo ejemplo de carga de liberas que puede que ofrezca un
poco ms de sentido a este mtodo load. Imagina que ests desarrollando una pgina que
usa decenas de scripts externos con plugins y que deseas cargarlos todos a la vez para
ahorrar tiempo, en lugar de la carga secuencial que ofreceran otros sistemas. Entonces
podras usar algo como esto.
Modernizr.load([{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
callback: function () {
if (!window.jQuery) {
Modernizr.load('js/jquery-1.7.1.min.js');
}
}
}, {
load: ['js/jquery.animate-colors.js', 'js/jquery.easing.1.3.js'],
complete: function () {
jQuery(function () {
jQuery('#prueba').animate({
color: "#fa4",
"background-color": "#162"
}, 3000, "easeOutElastic");
});
}
}]);

Aqu tenemos un cdigo muy parecido al anterior, con la salvedad que estamos usando un
plugin adicional, aparte del propio script jQuery. En el primer bloque se carga jQuery o
bien la copia "fallback" que tenemos en local (del mismo modo que antes). La diferencia
es que ahora en el segundo bloque se carga un par de plugins y se utiliza un enunciado
"complete" para definir el cdigo que debe ejecutarse cuando se hayan cargado. Dentro
de la funcin definida en el "complete" podemos colocar cualquier cdigo que haga uso de
esos plugins jQuery. Este esquema puede repetirse para cargar no solo dos plugins, sino
varios, y la carga se realizar en paralel

14

Manual del participante

Conclusin
Sin lugar a dudas, con estas tcnicas ya no hay escusa para usar un hospedaje de archivos
CDN sin preocuparse de eventuales problemas, porque siempre contars con una copia en
local para solventarlos. El sistema de Boilerplate es muy sencillo y usable sin prcticamente
ninguna modificacin en un sitio web y el sistema de Modernizr un poco ms complejo, pero
que requerir pensar las cosas de una manera distinta a como las vienes realizando.
Hasta aqu la referencia para saber como se puede combinar el hosting CDN y el local de
jQuery para optimizar la carga.

15

Manual del participante

Unidad 3 Funcin Factora

jQuery,$
La funcin bsica de jQuery y una de las ms tiles tiene el mismo nombre que en Prototype,
ya que se trata de la "funcin dolar": $(). A diferencia de la funcin de Prototype, la de jQuery
es mucho ms que un simple atajo mejorado de la funcin document.getElementById().
La cadena de texto que se pasa como parmetro puede hacer uso de Xpath o de CSS para
seleccionar los elementos. Adems, separando expresiones con un carcter "," se puede
seleccionar un nmero ilimitado de elementos.
// Selecciona todos los enlaces de la pgina
$('a')
// Selecciona el elemento cuyo id sea "primero"
$('#primero')
// Selecciona todos los h1 con class "titular"
$('h1.titular')
// Selecciona todo lo anterior
$('a, #primero, h1.titular')

Las posibilidades de la funcin $() van mucho ms all de estos ejemplos sencillos, ya
que soporta casi todos los selectores definidos por CSS 3 (algo que dispondrn los
navegadores dentro de varios aos) y tambin permite utilizar XPath:
// Selecciona todos los prrafos de la pgina que tengan al menos un enlace
$('p[a]')
// Selecciona todos los radiobutton de los formularios de la pgina
$('input:radio')
// Selecciona todos los enlaces que contengan la palabra "Imprimir"
$('a:contains("Imprimir")');
// Selecciona los div que no estn ocultos
$('div:visible')
// Selecciona todos los elementos pares de una lista
$("ul#menuPrincipal li:even")
// Selecciona todos los elementos impares de una lista
$("ul#menuPrincipal li:odd")
// Selecciona los 5 primeros prrafos de la pgina
$("p:lt(5)")

16

Manual del participante

Como se puede comprobar, las posibilidades de la funcin $() son prcticamente ilimitadas,
por lo que la documentacin de jQuery sobre los selectores disponibles es la mejor forma de
descubrir todas sus posibilidades.

Sintaxis Bsica
Comprensin de declaraciones, nombres de variables, espacios en blanco, y otras sintaxis
bsicas de JavaScript.
Declaracin simple de variable
var foo = 'hola mundo';

Los espacios en blanco no tienen valor fuera de las comillas

var foo =

'hola mundo';

Los parntesis indican prioridad

2 * 3 + 5;
// es igual a 11, la multiplicacin ocurre primero
2 * (3 + 5); // es igual a 16, por los parntesis, la suma ocurre primero

La tabulacin mejora la lectura del cdigo, pero no posee ningn significado especial
var foo = function() {
console.log('hola');
};

Operadores Basicos
Los operadores bsicos permiten manipular valores.
Concatenacin
var foo = 'hola';
var bar = 'mundo';
console.log(foo + ' ' + bar); // la consola de depuracin muestra 'hola mundo'

17

Manual del participante

Multiplicacin y divisin
2 * 3;
2 / 3;

Incrementacin y decrementacin
var i = 1;
var j = ++i;
var k = i++;

// incrementacin previa: j es igual a 2; i es igual a 2

// incrementacin posterior: k es igual a 2; i es igual a 3

Operaciones con Nmeros y Cadenas de Caracteres

En JavaScript, las operaciones con nmeros y cadenas de caracteres (en ingls strings)
pueden ocasionar resultados no esperados.
Suma vs. concatenacin
var foo = 1;
var bar = '2';
console.log(foo + bar);

// error: La consola de depuracin muestra 12

Forzar a una cadena de caracteres actuar como un nmero

var foo = 1;
var bar = '2';
// el constructor 'Number' obliga a la cadena comportarse como un nmero
console.log(foo + Number(bar)); // la consola de depuracin muestra 3

El constructor Number, cuando es llamado como una funcin (como se muestra en el ejemplo)
obliga a su argumento a comportarse como un nmero. Tambin es posible utilizar el
operador de suma unaria, entregando el mismo resultado:

18

Manual del participante

Forzar a una cadena de caracteres actuar como un nmero (utilizando el operador de

suma unaria)
console.log(foo + +bar);

Operadores Lgicos
Los operadores lgicos permiten evaluar una serie de operandos utilizando operaciones AND
y OR.
Operadores lgicos AND y OR
var foo = 1;
var bar = 0;
var baz = 2;
foo || bar;
bar || foo;

// devuelve 1, el cual es verdadero (true)

// devuelve 1, el cual es verdadero (true)

foo && bar;

foo && baz;
baz && foo;

// devuelve 0, el cual es falso (false)

// devuelve 2, el cual es verdadero (true)
// devuelve 1, el cual es verdadero (true)

El operador || (OR lgico) devuelve el valor del primer operando, si ste es verdadero; caso
contrario devuelve el segundo operando. Si ambos operandos son falsos devuelve falso
(false). El operador && (AND lgico) devuelve el valor del primer operando si ste es falso;
caso contrario devuelve el segundo operando. Cuando ambos valores son verdaderos
devuelve verdadero (true), sino devuelve falso.
Puede consultar la seccin Elementos Verdaderos y Falsos para ms detalles sobre que
valores se evalan como true y cuales se evalan como false.
Nota
Puede que a veces note que algunos desarrolladores utilizan esta lgica en flujos de control
en lugar de utilizar la declaracin if. Por ejemplo:
// realizar algo con foo si foo es verdadero
foo && doSomething(foo);
// establecer bar igual a baz si baz es verdadero;

19

Manual del participante

// caso contrario, establecer a bar igual al

// valor de createBar()
var bar = baz || createBar();

Este estilo de declaracin es muy elegante y conciso; pero puede ser difcil para leer
(sobretodo para principiantes). Por eso se explcita, para reconocerlo cuando este leyendo
cdigo. Sin embargo su utilizacin no es recomendable a menos que est cmodo con el
concepto y su comportamiento.
Operadores de Comparacin
Los operadores de comparacin permiten comprobar si determinados valores son
equivalentes o idnticos.
Operadores de Comparacin
var foo
var
var
var

= 1;
bar = 0;
baz = '1';
bim = 2;

foo == bar;
foo != bar;
foo == baz;

// devuelve falso (false)

// devuelve verdadero (true)
// devuelve verdadero (true); tenga cuidado

foo === baz;

foo !== baz;
foo === parseInt(baz);
foo > bim;
bim > baz;
foo <= baz;

// devuelve falso (false)

// devuelve verdadero (true)
// devuelve verdadero (true)

// devuelve falso (false)

// devuelve verdadero (true)
// devuelve verdadero (true)

Cdigo Condicional
A veces se desea ejecutar un bloque de cdigo bajo ciertas condiciones. Las estructuras de
control de flujo a travs de la utilizacin de las declaraciones if y else permiten hacerlo.

20

Manual del participante

Control del flujo

var foo = true;
var bar = false;
if (bar) {
// este cdigo nunca se ejecutar
console.log('hola!');
}
if (bar) {
// este cdigo no se ejecutar
} else {
if (foo) {
// este cdigo se ejecutar
} else {
// este cdigo se ejecutar si foo y bar son falsos (false)
}
}

Nota
En una lnea singular, cuando se escribe una declaracin if, las llaves no son estrictamente
necesarias; sin embargo es recomendable su utilizacin, ya que hace que el cdigo sea
mucho ms legible.
Debe tener en cuenta de no definir funciones con el mismo nombre mltiples veces dentro de
declaraciones if/else, ya que puede obtener resultados no esperados.
Elementos Verdaderos y Falsos
Para controlar el flujo adecuadamente, es importante entender qu tipos de valores son
verdaderos y cuales falsos. A veces, algunos valores pueden parecer una cosa pero al final
terminan siendo otra.

21

Manual del participante

Valores que devuelven verdadero (true)

'0';
'any
[];
{};
1;

string'; // cualquier cadena

// un vector vaco
// un objeto vaco
// cualquier nmero distinto a cero

Valores que devuelven falso (false)

0;
''; // una cadena vaca
NaN; // la variable JavaScript "not-a-number" (No es un nmero)
null; // un valor nulo
undefined; // tenga cuidado -- indefinido (undefined) puede ser redefinido

Variables Condicionales Utilizando el Operador Ternario

A veces se desea establecer el valor de una variable dependiendo de cierta condicin. Para
hacerlo se puede utilizar una declaracin if/else, sin embargo en muchos casos es ms
conveniente utilizar el operador ternario. [Definicin: El operador ternario evala una
condicin; si la condicin es verdadera, devuelve cierto valor, caso contrario devuelve un valor
diferente.]
El operador ternario
// establecer a foo igual a 1 si bar es verdadero;
// caso contrario, establecer a foo igual a 0
var foo = bar ? 1 : 0;

El operador ternario puede ser utilizado sin devolver un valor a la variable, sin embargo este
uso generalmente es desaprobado.
Declaracin Switch
En lugar de utilizar una serie de declaraciones if/else/else if/else, a veces puede ser til la
utilizacin de la declaracin switch. [Definicin: La declaracin Switch evala el valor de una
variable o expresin, y ejecuta diferentes bloques de cdigo dependiendo de ese valor.]

22

Manual del participante

Una declaracin Switch

switch (foo) {
case 'bar':
alert('el valor es bar');
break;
case 'baz':
alert('el valor es baz');
break;
default:
alert('de forma predeterminada se ejecutar este cdigo');
break;
}

Las declaraciones switch son poco utilizadas en JavaScript, debido a que el mismo
comportamiento es posible obtenerlo creando un objeto, el cual posee ms potencial ya
que es posible reutilizarlo, usarlo para realizar pruebas, etc. Por ejemplo:
var stuffToDo = {
'bar' : function() {
alert('el valor es bar');
},
'baz' : function() {
alert('el valor es baz');
},
'default' : function() {
alert('de forma predeterminada se ejecutar este cdigo');
}
};
if (stuffToDo[foo]) {
stuffToDo[foo]();
} else {
stuffToDo['default']();
}

23

Manual del participante

Bucles
Los bucles (en ingls loops) permiten ejecutar un bloque de cdigo un determinado nmero de
veces.
// muestra en la consola 'intento 0', 'intento 1', ..., 'intento 4'
for (var i=0; i<5; i++) {
console.log('intento ' + i);
}

*Note que en el ejemplo se utiliza la palabra var antes de la variable i, esto hace que dicha
variable quede dentro del alcance (en ingls scope) del bucle. Ms adelante en este
captulo se examinar en profundidad el concepto de alcance.*
Bucles Utilizando For
Un bucle utilizando for se compone de cuatro estados y posee la siguiente estructura:
for ([expresinInicial]; [condicin]; [incrementoDeLaExpresin])
[cuerpo]

El estado expresinInicial es ejecutado una sola vez, antes que el bucle comience. ste otorga
la oportunidad de preparar o declarar variables.
El estado condicin es ejecutado antes de cada repeticin, y retorna un valor que decide si el
bucle debe continuar ejecutndose o no. Si el estado condicional evala un valor falso el bucle
se detiene.
El estado incrementoDeLaExpresin es ejecutado al final de cada repeticin y otorga la
oportunidad de cambiar el estado de importantes variables. Por lo general, este estado implica
la incrementacin o decrementacin de un contador.
El cuerpo es el cdigo a ejecutar en cada repeticin del bucle.
Un tpico bucle utilizando for
for (var i = 0, limit = 100; i < limit; i++) {
// Este bloque de cdigo ser ejecutado 100 veces
console.log('Actualmente en ' + i);
// Nota: el ltimo registro que se mostrar

24

Manual del participante

// en la consola ser "Actualmente en 99"

}

Bucles Utilizando While

Un bucle utilizando while es similar a una declaracin condicional if, excepto que el cuerpo va
a continuar ejecutndose hasta que la condicin a evaluar sea falsa.
while ([condicin]) [cuerpo]
Un tpico bucle utilizando while
var i = 0;
while (i < 100) {
// Este bloque de cdigo se ejecutar 100 veces
console.log('Actualmente en ' + i);
i++; // incrementa la variable i
}

Puede notar que en el ejemplo se incrementa el contador dentro del cuerpo del bucle, pero
tambin es posible combinar la condicin y la incrementacin, como se muestra a
continuacin:
Bucle utilizando while con la combinacin de la condicin y la incrementacin
var i = -1;
while (++i < 100) {
// Este bloque de cdigo se ejecutar 100 veces
console.log('Actualmente en ' + i);
}
Se comienza en -1 y luego se utiliza la incrementacin previa (++i).
Bucles Utilizando Do-while
Este bucle es exactamente igual que el bucle utilizando while excepto que el cuerpo es
ejecutado al menos una vez antes que la condicin sea evaluada.
do [cuerpo] while ([condicin])

25

Manual del participante

Un bucle utilizando do-while

do {
// Incluso cuando la condicin sea falsa
// el cuerpo del bucle se ejecutar al menos una vez.
alert('Hola');
} while (false);

Este tipo de bucles son bastantes atpicos ya que en pocas ocasiones se necesita un bucle
que se ejecute al menos una vez. De cualquier forma debe estar al tanto de ellos.
Break y Continue
Usualmente, el fin de la ejecucin de un bucle resultar cuando la condicin no siga
evaluando un valor verdadero, sin embargo tambin es posible parar un bucle utilizando la
declaracin break dentro del cuerpo.
Detener un bucle con break
for (var i = 0; i < 10; i++) {
if (something) {
break;
}
}

Tambin puede suceder que quiera continuar con el bucle sin tener que ejecutar ms
sentencias del cuerpo del mismo bucle. Esto puede realizarse utilizando la declaracin
continue.
Saltar a la siguiente iteracin de un bucle
for (var i = 0; i < 10; i++) {
if (something) {
continue;
}
// La siguiente declaracin ser ejecutada
// si la condicin 'something' no se cumple

26

Manual del participante

console.log('Hola');
}

Palabras Reservadas
JavaScript posee un nmero de palabras reservadas, o palabras que son especiales dentro
del mismo lenguaje. Debe utilizar estas palabras cuando las necesite para su uso especfico.

abstract

boolean

break

byte

case

catch

char

class

const

continue

debugger

default

delete

do

double

else

enum

export

extends

final

finally

float

for

function

goto

if

implements

27

Manual del participante

import

in

instanceof

int

interface

long

native

new

package

private

protected

public

return

short

static

super

switch

synchronized

this

throw

throws

transient

try

typeof

var

void

volatile

while

with

28

Manual del participante

Vectores
Los vectores (en espaol tambin llamados matrices o arreglos y en ingls arrays) son listas
de valores con ndice-cero (en ingls zero-index), es decir, que el primer elemento del vector
est en el ndice 0. stos son una forma prctica de almacenar un conjunto de datos
relacionados (como cadenas de caracteres), aunque en realidad, un vector puede incluir
mltiples tipos de datos, incluso otros vectores.
Un vector simple
var myArray = [ 'hola', 'mundo' ];

Acceder a los tems del vector a travs de su ndice

var myArray = [ 'hola', 'mundo', 'foo', 'bar' ];
console.log(myArray[3]);
// muestra en la consola 'bar'

Obtener la cantidad de tems del vector

var myArray = [ 'hola', 'mundo' ];
console.log(myArray.length);
// muestra en la consola 2

Cambiar el valor de un tem de un vector

var myArray = [ 'hola', 'mundo' ];
myArray[1] = 'changed';

Como se muestra en el ejemplo Cambiar el valor de un tem de un vector es posible cambiar

el valor de un tem de un vector, sin embargo, por lo general, no es aconsejable.
Aadir elementos a un vector
var myArray = [ 'hola', 'mundo' ];
myArray.push('new');

29

Manual del participante

Trabajar con vectores

var myArray = [ 'h', 'o', 'l', 'a' ];
var myString = myArray.join('');
var mySplit = myString.split('');

// 'hola'
// [ 'h', 'o', 'l', 'a' ]

Objetos
Los objetos son elementos que pueden contener cero o ms conjuntos de pares de nombres
claves y valores asociados a dicho objeto. Los nombres claves pueden ser cualquier palabra o
nmero vlido. El valor puede ser cualquier tipo de valor: un nmero, una cadena, un vector,
una funcin, incluso otro objeto.
[Definicin: Cuando uno de los valores de un objeto es una funcin, sta es nombrada como
un mtodo del objeto.] De lo contrario, se los llama propiedades.
Curiosamente, en JavaScript, casi todo es un objeto vectores, funciones, nmeros, incluso
cadenas y todos poseen propiedades y mtodos.
Creacin de un objeto literal
var myObject = {
sayHello: function() {
console.log('hola');
},
myName: 'Rebecca'
};
myObject.sayHello();

// se llama al mtodo sayHello,

// el cual muestra en la consola 'hola'

console.log(myObject.myName);

// se llama a la propiedad myName,

// la cual muestra en la consola 'Rebecca'

Nota
Notar que cuando se crean objetos literales, el nombre de la propiedad puede ser cualquier
identificador JavaScript, una cadena de caracteres (encerrada entre comillas) o un nmero:
var myObject = {

30

Manual del participante

validIdentifier: 123,
'some string': 456,
99999: 789
};

Los objetos literales pueden ser muy tiles para la organizacin del cdigo, para ms
informacin puede leer el artculo (en ingls) Using Objects to Organize Your Code por
Rebecca Murphey.
Funciones
Las funciones contienen bloques de cdigo que se ejecutaran repetidamente. A las mismas se
le pueden pasar argumentos, y opcionalmente la funcin puede devolver un valor.
Las funciones pueden ser creadas de varias formas:
Declaracin de una funcin
function foo() { /* hacer algo */ }

Declaracin de una funcin nombrada

var foo = function() { /* hacer algo */ }

Es preferible el mtodo de funcin nombrada debido a algunas profundas razones tcnicas.

Igualmente, es probable encontrar a los dos mtodos cuando se revise cdigo JavaScript.
2.9.1 Utilizacin de Funciones
Una funcin simple
var greet = function(person, greeting) {
var text = greeting + ', ' + person;
console.log(text);
};

greet('Rebecca', 'Hola');

// muestra en la consola 'Hola, Rebecca'

31

Manual del participante

Una funcin que devuelve un valor

var greet = function(person, greeting) {
var text = greeting + ', ' + person;
return text;
};
console.log(greet('Rebecca','Hola'));

// la funcin devuelve 'Hola, Rebecca',

// la cual se muestra en la consola

Una funcin que devuelve otra funcin

var greet = function(person, greeting) {
var text = greeting + ', ' + person;
return function() { console.log(text); };
};

var greeting = greet('Rebecca', 'Hola');

greeting(); // se muestra en la consola 'Hola, Rebecca'

Funciones Annimas Autoejecutables

Un patrn comn en JavaScript son las funciones annimas autoejecutables. Este patrn
consiste en crear una expresin de funcin e inmediatamente ejecutarla. El mismo es muy til
para casos en que no se desea intervenir espacios de nombres globales, debido a que
ninguna variable declarada dentro de la funcin es visible desde afuera.
Funcin annima autoejecutable
(function(){
var foo = 'Hola mundo';
})();

console.log(foo);

// indefinido (undefined)

Funciones como Argumentos

En JavaScript, las funciones son ciudadanos de primera clase pueden ser asignadas a
variables o pasadas a otras funciones como argumentos. En jQuery, pasar funciones como
argumentos es una prctica muy comn.

32

Manual del participante

Pasar una funcin annima como un argumento

var myFn = function(fn) {
var result = fn();
console.log(result);
};
myFn(function() { return 'hola mundo'; });
mundo'

// muestra en la consola 'hola

Pasar una funcin nombrada como un argumento

var myFn = function(fn) {
var result = fn();
console.log(result);
};
var myOtherFn = function() {
return 'hola mundo';
};
myFn(myOtherFn);

// muestra en la consola 'hola mundo'

Determinacin del Tipo de Variable

JavaScript ofrece una manera de poder comprobar el tipo (en ingls type) de una variable.
Sin embargo, el resultado puede ser confuso por ejemplo, el tipo de un vector es object.
Por eso, es una prctica comn utilizar el operador typeof cuando se trata de determinar el
tipo de un valor especfico.
var myFunction = function() {
console.log('hola');
};
var myObject = {
foo : 'bar'
};
var myArray = [ 'a', 'b', 'c' ];
var myString = 'hola';

33

Manual del participante

var myNumber = 3;
typeof
typeof
typeof
typeof
typeof

myFunction;
myObject;
myArray;
myString;
myNumber;

typeof null;

//
//
//
//
//

devuelve
devuelve
devuelve
devuelve
devuelve

'function'
'object'
'object' -- tenga cuidado
'string'
'number'

// devuelve 'object' -- tenga cuidado

if (myArray.push && myArray.slice && myArray.join) {

// probablemente sea un vector
// (este estilo es llamado, en ingls, "duck typing")
}
if (Object.prototype.toString.call(myArray) === '[object Array]') {
// definitivamente es un vector;
// esta es considerada la forma ms robusta
// de determinar si un valor es un vector.
}

jQuery ofrece mtodos para ayudar a determinar el tipo de un determinado valor. Estos
mtodos sern vistos ms adelante.
La palabra clave this
En JavaScript, as como en la mayora de los lenguajes de programacin orientados a objetos,
this es una palabra clave especial que hace referencia al objeto en donde el mtodo est
siendo invocado. El valor de this es determinado utilizando una serie de simples pasos:
1. Si la funcin es invocada utilizando Function.call o Function.apply, this tendr el valor del
primer argumento pasado al mtodo. Si el argumento es nulo (null) o indefinido (undefined),
this har referencia el objeto global (el objeto window);
2. Si la funcin a invocar es creada utilizando Function.bind, this ser el primer argumento que
es pasado a la funcin en el momento en que se la crea;
3. Si la funcin es invocada como un mtodo de un objeto, this referenciar a dicho objeto;
4. De lo contrario, si la funcin es invocada como una funcin independiente, no unida a algn
objeto, this referenciar al objeto global.

34

Manual del participante

Una funcin invocada utilizando Function.call

var myObject = {
sayHello : function() {
console.log('Hola, mi nombre es ' + this.myName);
},
myName : 'Rebecca'
};
var secondObject = {
myName : 'Colin'
};
myObject.sayHello();
// registra 'Hola, mi nombre es Rebecca'
myObject.sayHello.call(secondObject); // registra 'Hola, mi nombre es Colin'

Una funcin creada utilizando Function.bind

var myName = 'el objeto global',
sayHello = function () {
console.log('Hola, mi nombre es ' + this.myName);
},
myObject = {
myName : 'Rebecca'
};
var myObjectHello = sayHello.bind(myObject);
sayHello();
myObjectHello();

// registra 'Hola, mi nombre es el objeto global'

// registra 'Hola, mi nombre es Rebecca'

Una funcin vinculada a un objeto

var myName = 'el objeto global',
sayHello = function() {
console.log('Hola, mi nombre es ' + this.myName);
},
myObject = {
myName : 'Rebecca'

35

Manual del participante

},
secondObject = {
myName : 'Colin'
};
myObject.sayHello = sayHello;
secondObject.sayHello = sayHello;
sayHello();
myObject.sayHello();
secondObject.sayHello();

// registra 'Hola, mi nombre es el objeto global'

// registra 'Hola, mi nombre es Rebecca'
// registra 'Hola, mi nombre es Colin'

Nota
En algunas oportunidades, cuando se invoca una funcin que se encuentra dentro de un
espacio de nombres (en ingls namespace) amplio, puede ser una tentacin guardar la
referencia a la funcin actual en una variable ms corta y accesible. Sin embargo, es
importante no realizarlo en instancias de mtodos, ya que puede llevar a la ejecucin de
cdigo incorrecto. Por ejemplo:
var myNamespace = {
myObject: {
sayHello: function() {
console.log('Hola, mi nombre es ' + this.myName);
},
myName: 'Rebecca'
}
};
var hello = myNamespace.myObject.sayHello;
hello();

// registra 'Hola, mi nombre es undefined'

Para que no ocurran estos errores, es necesario hacer referencia al objeto en donde el
mtodo es invocado:

36

Manual del participante

var myNamespace = {
myObject : {
sayHello : function() {
console.log('Hola, mi nombre es ' + this.myName);
},
myName : 'Rebecca'
}
};
var obj = myNamespace.myObject;
obj.sayHello();

// registra 'Hola, mi nombre es Rebecca'

Alcance
El alcance (en ingls scope) se refiere a las variables que estn disponibles en un bloque de
cdigo en un tiempo determinado. La falta de comprensin de este concepto puede llevar a
una frustrante experiencia de depuracin.
Cuando una variable es declarada dentro de una funcin utilizando la palabra clave var, sta
nicamente est disponible para el cdigo dentro de la funcin todo el cdigo fuera de
dicha funcin no puede acceder a la variable. Por otro lado, las funciones definidas dentro de
la funcin podrn acceder a la variable declarada.
Las variables que son declaradas dentro de la funcin sin la palabra clave var no quedan
dentro del mbito de la misma funcin JavaScript buscar el lugar en donde la variable fue
previamente declarada, y en caso de no haber sido declarada, es definida dentro del alcance
global, lo cual puede ocasionar consecuencias inesperadas;
Funciones tienen acceso a variables definidas dentro del mismo alcance
var foo = 'hola';
var sayHello = function() {
console.log(foo);
};
sayHello();
console.log(foo);

// muestra en la consola 'hola'

// tambin muestra en la consola 'hola'

37

Manual del participante

El cdigo de afuera no tiene acceso a la variable definida dentro de la funcin

var sayHello = function() {
var foo = 'hola';
console.log(foo);
};
sayHello();
console.log(foo);

// muestra en la consola 'hola'

// no muestra nada en la consola

Variables con nombres iguales pero valores diferentes pueden existir en diferentes
alcances
var foo = 'mundo';
var sayHello = function() {
var foo = 'hola';
console.log(foo);
};
sayHello();
console.log(foo);

// muestra en la consola 'hola'

// muestra en la consola 'mundo'

Las funciones pueden ver los cambios en las variables antes de que la funcin sea
definida
var myFunction = function() {
var foo = 'hola';
var myFn = function() {
console.log(foo);
};
foo = 'mundo';
return myFn;
};
var f = myFunction();
f(); // registra 'mundo' -- error

38

Manual del participante

Alcance
// una funcin annima autoejecutable
(function() {
var baz = 1;
var bim = function() { alert(baz); };
bar = function() { alert(baz); };
})();
console.log(baz);

// La consola no muestra nada, ya que baz

// esta definida dentro del alcance de la funcin annima

bar();

//
//
//
//
//

bar esta definido fuera de la funcin annima

ya que fue declarada sin la palabra clave var; adems,
como fue definida dentro del mismo alcance que baz,
se puede consultar el valor de baz a pesar que
sta este definida dentro del alcance de la funcin annima

bim();

// bim no esta definida para ser accesible fuera de la funcin annima,

// por lo cual se mostrar un error

Clausuras
Las clausuras (en ingls closures) son una extensin del concepto de alcance (scope)
funciones que tienen acceso a las variables que estn disponibles dentro del mbito en donde
se cre la funcin. Si este concepto es confuso, no debe preocuparse: se entiende mejor a
travs de ejemplos.
En el ejemplo 2.47 se muestra la forma en que funciones tienen acceso para cambiar el valor
de las variables. El mismo comportamiento sucede en funciones creadas dentro de bucles
la funcin observa el cambio en la variable, incluso despus de que la funcin sea definida,
resultando que en todos los clicks aparezca una ventana de alerta mostrando el valor 5.
Cmo establecer el valor de i?
/* esto no se comporta como se desea; */
/* cada click mostrar una ventana de alerta con el valor 5 */
for (var i=0; i<5; i++) {
$('<p>hacer click</p>').appendTo('body').click(function() {
alert(i);
});
}

39

Manual del participante

Establecer el valor de i utilizando una clausura

/* solucin: clausurar el valor de i dentro de createFunction */
var createFunction = function(i) {
return function() {
alert(i);
};
};
for (var i = 0; i < 5; i++) {
$('<p>hacer click</p>').appendTo('body').click(createFunction(i));
}

Las clausuras tambin pueden ser utilizadas para resolver problemas con la palabra clave
this, la cual es nica en cada alcance.
Utilizar una clausura para acceder simultneamente a instancias de objetos internos y
externos.
var outerObj = {
myName: 'externo',
outerFunction: function() {
// provee una referencia al mismo objeto outerObj
// para utilizar dentro de innerFunction
var self = this;
var innerObj = {
myName: 'interno',
innerFunction: function() {
console.log(self.myName, this.myName); // registra 'externo interno'
}
};
innerObj.innerFunction();
console.log(this.myName); // registra 'externo'
}
};
outerObj.outerFunction();

40

Manual del participante

Este mecanismo puede ser til cuando trabaje con funciones de devolucin de llamadas (en
ingls callbacks). Sin embargo, en estos casos, es preferible que utilice Function.bind ya que
evitar cualquier sobrecarga asociada con el alcance (scope).

Conceptos Bsicos de jQuery

$(document).ready()
No es posible interactuar de forma segura con el contenido de una pgina hasta que el
documento no se encuentre preparado para su manipulacin. jQuery permite detectar dicho
estado a travs de la declaracin $(document).ready() de forma tal que el bloque se ejecutar
slo una vez que la pgina este disponible.
El bloque $(document).ready()
$(document).ready(function() {
console.log('el documento est preparado');
});

Existe una forma abreviada para $(document).ready() la cual podr encontrar algunas veces;
sin embargo, es recomendable no utilizarla en caso que este escribiendo cdigo para gente
que no conoce jQuery.
Forma abreviada para $(document).ready()
$(function() {
console.log('el documento est preparado');
});

Adems es posible pasarle a $(document).ready() una funcin nombrada en lugar de una

annima:

41

Manual del participante

Pasar una funcin nombrada en lugar de una funcin annima

function readyFn() {
// cdigo a ejecutar cuando el documento este listo
}

$(document).ready(readyFn);

Seleccin de Elementos
El concepto ms bsico de jQuery es el de seleccionar algunos elementos y realizar acciones
con ellos. La biblioteca soporta gran parte de los selectores CSS3 y varios ms no
estandarizados. En http://api.jquery.com/category/selectors/ se puede encontrar una completa
referencia sobre los selectores de la biblioteca.
A continuacin se muestran algunas tcnicas comunes para la seleccin de elementos:
Seleccin de elementos en base a su ID
$('#myId'); // notar que los IDs deben ser nicos por pgina

Seleccin de elementos en base al nombre de clase

$('div.myClass'); // si se especifica el tipo de elemento,
// se mejora el rendimiento de la seleccin

Seleccin de elementos por su atributo

$('input[name=first_name]'); // tenga cuidado, que puede ser muy lento

Seleccin de elementos en forma de selector CSS

$('#contents ul.people li');

Pseudo-selectores
$('a.external:first');

// selecciona el primer elemento <a>

// con la clase 'external'
$('tr:odd');
// selecciona todos los elementos <tr>
// impares de una tabla
$('#myForm :input');
// selecciona todos los elementos del tipo input

42

Manual del participante

$('div:visible');
$('div:gt(2)');
$('div:animated');

//
//
//
//

dentro del
selecciona
selecciona
selecciona

formulario #myForm
todos los divs visibles
todos los divs excepto los tres primeros
todos los divs actualmente animados

Nota
Cuando se utilizan los pseudo-selectores :visible y :hidden, jQuery comprueba la visibilidad
actual del elemento pero no si ste posee asignados los estilos CSS visibility o display en
otras palabras, verifica si el alto y ancho fsico del elemento es mayor a cero. Sin embargo,
esta comprobacin no funciona con los elementos <tr>; en este caso, jQuery comprueba si se
est aplicando el estilo display y va a considerar al elemento como oculto si posee asignado el
valor none. Adems, los elementos que an no fueron aadidos al DOM sern tratados como
ocultos, incluso si tienen aplicados estilos indicando que deben ser visibles (En la seccin
Manipulacin de este manual, se explica como crear y aadir elementos al DOM).
Como referencia, este es el fragmento de cdigo que utiliza jQuery para determinar cuando un
elemento es visible o no. Se incorporaron los comentarios para que quede ms claro su
entendimiento:
jQuery.expr.filters.hidden = function( elem ) {
var width = elem.offsetWidth, height = elem.offsetHeight,
skip = elem.nodeName.toLowerCase() === "tr";
// el elemento posee alto 0, ancho 0 y no es un <tr>?
return width === 0 && height === 0 && !skip ?
// entonces debe estar oculto (hidden)
true :
// pero si posee ancho y alto
// y no es un <tr>
width > 0 && height > 0 && !skip ?
// entonces debe estar visible
false :
//
//
//
//

si nos encontramos aqu, es porque el elemento posee ancho

y alto, pero adems es un <tr>,
entonces se verifica el valor del estilo display
aplicado a travs de CSS

43

Manual del participante

// para decidir si est oculto o no

jQuery.curCSS(elem, "display") === "none";
};
jQuery.expr.filters.visible = function( elem ) {
return !jQuery.expr.filters.hidden( elem );
};

Eleccin de Selectores
La eleccin de buenos selectores es un punto importante cuando se desea mejorar el
rendimiento del cdigo. Una pequea especificidad por ejemplo, incluir el tipo de elemento
(como div) cuando se realiza una seleccin por el nombre de clase puede ayudar bastante.
Por eso, es recomendable darle algunas pistas a jQuery sobre en que lugar del documento
puede encontrar lo que desea seleccionar. Por otro lado, demasiada especificidad puede ser
perjudicial. Un selector como #miTabla thead tr th.especial es un exceso, lo mejor sera utilizar
#miTabla th.especial.
jQuery ofrece muchos selectores basados en atributos, que permiten realizar selecciones
basadas en el contenido de los atributos utilizando simplificaciones de expresiones regulares.
// encontrar todos los <a> cuyo atributo rel terminan en "thinger"
$("a[rel$='thinger']");

Estos tipos de selectores pueden resultar tiles pero tambin ser muy lentos. Cuando sea
posible, es recomendable realizar la seleccin utilizando IDs, nombres de clases y nombres
de etiquetas.
Si desea conocer ms sobre este asunto, Paul Irish realiz una gran presentacin sobre
mejoras de rendimiento en JavaScript (en ingles), la cual posee varias diapositivas centradas
en selectores.
Comprobar Selecciones
Una vez realizada la seleccin de los elementos, querr conocer si dicha seleccin entreg
algn resultado. Para ello, pueda que escriba algo as:
if ($('div.foo')) { ... }

44

Manual del participante

Sin embargo esta forma no funcionar. Cuando se realiza una seleccin utilizando $(),
siempre es devuelto un objeto, y si se lo evala, ste siempre devolver true. Incluso si la
seleccin no contiene ningn elemento, el cdigo dentro del bloque if se ejecutar.
En lugar de utilizar el cdigo mostrado, lo que se debe hacer es preguntar por la cantidad de
elementos que posee la seleccin que se ejecut. Esto es posible realizarlo utilizando la
propiedad JavaScript length. Si la respuesta es 0, la condicin evaluar falso, caso contrario
(ms de 0 elementos), la condicin ser verdadera.

Evaluar si una seleccin posee elementos

if ($('div.foo').length) { ... }

Guardar Selecciones
Cada vez que se hace una seleccin, una gran cantidad de cdigo es ejecutado. jQuery no
guarda el resultado por si solo, por lo tanto, si va a realizar una seleccin que luego se har
de nuevo, deber salvar la seleccin en una variable.
Guardar selecciones en una variable
var $divs = $('div');

Nota
En el ejemplo Guardar selecciones en una variable, la variable comienza con el signo de
dlar. Contrariamente a otros lenguajes de programacin, en JavaScript este signo no posee
ningn significado especial es solamente otro carcter. Sin embargo aqu se utilizar para
indicar que dicha variable posee un objeto jQuery. Esta prctica una especie de Notacin
Hngara es solo una convencin y no es obligatoria.
Una vez que la seleccin es guardada en la variable, se la puede utilizar en conjunto con los
mtodos de jQuery y el resultado ser igual que utilizando la seleccin original.

45

Manual del participante

Nota
La seleccin obtiene slo los elementos que estn en la pgina cuando se realiz dicha
accin. Si luego se aaden elementos al documento, ser necesario repetir la seleccin o
aadir los elementos nuevos a la seleccin guardada en la variable. En otras palabras, las
selecciones guardadas no se actualizan mgicamente cuando el DOM se modifica.
Refinamiento y Filtrado de Selecciones
A veces, puede obtener una seleccin que contiene ms de lo que necesita; en este caso, es
necesario refinar dicha seleccin. jQuery ofrece varios mtodos para poder obtener
exactamente lo que desea.
Refinamiento de selecciones
$('div.foo').has('p');
// el elemento div.foo contiene elementos <p>
$('h1').not('.bar');
// el elemento h1 no posse la clase 'bar'
$('ul li').filter('.current'); // un item de una lista desordenada
// que posse la clase 'current'
$('ul li').first();
// el primer item de una lista desordenada
$('ul li').eq(5);
// el sexto item de una lista desordenada

Seleccin de Elementos de un Formulario

jQuery ofrece varios pseudo-selectores que ayudan a encontrar elementos dentro de los
formularios, stos son especialmente tiles ya que dependiendo de los estados de cada
elemento o su tipo, puede ser difcil distinguirlos utilizando selectores CSS estndar.
:button

Selecciona elementos <button> y con el atributo type='button'

:checkbox

Selecciona elementos <input> con el atributo type='checkbox'

:checked

Selecciona elementos <input> del tipo checkbox seleccionados

46

Manual del participante

:disabled

Selecciona elementos del formulario que estn deshabitados

:enabled

Selecciona elementos del formulario que estn habilitados

:file

Selecciona elementos <input> con el atributo type='file'

:image

Selecciona elementos <input> con el atributo type='image'

:input

Selecciona elementos <input>, <textarea> y <select>

:password

Selecciona elementos <input> con el atributo type='password'

:radio

Selecciona elementos <input> con el atributo type='radio'

:reset

Selecciona elementos <input> con el atributo type='reset'

:selected

Selecciona elementos <options> que estn seleccionados

:submit

Selecciona elementos <input> con el atributo type='submit'

47

Manual del participante

:text

Selecciona elementos <input> con el atributo type='text'

Utilizando pseudo-selectores en elementos de formularios
$('#myForm :input'); // obtiene todos los elementos inputs
// dentro del formulario #myForm

Unidad 4 Selectores, CSS y XPath y personalizados

Selectores
Conocer y dominar todos los selectores de CSS es imprescindible para crear diseos web
profesionales. El estndar de CSS 2.1 incluye una docena de tipos diferentes de selectores,
que permiten seleccionar de forma muy precisa elementos individuales o conjuntos de
elementos dentro de una pgina web.
Utilizando solamente los cinco selectores bsicos de CSS 2.1 (universal, de tipo,
descendente, de clase y de id) es posible disear cualquier pgina web. No obstante, los
selectores avanzados de CSS 2.1 permiten simplificar las reglas CSS y tambin el cdigo
HTML.
Desafortunadamente, los navegadores obsoletos como Internet Explorer 6 y sus versiones
anteriores no soportan este tipo de selectores avanzados, por lo que su uso no era comn
hasta hace poco tiempo. Hoy en da, todos los navegadores ms utilizados soportan los
selectores avanzados de CSS 2.1 y algunos de ellos tambin soportan la mayora o todos los
selectores propuestos por la futura versin CSS 3.

Selectores bsicos
Selector universal: selecciona todos los elementos de la pgina (CSS 2)
jquery("*")
Selector de tipo o etiqueta: selecciona todos los elementos con el tipo de etiqueta indicado
(CSS 1)
jQuery("div")

48

Manual del participante

Selector de clase: selecciona todos los elementos con la clase indicada (atributo class) (CSS
1)
jQuery("div.entrada")
Selector de identificador: selecciona el elemento con el identificador (atributo id) indicado
(CSS 1)
jQuery("div#cabecera")
Grupos de selectores: se puede combinar el resultado de varios selectores distintos
separndolos con comas (CSS 1)
jquery("p,div,a")
Selectores de atributos
Selector de atributo: selecciona elementos que tengan un cierto atributo (CSS 2)
jquery("a[rel]")
Tambin se puede seleccionar aquellos que tengan un cierto valor para un atributo (CSS 2)
jquery("a[rel='nofollow']")
O que tengan un valor distinto del indicado (jQuery)
jQuery("a[rel!='nofollow']")
Aquellos cuyo valor empieza por una cierta cadena (CSS 3)
jquery("a[href^='http://mundogeek.net/']")
Los que terminan con una cierta cadena (CSS 3)
jquery("a[href$='.com']")
Y los que contienen una cierta cadena (CSS 3)
jquery("a[href*='geek']")
Por ltimo, podemos hacer combinaciones de todo lo anterior (CSS 2)
jquery("a[rel='nofollow'][href]")

49

Manual del participante

Selectores de widgets
Pseudo clase botn: selecciona todos los botones (jQuery)
jquery(":button")
Pseudo clase checkbox: selecciona todos los checkboxes (jQuery)
jquery(":checkbox")
Pseudo clase archivo: selecciona todos los widgets de tipo archivo (jQuery)
jquery(":file")
Pseudo clase cabeceras: selecciona todas las cabeceras (jQuery)
jquery(":header")
Pseudo clase imagen: selecciona todas las imgenes (jQuery)
jquery(":image")
Pseudo clase input: selecciona todos los widgets de tipo input (jQuery)
jquery(":input")
Pseudo clase contrasea: selecciona todos los elementos password (jQuery)
jquery(":password")
Pseudo clase radiobutton: selecciona todos los elementos radiobutton (jQuery)
jquery(":radio")
Pseudo clase reset: selecciona todos los elementos reset (jQuery)
jquery(":reset")
Pseudo clase seleccionado: selecciona las opciones seleccionadas en un select (jQuery)
jquery(":select")

50

Manual del participante

Pseudo clase submit: selecciona todos los elementos submit (jQuery)

jquery(":submit")
Pseudo clase texto: selecciona todos las cajas de texto (jQuery)
jquery(":text")
Pseudo clase marcado: selecciona todos los radiobuttons y checkboxes marcados (CSS 3)
jquery(":checked")
Pseudo clase activo: selecciona todos los elementos que estn activos (CSS 3)
jquery("input:enabled")
Pseudo clase inactivo: selecciona todos los elementos que no estn activos (CSS 3)
jquery("input:disabled")
Pseudo clase ocultos: selecciona todos los elementos ocultos (jQuery)
jquery(":hidden")
Pseudo clase visible: selecciona todos los elementos visibles (jQuery)
jquery(":visible")
Selectores de jerarqua
Selector de descendientes: selecciona elementos que desciendan de otro elemento (CSS 1)
jquery("div.entrada h2")
Selector de hijos: selecciona elementos que sean hijos directos de otro elemento (CSS 2)
jquery("div.entrada > h2")
Pseudo clase hijo: selecciona el ensimo hijo de un elemento (CSS 3)
jquery("tr:nth-child(1)")
Pseudo clase primer hijo: selecciona el primero hijo de un elemento (CSS 2)
jquery("tr:first-child")

51

Manual del participante

Pseudo clase ltimo hijo: selecciona el ltimo hijo de un elemento (CSS 3)

jquery("tr:last-child")
Pseudo clase hijo nico: selecciona los elementos que sean hijos nicos de otros elementos
(CSS 3)
jquery("div:only-child")
Pseudo clase ndice: selecciona el elemento con el ndice indicado de un grupo de elementos
(jQuery)
jquery("td:eq(0)")
Pseudo clase primero: selecciona el primer elemento de un grupo de elementos. Equivale a
eq(0) (jQuery)
jquery("td:first)")
Pseudo clase ltimo: selecciona el ltimo elemento de un grupo de elementos (jQuery)
jquery("td:last)")
Pseudo clase mayor que: selecciona todos los elementos con un ndice mayor que el indicado
en un grupo de elementos (jQuery)
jquery("td:gt(0)")
Pseudo clase menor que: selecciona todos los elementos con un ndice menor que el indicado
en un grupo de elementos (jQuery)
jquery("td:lt(3)")
Pseudo clase par: selecciona los elementos pares de un grupo de elementos (jQuery)
jquery("td:even")
Pseudo clase impar: selecciona los elementos impares de un grupo de elementos (jQuery)
jquery("td:odd")
Selector de hermanos: selecciona todos los hermanos que se encuentren precedidos de otro
elemento (CSS 3)
jquery("div.entrada ~ p")

52

Manual del participante

Selector de prximo adyacente: similar al anterior, pero slo selecciona el adyacente directo
(CSS 2)
jquery("div.entrada + p")
Pseudo clase padre: selecciona los padres de otros elementos (jQuery)
jquery("h2:parent")
Pseudo clase vaco: selecciona los elementos que no tengan ningn hijo, incluyendo texto
plano (CSS 3)
jquery(":empty")
Otros selectores
Pseudo clase animado: selecciona todos los elementos que estn en proceso de animacin
en este momento (jQuery)
jquery(":animated")
Pseudo clase contiene: selecciona todos los elementos que contengan el texto indicado,
directamente o en uno de los hijos (jQuery)
jquery("div:contains('Mundo geek')")
Pseudo clase tiene: selecciona todos los elementos que contengan al menos un elemento que
responda al selector indicado (jQuery)
jquery("div:has(h2)")
Pseudo clase negacin: selecciona todos los elementos que no cumplan con el selector dado
(CSS 3)
jquery("div:not(.entrada)")

53

Manual del participante

Selector de hijos
Se trata de un selector similar al selector descendente, pero muy diferente en su
funcionamiento. Se utiliza para seleccionar un elemento que es hijo de otro elemento y se
indica mediante el "signo de mayor que" (>).
Mientras que en el selector descendente slo importa que un elemento est dentro de otro,
independientemente de lo profundo que se encuentre, en el selector de hijos el elemento debe
ser hijo directo de otro elemento.
p > span { color: blue; }
<p>
<span>Texto1</span>
</p>
<p>
<a href="#">
<span>Texto2</span>
</a>
</p>

En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento <span>
que sea hijo directo de un elemento <p>", por lo que el primer elemento <span> cumple la
condicin del selector. Sin embargo, el segundo elemento <span> no la cumple porque es
descendiente pero no es hijo directo de un elemento <p>.
Utilizando el mismo ejemplo anterior se pueden comparar las diferencias entre el selector
descendente y el selector de hijos:
p a { color: red; }
p > a { color: red; }
<p>
<a href="#">Enlace1</a>
</p>
<p>
<span>
<a href="#">Enlace2</a>
</span>
</p>

El primer selector es de tipo descendente (p a) y por tanto se aplica a todos los elementos <a>
que se encuentran dentro de elementos <p>. En este caso, los estilos de este selector se
aplican a los dos enlaces.

54

Manual del participante

El segundo selector es de hijos (p > a) por lo que obliga a que el elemento <a> sea hijo directo
de un elemento <p>. Por tanto, los estilos del selector p > a no se aplican al segundo enlace
del ejemplo anterior.
Selector adyacente
El selector adyacente se emplea para seleccionar elementos que son hermanos (su elemento
padre es el mismo) y estn seguidos en el cdigo HTML. Este selector emplea en su sintaxis
el smbolo +. Si se considera el siguiente ejemplo:
h1 + h2 { color: red }
<body>
<h1>Titulo1</h1>
<h2>Subttulo</h2>
...
<h2>Otro subttulo</h2>
...
</body>

Los estilos del selector h1 + h2 se aplican al primer elemento <h2> de la pgina, pero no al
segundo <h2>, ya que:

El elemento padre de <h1> es <body>, el mismo padre que el de los dos elementos <h2>.
As, los dos elementos <h2> cumplen la primera condicin del selector adyacente.

El primer elemento <h2> aparece en el cdigo HTML justo despus del elemento <h1>,
por lo que este elemento <h2> tambin cumple la segunda condicin del selector
adyacente.

Por el contrario, el segundo elemento <h2> no aparece justo despus del elemento <h1>,
por lo que no cumple la segunda condicin del selector adyacente y por tanto no se le
aplican los estilos de h1 + h2.

El siguiente ejemplo puede ser til para los textos que se muestran como libros:
p + p { text-indent: 1.5em; }

En muchos libros es habitual que la primera lnea de todos los prrafos est indentada, salvo
la primera lnea del primer prrafo. El selector p + p selecciona todos los prrafos que estn
dentro de un mismo elemento padre y que estn precedidos por otro prrafo. En otras
palabras, el selector p + p selecciona todos los prrafos de un elemento salvo el primer
prrafo.

55

Manual del participante

El selector adyacente requiere que los dos elementos sean hermanos, por lo que su elemento
padre debe ser el mismo. Si se considera el siguiente ejemplo:
p + p { color: red; }
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<div>
<p>Lorem ipsum dolor sit amet...</p>
</div>

En el ejemplo anterior, solamente el segundo prrafo se ve de color rojo, ya que:

El primer prrafo no va precedido de ningn otro prrafo, por lo que no cumple una de las
condiciones de p + p

El segundo prrafo va precedido de otro prrafo y los dos comparten el mismo padre, por
lo que se cumplen las dos condiciones del selector p + p y el prrafo muestra su texto de
color rojo.

El tercer prrafo se encuentra dentro de un elemento <div>, por lo que no se cumple

ninguna condicin del selector p + p ya que ni va precedido de un prrafo ni comparte
padre con ningn otro prrafo.

Selector de atributos
El ltimo tipo de selectores avanzados lo forman los selectores de atributos, que permiten
seleccionar elementos HTML en funcin de sus atributos y/o valores de esos atributos.
Los cuatro tipos de selectores de atributos son:

[nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado

nombre_atributo, independientemente de su valor.

[nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado

nombre_atributo con un valor igual a valor.

[nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo

llamado nombre_atributo y cuyo valor es una lista de palabras separadas por espacios en
blanco en la que al menos una de ellas es exactamente igual a valor.

[nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo

llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero
que comienza con valor. Este tipo de selector slo es til para los atributos de tipo lang que

indican el idioma del contenido del elemento.

56

Manual del participante

A continuacin se muestran algunos ejemplos de estos tipos de selectores:

/* Se muestran de color azul todos los enlaces que tengan
un atributo "class", independientemente de su valor */
a[class] { color: blue; }
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" con el valor "externo" */
a[class="externo"] { color: blue; }
/* Se muestran de color azul todos los enlaces que apunten
al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }
/* Se muestran de color azul todos los enlaces que tengan
un atributo "class" en el que al menos uno de sus valores
sea "externo" */
a[class~="externo"] { color: blue; }
/* Selecciona todos los elementos de la pgina cuyo atributo
"lang" sea igual a "en", es decir, todos los elementos en ingls */
*[lang=en] { ... }
/* Selecciona todos los elementos de la pgina cuyo atributo
"lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */
*[lang|="es"] { color : red }

Selectores de CSS 3
La futura versin CSS 3 incluye todos los selectores de CSS 2.1 y aade otras decenas de
selectores, pseudo-clases y pseudo-elementos. La lista provisional de novedades y su
explicacin detallada se puede encontrar en el mdulo de selectores de CSS 3.
En primer lugar, CSS 3 aade tres nuevos selectores de atributos:

elemento[atributo^="valor"], selecciona todos los elementos que disponen de ese atributo y

cuyo valor comienza exactamente por la cadena de texto indicada.

elemento[atributo$="valor"], selecciona todos los elementos que disponen de ese atributo y

cuyo valor termina exactamente por la cadena de texto indicada.

elemento[atributo*="valor"], selecciona todos los elementos que disponen de ese atributo y

cuyo valor contiene la cadena de texto indicada.

De esta forma, se pueden crear reglas CSS tan avazadas como las siguientes:
/* Selecciona todos los enlaces que apuntan a una direccin de correo electrnico
*/
a[href^="mailto:"] { ... }

57

Manual del participante

/* Selecciona todos los enlaces que apuntan a una pgina HTML */

a[href$=".html"] { ... }
/* Selecciona todos los ttulos h1 cuyo atributo title contenga la palabra
"captulo" */
h1[title*="captulo"] { ... }

Otro de los nuevos selectores de CSS 3 es el "selector general de elementos hermanos", que
generaliza el selector adyacente de CSS 2.1. Su sintaxis es elemento1 ~ elemento2 y
selecciona el elemento2 que es hermano de elemento1 y se encuentra detrs en el cdigo
HTML. En el selector adyacente la condicin adicional era que los dos elementos deban estar
uno detrs de otro en el cdigo HTML, mientras que ahora la nica condicin es que uno est
detrs de otro.
Si se considera el siguiente ejemplo:
h1 + h2 { ... }
h1 ~ h2 { ... }

/* selector adyacente */
/* selector general de hermanos */

<h1>...</h1>
<h2>...</h2>
<p>...</p>
<div>
<h2>...</h2>
</div>
<h2>...</h2>

El primer selector (h1 + h2) slo selecciona el primer elemento <h2> de la pgina, ya que es el
nico que cumple que es hermano de <h1> y se encuentra justo detrs en el cdigo HTML.
Por su parte, el segundo selector (h1 ~ h2) selecciona todos los elementos <h2> de la pgina
salvo el segundo. Aunque el segundo <h2> se encuentra detrs de <h1> en el cdigo HTML,
no son elementos hermanos porque no tienen el mismo elemento padre.
Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3, pero cambia su sintaxis y ahora
se utilizan :: en vez de : delante del nombre de cada pseudo-elemento:

::first-line, selecciona la primera lnea del texto de un elemento.

::first-letter, selecciona la primera letra del texto de un elemento.

::before, selecciona la parte anterior al contenido de un elemento para insertar nuevo contenido

generado.

::after, selecciona la parte posterior al contenido de un elemento para insertar nuevo contenido

generado.

58

Manual del participante

CSS 3 aade adems un nuevo pseudo-elemento:

::selecion, selecciona el texto que ha seleccionado un usuario con su ratn o teclado.

Las mayores novedades de CSS 3 se producen en las pseudo-clases, ya que se aaden 12

nuevas, entre las cuales se encuentran:

elemento:nth-child(numero), selecciona el elemento indicado pero con la condicin de que

sea el hijo ensimo de su padre. Este selector es til para seleccionar el segundo prrafo de un
elemento, el quinto elemento de una lista, etc.

elemento:nth-last-child(numero), idntico al anterior pero el nmero indicado se empieza a

contar desde el ltimo hijo.

elemento:empty, selecciona el elemento indicado pero con la condicin de que no tenga ningn

hijo. La condicin implica que tampoco puede tener ningn contenido de texto.

elemento:first-child y elemento:last-child, seleccionan los elementos indicados pero con

la condicin de que sean respectivamente los primeros o ltimos hijos de su elemento padre.

elemento:nth-of-type(numero), selecciona el elemento indicado pero con la condicin de que

sea el ensimo elemento hermano de ese tipo.

elemento:nth-last-of-type(numero), idntico al anterior pero el nmero indicado se empieza

a contar desde el ltimo hijo.

Algunas pseudo-clases como :nth-child(numero) permiten el uso de expresiones complejas

para realizar selecciones avanzadas:
li:nth-child(2n+1) { ... }
*/
li:nth-child(2n)
{ ... }
*/
/* Las siguientes
p:nth-child(4n+1)
p:nth-child(4n+2)
p:nth-child(4n+3)
p:nth-child(4n+4)

/* selecciona todos los elementos impares de una lista

/* selecciona todos los elementos pares de una lista

reglas alternan cuatro estilos diferentes para los prrafos */

{ ... }
{ ... }
{ ... }
{ ... }

Empleando la pseudo-clase :nth-of-type(numero) se pueden crear reglas CSS que alternen la

posicin de las imgenes en funcin de la posicin de la imagen anterior:
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n)
{ float: left; }

59

Manual del participante

Otro de los nuevos selectores que incluir CSS 3 es :not(), que se puede utilizar para
seleccionar todos los elementos que no cumplen con la condicin de un selector:
:not(p) { ... } /* selecciona todos los elementos de la pgina que no sean
prrafos */
:not(#especial) { ... } /* selecciona cualquier elemento cuyo atributo id no sea
"especial" */

Aunque todava faltan muchos aos hasta que la versin CSS 3 sustituya a la actual
versin CSS 2.1, los navegadores que ms se preocupan por los estndares (Opera,
Safari y Firefox) incluyen soporte para varios o casi todos los selectores de CSS 3.
Existe una herramienta llamada CSS Selectors test que permite comprobar los selectores
que soporta el navegador con el que se hace la prueba.

60

Manual del participante

Unidad 5 Alteraciones de estilos

Como ya sabemos, jQuery nos permite modificar el DOM de una pgina web de una forma
sencilla. Una de las cosas que nos deja modificar de forma sencilla son los estilos CSS de los
elementos.
Lo primero que vamos a hacer es crear un prrafo con texto. A posterior, dinmicamente,
cambiaremos el color del texto, su tamao, el color de fondo,... vamos, modificar el estilo con
jQuery.
Pongamos el prrafo en HTML:
1. <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper

sem a justo. Aenean metus. Quisque eu purus at leo vehicula laoreet. Aenean
et libero. Curabitur rhoncus erat non quam. Sed sodales fringilla diam. Nulla
velit sapien, fringilla elementum, ultrices nec, fringilla id, erat. Morbi at
nibh eget justo molestie mattis. Ut eleifend dapibus ante. Sed vitae risus in
est suscipit congue. Mauris suscipit ligula at lectus.</P>

Adems aadiremos un botn, que ser el que nos permita modificar el estilo con jQuery. Es
importante darle al botn un id, ya que jQuery utilizar el id para asignarle la funcionalidad.
1. <button id="cambiar">Cambiar estilo</button>

Ahora cargaremos la librera jQuery.

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

61

Manual del participante

El cdigo jQuery lo vamos a poner dentro de su funcin ready. Hay que recordar que la
funcin ready es la que se empieza a ejecutar cuando tenemos cargada toda la pgina.
1.

2. $(document).ready(function(){
3.

...

4. });
5.

Mediante la funcin $() accedemos al botn de la pgina. Para ello pasamos como parmetro
el id del botn precedido de una almohadilla (#). El evento que disparar el resto del cdigo
ser click.
1.

2.

$("#cambiar").click(function() {...}

3.

Ya solo nos queda poner el cdigo que nos permite modificar el estilo con jQuery. Esto lo
conseguimos con la funcin .css. Esta funcin nos permite pasarle por parmetro los atributos
CSS que queremos modificar.
1.

2. $("p").css({'color':'red','font-size':'1.3em','background':'yellow'});
3.

Hay que ver tanto los atributos CSS como los valores asignados van entre comillas.
El cdigo para modificar el estilo con jQuery completo sera:
1.

2. <script type="text/javascript">
3. $(document).ready(function(){
4.

$("#cambiar").click(function() {

5.

$("p").css({'color':'red','font-size':'1.3em','background':'yellow'});

6.

});

62

Manual del participante

7.
8. });
9. </script>

Mtodos jQuery
Los mtodos del DOM son aquellos que permiten manipular los elementos de la pgina,
aadir o quitar etiquetas, cambiarlas de sitio o duplicarlas, leer atributos, crearlos o cambiarles
su valor. Estas son algunas tareas que podemos hacer con los mtodos del DOM de jQuery
de una manera ms simple de como lo haramos con javascript.
Ya vimos en la pgina anterior los mtodos .html() y .text(), los cuales permiten cambiar el
contenido de un elemento. Estos tambin podemos considerarlos mtodos del DOM, pues con
ellos tambin se cambia el contenido de la pgina. Aparte de estos mtodos veremos aqu
algunos ms:
Mtodos .append() y .prepend()
El mtodo .apppend aade texto o cdigo HTML al final del elemento al que se refiere,
por ejemplo:
$("div").append("<p>aadido un ltimo prrafo</p>");
Este cdigo aade un parrafo al final de todos los elementos "div" de la pgina.
Observese que el texto o cdigo a aadir se pasa dentro del parntesis como parmetro.
De forma similar, el mtodo .prepend() aade texto o cdigo html al principio del elemento
seleccionado:
$("div").append("<p>aadido un primer prrafo</p>");

63

Manual del participante

Mtodos .after() y .before()

Estos mtodos tambin insertan un nuevo cdigo en la pgina, la diferencia con los
anteriores es que el cdigo no forma parte del elemento seleccionado, sino que se inserta
delante o despus de l, creando as un nuevo elemento.
El mtodo .after(); inserta un nuevo elemento que se coloca detrs del seleccionado.
$("#elemento").after("<p>nuevo elemento detrs del
seleccionado</p>");
De igual manera el mtodo .before() inserta un nuevo elemento delante del seleccionado:
$("#elemento").before("<p>nuevo elemento delante del
seleccionado</p>");
Eliminar elementos
Dos son los mtodos que utiliza jQuery para eliminar elementos, el mtodo .remove() y el
mtodo .empty()
El mtodo .remove() elimina por completo el elemento al que se refiere:
$("#div1").remove();
En este ejemplo el elemento id="div1" desaparece por completo de la pgina.
El mtodo .empty() elimina el contenido del elemento al que se refiere, sin embargo ste
conserva sus etiquetas, convirtindose en un elemento vaco.
$("#div2").empty();
En este caso se conserva el id="div2" pero el texto y resto de contenido del div se elimina.
Al eliminar un elemento se eliminan tambin todos los elementos secundarios (etiquetas
anidadas) que dependen de l. Estos dos mtodos normalmente no suelen llevar parmetros,
sin embargo podemos pasar un parmetro a modo de filtro indicando qu elementos del
selector queremos que sean eliminados, por ejemplo:
$("#div1").remove("h2");
Aqu se eliminan nicamente las etiquetas "h2" incluidas dentro del id="div1".

64

Manual del participante

Crear nuevos elementos

Hemos visto que al usar los mtodos "append", "prepend", "after" y "before" se creaban
nuevos elementos en la pgina. Sin embargo podemos tambin crear nuevos elementos y
guardarlos en una variable, para usarlos ms tarde a conveniencia.
Si al objeto jquery $(); , le pasamos como parmetro un texto en HTML que forme una
etiqueta, sta la podemos guardar como un nuevo elemento.
nuevo=$("<p>Nuevo <b>elemento</b> de la pgina</p>");
Acabamos de crear un nuevo elemento que hemos guardado en una variable, sin
embargo ste no forma parte de la pgina hasta que no lo incorporemos. Para ello podemos
usar cualquiera de los mtodos para aadir elementos por ejemplo:
$("#div1").append(nuevo);

Copiar elementos
Otras veces lo que buscamos es copiar un elemento de la pgina en otro lugar,
conservando o no el original. Para ello utilizaremos el mtodo .clone():
copia=$("#div1").clone(true)
Hemos hecho una copia de un elemento existente, el cual hemos guardado en una
variable. Al mtodo "clone" podemos pasarle como parmetros las palabras true | false. Si
pasamos true indicamos que se copian tambin los eventos javascript que pudiera tener
asociados, si pasamos false los eventos javascript no se copian. Si no ponemos parmetro se
entiende que hemos puesto false.
Para incorporarlo en otro lugar de la pgina utilizaremos cualquiera de los mtodos para
aadir un elemento, por ejemplo:
$("#elemento3").after(copia);
Esto coloca el elemento copiado despues del elemento con id="elemento3"
Si queremos conservar el elemento inicial dejamos la cosa como est, sin embargo si
queremos borrarlo y que quede slo el elemento copiado, basta con eliminar el primer
elemento:
$(#div1").remove();

65

Manual del participante

Si queremos conservar los dos elementos, y sin embargo no queremos que tengan el
mismo "id", lo que tenemos que hacer es cambiarle el "id" al segundo. El "id" es un atributo,
por lo tanto basta con cambiarle el valor de este atributo. esto lo veremos a continuacin.
Atributos
Manipular los atributos con jQuery es tan fcil como utilizar el mtodo .attr(). Dependiendo
de si lo que queremos es una lectura o una escritura, utilizaremos uno o dos parmetros.
Lectura : Para leer el valor de un atributo debemos pasar un parmetro en el que
indicamos el nombre del mismo. Ej.:
ruta=$("#enlace1").attr("href");
En este ejemplo en la variable ruta obtenemos una cadena de texto que indica la url del
enlace.
Si queremos leer el contenido de varios elementos asociados a un selector, (por ejemplo
$("a")) debemos usar el mtodo "each" tal como hemos visto en pginas anteriores.
Escritura : Para cambiar el valor de un atributo le pasaremos dos parmetros, el primero
indica el nombre del atributo, y el segundo su valor. Si el atributo no existe, este se crea y se
aade a la etiqueta, ej.:
$("#enlace1").attr("href","http://es.yahoo.com/");
Este cdigo cambia el valor del atributo href y por tanto la ruta del enlace al que se refiere
el selector.
Vemos por tanto que cambiando el valor de los atributos podemos hacer cosas como
cambiar la ruta de los enlaces, cambiar una imagen por otra, cambiar un elemento de clase o
ponerle un nuevo "id", etc.
Escritura mltiple : Supongamos que en un elemento queremos cambiar varios atributos
al mismo tiempo, por ejemplo queremos cambiar una imagen por otra. No solo queremos
cambiar el atributo "src", sino tambin el atributo "alt" y el atributo "width". Podramos hacer
una lnea parecida a la anterior para cada atributo, de la siguiente manera:
$("#imagen1").attr("src","objetos/foto1.jpg");
$("#imagen1").attr("alt","primera foto");
$("#imagen1").attr("width","250");
sin embargo podemos hacerlo de forma ms rpida de la siguiente manera.

66

Manual del participante

$("#imagen1").attr({
"src" : "objetos/foto1.jpg" ,
"alt" : "primera foto" ,
"width" : "250"
});
Aqu dentro del parntesis ponemos unas llaves, dentro de las cuales escribimos las
parejas "nombre" : "valor". Entre el nombre del atributo y su valor escribimos el signo de dos
puntos, cada pareja va separada de la siguiente por una coma.
Esta estructura se puede usar no slo para la escritura de atributos, sino para otro tipo de
mtodos de escritura, como por ejemplo, y tal como veremos ms adelante, el estilo CSS.
Eliminar atributos : Para eliminar un atributo utilizaremos el mtodo .removeAttr().
Dentro del parntesis pasaremos como argumento el nombre del atributo que queremos
eliminar:
$("#enlace1").removeAttr("target");
Este cdigo quita el atributo target del enlace con id="enalce1. el atributo desaparece
completamente de la etiqueta, tanto su valor como el nombre.
El mtodo .prop() : podemos utilizar el mtodo .prop() tambin para tener acceso a los
atributos de la misma manera que utilizamos el mtodo .attr(). Es decir, si se le pasa un slo
argumento obtenemos la lectura, y pasndole dos, obtenemos la escritura.
El mtodo .prop() en realidad se utiliza para manipular las propiedades de un elemento,
sin embargo, como se considera que los atributos son propiedades del elemento, podemos
usarlo de igual manera.
Con el mtodo .prop() podemos manipular ademas otra serie de propiedades que no son
atributos, como por ejemplo autofocus, readOnly, async, ....

67

Manual del participante

Unidad 6 Los mtodos

Los mtodos que pueden ser llamados desde el objeto jQuery, sern referenciados como
$.fn.nombreDelMetodo. Los mtodos que existen en el espacio de nombres (en ingls
namespace) de jQuery pero que no pueden ser llamados desde el objeto jQuery sern
referenciados como $.nombreDelMetodo. Si esto no significa mucho para usted, no se
preocupe ser ms claro a medida que vaya progresando en el libro.

Mtodos addClass y removeClass

Agregar clases
La funcin addClass aade los nombres de clases especificados a todos los elementos
envueltos en el conjunto mediante jQuery, recibe como parmetro una cadena que contiene el
nombre de clase a agregar, o si son varios nombres entonces la cadena contar con varias
palabras delimitadas por espacios. Finalmente la funcin nos regresar un nuevo conjunto
envuelto, donde a sus elementos se les fue agregada la clase.
?
1jQuery("div").addClass("unaClase");

En el ejemplo anterior agregamos la clase unaClase a todos los elementos de tipo div los
cuales fueron envueltos en el conjunto mediante jQuery, esta clase puede ser definida en una
hoja de estilo o dentro del mismo cdigo HTML entre las etiquetas de estilo y variar segn el
estilizado que deseemos dar, si por ejemplo deseamos agregar letra de color verde a todos
los div, nuestra clase estara definida de la siguiente manera:
?
1.unaClase{
color: green;
2
}
3

Quitar clases
La eliminacin de nombres de clase resulta igual de sencilla que la operacin de aadir, basta
con utilizar la funcin removeClass la cual quita el nombre de la clase o clases
especificadas, de cada elemento del conjunto envuelto. Al igual que addClass recibe una
cadena de parmetro y nos regresa un nuevo conjunto envuelto.
?
1jQuery("div").removeClass("unaClase");

Con esta sentencia quitaramos el texto de color verde en todas nuestras capas div, dejando
nicamente las otras clases que pertenecan previamente a los elementos.

68

Manual del participante

Mtodos attr (nombre de propiedad) attr (nombre de propiedad, valor) y

removedAttr (nombre de propiedad)
Estos mtodos nos permiten agregar propiedades a un elemento HTML y recuperar el valor
de una propiedad.
Para recuperar el valor de una propiedad (si hay muchos elementos que recupera la funcin $,
solo retorna la propiedad del primero):
$(elemento).attr(nombre de propiedad)

Para fijar el valor de una propiedad (si hay muchos elementos que recupera la funcin $, se
inicializan para todos):
$(elemento).attr(nombre de propiedad,valor)

Para eliminar una propiedad de un elemento o conjunto de elementos tenemos:

$(elemento).removeAttr(nombre de la propiedad)

Ejemplo: Definir una tabla sin el atributo border. Al presionar un botn aadirle la propiedad
border con el valor 1. Si se presiona otro botn recuperar y mostrar el valor del atributo border
y por ltimo si se presiona otro botn eliminar la propiedad border.
pagina1.html
<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<input type="button" id="boton1" value="Aadir
propiedad border"><br>
<input type="button" id="boton2" value="Recuperar
valor de la propiedad border"><br>
<input type="button" id="boton3" value="Eliminar la
propiedad border">
<table id="tabla1">
<tr>
<td>1111111111</td><td>1111111111</td><td>1111111111</td><td>1111111111</td>
</tr>
<tr>
<td>2222222222</td><td>2222222222</td><td>2222222222</td><td>2222222222</td>
</tr>
<tr>

69

Manual del participante

<td>3333333333</td><td>3333333333</td><td>3333333333</td><td>3333333333</td>
</tr>
</table>
</body>
</html>

funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x=$("#boton1");
x.click(agregarPropiedadBorder);
x=$("#boton2");
x.click(recuperarPropiedadBorder);
x=$("#boton3");
x.click(eliminarPropiedadBorder);
}
function agregarPropiedadBorder()
{
var x=$("#tabla1");
x.attr("border","1");
}
function recuperarPropiedadBorder()
{
var x=$("#tabla1");
if (x.attr("border")!=undefined)
alert(x.attr("border"));
else
alert("No est definida la propiedad border en la tabla");
}
function eliminarPropiedadBorder()
{
var x=$("#tabla1");
x.removeAttr("border");
}

Cuando se presiona el primer botn:

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

70

Manual del participante

Obtenemos la referencia de la tabla mediante su id y llamamos al mtodo attr pasando como

primer parmetro el nombre de la propiedad a agregar y como segundo parmetro el valor de
la propiedad.
Cuando se presiona el segundo botn:
function recuperarPropiedadBorder()
{
var x=$("#tabla1");
if (x.attr("border")!=undefined)
alert(x.attr("border"));
else
alert("No est definida la propiedad border en la tabla");
}

Llamamos al mtodo attr envindole como parmetro el nombre de la propiedad que

queremos rescatar. Si retorna el valor undefined significa que no tiene dicha propiedad el
elemento HTML, en caso contrario retorna su valor y procedemos a mostrarlo mediante un
alert.
Cuando se presiona el tercer botn:
function eliminarPropiedadBorder()
{
var x=$("#tabla1");
x.removeAttr("border");
}

Obtenemos la referencia a la tabla mediante su id y llamamos al mtodo removeAttr con el

nombre de la propiedad a eliminar.

71

Manual del participante

Llamadas encadenadas de mtodos del objeto jQuery objeto jQuery

Encadenamiento
Si en una seleccin se realiza una llamada a un mtodo, y ste devuelve un objeto jQuery, es
posible seguir un encadenado de mtodos en el objeto.
$('#content').find('h3').eq(2).html('nuevo texto para el tercer elemento h3');

Por otro lado, si se est escribiendo un encadenamiento de mtodos que incluyen muchos
pasos, es posible escribirlos lnea por lnea, haciendo que el cdigo luzca ms agradable para
leer.
Formateo de cdigo encadenado
$('#content')
.find('h3')
.eq(2)
.html('nuevo texto para el tercer elemento h3');

Si desea volver a la seleccin original en el medio del encadenado, jQuery ofrece el mtodo
$.fn.end para poder hacerlo.
Restablecer la seleccin original utilizando el mtodo $.fn.end
$('#content')
.find('h3')
.eq(2)
.html('nuevo texto para el tercer elemento h3')
.end() // reestablece la seleccin a todos los elementos h3 en #content
.eq(0)
.html('nuevo texto para el primer elemento h3');

Nota
El encadenamiento es muy poderoso y es una caracterstica que muchas bibliotecas
JavaScript han adoptado desde que jQuery se hizo popular. Sin embargo, debe ser utilizado
con cuidado. Un encadenamiento de mtodos extensivo pueden hacer un cdigo
extremadamente difcil de modificar y depurar. No existe una regla que indique que tan largo o
corto debe ser el encadenado pero es recomendable que tenga en cuenta este consejo.

72

Manual del participante

Unidad 7 Eventos y Gestores de Eventos

Los eventos se refieren a cualquier tipo de interaccin entre el usuario y la aplicacin; o puede
ser generada internamente por algn otro proceso.
jQuery define una lista de eventos y funciones para la administracin de los mismos, la
sintaxis por defecto para un manejador de evento es de la siguiente forma $.fn.nombreEvento
1. $('Selector').nombreEvento( function(event){
2.

//funcion que administra el evento.

3.

//this es el elemento que disparo el evento.

4. }
Es importante resaltar que this contendr la instancia del elemento que disparo el evento, por
ejemplos si a los enlaces (a) le agregamos el evento click, this contendr la instancia del
enlace especifo sobre del cual hallamos hecho click.
jQuery define varios eventos para agregar un manejador de dicho evento basta con agregar
una funcin en la llamada de dicho evento esta funcin puede recibir un argumento event el
cual es til para obtener informacin de dicho evento o para cambiar el comportamiento del
mismo

Administracin de eventos con jQuery

jQuery facilita la administracin de eventos de JavaScript y lo ms importante nos hace
transparente la diferencia en la registracin de eventos entre distintos navegadores (Internet
Explorer, Firefox).

Eventos mouseover y mouseout

.mouseout()
El evento mouseout se produce cuando el puntero del mouse sale del elemento seleccionado.
El mtodo mouseout () activa el evento mouseout o atribuye una funcin a ejecutar cuando se
produzca un evento mouseout. El evento mouseout se activa si un puntero del mouse sale de
los elementos secundarios, as como el elemento seleccionado.
Este evento se utiliza a menudo junto con el evento mouseover.
.mouseover()

El evento mouseover se produce cuando el puntero del mouse est sobre el elemento
seleccionado. El mtodo mouseover () activa el evento mouseover o atribuye una funcin
a ejecutar cuando se produzca un evento mouseover.

73

Manual del participante

El evento mouseover dispara si un puntero del ratn entra en cualquier elemento

secundario, as como el elemento seleccionado. Este evento se utiliza a menudo junto con
el mouseout evento.
Ejemplo

74

Manual del participante

Eventos hover
Evento .hover()
El evento hover se lanza cuando el ratn est encima del elemento sobre el que hemos
enlazado el evento. Este evento suele ser muy usado, por ejemplo, mostrar un texto cuando el
usuario pone el ratn sobre una zona, o mostrar unos botones de navegacin cuando
movemos el ratn sobre una fotografa.
Ejemplo

Eventos mousemove
Evento .mounsemove()
El evento mounsemove se produce cada vez que el puntero del ratn se mueve dentro del
elemento seleccionado. El mtodo mousemove() activa el evento mousemove o atribuye
una funcin a ejecutar cuando se produzca un evento mousemove.
Cada vez que el usuario mueve el ratn un pxel, un evento mousemove ocurre. Toma los
recursos del sistema para procesar todos los eventos mousemove.

75

Manual del participante

Eventos mousedown y mouseup

El evento mousedown se produce cuando se presiona el botn izquierdo del ratn sobre el
elemento seleccionado. El mtodo mousedown () activa el evento o atribuye una funcin a
ejecutar cuando se produzca un evento.
Este mtodo se utiliza a menudo junto con el mtodo () mouseup.
Evento mouseup()
Se produce cuando se suelta el botn izquierdo del ratn sobre el elemento seleccionado.
El mtodo mouseup() activa el evento o atribuye una funcin a ejecutar cuando se
produzca un evento tal.
Este mtodo se utiliza a menudo junto con el mtodo () mousedown.

76

Manual del participante

Evento dblclick
Evento .dbclick()
Es el evento que se lanza cuando damos doble clic sobre el elemento que hemos asociado el
evento.
Ejemplo

77

Manual del participante

Evento focus & blur

.focus ()
Este evento se lanza cuando un elemento recibe el foco. Por ejemplo, cuando nos
encontramos sobre un input para comenzar a escribir algo, ese input recibir el foco y lanzar
el evento.
.blur()
El evento blur se lanza sobre un elemento que acaba de perder el foco. Normalmente este
evento es aplicable a inputs de formularios.
Podramos utilizar el evento blur para comprobar que un usuario ha introducido correctamente
los datos de un campo del formulario.
Ejemplo

78

Manual del participante

Unidad 8 Efectos. Funciones Callback

Con callback de jQuery podemos hacer una secuencia de llamadas a funciones o una pila de
funciones que se ejecutarn una detrs de otra. A menudo cuando hacemos aplicaciones
enriquecidas del lado del cliente con jQuery nos vemos en la necesidad de encadenar varias
llamadas a funciones, para que una se ejecute detrs de otra, creando un efecto ms
elaborado.
"Callback" significa una funcin que se ejecuta despus de otra.
Efectos Funciones Callback
Las sentencias de JavaScript se ejecutan lnea a lnea. Sin embargo, con los efectos, la
siguiente lnea de cdigo se puede ejecutar a pesar de que el efecto no ha terminado. Esto
puede crear errores. Para evitar esto, usted puede crear una funcin de devolucin de
llamada.
Una funcin de devolucin de llamada se ejecuta despus de que el efecto actual se termin.
Sintaxis:
$ (selector) hide (speed, callback);

79

Manual del participante

Efectos con los mtodos show y hide

El parmetro de velocidad opcional especifica la velocidad de la Ocultacin / muestra, y puede
tomar los siguientes valores: "lento", "rpido", o milisegundos.
El parmetro callback opcional es una funcin a ejecutar despus del hide() o mtodo show().
show() y hide(), son funciones que bien o muestran el elemento(show) o lo ocultan(hide).
Sintaxis:
show: Muestra el elemento. ("#div").show(tiempo, callback);
hide: Oculta el elemento. ("#div").hide(tiempo, callback);
Ejemplo

80

Manual del participante

Efectos con los mtodos fandeln y fadeOut

El mtodo jQuery fadeIn () se utiliza para aparecer un elemento oculto.
Sintaxis:
$ (selector) fadeIn (speed, callback);
Ejemplo:

Fadeout()
El mtodo jQuery Fadeout () se utiliza para desaparecer un elemento visible.
Sintaxis:
$(selector).fadeOut(speed,callback);

81

Manual del participante

Efectos con el mtodo fadeTo

El mtodo de jQuery Fadeto () permite la decoloracin a una opacidad dada (valor entre 0 y
1).
Sintaxis:
$(selector).fadeTo(speed,opacity,callback);

82

Manual del participante

Efecto con el mtodo toggle

El mtodo jQuery fadeToggle () alterna entre la fadeIn () y fadeTo ().
Si los elementos no se han desvanecido con fade Toggle se desvanecern y si no estn
visibles con fade Toggle se aran visibles.
Sintaxis:
$(selector).fadeToggle(speed,callback);

83

Manual del participante

Unidad 9 DOM
El Modelo de Objetos del Documento (DOM) permite ver el mismo documento de otra manera,
describiendo el contenido del documento como un conjunto de objetos que un programa
Javascript puede actuar sobre ellos.
Qu es el Modelo de Objetos del Documento?
Acorde al W3C el Modelo de Objetos del Documento es una interfaz de programacin de
aplicaciones (API) para documentos vlidos HTML y bien construidos XML. Define la
estructura lgica de los documentos y el modo en que se accede y manipula.
El DOM permite un acceso a la estructura de una pgina HTML mediante el mapeo de los
elementos de esta pgina en un rbol de nodo. Cada elemento se convierte en un nodo y
cada porcin de texto en un nodo de texto.

Iteracin por los elementos (each)

Each es un mtodo que se utiliza sobre un conjunto de elementos que hayamos seleccionado
con la funcin jQuery. Con each realizamos una iteracin por todos los elementos del DOM
que se hayan seleccionado.
El mtodo each recibe una funcin que es la que se tiene que ejecutar para cada elemento y
dentro de esa funcin con la variable "this" tenemos una referencia a ese elemento del DOM.
Adicionalmente, la funcin que se enva a each, puede recibir un parmetro que es el ndice
actual sobre el que se est iterando.
Quiero explicar las bondades de each() con un ejemplo. Por ejemplo, veamos esta lnea de
cdigo:
$("p").css("background-color", "#eee");

Como ya sabemos, con $("p") seleccionamos todos los prrafos de la pgina. Luego con el
mtodo CSS asignamos un estilo, en este caso para cambiar el color del fondo. Esto en
realidad jQuery lo hace con una iteracin con todos los prrafos de la pgina, sin que
tengamos que hacer nosotros nada ms y es genial que se permita en el uso del framework.
Pero qu pasa si queremos cambiar el fondo de los prrafos utilizando colores alternos?
En este caso no podemos hacerlo en una sola lnea de cdigo, pero each nos vendr como
anillo al dedo.
84

Manual del participante

Imaginemos que tenemos una serie de prrafos en la pgina y queremos cambiar el color de
fondo a los mismos, de manera que tengan colores alternos, para hacer dinmicamente un
tpico diseo para los listados.
Entonces podramos hacer lo siguiente:
$("p").each(function(i){
if(i%2==0){
$(this).css("background-color", "#eee");
}else{
$(this).css("background-color", "#ccc");
}
});

Con $("p") tengo todos los prrafos. Ahora con each puedo recorrerlos uno a uno. Para cada
uno ejecutaremos la funcin que enviamos como parmetro a each(). En esa funcin recibo
como parmetro una variable "i" que contiene el ndice actual sobre el que estoy iterando.
Con if(i%2==0) estoy viendo si el entero del ndice "i" es par o impar. Siendo par coloco un
color de fondo al elemento y siendo impar coloco otro color de fondo.
Como se puede ver, con la variable "this" tenemos acceso al elemento actual. Pero OJO, que
este elemento no es un objeto jQuery, as que no podramos enviarle mtodos del framework
jQuery hasta que no lo expandamos con la funcin jQuery. As pues, tenemos que hacer
$(this) para poder invocar al mtodo css(). Por si no queda claro este punto mirar las
diferencias entre estas dos lneas de cdigo:
this.css("background-color", "#ccc");
$(this).css("background-color", "#ccc");

En la primera lnea no estaramos extendiendo la variable this con las funcionalidades de

jQuery, luego no funcionara.

85

Manual del participante

En la segunda lnea, que es la que habamos utilizado en el script de ejemplo, s estamos

extendiendo la variable "this" con la funcin jQuery. De ese modo, se puede invocar a
cualquier mtodo de jQuery sobre los elementos.

Manipulacin
Una vez realizada la seleccin de los elementos que desea utilizar, la diversin comienza.
Es posible cambiar, mover, remover y duplicar elementos. Tambin crear nuevos a travs de
una sintaxis simple.
Todos los mtodos de esta seccin manipular el DOM de alguna manera. Algunos de ellos
simplemente cambiar uno de los atributos de un elemento (tambin figura en la categora de
Atributos), mientras que otros establecen las propiedades de estilo de un elemento (tambin
figura en la categora CSS). Y otros modifican elementos enteros (o grupos de elementos) a s
mismos-insercin, copia, eliminacin, etc. Todos estos mtodos se les conoce como "set", a
medida que cambian los valores de las propiedades.
Algunos de estos mtodos-como. Attr (),. HTML () y. Val ()-tambin actan como "captadores"
Extraer informacin de elementos DOM para su uso posterior.
Manipulacin con DOM
. addClass ()
Agrega la clase especificada (s) a cada uno de la serie de elementos
coincidentes.
.after()
Inserte el contenido, especificado por el parmetro, despus de cada elemento en
el conjunto de elementos coincidentes.
. appendTo ()
Inserte cada elemento en el conjunto de elementos emparejados hasta el final de
la diana.
. attr ()
Obtener el valor de un atributo para el primer elemento en el conjunto de
elementos relacionados o establecer uno o ms atributos para cada elemento
coincidente.
.before()
Inserte el contenido, especificado por el parmetro, antes de cada elemento en el
conjunto de elementos coincidentes.
. clone ()
Crea una copia en profundidad del conjunto de elementos coincidentes.
. css ()
Obtener el valor de una propiedad de estilo para el primer elemento en el
conjunto de elementos relacionados o establecer una o ms propiedades de CSS
para cada elemento coincidente.
. detach ()
Retire el conjunto de elementos coincidentes de la DOM.

86

Manual del participante

. empty ()
Retire todos los nodos secundarios del conjunto de elementos coincidentes de la
DOM.
. hasClass ()
Determina si alguno de los elementos coincidentes se asignan a la clase dada.
.height()
Consigue la altura computada actual para el primer elemento en el conjunto de
elementos coincidentes o establecer la altura de cada elemento coincidente.
.html()
Obtiene el contenido HTML del primer elemento en el conjunto de elementos
coincidentes o establecer el contenido HTML de cada elemento coincidente.
. innerHeight ()
Consigue la altura computada actual para el primer elemento en el conjunto de
elementos coincidentes, incluyendo el relleno pero no frontera.
. innerWidth ()
Obtener el ancho interior computada actual (incluyendo las protecciones, pero no
frontera) para el primer elemento en el conjunto de elementos coincidentes o
establecer la anchura interior de cada elemento coincidente.
. InsertAfter ()
Inserte cada elemento en el conjunto de elementos coincidentes despus de la
meta.
. insertBefore ()
Inserte cada elemento en el conjunto de elementos coincidentes antes de la meta.
. offset ()
Obtenga las coordenadas actuales del primer elemento, o establecer las
coordenadas de cada elemento, en el conjunto de elementos coincidentes, en
relacin con el documento.
. outerHeight ()
Consigue la altura computada actual para el primer elemento en el conjunto de
elementos coincidentes, incluyendo el relleno, borde y margen opcionalmente.
Devuelve un nmero (without px) la representacin del valor o un valor nulo si
un llamamiento a un conjunto vaco de elementos.
. outerWidth ()
Obtener el ancho computado actual para el primer elemento en el conjunto de
elementos coincidentes, incluyendo el relleno y el borde.
.position()
Obtener las coordenadas actuales del primer elemento en el conjunto de
elementos emparejados, en relacin con el padre offset.
. prepend ()
Insertar contenido, especificado por el parmetro, al principio de cada elemento
en el conjunto de elementos emparejados.
.prependTo()
Inserte cada elemento en el conjunto de elementos emparejados hasta el
comienzo de la diana.
.prop()
87

Manual del participante

Obtener el valor de una propiedad para el primer elemento en el conjunto de

elementos relacionados o imponer una o ms propiedades para cada elemento
coincidente.
.remove()
Retire el conjunto de elementos coincidentes de la DOM.
.removeAttr()
Eliminar un atributo de cada elemento en el conjunto de elementos coincidentes.
.removeClass()
Quitar una sola clase, varias clases, o todas las clases de cada elemento en el
conjunto de elementos coincidentes.
.removeProp()
Eliminar una propiedad para el conjunto de elementos coincidentes.
.replaceAll()
Vuelva a colocar cada elemento de destino con el conjunto de elementos
coincidentes.
.replaceWith()
Vuelva a colocar cada elemento en el conjunto de elementos coincidentes con el
nuevo contenido proporcionado y devolver el conjunto de elementos que se
elimin.
.scrollLeft()
Obtenga la posicin horizontal actual de la barra de desplazamiento para el
primer elemento en el conjunto de elementos coincidentes o establecer la
posicin horizontal de la barra de desplazamiento para cada elemento
coincidente.
.scrollTop()
Obtenga la posicin vertical actual de la barra de desplazamiento para el primer
elemento en el conjunto de elementos coincidentes o establecer la posicin
vertical de la barra de desplazamiento para cada elemento coincidente.
.text()
Obtiene el contenido de texto combinados de cada elemento en el conjunto de
elementos coincidentes, incluidos sus descendientes, o establecer el contenido
de texto de los elementos coincidentes.
.toggleClass()
Agregar o eliminar una o ms clases de cada elemento en el conjunto de
elementos coincidentes, segn sea la presencia de la clase o el valor del
argumento interruptor.
.unwrap()
Retire los padres del conjunto de elementos coincidentes de la DOM, dejando los
elementos coincidentes en su lugar.
.val()
Obtener el valor actual del primer elemento del conjunto de elementos
coincidentes o establecer el valor de cada elemento coincidente.
.width()
Obtener el ancho computado actual para el primer elemento en el conjunto de
elementos coincidentes o configurar el ancho de cada elemento coincidente.

88

Manual del participante

.wrap()
Envuelva una estructura HTML alrededor de cada elemento en el conjunto de
elementos coincidentes.
.wrapAll()
Envuelva una estructura HTML alrededor de todos los elementos en el conjunto
de elementos coincidentes.
.wrapInner()
Envuelva una estructura HTML todo el contenido de cada elemento en el conjunto
de elementos coincidentes.

Mtodos text (), text (valor)

Para saber el contenido de un elemento el objeto jQuery cuenta con un mtodo llamado text(),
por ejemplo:
var x=$("#parrafo1");

luego si hacemos x.text() obtenemos el contenido del prrafo con id igual a parrafo1. Luego si
queremos cambiar el texto del prrafo deberamos disponer:
var x=$("#parrafo1");
x.text("Este es el texto nuevo");

Pero hay que tener mucho cuidado cuando utilizamos jQuery ya que podemos cambiar el
contenido de muchos elementos con una sola llamada al mtodo text, por ejemplo:
var x=$("p");
x.text("Este texto aparece en todos los prrafos del documento");

El cdigo anterior crea un objeto jQuery con la referencia a todos los prrafos contenidos en el
documento. Luego si llamamos al mtodo text envindole una cadena, esta aparecer en todo
el documento remplazando el contenido de los prrafos actuales.
El siguiente problema muestra el acceso y modificacin unitaria y mltiple de contenidos de
elementos.
Ejemplo:
Problema.html
<html>
<head>
<title>Problema</title>
<meta charset="utf-8">
<script type="text/javascript" src="../jquery.js"></script>
<script language="javascript" src="funciones.js" type="text/javascript"></script>
</head>

89

Manual del participante

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

Funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x=$("#boton1");
x.click(extraerTexto);
x=$("#boton2");
x.click(modificarTexto);
x=$("#boton3");
x.click(modificarDatosTabla);
}
function extraerTexto()
{
var x=$("#parrafo1");
alert(x.text());
}
function modificarTexto()
{
var x=$("#parrafo1");
x.text("Nuevo texto del prrafo");
}
function modificarDatosTabla()
{
var x=$("td");
x.text("texto nuevo");
}

90

Manual del participante

Unidad 10 Uso de plugins

Qu son los Plugins
Los plugins son la utilidad que pone jQuery a disposicin de los desarrolladores para ampliar
las funcionalidades del framework. Por lo general servirn para hacen cosas ms complejas
necesarias para resolver necesidades especficas, pero las hacen de manera que puedan
utilizarse en el futuro en cualquier parte y por cualquier web.
En la prctica un plugin no es ms que una funcin que se aade al objeto jQuery (objeto
bsico de este framework que devuelve la funcin jQuery para un selector dado), para que a
partir de ese momento responda a nuevos mtodos. Como ya sabemos, en este framework
todo est basado en el objeto jQuery, as que con los plugins podemos aadirle nuevas
utilidades.
Pondremos un ejemplo para identificar lo que es un pluying:
//con esto bailan todos los prrafos
$("p").bailar();

//con esto bailan los elementos de la clase "artista"

$(".artista").bailar();

//con esto baila el elemento con id="lola"

$("#lola").bailar();

Los plugins no son nada del otro mundo, son simplemente eso, extensiones del framework
para crear cualquier funcionalidad que podamos necesitar en los elementos de la pgina, por
muy especial, o tonta, que sea.
Cmo se crea un plugin de jQuery:
Los plugins en jQuery se crean asignando una funcin a la propiedad "fn" del objeto jQuery. A
partir de entonces, esas funciones asignadas se podrn utilizar en cualquier objeto jQuery,
como uno de los muchos mtodos que dispone dicho objeto principal del framework.

91

Manual del participante

Ajax: mtodo load

Este mtodo es el ms sencillo para recuperar datos del servidor.

La sintaxis de este mtodo es el siguiente:
load([nombre de la pgina],[parmetros],[funcion final])
Otra cosa muy importante es la llamada de este mtodo a partir del elemento HTML donde
queremos que se agregue la informacin que retorna el servidor (es decir que utilizamos este
mtodo cuando no tenemos que procesarlo en el navegador, sino directamente mostrarlo en
forma completa). El segundo y tercer parmetro son opcionales.
Ejemplo:

Confeccionar

una pgina que muestre una lista de hipervnculos con los distintos signos del horscopo y
luego al ser presionado no recargue la pgina completa sino que se enve una peticin al
servidor y el mismo retorne la informacin de dicho signo, luego se actualice solo el contenido
de un div del archivo HTML.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<h1>Signos del horscopo.</h1>
<div id="menu">
<p><a id="enlace1" href="pagina1.php?cod=1">Aries</a></p>
<p><a id="enlace2" href="pagina1.php?cod=2">Tauro</a></p>
<p><a id="enlace3" href="pagina1.php?cod=3">Geminis</a></p>
<p><a id="enlace4" href="pagina1.php?cod=4">Cancer</a></p>
<p><a id="enlace5" href="pagina1.php?cod=5">Leo</a></p>
<p><a id="enlace6" href="pagina1.php?cod=6">Virgo</a></p>
<p><a id="enlace7" href="pagina1.php?cod=7">Libra</a></p>
<p><a id="enlace8" href="pagina1.php?cod=8">Escorpio</a></p>
<p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p>
<p><a id="enlace10" href="pagina1.php?cod=10">Capricornio</a></p>
<p><a id="enlace11" href="pagina1.php?cod=11">Acuario</a></p>
<p><a id="enlace12" href="pagina1.php?cod=12">Piscis</a></p>

92

Manual del participante

</div>
<div id="detalles">Seleccione su signo.</div>
</body>
</html>

funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("#menu a");
x.click(presionEnlace);
}
function presionEnlace()
{
var pagina=$(this).attr("href");
var x=$("#detalles");
x.load(pagina);
return false;
}

pagina1.php
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
if ($_REQUEST['cod']==1)
echo "<strong>Aries:</strong> Hoy los cambios sern fsicos,
personales, de carcter, Te sentirs impulsivo y tomars
iniciativas. Perodo en donde considerars unirte a agrupaciones
de beneficencia, o de ayuda a los dems.";
if ($_REQUEST['cod']==2)
echo "<strong>Tauro:</strong> Hoy los cambios sern privados,
ntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares de retiro. Tu
cnyuge puede aportar buen status a tu vida o apoyo a tu profesin.";
if ($_REQUEST['cod']==3)
echo "<strong>Gminis:</strong> Los asuntos de hoy tienen
que ver con las amistades, reuniones, actividades con ellos. Da esperanzado,
ilusiones. Mucha energa sexual y fuerza emocional. Deseos difciles
de controlar.";
if ($_REQUEST['cod']==4)
echo "<strong>Cancer:</strong> Este da la profesin
y las relaciones con superiores y con tu madre sern de importancia. Actividad
en relacin a estos temas. Momentos positivos con compaeros de
trabajo. Actividad laboral agradable.";
if ($_REQUEST['cod']==5)
echo "<strong>Leo:</strong> Este da los estudios, los
viajes, el extranjero y la espiritualidad sern lo importante. Pensamientos,
religin y filosofa tambin. Vivencias krmicas de

93

Manual del participante

la poca te vuelven responsable tomando decisiones.";

if ($_REQUEST['cod']==6)
echo "<strong>Virgo:</strong> Para este da toma importancia
tu vida sexual, tal vez miedos, temas legales, juicios o herencias. Experiencias
extraas. Hay karma de prueba durante este perodo en tu parte psicolgica,
generndose algunos replanteos.";
if ($_REQUEST['cod']==7)
echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver con
tu pareja, tambin con socios, con la gente o el pblico. Ellos
sern lo ms importante del da. Ganancias a travs
de especulaciones o del juego. Actividades vocacionales artsticas.";
if ($_REQUEST['cod']==8)
echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que ver
con temas de trabajo y de salud. Presta atencin a ambos. Experiencias
diversas con compaeros. Durante este perodo tendrs muchos
recursos para ganar dinero.";
if ($_REQUEST['cod']==9)
echo "<strong>Sagitario:</strong> Durante este da se
vivirn cambios en relacin a los noviazgos o a los hijos. Creatividad,
actividad, diversiones y salidas. Perodo de encuentros con personas o
situaciones que te impresionan.";
if ($_REQUEST['cod']==10)
echo "<strong>Capricornio:</strong> Los cambios del da
tienen que ver con tu hogar, con la convivencia y con el padre. Asuntos relativos
al carcter en la convivencia. El karma de responsabilidad de estos momentos
te acercar al mundo de lo desconocido, mucha madurez y contacto con el
ms all.";
if ($_REQUEST['cod']==11)
echo "<strong>Acuario:</strong> Hoy todo asunto tiene que ver
con el entorno inmediato, hermanos y vecinos, con la comunicacin, los
viajes cortos o traslados frecuentes. El hablar y trasladarse ser importante
hoy. Mentalidad e ideas activas.";
if ($_REQUEST['cod']==12)
echo "<strong>Piscis:</strong> Durante este da se vivirn
cambios en la economa, movimientos en los ingresos, negocios, valores.
Momentos de gran fuerza y decisin profesionales, buscars el liderazgo.";
?>

estilos.css
#menu {
font-family: Arial;
margin:5px;
}
#menu p {
margin:0px;
padding:0px;
}
#menu a {
display: block;
padding: 3px;
width: 160px;

94

Manual del participante

background-color: #f7f8e8;
border-bottom: 1px solid #eee;
text-align:center;
}
#menu a:link, #menu a:visited {
color: #f00;
text-decoration: none;
}
#menu a:hover {
background-color: #369;
color: #fff;
}
#detalles {
background-color:#ffc;
text-align:left;
font-family:verdana;
border-width:0;
padding:5px;
border: 1px dotted #fa0;
margin:5px;
}

Ajax: mtodo ajaxStart y ajaxStopo

Estos dos mtodos se pueden asociar a un objeto de tipo jQuery, tienen como parmetro una
funcin:
ajaxStart([funcin])
La funcin de ajaxStart se dispara cuando se inicia la peticin al servidor y nos puede servir
para mostrar en pantalla al usuario que estn llegando datos del servidor.
ajaxStop([funcin])

Se dispara esta funcin cuando finalizar la peticin de datos al servidor.

Problema: Confeccionar un problema que muestre una lista de hipervnculos con los distintos
signos del horscopo y luego al ser presionado no recargue la pgina completa sino que se
enve una peticin al servidor y el mismo retorne la informacin de dicho signo, luego se
actualice solo el contenido de un div del archivo HTML. Mostrar un gif animado mientras los
datos no lleg del servidor.
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>

95

Manual del participante

</head>
<body>
<h1>Signos del horscopo.</h1>
<div id="menu">
<p><a id="enlace1" href="pagina1.php?cod=1">Aries</a></p>
<p><a id="enlace2" href="pagina1.php?cod=2">Tauro</a></p>
<p><a id="enlace3" href="pagina1.php?cod=3">Geminis</a></p>
<p><a id="enlace4" href="pagina1.php?cod=4">Cancer</a></p>
<p><a id="enlace5" href="pagina1.php?cod=5">Leo</a></p>
<p><a id="enlace6" href="pagina1.php?cod=6">Virgo</a></p>
<p><a id="enlace7" href="pagina1.php?cod=7">Libra</a></p>
<p><a id="enlace8" href="pagina1.php?cod=8">Escorpio</a></p>
<p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p>
<p><a id="enlace10" href="pagina1.php?cod=10">Capricornio</a></p>
<p><a id="enlace11" href="pagina1.php?cod=11">Acuario</a></p>
<p><a id="enlace12" href="pagina1.php?cod=12">Piscis</a></p>
</div>
<div id="detalles">Seleccione su signo.</div>
</body>
</html>

funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("#menu a");
x.click(presionEnlace);
}
function presionEnlace()
{
var pagina=$(this).attr("href");
var x=$("#detalles");
x.ajaxStart(inicioEnvio);
x.load(pagina);
return false;
}
function inicioEnvio()
{
var x=$("#detalles");
x.html('<img src="../cargando.gif">');
}

96

Manual del participante

Estilos.css
#menu {
font-family: Arial;
margin:5px;
}
#menu p {
margin:0px;
padding:0px;
}
#menu a {
display: block;
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eee;
text-align:center;
}
#menu a:link, #menu a:visited {
color: #f00;
text-decoration: none;
}
#menu a:hover {
background-color: #369;
color: #fff;
}
#detalles {
background-color:#ffc;
text-align:left;
font-family:verdana;
border-width:0;
padding:5px;
border: 1px dotted #fa0;
margin:5px;
}

pagina1
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
if ($_REQUEST['cod']==1)
echo "<strong>Aries:</strong> Hoy los cambios sern fsicos,
personales, de carcter, Te sentirs impulsivo y tomars
iniciativas. Perodo en donde considerars unirte a agrupaciones
de beneficencia, o de ayuda a los dems.";
if ($_REQUEST['cod']==2)
echo "<strong>Tauro:</strong> Hoy los cambios sern privados,
ntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares de retiro. Tu
cnyuge puede aportar buen status a tu vida o apoyo a tu profesin.";

97

Manual del participante

if ($_REQUEST['cod']==3)
echo "<strong>Gminis:</strong> Los asuntos de hoy tienen
que ver con las amistades, reuniones, actividades con ellos.
Da esperanzado, ilusiones. Mucha energa sexual y fuerza emocional.
Deseos difciles de controlar.";
if ($_REQUEST['cod']==4)
echo "<strong>Cancer:</strong> Este da la profesin
y las relaciones con superiores y con tu madre sern de importancia.
Actividad en relacin a estos temas. Momentos positivos con compaeros de
trabajo. Actividad laboral agradable.";
if ($_REQUEST['cod']==5)
echo "<strong>Leo:</strong> Este da los estudios, los
viajes, el extranjero y la espiritualidad sern lo importante.
Pensamientos, religin y filosofa tambin. Vivencias krmicas de
la poca te vuelven responsable tomando decisiones.";
if ($_REQUEST['cod']==6)
echo "<strong>Virgo:</strong> Para este da toma importancia
tu vida sexual, tal vez miedos, temas legales, juicios o herencias.
Experiencias extraas. Hay karma de prueba durante este perodo en tu
parte psicolgica, generndose algunos replanteos.";
if ($_REQUEST['cod']==7)
echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver con
tu pareja, tambin con socios, con la gente o el pblico. Ellos
sern lo ms importante del da. Ganancias a travs
de especulaciones o del juego. Actividades vocacionales artsticas.";
if ($_REQUEST['cod']==8)
echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que ver
con temas de trabajo y de salud. Presta atencin a ambos. Experiencias
diversas con compaeros. Durante este perodo tendrs muchos
recursos para ganar dinero.";
if ($_REQUEST['cod']==9)
echo "<strong>Sagitario:</strong> Durante este da se
vivirn cambios en relacin a los noviazgos o a los hijos. Creatividad,
actividad, diversiones y salidas. Perodo de encuentros con personas o
situaciones que te impresionan.";
if ($_REQUEST['cod']==10)
echo "<strong>Capricornio:</strong> Los cambios del da
tienen que ver con tu hogar, con la convivencia y con el padre. Asuntos relativos
al carcter en la convivencia. El karma de responsabilidad de estos momentos
te acercar al mundo de lo desconocido, mucha madurez y contacto con el
ms all.";
if ($_REQUEST['cod']==11)
echo "<strong>Acuario:</strong> Hoy todo asunto tiene que ver
con el entorno inmediato, hermanos y vecinos, con la comunicacin, los
viajes cortos o traslados frecuentes. El hablar y trasladarse ser importante
hoy. Mentalidad e ideas activas.";
if ($_REQUEST['cod']==12)
echo "<strong>Piscis:</strong> Durante este da se vivirn
cambios en la economa, movimientos en los ingresos, negocios, valores.
sleep(1);

98

Manual del participante

Lo nuevo en este problema es que llamamos al mtodo ajaxStart con el mismo objeto jQuery
que llama al mtodo load:
function presionEnlace() {
var pagina=$(this).attr("href");
var x=$("#detalles");
x.ajaxStart(inicioEnvio);
x.load(pagina);
return false; }

Luego cuando se activa la peticin de la pgina al servidor el objeto jQuery llama a la funcin
inicioEvento, donde mostramos el gif animado:
function inicioEnvio() {
var x=$("#detalles");
x.html('<img src="../cargando.gif">');

No ocultamos el gif animado ya que se est mostrando en el div #detalles. Dicho div ser
inicializado por el objeto jQuery con los datos enviados por el servidor y borrar el elemento
img.

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

99

Manual del participante

</head>
<body>
<form action="pagina1.php" method="post" id="formulario">
Ingrese nro:<input type="text" name="nro" id="nro"
size="10"><br>
<input type="submit" value="Calcular el cuadrado" id="enviar">
<div id="resultados"></div>
</form>
</body>
</html>

fuciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("#enviar");
x.click(presionSubmit);
}
function presionSubmit()
{
var v=$("#nro").attr("value");
$.get("pagina1.php",{numero:v},llegadaDatos);
return false;
}
function llegadaDatos(datos)
{
alert(datos);
}

pagina1.php
<?php
$cuadrado=$_REQUEST['numero']*$_REQUEST['numero'];
echo $cuadrado;
?>

Veamos el cdigo JavaScript para comunicarse con el servidor: Primero en la funcin

inicializarEventos enlazamos el evento click al botn submit del formulario:
function inicializarEventos()
var x;
x=$("#enviar");
x.click(presionSubmit); }

100

Manual del participante

Cuando presionamos el botn extraemos el valor del control text y llamamos a la funcin $.get
indicando el nombre de la pgina a llamar, un objeto literal con todos los parmetros y sus
valores (en este caso solo tenemos un parmetro llamado numero) y finalmente el nombre de
la funcin que se ejecutar cuando lleguen los datos del servidor:
function presionSubmit() {
var v=$("#nro").attr("value");
$.get("pagina1.php",{numero:v},llegadaDatos);
return false; }

La funcin que se ejecuta cuando llegan los datos del servidor recibe un string:
function llegadaDatos(datos)
alert(datos); }

101

Manual del participante

Conclusiones finales

102

Manual del participante

Fuentes de consulta
Cibergrafa
Autor:
Ttulo:
Vnculo:
Editor:
Ao de publicacin:
Autor:
Ttulo:
Vnculo:

Circular nica de Bancos, captulo X de la CNBV

http://api.jquery.com/category/manipulation/

Editor:
Ao de publicacin:
Autor:
Ttulo:
Vnculo:

http://librojquery.com/#recorrer-el-dom

Editor:
Ao de publicacin:
Autor:
Ttulo:
Vnculo:

http://www.1stwebdesigner.com/css/36-eye-catching-jquery-navigationmenus/

Editor:
Ao de publicacin:
Autor:
Ttulo:
Vnculo:
Editor:
Ao de publicacin:
Autor:
Ttulo:
Vnculo:

http://www.eldinero.com.do/influencers/

Las 5 estrategias en Social Media usadas por grandes empresas para aumentar
sus ventas
http://www.juanmerodio.com/2010/las-5-estrategias-en-social-media-usadaspor-grandes-empresas-para-aumentar-sus-ventas/

Editor:

103

Manual del participante

Ao de publicacin:

104