Aprender...que pueda realizar todos los ejercicios propuestos y empiece a disfrutar de la...
22
Transcript of Aprender...que pueda realizar todos los ejercicios propuestos y empiece a disfrutar de la...
AprenderjQuerycon 100 ejercicios prácticos
AprenderjQuerycon 100 ejercicios prácticos
Aprender jQuery con 100 ejercicios prácticos
© 2014 MEDIAactive
PRIMERA edición, 2014
© 2014 MARCOMBO, S.A. Gran Via de les Corts Catalanes, 594 08007 Barcelona www.marcombo.com
En coedición con:
© 2014 ALFAOMEGA GRUPO EDITOR, S.A. de C.V. C/ Pitágoras 1139 - Colonia del Valle 03100 - México D.F. (México) www.alfaomega.com.mx
Diseño de la cubierta: NDENU DISSENY GRÀFIC
«Cualquier forma de reproducción, distribución, comunicación pública o transformación de esta obra sólo puede ser realizada con la autorización de sus titulares, salvo excepción prevista por la ley. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmen-to de esta obra».
ISBN por Marcombo: 978-84-267-2108-2
ISBN por Alfaomega: 978-607-622-067-2
D.L.: B-27679-2013
Printed in Spain
Dedico este libro a mi mujer y compañera de viaje con todo mi cariño, admiración y agradecimiento. Ha sido un gran estímulo en todo momento.
También se lo dedico a mi hijo al que quiero con locura y le deseo lo mejor.
No podría olvidar a mis padres y hermana que forman parte de mi propia esencia y a los que les agradezco mucho su apoyo incondicional y cariño.
Por último, quisiera agradecer también a mis amigos Victor y Jordi y a mis compañeros de trabajo, la gran ayuda y afecto que me han mostrado durante casi toda la vida.
Gracias.
Juanto Gómez
7
Presentación
APRENDER JQUERY CON 100 EJERCICIOS PRÁCTICOS
100 ejercicios prácticos resueltos que conforman un recorrido por las principales funciones del framework de Javascript. Si bien es imposible recoger en las páginas de este libro todas las posibilidades de jQuery, hemos escogido las más interesantes y utilizadas. Una vez realizados a conciencia los 100 ejercicios que componen este ma-nual, el lector será capaz de manejar con soltura el programa y llevar a cabo el diseño de objetos y espacios, tanto en el ámbito profesional como en el particular.
LA FORMA DE APRENDER
Nuestra experiencia en el ámbito de la enseñanza nos ha llevado a diseñar este tipo de manual, en el que cada una de las funciones se ejercita mediante la realización de un ejercicio práctico. Dicho ejer-cicio se halla explicado paso a paso, con el fin de no dejar ninguna duda en su proceso de ejecución. Además, lo hemos ilustrado con imágenes descriptivas de los pasos más importantes y, sobre todo, de los resultados que deberían obtenerse y con recuadros IMPORTAN-TE que ofrecen información complementaria sobre cada uno de los temas tratados en los ejercicios.
Gracias a este sistema se garantiza que una vez realizados los 100 ejercicios que componen el manual, el usuario será capaz de des-envolverse cómodamente con las herramientas básicas de jQuery y sacar el máximo partido de sus múltiples prestaciones.
LOS ARCHIVOS NECESARIOS
Todos los códigos necesarios para la el seguimiento de este ma-nual, deben ser descargados desde la zona de descargas de la página de Marcombo (www.marcombo.com) y desde la página específica de este libro.
8
A QUIÉN VA DIRIGIDO EL MANUAL
Si se inicia usted en la programación con jQuery, encontrará en estas páginas un completo recorrido por sus principales funciones. Pero si es usted un experto en el programa, le resultará también muy útil para consultar determinados aspectos más avanzados o repasar funciones específicas que podrá localizar en el índice.
Cada ejercicio está tratado de forma independiente, por lo que no es necesario que los realice por orden (aunque así se lo recomen-damos, puesto que hemos intentado agrupar aquellos ejercicios con temática común). De este modo, si necesita realizar una consulta puntual, podrá dirigirse al ejercicio en el que se trata el tema y lle-varlo a cabo sobre su propio programa de jQuery.
JQUERY
jQuery es una biblioteca creada con JavaScript que permite sim-plificar el desarrollo de animaciones e interacciones con HTML faci-litando el acceso a la estructura interna de un documento basándose en la manipulación del DOM y en el manejo de eventos asociados a los elementos contenidos en la misma. Asimismo, jQuery, por tratarse de software libre goza de una gran difusión y popularidad en la comu-nidad de desarrolladores de páginas web. Permite el uso de widgets como el acordeón, gestión de fechas, etc. que aportan una gran visto-sidad y dinamismo a las páginas web de forma sencilla. Es compatible con la inmensa mayoría de navegadores (esa es parte de su potencia) e incorpora un gran número de métodos para trabajar con AJAX.
9
Aprender jQuery con 100 ejercicios prácticos
Cómo funcionanlos libros “Aprender...”
Los recuadros Importante incluyen acciones que deben hacerse para asegurarse de que realiza el ejercicio correctamente y también contienen información que es interesante que aprenda porque le facilitarán su trabajo con el framework.
En la parte inferior de todas las páginas puede seguir el ejercicio de forma gráfica y paso a paso. Los números de los pies de foto le remiten a entradas en el cuerpo de texto.
El título de cada ejercicio expresa sin
lugar a dudas en qué consiste éste. De esta forma, si
le interesa, puede acceder directamente a la acción que desea aprender o refrescar.
El número a la derecha de la página le indica claramente en qué ejercicio se encuentra en todo momento.
Los ejercicios se han escrito
sistemáticamente paso a paso, para
que nunca se pierda durante su
realización.
10
001 ¿Qué es jQuery? .......................................................................14
002 Documentación .......................................................................16
003 “Hola mundo” .........................................................................18
004 Función jQuery .......................................................................20
005 each ..........................................................................................22
006 size & length ............................................................................24
007 data() y removeData() ..............................................................26
008 Introducción al DOM ..............................................................28
009 addClass(), removeClass() y hasClass() ....................................30
010 toggleClass() .............................................................................32
011 Copias de elementos clone() ....................................................34
012 unwrap(), wrap(), wrapAll() y wrapInner() ..............................36
013 Insertar en el interior: append() y appendTo() ........................38
014 Insertar en el interior: html() y text() ......................................40
015 after(), before(), insertAfter(), insertBefore() ............................42
016 Eliminar con detach(), remove() y empty() .............................44
017 Sustituir elementos: replaceAll() y replaceWith() ....................46
018 Atributos generales de los elementos del DOM ......................48
019 Propiedades de estilo: css(), height(), width() ..........................50
020 innerHeight(), innerWidth(), outerHeight() y outerWidth() ....52
021 offset(), position(), scrollLeft() y scrollTop() ...........................54
022 ¿Qué es un selector? .................................................................56
023 Filtros para Atributos ...............................................................58
024 Filtros genéricos .......................................................................60
025 Filtros básicos ...........................................................................62
Índice
11
026 Filtros para hijos ......................................................................64
027 Filtros para contenido .............................................................66
028 Filtros de formularios ...............................................................68
029 Filtros de jerarquía ...................................................................70
030 Filtros de visibilidad .................................................................72
031 Más filtros ...............................................................................74
032 Miscellaneous ...........................................................................76
033 Recorrido del árbol ...................................................................78
034 Introducción a la función callback ..........................................80
035 callbacks.add(), remove() y fire() .............................................82
036 callbacks.disable() y callbacks.disabled() .................................84
037 callbacks.empty() y callbacks.has() ..........................................86
038 callbacks.fire(), callbacks.fired() y callbacks.fireWith() ...........88
039 callbacks.lock() y callbacks.locked() ........................................90
040 Qué es un evento. El objeto del evento ...................................92
041 Delegación y propagación de un evento .................................94
042 Eventos de navegador error(), resize() y scroll() ......................96
043 load() ready() y unload() ..........................................................98
044 Eventos de asociación de un manejador ...............................100
045 Eventos de asociación con jQuery.proxy() ............................102
046 Eventos de formulario ............................................................104
047 Eventos de teclado .................................................................106
048 Eventos de ratón (I)................................................................108
049 Eventos de ratón (II) ..............................................................110
050 Evitar el comportamiento por defecto ..................................112
Índice
12
051 Eventos propios .....................................................................114
052 Efectos básicos hide(), show() y toggle() ................................116
053 Efectos personalizados animate() y delay()............................118
054 Efectos personalizados animate() II .......................................120
055 Efectos personalizados finish() y stop() .................................122
056 Efectos personalizados jQuery.fx.interval .............................124
057 Efectos personalizados jQuery.fx.off .....................................126
058 Efectos queue(), dequeue() y clearQueue() ............................128
059 Fading fadeIn(), fadeOut(), fadeTo() y fadeToggle() ..............130
060 Efecto Sliding slideDown(), slideUp() y slideToggle() ..........132
061 Efecto Easing .........................................................................134
062 Realizar una acción al finalizar un efecto .............................136
063 FancyBox ................................................................................138
064 Efecto rollover ........................................................................140
065 Valores de un formulario .......................................................142
066 Habilitar y deshabilitar campos .............................................144
067 Ocultar y mostrar elementos .................................................146
068 Validación de formularios .....................................................148
069 Validación avanzada de formularios .....................................150
070 Formato en mensajes de error ..............................................152
071 Tamaño, posición y dimensiones ..........................................154
072 Posición de desplazamiento ...................................................156
073 Paneles ...................................................................................158
074 Bordes redondeados ...............................................................160
075 jQuery.ajax() ..........................................................................162
Índice
13
076 Manejadores de eventos - ajaxComplete() ............................164
077 Manejadores de eventos - ajaxError() ....................................166
078 Manejadores de eventos - ajaxSend() ....................................168
079 Manejadores de eventos - ajaxStart() y ajaxStop() .................170
080 Manejadores de eventos - ajaxSuccess() ................................172
081 jQuery.param(), serialize() y serializeArray() .........................174
082 Interfaces a bajo nivel - jQuery.ajaxPrefilter() .......................176
083 Interfaces a bajo nivel - jQuery.ajaxSetup() ...........................178
084 Interfaces a bajo nivel - jQuery.ajaxTransport() ....................180
085 Métodos abreviados - jQuery.get(), jQuery.post() .................182
086 Métodos abreviados - jQuery.getJSON() ................................184
087 Métodos abreviados - jQuery.getScript() ...............................186
088 Métodos abreviados - .load() ..................................................188
089 Qué es un plug-in...................................................................190
090 Diseñar un plug-in en jQuery ................................................192
091 Usar un plug-in con opciones ...............................................194
092 Ejemplo - plug-in - acordeón .................................................196
093 jQuery.noConflict() ...............................................................198
094 Propiedades del objeto global - jQuery ..................................200
095 jQuery User Interface .............................................................202
096 jQuery_UI_Interacciones .......................................................204
097 jQuery_UI_Widgets (1) ..........................................................206
098 jQuery_UI_Widgets (2) ..........................................................208
099 callback ..................................................................................210
100 jQuery_UI_Map ......................................................................212
Índice
14
¿Qué es jQuery?jQUERY ES UN FRAMEWORK JAVASCRIPT que permite simplifi-car los comandos más comunes empleados en la interacción que se produce en una página web entre el DOM, HTML, AJAX y Ja-vaScript.
Un framework, no es más que un producto que aporta funcio-nes y código que facilita la realización de tareas habituales y que sirve como punto de partida para la fabricación de aplicaciones.
Gracias a la biblioteca que aporta, no solo se consigue simplifi-car la programación con JavaScript sino que además, se resuelve una buena parte de la problemática que representa trabajar con diferentes navegadores y las diferentes particularidades que hay que tener en cuenta para que un programa pueda funcionar en todos ellos. Esto es posible gracias a que implementa una serie de clases que nos permite programar despreocupándonos de cuál será el navegador final. De esta forma, se pueden resolver aplica-ciones complejas del lado del cliente, dotándolas de interfaces de usuario y de un buen número de efectos visuales con muy poco esfuerzo.
jQuery es Open Source (código abierto) y puede descargarse de forma gratuita pudiéndose utilizar en cualquier tipo de platafor-ma ya sea tanto personal como comercial.
El uso de jQuery no supone una carga para la transferencia de datos al cliente ya que ocupa muy poco y sólo se envía la primera vez que se utiliza una página que hace referencia a la librería. A
La declaración de intenciones de jQuery queda clara con su lema: “escribir menos para hacer más” (“write less do more”).
La primera versión de jQuery fue desarrollada en 2006 por John Resig y desde entonces hasta la fecha se han liberado diferentes versiones hasta llegar a la última versión que puede obtenerse desde la web de jQuery ubicada en la siguiente dirección:http://jquery.com/download/
IMPORTANTE
12
15
Aprender jQuery con 100 ejercicios prácticos
001partir de ese momento, la caché ya se encarga de proporcionar la biblioteca evitando descargas innecesarias.
1. En este ejercicio simplemente vamos a preparar el terreno para que pueda realizar todos los ejercicios propuestos y empiece a disfrutar de la programación con jQuery rápidamente. Va a identificar las partes de la tabla y a aprender como se seleccio-nan para poder ser editadas. Esto es muy importante ya que dependiendo de lo que seleccione tendrá unas opciones de formato u otras.
2. En primer lugar, cree una carpeta 1 para guardar los ejercicios que vayamos resolviendo y donde depositar la librería que contiene jQuery. Llámela Ejercicios. 2
3. A continuación, descargaremos la librería jquery-x.y.z.js desde la dirección http://jquery.com/download/ 3 siendo x.y.z la versión existente en el momento de su descarga. Existen 2 ver-siones: una comprimida (denominada min) y otra descompri-mida que puede ser editada si se desea analizar cómo funciona internamente jQuery. Para nuestros ejercicios utilizaremos la versión descomprimida (uncompressed). 4
4. Para descargar la librería, simplemente haremos clic con el bo-tón derecho del ratón sobre el link que indica “Download the uncompressed, development jQuery x.y.z ”. Observaremos que se despliega un menú flotante con una serie de opciones entre las que seleccionaremos “Guardar enlace como...”. 5
5. En este punto se abre el cuadro de diálogo “Guardar como” 6 y navegaremos hasta la carpeta recién creada “Ejercicios” para hacer clic a continuación sobre la opción “Guardar”.
Este libro hará referencia a la librería de jQuery como jquery.js para poder generalizar sobre las diferentes versiones que van apareciendo. Así pues, lo que hemos hecho ha sido renom-brar (o si lo prefiere copiar) la librería jquery x.y.z simplemen-te a jquery.js. También cabe destacar que hemos descarga-do la librería sobre la misma carpeta en la que colocaremos los ejercicios para simplificar la referencia a la misma.
IMPORTANTE
3 6
5
4
16
DocumentaciónEXISTEN 2 TIPOS DE LIBRERÍAS QUE pueden utilizarse en nues-tros desarrollos jQuery. Una es la versión comprimida o de pro-ducción, y otra, la versión de desarrollo: La comprimida o de pro-ducción es jquery-x.y.z.min.js y ocupa menos de 100Kb, mientras la de desarrollo es jquery-x.y.z.js y ocupa entre 200Kb y 300Kb, donde la notación x.y.z representa la versión existente en cada momento de la historia.
Descargar estas librerías nos permite trabajar en modo local de forma que, en nuestras páginas HTML bastará con hacer referen-cia a la ubicación en la que las hayamos depositado.
Sin embargo, también es posible hacer referencia a las mismas utilizando un CDN (Content Distribution Network o red de entre-ga de contenidos). Dichas referencias son:
Comprimida o de producción: http://code.jquery.com/jquery-x.y.z.min.js
Desarrollo:http://code.jquery.com/jquery-x.y.z.js
La versión comprimida reduce el espacio gracias a sacrificar el formato del código fuente y a minimizarlo al máximo. La versión
Debido a la gran comunidad de desarrolladores existentes en la actualidad, nos encon-tramos con una abundante documentación en Internet. A continuación, citamos algunas direcciones en las que puede encontrar documentación online:
http://docs.jquery.com/http://visualjquery.com/http://www.learningjquery.com/http://jqfundamentals.com/
IMPORTANTE
Tal y como hemos indicado en el ejercicio anterior, las librerías de jQuery pueden descargarse desde la dirección: http://jquery.com/download/
1 3
2
17
Aprender jQuery con 100 ejercicios prácticos
002de desarrollo nos permite “debuguear” y también muestra más claramente los métodos y las variables utilizadas en la librería.
Tal y como hemos indicado en el ejercicio anterior, las librerías de jQuery pueden descargarse desde la dirección: http://jquery.com/download/. Además de estas librerías, también es recomen-dable descargar las librerías denominadas jQuery UI que contie-nen diversas utilidades o widgets (acordeones, selectores de fe-chas, etc.) las cuales contienen mucho código ya desarrollado que podemos utilizar fácilmente en nuestros desarrollos. Esas librerías pueden descargarse en la siguiente dirección:
http://jqueryui.com/download/all/
Para el desarrollo de nuestros ejercicios basta con disponer de un editor cualquiera mediante el que podamos escribir nuestro códi-go fuente y un navegador para visualizar nuestras páginas html. Sin embargo, recomendamos el uso de algunas de las siguientes utilidades para facilitar dicha escritura:
• Free JavaScript Editor. Descárguelo desde la dirección http://free-javascript-editor.software.r-tt.com/. 1 Una vez descar-gado, al ejecutarlo verá un editor con múltiples ayudas para CCS, HTML y JavaScript. 2
• Notepad++. Puede descargarlo de la dirección http://note-pad-plus-plus.org/download/v6.1.html. 3 Posee un aspecto similar al Notepad clásico pero con muchas más opciones y preparado para manejar multitud de lenguajes. 4
• JavaScript Utility Suite. Para descargarlo, puede acceder a la dirección http://javascript-utility-suite.softonic.com/des-cargar. Se trata de una herramienta que aporta muchas ayudas para la construcción de bloques clásicos como son los loops, ramificaciones, tratamientos de variables y operaciones. 5
El editor es una herramienta imprescindible para la escritura de nuestro código fuente. Trate de familiarizarse con él tan pronto como sea posible para sacarle el mayor partido y escribir código de forma sencilla y eficiente.
IMPORTANTE
4 5
18
“Hola mundo”
18
PARA LA FABRICACIÓN Y EXPLICACIÓN de los ejercicios hemos utilizado Free JavaScript Editor como editor pero Vd. puede uti-lizar el que más le guste. De igual forma, se ha utilizado Google Chrome como navegador para ejecutar los ejercicios pero puede usar el que prefiera. Sin embargo, es posible que algunos de los pasos explicados tenga que resolverlos de una forma alternativa dependiendo del editor y/o el navegador que utilice. Por ejemplo, cada navegador tiene una forma de acceder a la consola y otras herramientas para desarrolladores.
1. Abrimos el editor e introducimos código 1 (HTML) del archi-vo de texto Lección 03, que se encuentra en la zona de descar-gas de nuestra web. 1
2. Guardamos la página con el nombre 03_Hola_Mundo.html en la carpeta Ejercicios y la abrimos en el navegador. Si es-tamos utilizando Free JavaScript Editor, podemos pulsar las teclas CTRL+F12, hacer clic sobre el botón que muestra el ico-no del navegador 2 o bien, acudir a la carpeta Ejercicios y haciendo clic con el botón derecho sobre la página 03_Hola_Mundo.html, localizar la opción Abrir con … y seleccionar Google Chrome. 3
3. Seguidamente podremos ver el resultado en el navegador. 4 Hasta aquí, tenemos una página HTML normal y corriente. A continuación, vamos a utilizar jQuery.
A continuación indicamos la forma de acceder a la consola en algunos de los navegadores más importantes:Internet Explorer: Pulsando F12 o accediendo a Herra-mientas -> Herramientas de desarrollo F12.Google Chrome: Pulsando CTRL+Mayusculas+J o acce-diendo a Menú Herramientas -> Consola JavaScript.Firefox: Pulsando CTRL+-Mayusculas+K o accediendo a Menú Herramientas-> Desarrollador Web -> Consola Web.Opera: Pulsando CTRL+Mayus-culas+I o accediendo a Menu Página -> Herramientas de de-sarrollo -> Opera DragonFly.
IMPORTANTE
1
2
3
19
Aprender jQuery con 100 ejercicios prácticos
0034. Para utilizar jQuery, incorporaremos la siguiente sentencia
dentro del bloque head:<script type = “text/javascript” src = “jquery.js”> </script>
5. A continuación, vamos a incorporar un grupo de instruccio-nes que nos permitirán averiguar cuando se ha cargado el DOM (Document Objet Model) ya que, para poder manipular el documento, hemos de asegurarnos de que ya está disponi-ble. Para ello, utilizaremos el bloque $(document).ready() el cual, se ejecutará solamente una vez y lo hará cuando efecti-vamente la página esté cargada completamente:
$(document).ready(function()
{
// Instrucciones a ejecutar
);
6. Para completar nuestro primer ejemplo, lo único que vamos a hacer es cambiar el color del texto que se halla en el elemento body para que se muestre en azul. Para ello, añadiremos en el bloque anterior la siguiente instrucción:
$(“body”).css(“color”, “ blue”);
7. Si tiene alguna duda, encontrará el código completo de nues-tro primer ejemplo bajo el título Código 2 en el documento Lección_03. Guardamos la página con el nombre 03_Hola_Mundo_jQuery.html en la carpeta Ejercicios. 5
8. Abrimos la página en el navegador y comprobamos como efectivamente, el texto “Hola Mundo” aparece en azul. 6
Observe que hemos copiado la librería jquery-x.y.z.js hacia jquery.js para simplificar y ge-neralizar los ejemplos.También es importante desta-car que la ejecución se produce cuando hemos detectado que el DOM ha sido completamen-te cargado gracias a la función $(document).ready.
IMPORTANTE
4 5
6
Hay que tener en cuenta que cuando cargamos un documento en el navegador, este posee una estructura compuesta por los tags y elementos que lo componen. Es importante esperar a que se haya cargado dicho DOM antes de manipularlo.
20
Función jQuery EL CORE DE JQUERY ESTÁ COMPUESTO por las clases, funcio-nes y métodos principales del framework. La función principal de jQuery es la denominada $() o función jQuery. Sin embargo, el core también aporta funciones que nos permiten obtener infor-mación sobre los elementos del DOM, averiguar su tamaño, iterar con ellos. También permite asociar datos a elementos y gestionar colas administrando las entradas y salidas de los mismos.
La función jQuery o función $() es la función más importante del core y es la que nos va a permitir seleccionar los elementos de una página. Su sintaxis es la siguiente: $(element).evento(parámetro);
Siendo:
• Elemento: Elemento que se desea tratar. A lo largo de este libro, veremos que podemos referirnos a los elementos por su ID, o en base al nombre de la clase o a partir de sus atributos, etc… La nomenclatura utilizada es idéntica a la que se utiliza con CSS.
• Evento: Evento a utilizar. A modo de ejemplo, podemos citar los eventos click(), dblclick(), change(), hover(), etc
• Parámetro: Información suministrada al evento para ser teni-da en cuenta en el bloque de código asociado al mismo.
A continuación mostramos algunos ejemplos de cómo pode-mos referirnos a los elementos:
EN BASE A EJEMPLO HTML REFERENCIA
Etiqueta <p>mi párrafo</p> $(“p”)
Selecciona todos los párrafos
Id <div id=”elemento1”>mi elemento 1</div>
$(“#Elemento1”)
Selecciona etiqueta con id=”elemento1”
Clase <p class=”clase1”>clase1</p> $(“.clase1”)
Selecciona los elementos con atributo clase definido como class=”clase1”
Recuerde que los identifica-dores (id) en una página han de ser únicos y por tanto, no deben repetirse.Agrupe bloques que tengan que tener un mismo aspecto o comportamiento asignándoles una clase común. De esta for-ma, será sencillo poder realizar acciones y cambios sobre los mismos con una sola instruc-ción.
IMPORTANTE
1
21
004Aprender jQuery con 100 ejercicios prácticos
Nuestro ejercicio consistirá en aplicar un estilo diferente a cada elemento refiriéndonos a los mismos con una notación diferente:
1. En primer lugar, crearemos una nueva página con el conteni-do del código 1 del archivo Lección 04 y guardamos la pági-na con el nombre 04_Funcion_jQuery_css.html en la carpeta Ejercicios.
2. A continuación mostramos la página en el navegador.
3. Mostramos la consola del navegador (en Google Chrome pul-se la combinación de teclas CTRL + MAYUS + J) y seleccione la opción Elements para ver el contenido de la página. 1
4. Observamos que para modificar el estilo de los elementos, no ha sido necesario utilizar jQuery y ha bastado simplemente con utilizar css (tag <style>).
5. Vamos a hacer lo mismo con jQuery para practicar con las referencias a elementos. Para ello, creamos una nueva página modificando un poco el contenido de la página anterior de forma que quede el código 02, también del documento Lec-ción 04.
6. Guardamos la página con el nombre 04_Funcion_jQuery_jq.html.
7. Visualizamos la página en el navegador. 2
8. En esta ocasión, podemos observar cómo la página ha sido modificada incorporando el estilo indicado por jQuery en los propios tags <p>, y <div>. 3 4
4
2
3
22
eachEL MÉTODO EACH PERMITE REALIZAR UNA ITERACIÓN sobre todos los elementos que previamente hayan sido seleccionados o bien sobre colecciones de JavaScript de tipo array u objetos.
La sintaxis es la siguiente:.each(función(índice, elemento){});
.each(función(índice){});
.each(función(){});
Donde:
Índice Indice que representa al número del elemento que se está tratando dentro de la colección seleccionada.
Elemento
Elemento tratado en cada iteración.
Los elementos a tratar pueden indicarse mediante una selección de elementos haciendo referencia a los mismos, como vimos en el ejercicio anterior, o bien, indicando los elementos de forma explicita. En este ejercicio vamos a mostrar una iteración sobre un conjunto de elementos indicados de forma explicita.
1. En primer lugar, creamos una nueva página HTML e inserta-mos el contenido del código 1 del archivo Lección 05.
21
