PDF de programación - Manual de JQuery

MANUAL DE JQUERY



















































Manual de JQuery

INDICE

Introducción a jQuery ....................................................................................... 7

Qué es jQuery, para qué sirve y qué ventajas tiene el utilizar este framework Javascript. ........................................... 8

Qué es jQuery ...................................................................................................................................................... 8

Ventajas de jQuery con respecto a otras alternativas ............................................................................................ 9

JQuery, es para mi? ............................................................................................................................................. 9

Demo 1 de jQuery .............................................................................................................................................. 10

Demo 2 de jQuery .............................................................................................................................................. 10

Una descripción de la puesta en marcha de tu primer script jQuery, en tu propia página web, paso a paso. ............... 11

1.- Descarga la última versión del framework ..................................................................................................... 11

2.- Crea una página HTML simple....................................................................................................................... 12

3.- Ejecutar código cuando la página ha sido cargada ......................................................................................... 12

4.- Insertar un manejador de evento a la etiqueta A (enlace) que hay en la página ............................................... 13

5.- Guarda el archivo html y ábrelo en un navegador .......................................................................................... 14

6.- Extra: Bloquear el comportamiento normal de un enlace ............................................................................... 14

Para complicarlo sólo un poco más, vamos a añadir y quitar clases del elemento con respuesta a acciones del usuario,
para aprender también nuevos eventos de usuario. ................................................................................................ 15

1.- Crear la página con una capa, un enlace y la definición de una clase CSS ........................................................ 15

2.- Recordar: añadir siempre los scripts jQuery cuando el documento está "ready" ............................................... 16

3.- Añadir los eventos mouseover y mouseout para añadir y quitar una clase CSS ................................................ 16

4.- Código completo del ejemplo jQuery.............................................................................................................. 16

Ocultar y mostrar una capa con jQuery .............................................................................................................. 17

Mostrar u ocultar elementos como respuesta a un evento ................................................................................... 18

Ejemplo de efectos e interacción en jQuery ......................................................................................................... 19

Con callback de jQuery podemos hacer una secuencia de llamadas a funciones o una pila de funciones que se
ejecutarán una detrás de otra. ............................................................................................................................... 21

Cómo realizar una pila de ejecución de funciones ................................................................................................ 22

Ejemplo real de callback con jQuery ................................................................................................................... 22

Es muy fácil desarrollar Ajax en jQuery. En este artículo veremos el ejemplo más sencillo de Ajax con el framework
Javascript jQuery. .................................................................................................................................................. 23

Traer un contenido con Ajax al pulsar un enlace .................................................................................................. 23

Pasar parámetros y ejecutar acciones después de la llamada a Ajax .................................................................... 25

Vemos más posibilidades de Ajax en jQuery, modificando un ejemplo anterior, para crear un mensaje de carga
mientras que el usuario espera la respuesta Ajax del servidor. ................................................................................. 26

Por qué un mensaje de carga al hacer Ajax ......................................................................................................... 26

2

Manual de JQuery

Preparando el código HTML ............................................................................................................................... 26

Llamada a Ajax con jQuery y el mensaje de carga ............................................................................................... 26

Código de la página PHP que se invoca por Ajax ................................................................................................. 28

Core de jQuery ...............................................................................................29

El core de jQuery lo forman las funciones más recurridas y que forman la base sobre la que se asienta el cualquier cosa
en este framework Javascript. ................................................................................................................................ 29

Core de jQuery ................................................................................................................................................... 29

La función dólar $()................................................................................................................................................ 30

Función jQuery enviando un selector y un contexto ............................................................................................. 30

Usos interesantes de $() ......................................................................................................................................... 32

Función jQuery pasando un HTML...................................................................................................................... 32

Función jQuery pasando elementos .................................................................................................................... 32

Función jQuery pasando una función .................................................................................................................. 33

El método each del core de jQuery, para ejecutar una función en cada uno de los elementos de un grupo. ................ 34

Cómo funciona each .......................................................................................................................................... 34

Retornando valores en la función que enviamos a each ....................................................................................... 36

Dos formas de acceder al número de elementos que hay en un objeto jQuery, a través del método size() y la propiedad
length. .................................................................................................................................................................. 36

Método size() del Core de jQuery ........................................................................................................................ 37

Propiedad length del objeto jQuery .................................................................................................................... 37

El método data() del core de jQuery sirve para almacenar información en los elementos de la página, en pares nombre
de variable y valor. Veremos también el método removeData() para eliminar datos almacenados............................ 38

Método data() ................................................................................................................................................... 38

Método removeData() ....................................................................................................................................... 39

Ejemplo completo de los métodos data() y removeData() del Core de jQuery ....................................................... 39

Ahora veremos algunos puntos interesantes y nuevos ejemplos sobre el funcionamiento de los métodos data() y
removeData() de jQuery. ....................................................................................................................................... 41

Datos de tipo objeto asignados por referencia con data() .................................................................................... 43

Selectores de jQuery.......................................................................................46

Los selectores sirven para seleccionar elementos de la página a partir de una cadena de texto que le pasamos a la
función jQuery. ...................................................................................................................................................... 46

Selectores básicos en jQuery .............................................................................................................................. 46

Conclusión sobre los selectores........................................................................................................................... 47

Ejemplo de página que nos permitirá hacer prácticas con los se