Trucos y ejemplos imprescindibles jQuery

Hemos recorrido internet y hemos recopilado trucos y ejemplos prácticos para que domines jQuery. Este artículo no trata de ser un manual, ni tan siquiera una guía para principiantes, sino una colección de consejos, buenas prácticas y trucos rápidos para trabajar con este framework Javascript de una forma productiva!

Evento Ready forma corta

Si queremos ejecutar código cuando se ha cargado el contenido del objeto DOM, podemos usar el evento ready:

$(document).ready(function () {
  // ...
})

¿Pero para qué escribir más cuando se puede escribir menos?

$(function () {
  // ...
})

Por cierto, ¿sabías que se pueden registrar varios eventos document ready en la misma página?

¿Está este objeto vacío?

Una manera elemental de comprobar si un objeto jQuery contiene o no elementos es utilizando la función length:

$(function () {
  if ($('.activo').length) {
    // solo pasará por aquí si hay algun elemento con la clase .activo en el documento
  }
})

Recorrer colecciones de objetos

Hacer bucles para recorrer arrays de objetos nunca fue más fácil:

$(function () {
  $.each(
    [
      { titulo: 'agua' },
      { titulo: 'viento' },
      { titulo: 'fuego' },
      { titulo: 'hielo' },
    ],
    function (indice, objeto) {
      console.log(objeto.titulo)
    }
  )
})

Encadenar funciones

Una de las funcionalidades más útiles de jQuery es que permite encadenar funciones, de forma que la salida de una función pueda ser la entrada de otra:

$(function () {
  $.map(
    [
      { titulo: 'agua' },
      { titulo: 'viento' },
      { titulo: 'fuego' },
      { titulo: 'hielo' },
    ],
    function (objeto) {
      return objeto.titulo
    }
  )
    .sort()
    .reverse()
})

Este ejemplo manipula un array para devolver otro array que solo contiene títulos [‘agua’, ‘viento’, ‘fuego’, ‘hielo’], luego lo ordena alfabéticamente, y finalmente lo ordena en orden inverso.

Encadenar llamadas ajax de forma síncrona

Ajax significa asynchronous javascript and XML, y sirve para hacer llamadas remotas a un servidor. Las llamadas no son síncronas, es decir se hace la llamada y la ejecución del programa sigue para no bloquear al usuario. Sin embargo, hay ocasiones en que necesitamos un dato para poder hacer otra llamada. Es por eso que podemos encadenar peticiones una detrás de otra, por ejemplo:

$(function () {
  $.when($.get('http://urldelapeticion'))
    .then(function (respuesta) {
      console.log(respuesta.responseText)
      return $.get('http://otraurl')
    })
    .then(function (otraRespuesta) {
      console.log(otraRespuesta.responseText)
    })
    .fail()
})

Obtener el elemento padre más cercano hacia arriba

Una buena manera de navegar sobre el árbol de objetos del documento (DOM), es utilizar el método closest()

$(function () {
  $('input').closest('form')
})

Devolverá el objeto más cercano hacia arriba que sea de tipo form

Acceder al contenido de un iFrame desde la ventana padre

Aunque usar iframes no suele ser la mejor solución, cuando usemos una siempre nos vendrá saber cómo acceder a sus contenidos desde la ventana padre, es decir, la ventana que contiene el iframe. Para ello usaremos el método contents()

$(function () {
  var iframe = $('iframe#miID').contents()
  // ahora ya podemos usar el método find para obtener elementos del iframe:

  iframe.find('.activo').hide()
  // esconde todos los elementos con la clase .activo de dentro del iframe
})

Acceder a los atributos data de HTML5

En las etiquetas de HTML5 se pueden usar atributos personalizados para contener información varia para luego usarla en Javascript, por ejemplo:

<div data-id="15" data-paises="['España', 'Argentina', 'México', 'Chile']"></div>

Para acceder al tag de paises:

$("div").data("paises"); // Devolverá el array de países ['España', 'Argentina', 'México', 'Chile']

Codificar y decodificar entidades HTML

Para codificar

`$("").text('<div class="activo""></div>').html()`

Devolverá el text: <div class="activo""></div>, en cambio si queremos volver a decodificarlo podemos usar:

$("").html('cadena codificada').text()

Referencias y Créditos

Para escribir este artículo nos hemos basado en páginas como http://stackoverflow.com/questions/182630/jquery-tips-and-tricks (en inglés) y también en la propia experiencia.