jQuery

En addyosmani.com encontré 31 snippets para jQuery de los cuales algunos me parecen especialmente útiles:

Método .live():
Según comentan en el blog (y tiene razón) es mas útil que usar directamente el método .click(). ¿por que?, fácil, porque el método .live() es capaz de mantenerse a la escucha de cualquier elemento que machee con el selector aun si el elemento ha sido creado después de haberlos enlazado.
Un ejemplo:

$('.clickme').click(function() {
	alert("Hola, me hiciste click");
});

El código anterior va a funcionar sobre todos los elementos que actualmente existan en el DOM, pero nos podemos ir olvidando que lo haga sobre cualquier contenido que se cree después de ese momento.

$('.clickme').live('click', function() {
        alert(“¿ves? Me sigo ejecutando sobre cualquier elemento”);
});

Aquí la diferencia: Si yo después de haber ejecutado el anterior código, hiciera:

$(“body”).append(“<a href=”#” class=”clickme” >Soy nuevo</a>);

El nuevo elemento SI ejecutaría el código.

Agrupado de funciones:
Otra de las gracias que tiene jQuery es que permite apilar funciones:

jQuery('#foo').bind({
	click: function() {
		alert(“Me haces click”);
	},
	mouseover: function() {
		alert(“Me pasas por encima”);
	},
	mouseout: function() {
		alert(“No estás mas encima de mi”);
	}
});

Se explica solo, pero por si quedan dudas lo que hicimos acá fue ahorrar código usando un único selector. Al elemento seleccionado le hemos pegado tres eventos junto a las funciones correspondientes. Geeeenial.

Método .sleep()
Siempre me hiso falta una manera de retardar algunas acciones, y de momento había estado usando query.timer.js (un plugin). Pero los tiempos cambian, y desde la versión 1,4 de jQuery ya viene esta característica incorporada.
Ejemplo:

$('#caja').slideUp(300).delay(1000).slideDown(400);

Traducción: #caja va a plegarse en 300 mili segundos, no va a hacer mas que esperar un segundo (1000 mili segundos) y va a desplegarse a lo largo de 400 mili segundos

Método .data()
Si necesitas almacenar información (temporalmente) podes usar variables.. Pero si lo que querés es “pegar” información a elementos del DOM lo que necesitas es esto.

Ejemplo:

$("div").data("nombre", 'Marcelo');
alert($("div").data("nombre") === 'Marcelo'); //imprime true

¿Para que sirve?. Está mas que claro. Si tuvieras una tabla, y a los <tr /> les quisieras establecer un id asociado…. ¿vas viendo la idea?

Shortcut para el metodología .find()

Si tenes que ir seleccionado elementos que están dentro de un elemento por lo general usamos el método .find(). Bueno resulta que podemos usar el método de una forma mas abreviada y clara:

$(“a”).find(“b”);
//podemos expresarlo como:
$(“a”, “b”);

Seleccionar elementos cuyo id contiene caracteres especiales:
si tratamos seleccionar un div que tenga en su id un par de corchetes como en el siguiente caso:

$("$item_[200]");

No va a funcionar. Pero podemos seleccionar este elemento de la siguiente forma:

$("$item_\\[200\\]");