¿Cómo ejecutas código jQuery en tus desarrollos?

Cuando comencé a utilizar jQuery, supe que todo el código que iba a ejecutar una vez que se cargue el DOM, debía ponerlo dentro de:

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

Con la práctica, me olvidé del código anterior y empecé a usar su equivalente, más sencillo de recordar y más corto para escribir:

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

Y de repente, revisando código de algún gurú, me topé con esto:

(function() {
  //...
}());

¿Mi reacción? ¡Confusión total!

Antes que nada, ¿qué diferencias hay entre ambas?

  • El “$” al inicio de la primera.
  • Los parentesís “()” al final de la segunda.

El primer detalle es comprensible, pues sabemos (o deberíamos saber) que el símbolo monetario seguido de paréntesis “$()” es equivalente a “jQuery()“, que es lo que habitualmente usamos para seleccionar elementos del DOM.

El segundo detalle no era muy claro para mí, así que luego de una divertida investigación, descubrí que el objetivo de los paréntesis “()” al final, inmediatamente después de la definición de la función, es la ejecución de la misma.

¡Ah! Pero hay un detalle, no es suficiente sólo incluir esos paréntesis al final, si no que son necesarios otros paréntesis, los que engloban a la propia función, para indicar que no se trata de una declaración, si no de una expresión.

A este tipo de funciones ejecutables al momento, se les conoce como Immediately-Invoked Function Expression (IIFE).

Por último, si vamos a usar una IIFE para ejecutar nuestro código jQuery (o JavaScript directo), no debemos olvidar colocarla al final de nuestro HTML, justo antes de <body>.

¿Beneficios? No necesitamos jQuery para ejecutar nuestro código JS, o bien, evitamos una llamada al framework.

Referencias

Si desean profundizar más sobre el tema, les dejo los siguientes enlaces:

jQuery 1.7 y los nuevos .on() y .off() para eventos

jQuery LogoLos chicos de jQuery liberaron hace un par de días jQuery 1.7, introduciendo una nueva forma de trabajar con eventos.

Para descargar jQuery 1.7, usen los siguientes enlaces directos:

Ya que los enlaces previos pertenecen al jQuery CDN, pueden usarlos directamente en sus proyectos. Obviamente, el recomendado en la edición minificada:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>

Novedades en jQuery 1.7

La principal novedad de esta versión son los nuevos APIs .on() y .off() para eventos, cuya finalidad es unificar la funcionalidad de .delegate() y .bind(). La sintaxis de ambos es:

$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [ events ] [, selector] [, handler] );

Cuando se establece un selector, .on() es similar a .delegate() ya que asigna un manejador de eventos delegado filtrado por dicho selector. Cuando el selector se omite, entonces su comportamiento es como .bind().

No te preocupes si en tus proyectos usas los métodos existentes para asignar eventos, todos ellos aún son válidos en jQuery 1.7

Algunos ejemplos:

$('a').bind('click', myHandler);
$('a').on('click', myHandler);
 
$('form').bind('submit', { val: 42 }, fn);
$('form').on('submit', { val: 42 }, fn);
 
$(window).unbind('scroll.myPlugin');
$(window).off('scroll.myPlugin');
 
$('.comment').delegate('a.add', 'click', addNew);
$('.comment').on('click', 'a.add', addNew);
 
$('.dialog').undelegate('a', 'click.myDlg');
$('.dialog').off('click.myDlg', 'a');
 
$('a').live('click', fn);
$(document).on('click', 'a', fn);
 
$('a').die('click');
$(document).off('click', 'a');

Otras novedades que valen la pena mencionar:

  • Desempeño mejorado en la delegación de eventos.
  • Mejor soporte para HTML5 en IE 6/7/8
  • Mejoras en las animaciones.
  • Soporte para el Asynchronous Module Definition (AMD).
  • El objeto jQuery.Deferred ha sido extendido con un nuevos manejadores de progreso y métodos de notificación.
  • ¡Y mucho más! Te invito a consultar la documentación sobre jQuery 1.7.

Fuente: jQuery Blog.

Share

jQuery 1.6.4

jQuery LogoLos chicos de jQuery ayer liberaron jQuery 1.6.4, la cual es una actualización menor que corrige varios bugs de su versión previa liberada hace un par de semanas, por lo que se recomienda su actualización.

Para descargar jQuery 1.6.4, usen los siguientes enlaces directos:

Ya que los enlaces previos pertenecen al jQuery CDN, pueden usarlos directamente en sus proyectos. Obviamente, el recomendado en la edición minificada:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

Fuente: jQuery Blog.

Share

jQuery 1.6.3 cierra agujero de seguridad XSS

jQuery LogoLos chicos de jQuery ayer liberaron jQuery 1.6.3, la cual es una actualización menor que corrige varios bugs y cierra un agujero de seguridad.

Lo más destacado de esta versión:

  1. Corrige un vector de ataque XSS, el cual muchos sitios están usando para seleccionar elementos usando location.hash permitiendo la inyección de scripts en la página. Ahora cualquier cadena pasada a $() no puede contener etiquetas HTML (obviamente tampoco scripts) si tiene el caracter “#” precediéndola.

  2. Se ha eliminado temporalmente (regresará en alguna futura versión de jQuery) el soporte para el API requestAnimationFrame, ya que todas las animaciones iniciadas en pestañas no visibles sólo eran ejecutadas cuando dichas pestañas obtenían el enfoque, ocasionando que la velocidad de animación fuera exagerada.

  3. Se ha mejorado el manejo de los nombres de atributos de datos en HTML5. El API $().data() no sólo maneja los datos para uso interno de jQuery y sus plugins, ahora también lee los valores iniciales de los atributos de data- en HTML5.

Para descargar jQuery 1.6.3, usen los siguientes enlaces directos:

Ya que los enlaces previos pertenecen al jQuery CDN, pueden usarlos directamente en sus proyectos. Obviamente, el recomendado en la edición minificada:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

Fuente: jQuery Blog.

Share

Javascript Frameworks y jQuery [Infografía]

Si desarrollas o diseñas sitios web, principalmente del lado del cliente (front-end), hoy en día es indispensable que conozcas y uses un framework de JavaScript para ayudarte en tus proyectos. ¿Sabes cuál es el más popular, o el más utilizado en aplicaciones web?

La siguiente infografía pretende responder dichas interrogantes, tomando a jQuery como punto de partida. Se incluye también a Mootools, Prototype, YUI, Dojo, ExtJS y otros más.

Javascript Frameworks y jQuery [Infografía]

Me llama la antención que la versión más utilizada de jQuery sea aún la 1.3.2.

¿Cuál de los frameworks mencionados utilizas y por qué?

Via WebAppers.

Share

jQuery 1.6.1 corrige problema de retrocompatibilidad

jQuery Logo¡Los chicos de jQuery han escuchado los gritos desesperados de la comunidad de desarrolladores! Acaban de liberar jQuery 1.6.1, una actualización urgente que corrige problemas de retrocompatibilidad que estaba ocasionando el rediseño de los métodos .attr() y .prop().

Los invito a leer el excelente análisis de Carlos Benítez para comprender a fondo las implicaciones de este cambio.

Para descargar jQuery 1.6.1, usen los siguientes enlaces directos:

Ya que los enlaces previos pertenecen al jQuery CDN, pueden usarlos directamente en sus proyectos. Obviamente, el recomendado en la edición minificada:

http://code.jquery.com/jquery-1.6.1.min.js

También podemos usar los CDN de Google y Microsoft:

Microsoft CDN:

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js

Google CDN:

https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

Este último CDN aún no se encuentra disponible, pero debe estarlo en breve.

Fuente: jQuery Blog.

Share

jQuery 1.6: Novedades, Descargas y CDNs

jQuery LogoLos chicos de jQuery acaban de liberar su nueva versión estable: jQuery 1.6.

Para descargar jQuery 1.6, usen los siguientes enlaces directos:

Ya que los enlaces previos pertenecen al jQuery CDN, pueden usarlos directamente en sus proyectos. Obviamente, el recomendado en la edición minificada:

http://code.jquery.com/jquery-1.6.min.js

También podemos usar los CDN de Google y Microsoft:

Microsoft CDN:

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.min.js

Google CDN:

https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js

Este último CDN aún no se encuentra disponible, pero debe estarlo en breve.

¿Qué novedades hay en jQuery 1.6?

Aquí las principales:

  • Hay cambios en las propiedades data- al momento de convertirse en objetos JSON. Por ejemplo, en jQuery 1.5.2, data-max-value="15" crearía { max-value: 15 }, pero en jQuery 1.6 ahora es { maxValue: 15 }. Esto es con la finalidad de apegarse al estándar HTML5.
  • Ahora jQuery 1.6 hace una separación entre atributos (valores estáticos) y propiedades (valores dinámicos) en el DOM, a través del nuevo método .prop(). Por ejemplo, en <input type="text" value="abc"> el valor devuelto por .attr("value") siempre será “abc“, pero si el usuario escribe adicionalmente “def” en la caja de texto, el valor devuelto por .prop("value") será “abcdef“.
  • Mejoras y adecuaciones para .attr() y .val().
  • Ahora las animaciones y efectos son más fluídos. Incluso, ahora es posible sincronizar múltiples animaciones en paralelo.
  • El resto de las novedades, pueden encontrarlas en la documentación completa de jQuery 1.6

Fuente: jQuery Blog.

Share

jQuery 1.5.2: Novedades, Descargas y CDNs

jQuery LogoLos chicos de jQuery el día de ayer liberaron su nueva versión estable: jQuery 1.5.2. Se trata de una actualización menor de jQuery 1.5.1, e incluye corrección de diversos bugs.

Para descargar jQuery 1.5.2, usen los siguientes enlaces directos:

Ya que los enlaces previos pertenecen al jQuery CDN, pueden usarlos directamente en sus proyectos. Obviamente, el recomendado en la edición minificada:

http://code.jquery.com/jquery-1.5.2.min.js

También podemos usar los CDN de Google y Microsoft:

Microsoft CDN:

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js

Google CDN:

https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js

Como recordatorio, con el CDN de Google podemos usar un genial truco para siempre hacer referencia a la última versión dispoble de jQuery.

Share

jQuery 1.5.1: Novedades, Descargas y CDNs

jQuery LogoLos chicos de jQuery el día de ayer liberaron su nueva versión estable: jQuery 1.5.1. Se trata de una actualización menor de jQuery 1.5, e incluye corrección de diversos bugs.

Para descargar jQuery 1.5.1, usen los siguientes enlaces directos:

Ya que los enlaces previos pertenecen al jQuery CDN, pueden usarlos directamente en sus proyectos. Obviamente, el recomendado en la edición minificada:

http://code.jquery.com/jquery-1.5.1.min.js

También podemos usar los CDN de Google y Microsoft:

Microsoft CDN:

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js

Google CDN:

https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js

¿Qué novedades hay en jQuery 1.5.1?

Al tratarse de una actualización menor, no hay novedades importantes que reportar; sin embargo, es justo mencionar:

  • jQuery ahora soporta a Internet Explorer 9 como un navegador de primer nivel. Todos los bugs han sido corregidos y/o enviados al equipo de IE para su resolución en la versión definitiva del navegador.
  • Se agregaron tres opciones a jQuery.ajax(): isLocal, mimeType y xhrFields.
  • El resto de las novedades, pueden encontrarlas en la documentación completa de jQuery 1.5.1

Share

jQuery 1.5 Cheat Sheet

jQuery 1.5 Cheat Sheet

Hace unos días, el buen Antonio Lupetti de Woork, actualizó su ya famosa Cheat Sheet (Guía Rápida, Chuleta, o cómo deseen llamarle) de jQuery para adaptarla al recién liberado jQuery 1.5. La actualización incluye todas las referencias necesarias de la renovada API de jQuery.

Descarga directa de jQuery 1.5 Cheat Sheet en formato PDF❱ o ábrela en Scribd.

Referencia obligada para todo desarrollador web, principalmente para los front-end developers.

Share