JavaScript

Los selectores y filtros que usa jQuery se basan en la sintaxis de CSS. Para aplicar un selector, le tenemos que pasar el selector como un parámetro entre comillas a la función jQuery, o mejor, a su alias $, del siguiente modo:

Si queremos restringir el contexto de aplicación del selector para evitar realizar la búsqueda sobre el documento DOM completo, le podemos pasar el contexto como segundo parámetro:

Si el contexto que le pasamos contiene muchos elementos, cada elemento se utiliza como punto de inicio en la búsqueda del selector.

De este modo, obtendríamos resultados diferentes:

Si únicamente queremos restringir la búsqueda a un elemento lo mejor es buscar el elemento por su id y pasarle como contexto el HTMLElement:

Los filtros trabajan de manera conjunta con los selectores para ofrecer un control todavía más preciso a la hora de seleccionar elementos del documento.

Comienzan con :, y se pueden encadenar para crear filtros complejos, como por ejemplo:

Tras seleccionar la información mediante selectores y filtros obtendremos un objeto jQuery, el cual envuelve a uno o más elementos HTML.

A partir de este objeto vamos a poder acceder al resultado, iterar sobre él o encadenar nuevas sentencias.

Las propiedades y métodos que soporta un objeto jQuery son:

Destacar que los métodos index() son los complementarios a get(), de modo que en get() se indica un índice y se obtiene un HTMLElement, y el index() a partir del elemento se obtiene el índice.

Vamos a practicar estos métodos con algunos ejemplos:

Una vez seleccionada la información mediante selectores y filtros, vamos a poder modificarla añadiendo nuevos elementos al conjunto de resultados o restringiendo los resultados a un subconjunto menor.

Para navegar descendentemente podemos emplear los siguientes métodos:

El uso de las relaciones DOM suele emplearse con el método find() (ver El objeto jQuery) para buscar un selector entre los descendientes de la selección. Además, en ambos casos no se devuelven elementos duplicados.

Por ejemplo, podemos recorrer todos los hijos de un selector de este modo:

Si en cambio estamos interesados en los elementos que están por encima de nuestro conjunto de resultados usaremos los siguientes métodos:

Algunos ejemplos con estos métodos:

Finalmente, si lo queremos es navegar entre los elementos que están en el mismo nivel, podemos utilizar los siguientes métodos:

Para crear nuevo contenido, no tenemos más que pasarle una cadena con el código HTML a la función $()

También podemos hacerlo mediante los siguientes métodos:

Vamos a practicar estos métodos con algunos ejemplos:

Como podemos observar, al asignar nuevo contenido estamos eliminando el contenido previo y sustituyéndolo por el nuevo, pero manteniendo los atributos de la etiqueta sobre la que se añade el contenido.

Una vez hemos seleccionado elementos que forman parte de un formulario, podremos obtener o modificar sus valores mediante el método val():

Por ejemplo:

Para inspeccionar o modificar el valor de los atributos de los elementos usaremos el método attr.

Vamos a estudiar algunos ejemplos, suponiendo que tenemos un enlace con una imagen del siguiente modo:

jQuery ofrece varios métodos para insertar nuevo contenido en el documento, tanto antes como después del contenido de los elementos de la página.

El contenido de los métodos puede ser contenido HTML, un objeto jQuery, un array de HTMLElement o una función que devuelva el contenido.

Supongamos que partimos del siguiente fragmento:

Si queremos que el contenido se situe antes o después de ciertos elementos (y no dentro de los seleccionados), hemos de emplear los siguiente métodos:

Por ejemplo, si queremos mover un elemento una posición hacia abajo, dentro de after podemos crear una función anónima que devuelva el contenido a mover (además nos sirve para hacer un filtro):

Finalmente, si queremos duplicar el contenido usaremos el método clone():

Por ejemplo, podemos clonar un elemento existente para modificarlo a continuación:

jQuery permite envolver contenido en la página, sustituir contenido, copiar y eliminarlo, mediante los siguientes métodos.

Si nos centramos en los métodos para envolver contenido, de manera que les añadiremos un padre, tenemos:

Una caso particular de wrapAll() es el cual en el que la selección no comparte un padre común. En este caso, el nuevo elemento se inserta com padre del primer elemento seleccionado. A continuación, jQuery mueve el resto de elementos para que sean hermanos del primero.

Vamos a practicar estos métodos con algunos ejemplos (http://jsbin.com/gavipi/1/edit?html,js,output):

Si lo que queremos es sustituir o eliminar contenido, tenemos los siguientes métodos:

Vamos a practicar estos métodos con algunos ejemplos:

Los métodos jQuery facilitan el acceso y modificación de las propiedades CSS con código Cross-Browser, además de facilitar la información de posicionamiento y tamaño de los elementos de la página.

El método css() permite obtener y asignar estilos CSS a un conjunto de elementos modificando el valor del atributo style mediante valores a propiedades CSS:

Algunos ejemplos del uso del método css():

Además, jQuery también ofrece métodos para trabajar con las clases CSS y poder añadir, borrar, detectar o intercambiar sus clases:

Y algunos ejemplos de la manipulación de clases CSS (http://jsbin.com/tujuni/3/edit?html,css,js,console,output):

Respecto al posicionamiento CSS, jQuery ofrece métodos que soportan Cross-Browser para averiguar la posición de los elementos:

Y finalmente para obtener información Cross-Browser y manipular propiedades específicas relativas al tamaño de los elementos:

Por ejemplo, supongamos que tenemos el siguiente fragmento CSS:

Si en el documento HTML tenemos capas con ids para imprimir el valor de las propiedades mediante este código:

Tendríamos un resultado similar a este (http://jsbin.com/futozu/2/edit?html,css,js,output):

jQuery ofrece el método data() para trabajar con los atributos de datos personalizados que ofrece HTML5, que empiezan por data-, es decir, data-nombre, data-tipo, etc…​

Vamos a practicar estos métodos con algunos ejemplos:

Del mismo modo que con JavaScript básico, si ponemos un selector jQuery en el encabezado que referencia a elementos DOM que no se han cargado, no va a funcionar. En cambio, si movemos el selector a una posición previa a cerrar el body irá todo correctamente. Para asegurarnos, de manera similar a window.onload, mediante jQuery usaremos el siguiente fragmento:

La ventaja de usar jQuery es que permite usar varias funciones sobre el mismo evento, ya que mediante window.onload sólo se ejecutará la última función que le hayamos asignado.

Además, mientras que con window.onload el evento espera a que haya cargado toda la página, incluidas las imágenes, con jQuery se lanzará cuando haya cargado el DOM, sin tener que esperar a descargar todas las imágenes. Esto se conoce como el evento document.ready.

Si queremos poner el mismo código pero de manera simplificada, aunque menos legible, podemos hacerlo del siguiente modo:

Es decir, cada vez que le pasemos una función a jQuery() o $(), le diremos al navegador que espere hasta que el DOM haya cargado completamente para ejecutar el código.

Una vez hemos seleccionado el conjunto de elementos al cual queremos asociarle un manejador, usaremos la función on() para indicar que evento capturar y el código del manejador, y off() para eliminar un manejador de eventos.

En versiones anteriores de jQuery se usaban los métodos bind(), unbind(), live(), die(), los cuales han sido marcados como métodos deprecated y no veremos en este módulo.

Así pues, mediante on(eventos [,selector] [,datos] ,manejador(objetoEvento)) capturaremos los eventos. Más información en http://api.jquery.com/on . En su versión más simple la usaremos del siguiente modo:

Por ejemplo, si queremos capturar cuando se hace click sobre un párrafo:

Si queremos capturar más de un evento, hemos de separar el nombre de los eventos con espacio:

Cuando aplicamos el evento on, en vez de seleccionar todos los elementos de un tipo que hay en DOM, es mejor elegir el padre del que estamos interesado y luego filtrar dentro del método. Por ejemplo, en vez de:

es más eficiente hacer

jQuery ofrece un conjunto de métodos auxiliares para simplificar su uso con los eventos más utilizados. Si los ordenamos por su categoría tenemos:

Es decir, las dos acciones siguientes son semejantes:

Un caso particular que conviene estudiar es el método hover(), el cual acepta dos manejadores, los cuales se ejecutarán cuando el ratón entre y salga del elemento respectivamente:

También podemos usar los siguientes métodos para realizar tareas específicas:

Por ejemplo, supongamos que tenemos varios cuadrados y queremos que cambien su color una sola vez:

Y el código para cambiar el color una sola vez al hacer click:

Si hacemos click más de una ocasión sobre un mismo cuadrado podemos comprobar como no sale por consola.

Para poder trabajar con manejadores de eventos Cross-Browser, es importante que exista un único objeto que permite acceder a las propiedades más importantes:

Este objeto se obtiene como parámetro de la función manejadora del evento. Para mostrar estas propiedades en acción, vamos a basarnos en el siguiente código donde podemos ver tres capas:

Y el código para mostrar la información:

Al pulsar encima de las capas, se mostrará la información de coordenadas relativas, tipo y target del evento:

Sabemos que una vez seleccionado un elemento, mediante el método on podemos capturar el evento y controlar el código del manejador mediante una función anónima.

Ya hemos visto que si queremos lanzar un evento de manera programativa, sin que lo haga el usuario, podemos usar el método trigger(evento,datos):

De este modo, podemos crear eventos personalizados para posteriormente capturarlos:

Veamos un ejemplo práctico. Supongamos que accedemos a un servicio REST que devuelve JSON como el de OMDB visto en la sesión anterior:

Tal como vimos, se trata de una llamada asíncrona de modo que cuando mostramos los datos recibidos no obtenemos nada porque realmente la llamada AJAX todavía no ha finalizado.

Para poder controlar cuando se han cargado los datos podemos lanzar un evento personalizado de modo que al capturarlo estaremos seguro que la petición ha finalizado.

Ejemplo modelo publicador/subscriptor - http://jsbin.com/pisihe/edit?html,js,console,output

A este mecanismo de comunicación se le conoce como Publish/Subscribe (y que implementa el patrón Observer), donde podemos tener varios publicadores que envían información mediante el trigger del evento personalizado y múltiples subscriptores con los capturadores del evento.

Si queremos especificar qué va a ser this al pasarle el control a una función, podemos usar un proxy mediante:

Supongamos que rescribimos el ejemplo anterior mediante un módulo, del siguiente modo:

Si volvemos al ejemplo anterior, y en vez de obtener mediante this el botón queremos que tome el del manejadores haremos:

Más información en http://api.jquery.com/jQuery.proxy/

A partir del siguiente documento con enlaces, añadir el código jQuery necesario para que al lado de cada enlace muestre mediante una imagen el formato del archivo (pdf, html) o el tipo de enlace (sólo para email).

Tras ejecutar la página, el resultado debe ser similar a la siguiente imagen:

Todo el código estará incluido en el archivo ej61.js

A partir del documento HTML de los apuntes, haciendo uso de jQuery realizar las siguientes tareas:

La apariencia será similar a la siguiente:

Todo el código estará incluido en el archivo ej62.js

Supongamos que tenemos una tabla con información en filas similar a la siguiente:

Las tareas a realizar son:

Todo el código estará incluido en el archivo ej63.js