Fundamentos de JQuery

Fundamentos de jQuery

Textos originales:Rebecca Murphey

Traduccin, adaptacin y textos adicionales:Leandro DOnofrio

Correcciones:Gustavo Ral Aragn, Pablo Maronna, Denis Ciccale y otras personas

Con contribuciones de James Padolsey, Paul Irish y otros.

Bajo licencia Creative Commons

Abril 2013

ndice general

0.1. Bienvenido/a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40.1.1. Obtener el Material de Aprendizaje . . . . . . . . . . . . . . . . . . . . . . . . 40.1.2. Software . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40.1.3. Aadir JavaScript a una Pgina . . . . . . . . . . . . . . . . . . . . . . . . . . 40.1.4. Depuracin del Cdigo JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . 50.1.5. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50.1.6. Convenciones Utilizadas en el Libro . . . . . . . . . . . . . . . . . . . . . . . . 60.1.7. Notas de la Traduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60.1.8. Material de Referencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

0.2. Conceptos Bsicos de JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70.2.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70.2.2. Sintaxis Bsica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70.2.3. Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70.2.4. Cdigo Condicional . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100.2.5. Bucles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120.2.6. Palabras Reservadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150.2.7. Vectores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160.2.8. Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170.2.9. Funciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170.2.10. Determinacin del Tipo de Variable . . . . . . . . . . . . . . . . . . . . . . . . 190.2.11. La palabra clave this . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200.2.12. Alcance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220.2.13. Clausuras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

0.3. Conceptos Bsicos de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250.3.1. $(document).ready() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250.3.2. Seleccin de Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260.3.3. Trabajar con Selecciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

1

0.3.4. CSS, Estilos, & Dimensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310.3.5. Atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330.3.6. Recorrer el DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330.3.7. Manipulacin de Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340.3.8. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

0.4. El ncleo de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390.4.1. $ vs $() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390.4.2. Mtodos Utilitarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400.4.3. Comprobacin de Tipos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410.4.4. El Mtodo Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420.4.5. Deteccin de Navegadores y Caractersticas . . . . . . . . . . . . . . . . . . . . 430.4.6. Evitar Conictos con Otras Bibliotecas JavaScript . . . . . . . . . . . . . . . . 43

0.5. Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440.5.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440.5.2. Vincular Eventos a Elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440.5.3. El Objeto del Evento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 460.5.4. Ejecucin automtica de Controladores de Eventos . . . . . . . . . . . . . . . . 470.5.5. Incrementar el Rendimiento con la Delegacin de Eventos . . . . . . . . . . . . 470.5.6. Funciones Auxiliares de Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . 480.5.7. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

0.6. Efectos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500.6.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500.6.2. Efectos Incorporados en la Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . 500.6.3. Efectos Personalizados con $.fn.animate . . . . . . . . . . . . . . . . . . . . . 520.6.4. Control de los Efectos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 520.6.5. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

0.7. Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540.7.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540.7.2. Conceptos Clave . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540.7.3. Mtodos Ajax de jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560.7.4. Ajax y Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600.7.5. Trabajar con JSONP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600.7.6. Eventos Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610.7.7. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

0.8. Extensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

2

0.8.1. Qu es una Extensin? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620.8.2. Crear una Extensin Bsica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630.8.3. Encontrar y Evaluar Extensiones . . . . . . . . . . . . . . . . . . . . . . . . . . 650.8.4. Escribir Extensiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650.8.5. Escribir Extensiones con Mantenimiento de Estado Utilizando Widget Factory

de jQuery UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 670.8.6. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

0.9. Mejores Prcticas para Aumentar el Rendimiento . . . . . . . . . . . . . . . . . . . . . 740.9.1. Guardar la Longitud en Bucles . . . . . . . . . . . . . . . . . . . . . . . . . . . 740.9.2. Aadir Nuevo Contenido por Fuera de un Bucle . . . . . . . . . . . . . . . . . 740.9.3. No Repetirse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 750.9.4. Cuidado con las Funciones Annimas . . . . . . . . . . . . . . . . . . . . . . . . 750.9.5. Optimizacin de Selectores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 760.9.6. Utilizar la Delegacin de Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . 770.9.7. Separar Elementos para Trabajar con Ellos . . . . . . . . . . . . . . . . . . . . 770.9.8. Utilizar Estilos en Cascada para Cambios de CSS en Varios Elementos . . . . . 780.9.9. Utilizar $.data en Lugar de $.fn.data . . . . . . . . . . . . . . . . . . . . . . 780.9.10. No Actuar en Elementos no Existentes . . . . . . . . . . . . . . . . . . . . . . . 780.9.11. Denicin de Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 790.9.12. Condicionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 790.9.13. No Tratar a jQuery como si fuera una Caja Negra . . . . . . . . . . . . . . . . 79

0.10. Organizacin del Cdigo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 800.10.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 800.10.2. Encapsulacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 800.10.3. Gestin de Dependencias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 850.10.4. Ejercicios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

0.11. Eventos Personalizados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 890.11.1. Introduccin a los Eventos Personalizados . . . . . . . . . . . . . . . . . . . . . 89

0.12. Funciones y ejecuciones diferidas a travs del objeto $.Deferred . . . . . . . . . . . . 990.12.1. Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 990.12.2. El objeto diferido y Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 990.12.3. Creacin de objetos diferidos con $.Deferred . . . . . . . . . . . . . . . . . . . 101

3

0.1. Bienvenido/ajQuery se est convirtiendo rpidamente en una herramienta que todo desarrollador de interfaces webdebera de conocer. El propsito de este libro es proveer un resumen de la biblioteca, de tal formaque para cuando lo haya terminado de leer, ser capaz de realizar tareas bsicas utilizando jQuery ytendr una slida base para continuar el aprendizaje. El libro fue diseado para ser utilizado comomaterial en un saln de clases, pero tambin puede ser til para estudiarlo de forma individual.La modalidad de trabajo es la siguiente: En primer lugar se dedicar tiempo a comprender un conceptopara luego realizar un ejercicio relacionado. Algunos de los ejercicios pueden llegar a ser triviales,mientras que otros no tanto. El objetivo es aprender a resolver de manera fcil lo que normalmentese resolvera con jQuery. Las soluciones a todos los ejercicios estn incluidas en el mismo material deaprendizaje.

0.1.1. Obtener el Material de Aprendizaje

El material de aprendizaje y el cdigo fuente de los ejemplos que se utilizan en el libro estn hospedadosen un repositorio de Github. Desde all es posible descargar un archivo .zip o .tar con el cdigo parautilizar en un servidor web.Si usted suele utilizar Git, es bienvenido de clonar o modicar el repositorio.

0.1.2. Software

Para trabajar con los contenidos del libro, necesitar las siguientes herramientas:

Navegador web FirefoxLa extensin Firebug, para FirefoxUn editor de textos planos (como Notepad++/Sublime Text 2 para Windows, gedit/Kate paraLinux o TextMate para Mac OS X)Para las secciones dedicadas a Ajax: Un servidor local (como WAMP o MAMP) o un clienteFTP/SSH (como FileZilla) para acceder a un servidor remoto.

0.1.3. Aadir JavaScript a una Pgina

Existen dos formas de insertar cdigo JavaScript dentro de una pgina: escribiendo cdigo en la misma(en ingles inline) o a travs de un archivo externo utilizando la etiqueta script. El orden en el cualse incluye el cdigo es importante: un cdigo que depende de otro debe ser incluido despus del quereferencia (Ejemplo: Si la funcin B depende de A, el orden debe ser A,B y no B,A).Para mejorar el rendimiento de la pgina, el cdigo JavaScript debe ser incluido al nal del HTML.Adems, cuando se trabaja en un ambiente de produccin con mltiples archivos JavaScript, stosdeben ser combinados en un solo archivo.Ejemplo de cdigo JavaScript en lnea

console.log('hello');

4

Ejemplo de inclusin de un archivo externo JavaScript

0.1.4. Depuracin del Cdigo JavaScriptLa utilizacin de una herramienta de depuracin es esencial para trabajar con JavaScript. Firefoxprovee un depurador a travs de la extensin Firebug; mientras que Safari y Chrome ya traen unointegrado.Cada depurador ofrece:

Un editor multi-linea para experimentar con JavaScript;Un inspector para revisar el cdigo generado en la pgina;Un visualizador de red o recursos, para examinar las peticiones que se realizan.

Cuando usted este escribiendo cdigo JavaScript, podr utilizar alguno de los siguientes mtodos paraenviar mensajes a la consola del depurador:

console.log() para enviar y registrar mensajes generales;console.dir() para registrar un objeto y visualizar sus propiedades;console.warn() para registrar mensajes de alerta;console.error() para registrar mensajes de error;

Existen otros mtodos para utilizar desde la consola, pero estos pueden variar segn el navegador. Laconsola adems provee la posibilidad de establecer puntos de interrupcin y observar expresiones enel cdigo con el n de facilitar su depuracin.

0.1.5. EjerciciosLa mayora de los captulos concluyen con uno o ms ejercicios. En algunos, podr trabajar directa-mente con Firebug; en otros deber escribir cdigo JavaScript luego de incluir la biblioteca jQuery enel documento.An as, para completar ciertos ejercicios, necesitar consultar la documentacin ocial de jQuery.Aprender a encontrar respuestas, es una parte importante del proceso de aprendizaje.Estas son algunas sugerencias para hacer frente a los problemas:

En primer lugar, asegrese de entender bien el problema que est tratando de resolver.Luego, averige a qu elementos tendr que acceder con el n de resolver el problema, y determinecmo accederlos. Puede utilizar Firebug para vericar que esta obteniendo el resultado esperado.Finalmente, averige qu necesita hacer con esos elementos para resolver el problema. Puede sertil, antes de comenzar, escribir comentarios explicando lo que va a realizar.

No tenga miedo de cometer errores. Tampoco trate en el primer intento escribir de forma perfectasu cdigo. Cometer errores y experimentar con soluciones es parte del proceso de aprendizaje y leayudar a que sea un mejor desarrollador.Podr encontrar en la carpeta /ejercicios/soluciones ejemplos de soluciones a los ejercicios dellibro.

5

0.1.6. Convenciones Utilizadas en el LibroExisten una serie de convenciones utilizadas en el libro: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 names-pace) de jQuery pero que no pueden ser llamados desde el objeto jQuery sern referenciados como$.nombreDelMetodo. Si esto no signica mucho para usted, no se preocupe ser ms claro amedida que vaya progresando en el libro.Ejemplo de un cdigo

// el cdigo de ejemplo aparecer de esta forma

Las remarcaciones aparecern de esta forma.

NotaLas notas sobre algn tema aparecern de esta forma.

0.1.7. Notas de la TraduccinDebido a que el material tiene como n el aprendizaje y la enseanza, el mismo se encuentratraducido a espaol formal (usted).Muchos conceptos tcnicos son nombrados en su versin traducida a espaol. Sin embargo, paratener de referencia, tambin se explica como es llamado en ingls.Los ejemplos y soluciones a ejercicios no estn completamente traducidos. Esto es debido a que,cuando est trabajando en un proyecto real, el cdigo que encuentre en otros sitios probablementeest en ingls. An as, se han traducido los comentarios incorporados en los cdigos de ejemplosy algunos textos particulares para facilitar la comprensin.

0.1.8. Material de ReferenciaExiste una gran cantidad de artculos que se ocupan de algn aspecto de jQuery. Algunos son excelentespero otros, francamente, son errneos. Cuando lea un artculo sobre jQuery, este seguro que se estabarcando la misma versin de la biblioteca que est utilizando, y resstase a la tentacin de copiar ypegar el cdigo tmese un tiempo para poder entenderlo.A continuacin se listan una serie de excelentes recursos para utilizar durante el aprendizaje. El msimportante de todos es el cdigo fuente de jQuery, el cual contiene (en su formato sin comprimir)una completa documentacin a travs de comentarios. La biblioteca no es una caja negra el en-tendimiento de ella ir incrementndose exponencialmente si la revisa de vez en cuando y es muyrecomendable que la guarde en los favoritos de su navegador para tenerla como gua de referencia.

El cdigo fuente de jQueryDocumentacin de jQueryForo de jQueryFavoritos en DeliciousCanal IRC #jquery en Freenode

6

0.2. Conceptos Bsicos de JavaScript

0.2.1. Introduccin

jQuery se encuentra escrito en JavaScript, un lenguaje de programacin muy rico y expresivo.El captulo est orientado a personas sin experiencia en el lenguaje, abarcando conceptos bsicos yproblemas frecuentes que pueden presentarse al trabajar con el mismo. Por otro lado, la seccin puedeser beneciosa para quienes utilicen otros lenguajes de programacin para entender las peculiaridadesde JavaScript.Si usted esta interesado en aprender el lenguaje ms en profundidad, puede leer el libro JavaScript:The Good Parts escrito por Douglas Crockford.

0.2.2. Sintaxis Bsica

Comprensin de declaraciones, nombres de variables, espacios en blanco, y otras sintaxis bsicas deJavaScript.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 primero2 * (3 + 5); // es igual a 16; por lo parntesis, la suma ocurre primero

La tabulacin mejora la lectura del cdigo, pero no posee ningn signicado especial

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

};

0.2.3. Operadores

Operadores Bsicos

Los operadores bsicos permiten manipular valores.Concatenacin

var foo = 'hola';var bar = 'mundo';

console.log(foo + ' ' + bar); // la consola de depuracin muestra 'hola mundo'

7

Multiplicacin y divisin

2 * 3;2 / 3;

Incrementacin y decrementacin

var i = 1;

var j = ++i; // incrementacin previa: j es igual a 2; i es igual a 2var k = i++; // 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 oca-sionar 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 nmeroconsole.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) obligaa su argumento a comportarse como un nmero. Tambin es posible utilizar el operador de sumaunaria, entregando el mismo resultado:Forzar a una cadena de caracteres actuar como un nmero (utilizando el operador desuma 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

8

var foo = 1;var bar = 0;var baz = 2;

foo || bar; // devuelve 1, el cual es verdadero (true)bar || foo; // devuelve 1, el cual es verdadero (true)

foo && bar; // devuelve 0, el cual es falso (false)foo && baz; // devuelve 2, el cual es verdadero (true)baz && foo; // devuelve 1, el cual es verdadero (true)

El operador || (OR lgico) devuelve el valor del primer operando, si ste es verdadero; caso contrariodevuelve 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 segundooperando. 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 seevalan como true y cuales se evalan como false.

NotaPuede que a veces note que algunos desarrolladores utilizan esta lgica en ujos de controlen lugar de utilizar la declaracin if. Por ejemplo:

// realizar algo con foo si foo es verdaderofoo && doSomething(foo);

// establecer bar igual a baz si baz es verdadero;// 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 paraprincipiantes). Por eso se explcita, para reconocerlo cuando este leyendo cdigo. Sin embargo suutilizacin 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 idn-ticos.Operadores de Comparacin

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

foo == bar; // devuelve falso (false)foo != bar; // devuelve verdadero (true)foo == baz; // devuelve verdadero (true); tenga cuidado

9

foo === baz; // devuelve falso (false)foo !== baz; // devuelve verdadero (true)foo === parseInt(baz); // devuelve verdadero (true)

foo > bim; // devuelve falso (false)bim > baz; // devuelve verdadero (true)foo

[]; // un vector vaco{}; // un objeto vaco1; // cualquier nmero distinto a cero

Valores que devuelven falso (false)

0;''; // una cadena vacaNaN; // la variable JavaScript "not-a-number" (No es un nmero)null; // un valor nuloundefined; // 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 sepuede utilizar una declaracin if/else, sin embargo en muchos casos es ms conveniente utilizar eloperador ternario. [Denicin: 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 0var foo = bar ? 1 : 0;

El operador ternario puede ser utilizado sin devolver un valor a la variable, sin embargo este usogeneralmente es desaprobado.

Declaracin Switch

En lugar de utilizar una serie de declaraciones if/else/else if/else, a veces puede ser til la utilizacin dela declaracin switch. [Denicin: La declaracin Switch evala el valor de una variable o expresin,y ejecuta diferentes bloques de cdigo dependiendo de ese valor.]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;

}

11

Las declaraciones switch son poco utilizadas en JavaScript, debido a que el mismo comportamiento esposible obtenerlo creando un objeto, el cual posee ms potencial ya que es posible reutilizarlo, usarlopara 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']();

}

Ms adelante se abarcar el concepto de objetos.

0.2.5. Bucles

Los bucles (en ingls loops) permiten ejecutar un bloque de cdigo un determinado nmero de veces.Bucles

// muestra en la consola 'intento 0', 'intento 1', ..., 'intento 4'for (var i=0; i

El estado expresinInicial es ejecutado una sola vez, antes que el bucle comience. ste otorga laoportunidad de preparar o declarar variables.El estado condicin es ejecutado antes de cada repeticin, y retorna un valor que decide si el bucledebe continuar ejecutndose o no. Si el estado condicional evala un valor falso el bucle se detiene.El estado incrementoDeLaExpresin es ejecutado al nal de cada repeticin y otorga la oportunidadde cambiar el estado de importantes variables. Por lo general, este estado implica la incrementacin odecrementacin 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 vecesconsole.log('Actualmente en ' + i);// Nota: el ltimo registro que se mostrar// 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 acontinuar 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 vecesconsole.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 esposible 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 vecesconsole.log('Actualmente en ' + i);

}

Se comienza en -1 y luego se utiliza la incrementacin previa (++i).

13

Bucles Utilizando Do-while

Este bucle es exactamente igual que el bucle utilizando while excepto que el cuerpo es ejecutado almenos una vez antes que la condicin sea evaluada.

do [cuerpo] while ([condicin])

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 ejecuteal menos una vez. De cualquier forma debe estar al tanto de ellos.

Break y Continue

Usualmente, el n de la ejecucin de un bucle resultar cuando la condicin no siga evaluando unvalor verdadero, sin embargo tambin es posible parar un bucle utilizando la declaracin break dentrodel 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 delcuerpo 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 cumpleconsole.log('Hola');

}

14

0.2.6. Palabras Reservadas

JavaScript posee un nmero de palabras reservadas, o palabras que son especiales dentro del mismolenguaje. Debe utilizar estas palabras cuando las necesite para su uso especco.

abstractbooleanbreakbytecasecatchcharclassconstcontinuedebuggerdefaultdeletedodoubleelseenumexportextendsfinalfinallyfloatforfunctiongotoifimplementsimportininstanceofintinterfacelongnativenewpackageprivateprotectedpublicreturnshortstaticsuper

15

switchsynchronizedthisthrowthrowstransienttrytypeofvarvoidvolatilewhilewith

0.2.7. VectoresLos vectores (en espaol tambin llamados matrices o arreglos y en ingls arrays) son listas de valorescon ndice-cero (en ingls zero-index), es decir, que el primer elemento del vector est en el ndice0. stos son una forma prctica de almacenar un conjunto de datos relacionados (como cadenas decaracteres), 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 valorde 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');

Trabajar con vectores

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

16

0.2.8. Objetos

Los objetos son elementos que pueden contener cero o ms conjuntos de pares de nombres claves yvalores asociados a dicho objeto. Los nombres claves pueden ser cualquier palabra o nmero vlido. Elvalor puede ser cualquier tipo de valor: un nmero, una cadena, un vector, una funcin, incluso otroobjeto.[Denicin: Cuando uno de los valores de un objeto es una funcin, sta es nombrada como un mtododel 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'

NotaNotar que cuando se crean objetos literales, el nombre de la propiedad puede ser cualquieridenticador JavaScript, una cadena de caracteres (encerrada entre comillas) o un nmero:

var myObject = {validIdentifier: 123,'some string': 456,99999: 789

};

Los objetos literales pueden ser muy tiles para la organizacin del cdigo, para ms informacinpuede leer el artculo (en ingls) Using Objects to Organize Your Code por Rebecca Murphey.

0.2.9. Funciones

Las funciones contienen bloques de cdigo que se ejecutaran repetidamente. A las mismas se le puedenpasar 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 */ }

17

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.

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'

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 encrear una expresin de funcin e inmediatamente ejecutarla. El mismo es muy til para casos en queno se desea intervenir espacios de nombres globales, debido a que ninguna variable declarada dentrode la funcin es visible desde afuera.Funcin annima autoejecutable

18

};

var myArray = [ 'a', 'b', 'c' ];

var myString = 'hola';

var myNumber = 3;

typeof myFunction; // devuelve 'function'typeof myObject; // devuelve 'object'typeof myArray; // devuelve 'object' -- tenga cuidadotypeof myString; // devuelve 'string'typeof myNumber; // devuelve 'number'

typeof null; // 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 sernvistos ms adelante.

0.2.11. La palabra clave this

En JavaScript, as como en la mayora de los lenguajes de programacin orientados a objetos, this esuna palabra clave especial que hace referencia al objeto en donde el mtodo est siendo invocado. Elvalor 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 delprimer argumento pasado al mtodo. Si el argumento es nulo (null) o indenido (undened),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 quees 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.

Una funcin invocada utilizando Function.call

var myObject = {sayHello : function() {

20

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(); // registra 'Hola, mi nombre es el objeto global'myObjectHello(); // 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'

},

secondObject = {myName : 'Colin'

};

myObject.sayHello = sayHello;secondObject.sayHello = sayHello;

sayHello(); // registra 'Hola, mi nombre es el objeto global'myObject.sayHello(); // registra 'Hola, mi nombre es Rebecca'secondObject.sayHello(); // registra 'Hola, mi nombre es Colin'

21

NotaEn algunas oportunidades, cuando se invoca una funcin que se encuentra dentro de unespacio de nombres (en ingls namespace) amplio, puede ser una tentacin guardar lareferencia a la funcin actual en una variable ms corta y accesible. Sin embargo, esimportante no realizarlo en instancias de mtodos, ya que puede llevar a la ejecucin decdigo 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 esinvocado:

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'

0.2.12. Alcance

El alcance (en ingls scope) se reere a las variables que estn disponibles en un bloque de cdigoen un tiempo determinado. La falta de comprensin de este concepto puede llevar a una frustranteexperiencia de depuracin.Cuando una variable es declarada dentro de una funcin utilizando la palabra clave var, sta nica-mente esta disponible para el cdigo dentro de la funcin todo el cdigo fuera de dicha funcin nopuede acceder a la variable. Por otro lado, las funciones denidas dentro de la funcin podrn accedera la variable declarada.Las variables que son declaradas dentro de la funcin sin la palabra clave var no quedan dentro delmbito de la misma funcin JavaScript buscar el lugar en donde la variable fue previamente

22

declarada, y en caso de no haber sido declarada, es denida dentro del alcance global, lo cual puedeocasionar consecuencias inesperadas;Funciones tienen acceso a variables denidas dentro del mismo alcance

var foo = 'hola';

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

};

sayHello(); // muestra en la consola 'hola'console.log(foo); // tambin muestra en la consola 'hola'

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

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

};

sayHello(); // muestra en la consola 'hola'console.log(foo); // no muestra nada en la consola

Variables con nombres iguales pero valores diferentes pueden existir en diferentes alcan-ces

var foo = 'mundo';

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

};

sayHello(); // muestra en la consola 'hola'console.log(foo); // muestra en la consola 'mundo'

Las funciones pueden ver los cambios en las variables antes de que la funcin seadenida

var myFunction = function() {var foo = 'hola';

var myFn = function() {console.log(foo);

};

foo = 'mundo';

return myFn;};

23

alert(i);};

};

for (var i = 0; i < 5; i++) {$('hacer click').appendTo('body').click(createFunction(i));

}

Las clausuras tambin pueden ser utilizadas para resolver problemas con la palabra clave this, la cuales nica en cada alcance.Utilizar una clausura para acceder simultneamente a instancias de objetos internos yexternos.

var outerObj = {myName: 'externo',outerFunction: function() {

// provee una referencia al mismo objeto outerObj// para utilizar dentro de innerFunctionvar 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();

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

0.3. Conceptos Bsicos de jQuery

0.3.1. $(document).ready()

No es posible interactuar de forma segura con el contenido de una pgina hasta que el documentono se encuentre preparado para su manipulacin. jQuery permite detectar dicho estado a travs de ladeclaracin $(document).ready() de forma tal que el bloque se ejecutar slo una vez que la pginaeste disponible.El bloque $(document).ready()

25

$(document).ready(function() {console.log('el documento est preparado');

});

Existe una forma abreviada para $(document).ready() la cual podr encontrar algunas veces; sinembargo, es recomendable no utilizarla en caso que este escribiendo cdigo para gente que no conocejQuery.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:Pasar una funcin nombrada en lugar de una funcin annima

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

}

$(document).ready(readyFn);

0.3.2. Seleccin de Elementos

El concepto ms bsico de jQuery es el de seleccionar algunos elementos y realizar acciones conellos. La biblioteca soporta gran parte de los selectores CSS3 y varios ms no estandarizados. Enhttp://api.jquery.com/category/selectors/ se puede encontrar una completa referencia sobrelos 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');

26

Pseudo-selectores

$('a.external:first'); // selecciona el primer elemento // con la clase 'external'

$('tr:odd'); // selecciona todos los elementos // impares de una tabla

$('#myForm :input'); // selecciona todos los elementos del tipo input// dentro del formulario #myForm

$('div:visible'); // selecciona todos los divs visibles$('div:gt(2)'); // selecciona todos los divs excepto los tres primeros$('div:animated'); // selecciona todos los divs actualmente animados

NotaCuando se utilizan los pseudo-selectores :visible y :hidden, jQuery comprueba la visi-bilidad actual del elemento pero no si ste posee asignados los estilos CSS visibility odisplay en otras palabras, verica si el alto y ancho fsico del elemento es mayor acero. Sin embargo, esta comprobacin no funciona con los elementos ; en este caso,jQuery comprueba si se est aplicando el estilo display y va a considerar al elementocomo oculto si posee asignado el valor none. Adems, los elementos que an no fueronaadidos al DOM sern tratados como ocultos, incluso si tienen aplicados estilos indicandoque deben ser visibles (En la seccin Manipulacin de este manual, se explica como creary aadir elementos al DOM).

Como referencia, este es el fragmento de cdigo que utiliza jQuery para determinar cuando un elementoes 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 ?return width === 0 && height === 0 && !skip ?

// entonces debe estar oculto (hidden)true :

// pero si posee ancho y alto// y no es un width > 0 && height > 0 && !skip ?

// entonces debe estar visiblefalse :

// si nos encontramos aqu, es porque el elemento posee ancho// y alto, pero adems es un ,// entonces se verifica el valor del estilo display// aplicado a travs de CSS// para decidir si est oculto o nojQuery.curCSS(elem, "display") === "none";

};

27

jQuery.expr.filters.visible = function( elem ) {return !jQuery.expr.filters.hidden( elem );

};

Eleccin de SelectoresLa eleccin de buenos selectores es un punto importante cuando se desea mejorar el rendimiento delcdigo. Una pequea especicidad por ejemplo, incluir el tipo de elemento (como div) cuando serealiza una seleccin por el nombre de clase puede ayudar bastante. Por eso, es recomendable darlealgunas pistas a jQuery sobre en que lugar del documento puede encontrar lo que desea seleccionar.Por otro lado, demasiada especicidad puede ser perjudicial. Un selector como #miTabla thead trth.especial es un exceso, lo mejor sera utilizar #miTabla th.especial.jQuery ofrece muchos selectores basados en atributos, que permiten realizar selecciones basadas en elcontenido de los atributos utilizando simplicaciones de expresiones regulares.

// encontrar todos los cuyo atributo rel terminan en "thinger"$("a[rel$='thinger']");

Estos tipos de selectores pueden resultar tiles pero tambin ser muy lentos. Cuando sea posible, esrecomendable 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 derendimiento 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 resul-tado. Para ello, pueda que escriba algo as:

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

Sin embargo esta forma no funcionar. Cuando se realiza una seleccin utilizando $(), siempre esdevuelto un objeto, y si se lo evala, ste siempre devolver true. Incluso si la seleccin no contieneningn 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 elementosque posee la seleccin que se ejecut. Esto es posible realizarlo utilizando la propiedad JavaScriptlength. Si la respuesta es 0, la condicin evaluar falso, caso contrario (ms de 0 elementos), lacondicin 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 elresultado por si solo, por lo tanto, si va a realizar una seleccin que luego se har de nuevo, debersalvar la seleccin en una variable.Guardar selecciones en una variable

28

var $divs = $('div');

NotaEn el ejemplo Guardar selecciones en una variable, la variable comienza con el signode dlar. Contrariamente a otros lenguajes de programacin, en JavaScript este signono posee ningn signicado especial es solamente otro carcter. Sin embargo aqu seutilizar para indicar que dicha variable posee un objeto jQuery. Esta prctica unaespecie 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 mtodosde jQuery y el resultado ser igual que utilizando la seleccin original.

NotaLa seleccin obtiene slo los elementos que estn en la pgina cuando se realiz dichaaccin. Si luego se aaden elementos al documento, ser necesario repetir la seleccin oaadir los elementos nuevos a la seleccin guardada en la variable. En otras palabras, lasselecciones guardadas no se actualizan mgicamente cuando el DOM de modica.

Renamiento y Filtrado de Selecciones

A veces, puede obtener una seleccin que contiene ms de lo que necesita; en este caso, es necesariorenar dicha seleccin. jQuery ofrece varios mtodos para poder obtener exactamente lo que desea.Renamiento de selecciones

$('div.foo').has('p'); // el elemento div.foo contiene elementos $('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, puedeser difcil distinguirlos utilizando selectores CSS estndar.

:button Selecciona elementos y con el atributo type='button':checkbox Selecciona elementos con el atributo type='checkbox':checked Selecciona elementos del tipo checkbox seleccionados:disabled Selecciona elementos del formulario que estn deshabitados:enabled Selecciona elementos del formulario que estn habilitados:le Selecciona elementos con el atributo type='file':image Selecciona elementos con el atributo type='image'

29

:input Selecciona elementos , y :password Selecciona elementos con el atributo type='password':radio Selecciona elementos con el atributo type='radio':reset Selecciona elementos con el atributo type='reset':selected Selecciona elementos que estn seleccionados:submit Selecciona elementos con el atributo type='submit':text Selecciona elementos con el atributo type='text'

Utilizando pseudo-selectores en elementos de formularios

$('#myForm :input'); // obtiene todos los elementos inputs// dentro del formulario #myForm

0.3.3. Trabajar con Selecciones

Una vez realizada la seleccin de los elementos, es posible utilizarlos en conjunto con diferentes mto-dos. stos, generalmente, son de dos tipos: obtenedores (en ingls getters) y establecedores (en inglssetters). Los mtodos obtenedores devuelven una propiedad del elemento seleccionado; mientras quelos mtodos establecedores jan una propiedad a todos los elementos seleccionados.

Encadenamiento

Si en una seleccin se realiza una llamada a un mtodo, y ste devuelve un objeto jQuery, es posibleseguir un encadenado de mtodos en el objeto.Encadenamiento

$('#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, esposible 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.endpara poder hacerlo.Restablecer la seleccin original utilizando el mtodo $.fn.end

30

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

NotaEl encadenamiento es muy poderoso y es una caracterstica que muchas bibliotecas Ja-vaScript han adoptado desde que jQuery se hizo popular. Sin embargo, debe ser utilizadocon cuidado. Un encadenamiento de mtodos extensivo pueden hacer un cdigo extrema-damente difcil de modicar y depurar. No existe una regla que indique que tan largo ocorto debe ser el encadenado pero es recomendable que tenga en cuenta este consejo.

Obtenedores (Getters) & Establecedores (Setters)

jQuery sobrecarga sus mtodos, en otras palabras, el mtodo para establecer un valor posee el mismonombre que el mtodo para obtener un valor. Cuando un mtodo es utilizado para establecer un valor,es llamado mtodo establecedor (en ingls setter). En cambio, cuando un mtodo es utilizado paraobtener (o leer) un valor, es llamado obtenedor (en ingls getter).El mtodo $.fn.html utilizado como establecedor

$('h1').html('hello world');

El mtodo html utilizado como obtenedor

$('h1').html();

Los mtodos establecedores devuelven un objeto jQuery, permitiendo continuar con la llamada de msmtodos en la misma seleccin, mientras que los mtodos obtenedores devuelven el valor por el cualse consult, pero no permiten seguir llamando a ms mtodos en dicho valor.

0.3.4. CSS, Estilos, & Dimensiones

jQuery incluye una manera til de obtener y establecer propiedades CSS a los elementos.

NotaLas propiedades CSS que incluyen como separador un guin del medio, en JavaScript debenser transformadas a su estilo CamelCase. Por ejemplo, cuando se la utiliza como propiedadde un mtodo, el estilo CSS font-size deber ser expresado como fontSize. Sin embargo,esta regla no es aplicada cuando se pasa el nombre de la propiedad CSS al mtodo $.fn.css en este caso, los dos formatos (en CamelCase o con el guin del medio) funcionarn.

Obtener propiedades CSS

$('h1').css('fontSize'); // devuelve una cadena de caracteres como "19px"$('h1').css('font-size'); // tambin funciona

31

Establecer propiedades CSS

$('h1').css('fontSize', '100px'); // establece una propiedad individual CSS$('h1').css({

'fontSize' : '100px','color' : 'red'

}); // establece mltiples propiedades CSS

Notar que el estilo del argumento utilizado en la segunda lnea del ejemplo es un objeto que contienemltiples propiedades. Esta es una forma comn de pasar mltiples argumentos a una funcin, ymuchos mtodos establecedores de la biblioteca aceptan objetos para jar varias propiedades de unasola vez.A partir de la versin 1.6 de la biblioteca, utilizando $.fn.css tambin es posible establecer valoresrelativos en las propiedades CSS de un elemento determinado:Establecer valores CSS relativos

$('h1').css({'fontSize' : '+=15px', // suma 15px al tamao original del elemento'paddingTop' : '+=20px' // suma 20px al padding superior original del elemento

});

Utilizar Clases para Aplicar Estilos CSS

Para obtener valores de los estilos aplicados a un elemento, el mtodo $.fn.css es muy til, sinembargo, su utilizacin como mtodo establecedor se debe evitar (ya que, para aplicar estilos a unelemento, se puede hacer directamente desde CSS). En su lugar, lo ideal, es escribir reglas CSS quese apliquen a clases que describan los diferentes estados visuales de los elementos y luego cambiar laclase del elemento para aplicar el estilo que se desea mostrar.Trabajar con clases

var $h1 = $('h1');

$h1.addClass('big');$h1.removeClass('big');$h1.toggleClass('big');

if ($h1.hasClass('big')) { ... }

Las clases tambin pueden ser tiles para guardar informacin del estado de un elemento, por ejemplo,para indicar que un elemento fue seleccionado.

Dimensiones

jQuery ofrece una variedad de mtodos para obtener y modicar valores de dimensiones y posicin deun elemento.El cdigo mostrado en el ejemplo Mtodos bsicos sobre Dimensiones es solo un breve resumende las funcionalidades relaciones a dimensiones en jQuery; para un completo detalle puede consultarhttp://api.jquery.com/category/dimensions/.Mtodos bsicos sobre Dimensiones

32

$('h1').width('50px'); // establece el ancho de todos los elementos H1$('h1').width(); // obtiene el ancho del primer elemento H1

$('h1').height('50px'); // establece el alto de todos los elementos H1$('h1').height(); // obtiene el alto del primer elemento H1

$('h1').position(); // devuelve un objeto conteniendo// informacin sobre la posicin// del primer elemento relativo al// "offset" (posicin) de su elemento padre

0.3.5. Atributos

Los atributos de los elementos HTML que conforman una aplicacin pueden contener informacintil, por eso es importante poder establecer y obtener esa informacin.El mtodo $.fn.attr acta tanto como mtodo establecedor como obtenedor. Adems, al igual queel mtodo $.fn.css, cuando se lo utiliza como mtodo establecedor, puede aceptar un conjunto depalabra clave-valor o un objeto conteniendo ms conjuntos.Establecer atributos

$('a').attr('href', 'allMyHrefsAreTheSameNow.html');$('a').attr({

'title' : 'all titles are the same too','href' : 'somethingNew.html'

});

En el ejemplo, el objeto pasado como argumento est escrito en varias lneas. Como se explic anterior-mente, los espacios en blanco no importan en JavaScript, por lo cual, es libre de utilizarlos para hacerel cdigo ms legible. En entornos de produccin, se pueden utilizar herramientas de minicacin, loscuales quitan los espacios en blanco (entre otras cosas) y comprimen el archivo nal.Obtener atributos

$('a').attr('href'); // devuelve el atributo href perteneciente// al primer elemento del documento

0.3.6. Recorrer el DOM

Una vez obtenida la seleccin, es posible encontrar otros elementos utilizando a la misma seleccin.En http://api.jquery.com/category/traversing/ puede encontrar una completa documentacinsobre los mtodos de recorrido de DOM (en ingls traversing) que posee jQuery.

NotaDebe ser cuidadoso en recorrer largas distancias en un documento recorridos complejosobligan que la estructura del documento sea siempre la misma, algo que es difcil degarantizar. Uno -o dos- pasos para el recorrido esta bien, pero generalmente hay que evitaratravesar desde un contenedor a otro.

33

Moverse a travs del DOM utilizando mtodos de recorrido

$('h1').next('p'); // seleccionar el inmediato y prximo// elemento con respecto a H1

$('div:visible').parent(); // seleccionar el elemento contenedor// a un div visible

$('input[name=first_name]').closest('form'); // seleccionar el elemento// ms cercano a un input

$('#myList').children(); // seleccionar todos los elementos// hijos de #myList

$('li.selected').siblings(); // seleccionar todos los items// hermanos del elemento

Tambin es posible interactuar con la seleccin utilizando el mtodo $.fn.each. Dicho mtodo inter-acta con todos los elementos obtenidos en la seleccin y ejecuta una funcin por cada uno. La funcinrecibe como argumento el ndice del elemento actual y al mismo elemento. De forma predeterminada,dentro de la funcin, se puede hacer referencia al elemento DOM a travs de la declaracin this.Interactuar en una seleccin

$('#myList li').each(function(idx, el) {console.log(

'El elemento ' + idx +'contiene el siguiente HTML: ' +$(el).html()

);});

0.3.7. Manipulacin de Elementos

Una vez realizada la seleccin de los elementos que desea utilizar, la diversin comienza. Es posiblecambiar, mover, remover y duplicar elementos. Tambin crear nuevos a travs de una sintaxis simple.La documentacin completa sobre los mtodos de manipulacin puede encontrarla en la seccinManipulation: http://api.jquery.com/category/manipulation/.

Obtener y Establecer Informacin en Elementos

Existen muchas formas por las cuales de puede modicar un elemento. Entre las tareas ms comunesestn las de cambiar el HTML interno o algn atributo del mismo. Para este tipo de tareas, jQueryofrece mtodos simples, funcionales en todos los navegadores modernos. Incluso es posible obtenerinformacin sobre los elementos utilizando los mismos mtodos pero en su forma de mtodo obtenedor.

NotaRealizar cambios en los elementos, es un trabajo trivial, pero hay debe recordar que elcambio afectar a todos los elementos en la seleccin, por lo que, si desea modicar unslo elemento, tiene que estar seguro de especicarlo en la seleccin antes de llamar almtodo establecedor.

34

NotaCuando los mtodos actan como obtenedores, por lo general, solamente trabajan con elprimer elemento de la seleccin. Adems no devuelven un objeto jQuery, por lo cual no esposible encadenar ms mtodos en el mismo. Una excepcin es el mtodo $.fn.text, elcual permite obtener el texto de los elementos de la seleccin.

$.fn.html Obtiene o establece el contenido HTML de un elemento.$.fn.text Obtiene o establece el contenido en texto del elemento; en caso se pasarle como argumento

cdigo HTML, este es despojado.$.fn.attr Obtiene o establece el valor de un determinado atributo.$.fn.width Obtiene o establece el ancho en pixeles del primer elemento de la seleccin como un

entero.$.fn.height Obtiene o establece el alto en pixeles del primer elemento de la seleccin como un entero.$.fn.position Obtiene un objeto con informacin sobre la posicin del primer elemento de la seleccin,

relativo al primer elemento padre posicionado. Este mtodo es solo obtenedor.$.fn.val Obtiene o establece el valor (value) en elementos de formularios.

Cambiar el HTML de un elemento

$('#myDiv p:first').html('Nuevo primer prrafo');

Mover, Copiar y Remover Elementos

Existen varias maneras para mover elementos a travs del DOM; las cuales se pueden separar en dosenfoques:

Querer colocar el/los elementos seleccionados de forma relativa a otro elementoQuerer colocar un elemento relativo a el/los elementos seleccionados.

Por ejemplo, jQuery provee los mtodos $.fn.insertAfter y $.fn.after. El mtodo $.fn.insertAftercoloca a el/los elementos seleccionados despus del elemento que se haya pasado como argumento;mientras que el mtodo $.fn.after coloca al elemento pasado como argumento despus del elementoseleccionado. Otros mtodos tambin siguen este patrn: $.fn.insertBefore y $.fn.before;$.fn.appendTo y $.fn.append; y $.fn.prependTo y $.fn.prepend.La utilizacin de uno u otro mtodo depender de los elementos que tenga seleccionados y el tipo dereferencia que se quiera guardar con respecto al elemento que se esta moviendo.Mover elementos utilizando diferentes enfoques

// hacer que el primer item de la lista sea el ltimovar $li = $('#myList li:first').appendTo('#myList');

// otro enfoque para el mismo problema$('#myList').append($('#myList li:first'));

// debe tener en cuenta que no hay forma de acceder a la// lista de items que se ha movido, ya que devuelve// la lista en s

35

Clonar Elementos Cuando se utiliza un mtodo como $.fn.appendTo, lo que se est haciendo esmover al elemento; pero a veces en lugar de eso, se necesita mover un duplicado del mismo elemento.En este caso, es posible utilizar el mtodo $.fn.clone.Obtener una copia del elemento

// copiar el primer elemento de la lista y moverlo al final de la misma$('#myList li:first').clone().appendTo('#myList');

NotaSi se necesita copiar informacin y eventos relacionados al elemento, se debe pasar truecomo argumento de $.fn.clone.

Remover elementos Existen dos formas de remover elementos de una pgina: Utilizando$.fn.remove o $.fn.detach. Cuando desee remover de forma permanente al elemento, utilizeel mtodo $.fn.remove. Por otro lado, el mtodo $.fn.detach tambin remueve el elemento, peromantiene la informacin y eventos asociados al mismo, siendo til en el caso que necesite reinsertarel elemento en el documento.

NotaEl mtodo $.fn.detach es muy til cuando se esta manipulando de forma severa unelemento, ya que es posible eliminar al elemento, trabajarlo en el cdigo y luego restaurarloen la pgina nuevamente. Esta forma tiene como benecio no tocar el DOM mientras seest modicando la informacin y eventos del elemento.

Por otro lado, si se desea mantener al elemento pero se necesita eliminar su contenido, es posibleutiliza el mtodo $.fn.empty, el cual vaciar el contenido HTML del elemento.

Crear Nuevos Elementos

jQuery provee una forma fcil y elegante para crear nuevos elementos a travs del mismo mtodo $()que se utiliza para realizar selecciones.Crear nuevos elementos

$('Un nuevo prrafo');$('nuevo item de la lista');

Crear un nuevo elemento con atributos utilizando un objeto

$('', {html : 'Un nuevo enlace','class' : 'new',href : 'foo.html'

});

Note que en el objeto que se pasa como argumento, la propiedad class est entre comillas, mientrasque la propiedad href y html no lo estn. Por lo general, los nombres de propiedades no deben estar

36

entre comillas, excepto en el caso que se utilice como nombre una palabra reservada (como es el casode class).Cuando se crea un elemento, ste no es aadido inmediatamente a la pgina, sino que se debe hacerloen conjunto con un mtodo.Crear un nuevo elemento en la pgina

var $myNewElement = $('Nuevo elemento');$myNewElement.appendTo('#content');

$myNewElement.insertAfter('ul:last'); // eliminar al elemento // existente en #content

$('ul').last().after($myNewElement.clone()); // clonar al elemento // para tener las dos versiones

Estrictamente hablando, no es necesario guardar al elemento creado en una variable es posiblellamar al mtodo para aadir el elemento directamente despus de $(). Sin embargo, la mayora delas veces se desear hacer referencia al elemento aadido, por lo cual, si se guarda en una variable noes necesario seleccionarlo despus.Crear y aadir al mismo tiempo un elemento a la pgina

$('ul').append('item de la lista');

NotaLa sintaxis para aadir nuevos elementos a la pgina es muy fcil de utilizar, pero estentador olvidar que hay un costo enorme de rendimiento al agregar elementos al DOMde forma repetida. Si esta aadiendo muchos elementos al mismo contenedor, en lugar deaadir cada elemento uno por vez, lo mejor es concatenar todo el HTML en una nicacadena de caracteres para luego anexarla al contenedor. Una posible solucin es utilizar unvector que posea todos los elementos, luego reunirlos utilizando join y nalmente anexarla.

var myItems = [], $myList = $('#myList');

for (var i=0; i

$('#myDiv a:first').attr({href : 'newDestination.html',rel : 'super-special'

});

Utilizar una funcin para determinar el valor del nuevo atributo

$('#myDiv a:first').attr({rel : 'super-special',href : function(idx, href) {

return '/new/' + href;}

});

$('#myDiv a:first').attr('href', function(idx, href) {return '/new/' + href;

});

0.3.8. EjerciciosSelecciones

Abra el archivo /ejercicios/index.html en el navegador. Realice el ejercicio utilizando el archivo/ejercicios/js/sandbox.js o trabaje directamente con Firebug para cumplir los siguientes puntos:

1. Seleccionar todos los elementos div que poseen la clase module.2. Especicar tres selecciones que puedan seleccionar el tercer tem de la lista desordenada #myList.

Cul es el mejor para utilizar? Porqu?3. Seleccionar el elemento label del elemento input utilizando un selector de atributo.4. Averiguar cuantos elementos en la pgina estn ocultos (ayuda: .length)5. Averiguar cuantas imgenes en la pgina poseen el atributo alt.6. Seleccionar todas las las impares del cuerpo de la tabla.

Recorrer el DOM


1. Seleccionar todas las imgenes en la pgina; registrar en la consola el atributo alt de cadaimagen.

2. Seleccionar el elemento input, luego dirigirse hacia el formulario y aadirle una clase al mismo.3. Seleccionar el tem que posee la clase current dentro de la lista #myList y remover dicha clase

en el elemento; luego aadir la clase current al siguiente tem de la lista.4. Seleccionar el elemento select dentro de #specials; luego dirigirse hacia el botn submit.5. Seleccionar el primer tem de la lista en el elemento #slideshow; aadirle la clase current al

mismo y luego aadir la clase disabled a los elementos hermanos.

38

Manipulacin


1. Aadir 5 nuevos tems al nal de la lista desordenada #myList. Ayuda:

for (var i = 0; i

0.4.2. Mtodos Utilitarios

jQuery ofrece varios mtodos utilitarios dentro del espacio de nombres $. Estos mtodos son de granayuda para llevar a cabo tareas rutinarias de programacin. A continuacin se muestran algunosejemplos, para una completa documentacin sobre ellos, visite http://api.jquery.com/category/utilities/.

$.trim Remueve los espacios en blanco del principio y nal.

$.trim(' varios espacios en blanco ');// devuelve 'varios espacios en blanco'

$.each Interacta en vectores y objetos.

$.each([ 'foo', 'bar', 'baz' ], function(idx, val) {console.log('elemento ' + idx + 'es ' + val);

});

$.each({ foo : 'bar', baz : 'bim' }, function(k, v) {console.log(k + ' : ' + v);

});

NotaComo se dijo antes, existe un mtodo llamado $.fn.each, el cual interacta en unaseleccin de elementos.

$.inArray Devuelve el ndice de un valor en un vector, o -1 si el valor no se encuentra en el vector.

var myArray = [ 1, 2, 3, 5 ];

if ($.inArray(4, myArray) !== -1) {console.log('valor encontrado');

}

$.extend Cambia la propiedades del primer objeto utilizando las propiedades de los subsecuentesobjetos.

var firstObject = { foo : 'bar', a : 'b' };var secondObject = { foo : 'baz' };

var newObject = $.extend(firstObject, secondObject);console.log(firstObject.foo); // 'baz'console.log(newObject.foo); // 'baz'

Si no se desea cambiar las propiedades de ninguno de los objetos que se utilizan en $.extend, se debeincluir un objeto vaco como primer argumento.

40

jQuery.isFunction(myValue); // falso (false)jQuery.isPlainObject(myValue); // falso (false)jQuery.isArray(myValue); // verdadero (true)jQuery.isNumeric(16); // verdadero (true). No disponible en versiones inferiores a jQuery 1.7

0.4.4. El Mtodo Data

A menudo encontrar que existe informacin acerca de un elemento que necesita guardar. En Ja-vaScript es posible hacerlo aadiendo propiedades al DOM del elemento, pero esta prctica conllevaenfrentarse a prdidas de memoria (en ingls memory leaks) en algunos navegadores. jQuery ofreceuna manera sencilla para poder guardar informacin relacionada a un elemento, y la misma bibliotecase ocupa de manejar los problemas que pueden surgir por falta de memoria.Guardar y recuperar informacin relacionada a un elemento

$('#myDiv').data('keyName', { foo : 'bar' });$('#myDiv').data('keyName'); // { foo : 'bar' }

A travs del mtodo $.fn.data es posible guardar cualquier tipo de informacin sobre un elemento. Esdifcil exagerar la importancia de este concepto cuando se est desarrollando una aplicacin compleja.Por ejemplo, si desea establecer una relacin entre el tem de una lista y el div que hay dentro de estetem, es posible hacerlo cada vez que se interacta con el tem, pero una mejor solucin es hacerlo unasola vez, guardando un puntero al div utilizando el mtodo $.fn.data:Establecer una relacin entre elementos utilizando el mtodo $.fn.data

$('#myList li').each(function() {var $li = $(this), $div = $li.find('div.content');$li.data('contentDiv', $div);

});

// luego, no se debe volver a buscar al div;// es posible leerlo desde la informacin asociada al item de la listavar $firstLi = $('#myList li:first');$firstLi.data('contentDiv').html('nuevo contenido');

Adems es posible pasarle al mtodo un objeto conteniendo uno o ms pares de conjuntos palabraclave-valor.A partir de la versin 1.5 de la biblioteca, jQuery permite utilizar al mtodo $.fn.data para obtenerla informacin asociada a un elemento que posea el atributo HTML5 data-*:Elementos con el atributo data-*

Foo

Foo Bar

Obtener los valores asociados a los atributos data-* con $.fn.data

42

// obtiene el valor del atributo data-foo// utilizando el mtodo $.fn.dataconsole.log($('#foo').data('foo')); // registra 'baz'

// obtiene el valor del segundo elementoconsole.log($('#foobar').data('fooBar')); // registra 'fol'

NotaA partir de la versin 1.6 de la biblioteca, para obtener el valor del atributo data-foo-bardel segundo elemento, el argumento en $.fn.data se debe pasar en estilo CamelCase.

NotaPara ms informacin sobre el atributo HTML5 data-* visite http://www.w3.org/TR/html5/global-attributes.html#embedding-custom-non-visible-data-with-the-data-attributes.

0.4.5. Deteccin de Navegadores y CaractersticasMs all que jQuery elimine la mayora de las peculiaridades de JavaScript entre cada navegador,existen ocasiones en que se necesita ejecutar cdigo en un navegador especco.Para este tipo de situaciones, jQuery ofrece el objeto $.support y $.browser (este ltimo en desuso).Una completa documentacin sobre estos objetos puede encontrarla en http://api.jquery.com/jQuery.support/ y http://api.jquery.com/jQuery.browser/El objetivo de $.support es determinar qu caractersticas soporta el navegador web.El objeto $.browser permite detectar el tipo de navegador y su versin. Dicho objeto est en desuso(aunque en el corto plazo no est planicada su eliminacin del ncleo de la biblioteca) y se recomiendautilizar al objeto $.support para estos propsitos.

0.4.6. Evitar Conictos con Otras Bibliotecas JavaScriptSi esta utilizando jQuery en conjunto con otras bibliotecas JavaScript, las cuales tambin utilizan lavariable $, pueden llegar a ocurrir una serie de errores. Para poder solucionarlos, es necesario poner ajQuery en su modo no-conicto. Esto se debe realizar inmediatamente despus que jQuery se cargueen la pgina y antes del cdigo que se va a ejecutar.Cuando se pone a jQuery en modo no-conicto, la biblioteca ofrece la opcin de asignar un nombrepara reemplazar a la variable $.Poner a jQuery en modo no-conicto

// la biblioteca prototype// tambin utiliza $

// se carga jquery// en la pgina

var $j = jQuery.noConflict(); // se inicializa// el modo "no-conflicto"

Tambin es posible seguir utilizando $ conteniendo el cdigo en una funcin annima autoejecutable.ste es un patrn estndar para la creacin de extensiones para la biblioteca, ya que $ queda encerradadentro del alcance de la misma funcin annima.Utilizar $ dentro de una funcin annima autoejecutable

43

jQuery.noConflict();

(function($) {// el cdigo va aqu, pudiendo utilizar $

})(jQuery);

0.5. Eventos

0.5.1. Introduccin

jQuery provee mtodos para asociar controladores de eventos (en ingls event handlers) a selectores.Cuando un evento ocurre, la funcin provista es ejecutada. Dentro de la funcin, la palabra clave thishace referencia al elemento en que el evento ocurre.Para ms detalles sobre los eventos en jQuery, puede consultar http://api.jquery.com/category/events/.La funcin del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado paradeterminar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado deste. Para ms detalles sobre el objeto del evento, visite http://api.jquery.com/category/events/event-object/.

0.5.2. Vincular Eventos a Elementos

jQuery ofrece mtodos para la mayora de los eventos entre ellos $.fn.click, $.fn.focus,$.fn.blur, $.fn.change, etc. Estos ltimos son formas reducidas del mtodo $.fn.on de jQuery($.fn.bind en versiones anteriores a jQuery 1.7). El mtodo $.fn.on es til para vincular (eningls binding) la misma funcin de controlador a mltiples eventos, para cuando se desea proveerinformacin al controlador de evento, cuando se est trabajando con eventos personalizados o cuandose desea pasar un objeto a mltiples eventos y controladores.Vincular un evento utilizando un mtodo reducido

$('p').click(function() {console.log('click');

});

Vincular un evento utilizando el mtodo $.fn.on

$('p').on('click', function() {console.log('click');

});

Vincular un evento utilizando el mtodo $.fn.on con informacin asociada

44

$('input').on('click blur', // es posible vincular mltiples eventos al elemento{ foo : 'bar' }, // se debe pasar la informacin asociada como argumento

function(eventObject) {console.log(eventObject.type, eventObject.data);// registra el tipo de evento y la informacin asociada { foo : 'bar' }

});

Vincular Eventos para Ejecutar una vez

A veces puede necesitar que un controlador particular se ejecute solo una vez y despus de eso,necesite que ninguno ms se ejecute, o que se ejecute otro diferente. Para este propsito jQuery proveeel mtodo $.fn.one.Cambiar controladores utilizando el mtodo $.fn.one

$('p').one('click', function() {console.log('Se clicke al elemento por primera vez');$(this).click(function() { console.log('Se ha clickeado nuevamente'); });

});

El mtodo $.fn.one es til para situaciones en que necesita ejecutar cierto cdigo la primera vez queocurre un evento en un elemento, pero no en los eventos sucesivos.

Desvincular Eventos

Para desvincular (en ingles unbind) un controlador de evento, puede utilizar el mtodo $.fn.offpasndole el tipo de evento a desconectar. Si se pas como adjunto al evento una funcin nombrada,es posible aislar la desconexin de dicha funcin pasndola como segundo argumento.Desvincular todos los controladores del evento click en una seleccin

$('p').off('click');

Desvincular un controlador particular del evento click

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

$('p').on('click', foo).on('click', bar);$('p').off('click', bar); // foo esta atado an al evento click

Espacios de Nombres para Eventos

Cuando se esta desarrollando aplicaciones complejas o extensiones de jQuery, puede ser til utilizarespacios de nombres para los eventos, y de esta forma evitar que se desvinculen eventos cuando no lodesea.Asignar espacios de nombres a eventos

45

$('p').on('click.myNamespace', function() { /* ... */ });$('p').off('click.myNamespace');$('p').off('.myNamespace'); // desvincula todos los eventos con

// el espacio de nombre 'myNamespace'

Vinculacin de Mltiples Eventos

Muy a menudo, elementos en una aplicacin estarn vinculados a mltiples eventos, cada uno conuna funcin diferente. En estos casos, es posible pasar un objeto dentro de $.fn.on con uno o mspares de nombres claves/valores. Cada clave ser el nombre del evento mientras que cada valor serla funcin a ejecutar cuando ocurra el evento.Vincular mltiples eventos a un elemento

$('p').on({'click': function() {

console.log('clickeado');},'mouseover': function() {

console.log('sobrepasado');}

});

0.5.3. El Objeto del Evento

Como se menciona en la introduccin, la funcin controladora de eventos recibe un objeto del evento,el cual contiene varios mtodos y propiedades. El objeto es comnmente utilizado para prevenir laaccin predeterminada del evento a travs del mtodo preventDefault. Sin embargo, tambin contienevarias propiedades y mtodos tiles:

pageX, pageY La posicin del puntero del ratn en el momento que el evento ocurri, relativo a laszonas superiores e izquierda de la pgina.

type El tipo de evento (por ejemplo click).which El botn o tecla presionada.data Alguna informacin pasada cuando el evento es ejecutado.target El elemento DOM que inicializ el evento.preventDefault() Cancela la accin predeterminada del evento (por ejemplo: seguir un enlace).stopPropagation() Detiene la propagacin del evento sobre otros elementos.

Por otro lado, la funcin controladora tambin tiene acceso al elemento DOM que inicializ el eventoa travs de la palabra clave this. Para convertir a dicho elemento DOM en un objeto jQuery (y poderutilizar los mtodos de la biblioteca) es necesario escribir $(this), como se muestra a continuacin:

var $this = $(this);

Cancelar que al hacer click en un enlace, ste se siga

46

$('a').click(function(e) {var $this = $(this);if ($this.attr('href').match('evil')) {

e.preventDefault();$this.addClass('evil');

}});

0.5.4. Ejecucin automtica de Controladores de Eventos

A travs del mtodo $.fn.trigger, jQuery provee una manera de disparar controladores de eventossobre algn elemento sin requerir la accin del usuario. Si bien este mtodo tiene sus usos, no deberaser utilizado para simplemente llamar a una funcin que pueda ser ejecutada con un click del usuario.En su lugar, debera guardar la funcin que se necesita llamar en una variable, y luego pasar el nombrede la variable cuando realiza el vinculo (binding). De esta forma, podr llamar a la funcin cuando lodesee en lugar de ejecutar $.fn.trigger.Disparar un controlador de eventos de la forma correcta

var foo = function(e) {if (e) {

console.log(e);} else {

console.log('esta ejecuccin no provino desde un evento');}

};

$('p').click(foo);

foo(); // en lugar de realizar $('p').trigger('click')

0.5.5. Incrementar el Rendimiento con la Delegacin de Eventos

Cuando trabaje con jQuery, frecuentemente aadir nuevos elementos a la pgina, y cuando lo haga,necesitar vincular eventos a dichos elementos. En lugar de repetir la tarea cada vez que se aade unelemento, es posible utilizar la delegacin de eventos para hacerlo. Con ella, podr enlazar un eventoa un elemento contenedor, y luego, cuando el evento ocurra, podr ver en que elemento sucede.La delegacin de eventos posee algunos benecios, incluso si no se tiene pensando aadir ms elementosa la pgina. El tiempo requerido para enlazar controladores de eventos a cientos de elementos no esun trabajo trivial; si posee un gran conjunto de elementos, debera considerar utilizar la delegacin deeventos a un elemento contenedor.

NotaA partir de la versin 1.4.2, se introdujo $.fn.delegate, sin embargo a partir de la versin1.7 es preferible utilizar el evento $.fn.on para la delegacin de eventos.

Delegar un evento utilizando $.fn.on

47

$('#myUnorderedList').on('click', 'li', function(e) {var $myListItem = $(this);// ...

});

Delegar un evento utilizando $.fn.delegate

$('#myUnorderedList').delegate('li', 'click', function(e) {var $myListItem = $(this);// ...

});

Desvincular Eventos Delegados

Si necesita remover eventos delegados, no puede hacerlo simplemente desvinculndolos. Para eso,utilice el mtodo $.fn.off para eventos conectados con $.fn.on, y $.fn.undelegate para eventosconectados con $.fn.delegate. Al igual que cuando se realiza un vinculo, opcionalmente, se puedepasar el nombre de una funcin vinculada.Desvincular eventos delegados

$('#myUnorderedList').off('click', 'li');$('#myUnorderedList').undelegate('li', 'click');

0.5.6. Funciones Auxiliares de Eventos

jQuery ofrece dos funciones auxiliares para el trabajo con eventos:

$.fn.hover

El mtodo $.fn.hover permite pasar una o dos funciones que se ejecutarn cuando los eventosmouseenter y mouseleave ocurran en el elemento seleccionado. Si se pasa una sola funcin, est serejecutada en ambos eventos; en cambio si se pasan dos, la primera ser ejecutada cuando ocurra elevento mouseenter, mientras que la segunda ser ejecutada cuando ocurra mouseleave.

NotaA partir de la versin 1.4 de jQuery, el mtodo requiere obligatoriamente dos funciones.

La funcin auxiliar hover

$('#menu li').hover(function() {$(this).toggleClass('hover');

});

48

$.fn.toggle

Al igual que el mtodo anterior, $.fn.toggle recibe dos o ms funciones; cada vez que un eventoocurre, la funcin siguiente en la lista se ejecutar. Generalmente, $.fn.toggle es utilizada con solodos funciones. En caso que utiliza ms de dos funciones, tenga cuidado, ya que puede ser dicultar ladepuracin del cdigo.La funcin auxiliar toggle

$('p.expander').toggle(function() {

$(this).prev().addClass('open');},function() {

$(this).prev().removeClass('open');}

);

0.5.7. Ejercicios

Crear una Sugerencia para una Caja de Ingreso de Texto

Abra el archivo /ejercicios/index.html en el navegador. Realice el ejericio utilizando el archivo/ejercicios/js/inputHint.js o trabaje directamente con Firebug. La tarea a realizar es utilizar eltexto del elemento label y aplicar una sugerencia en la caja de ingreso de texto. Los pasos ha seguirson los siguientes:

1. Establecer el valor del elemento input igual al valor del elemento label;2. Aadir la clase hint al elemento input;3. Remover el elemento label;4. Vincular un evento focus en el input para remover el texto de sugerencia y la clase hint;5. Vincular un evento blur en el input para restaurar el texto de sugerencia y la clase hint en

caso que no se haya ingresado algn texto.

Qu otras consideraciones debe considerar si se desea aplicar esta funcionalidad a un sitio real?

Aadir una Navegacin por Pestaas

Abra el archivo /ejercicios/index.html en el navegador. Realice el ejericio utilizando el archi-vo /ejercicios/js/tabs.js o trabaje directamente con Firebug. La tarea a realizar es crear unanavegacin por pestaas para los dos elementos div.module. Los pasos ha seguir son los siguientes:

1. Ocultar todos los elementos div.module;2. Crear una lista desordenada antes del primer div.module para utilizar como pestaas;3. Interactuar con cada div utilizando $.fn.each. Por cada uno, utilizar el texto del elemento h2

como el texto para el tem de la lista desordenada;

49

4. Vincular un evento click a cada tem de la lista de forma que:

Muestre el div correspondiente y oculte el otro;Aada la clase current al tem seleccionado;Remueva la clase current del otro tem de la lista;

5. Finalmente, mostrar la primera pestaa.

0.6. Efectos

0.6.1. Introduccin

Con jQuery, agregar efectos a una pgina es muy fcil. Estos efectos poseen una conguracin pre-determi

Fundamentos de JQuery

Documents

Transcript of Fundamentos de JQuery