Y bien, ya que la usamos seguido, o pensamos aprenderla, no nos queda de más conocer unos cuantos tips que nos sirvan para que funcione de un modo más adecuado.

Andando por ahí me encontré un post de Giulio Bai que aborda este tema en específico y nos dá unas buenas sugerencias al respecto:

1. $(document).ready (); Siempre

Todo lo que contenga será ejecutado tan pronto el DOM sea cargado y antes de que los contenidos sean llenados. Te permite agregar eventos a cualquier elemento en la página sin interferir directamente con el markup; todos esos metiches de onload, onclick y onLoQueSea ya no son necesarios, solo escribílos encapsulados ahí.

Un pequeño ejemplo podría ser:

$(document).ready(function()
 {
    $(".dummy").click(function()
    {
        $(this).css('color', '#000000');
    });
});

2. Usá $(window).load ()

Aunque la vasta mayoría de ejemplos vienen usando el método descrito anteriormente, a veces es mejor evitar poner todo ahí.

$(document).ready () es increíblemente útil, pero ocurre durante el rendering de la página, cuando los objetos aún se están descargando. Por eso las funcionalidades supérfluas como scrollings, arrastrar y soltar, podrían ponerse dentro de una función $(window).load () ya que esta ejecuta después de que todos los hayan sido descargados y evita que algo se rompa mientras carga la página.

La sintáxis es casi la misma que la de $(document).ready ():

$(window).load (function () {
// métodos de scrolling
});

3. Carga sólo lo que realmente necesitas

Todos han sido tentados a escribir JavaScript que va a ser usado en una sola página de un sitio y luego cargarlo por todas partes, aunque no se use. jQuery se toma el tiempo de revisar todos y cada uno de los elementos que se le dan, y eso pone las cosas un poco lentas.

Hay dos formas que se sugieren para evitar este problema. El más sencillo sería simplemente agregar una clase en el body del html que sea identificador para correr ahí solamente el código necesario.

$(document).ready(function()
 {
    if ('body').hasClass('home')
    {
        // home page code
        }
    else if ('body').hasClass('blog')
    {
        // blog code
        }
    // Y así sucesivamente
});

El otro método, un poco más enredado, sería construir una biblioteca para llamar el código que se necesite desde cada página:

var jslib =
{
    home:
    {
        init: function() {
            // home page code
            }
    },

    blog:
    {
        init: function() {
            // blog code
            }
    }

    // Y así sucesivamente
}

4. Aprende qué es el método ‘Data’ y usálo

Esto es algo muy común, la gente no piensa en ello y siempre escriben cosas como:

$('.selector').attr ('alt', 'naranja');

para guardar y asociar datos misceláneos en el DOM. Esto, es técnicamente incorrecto, además de que es fácil confundirse, sobre todo para las personas que entren al proyecto después.

jQuery ya tiene un método que sirve para guardar datos en el DOM llamado ‘data’. El ejemplo de arriba vendría siendo algo como esto:

$('.selector').data ('miColor', 'azul');
// que puede ser pedido con
$('.selector').data ('miColor');

Este método te permite asociar y guardar datos en cualquier elemento de la página y tener un nombre de referencia.

5. Usá los selectores personalizados

Estar familiarizado con los selectores de CSS es util cuando se trata de jQuery. Pero conocer los selectores que trae la biblioteca es de verdad un empujón increíble. Date una vuelta por http://docs.jquery.com/Selectors para conocer más de ellos.

Por ejemplo, podrías usar:

$("div:contains('hola')").css ('background-color', '#cc0000');

para pintar de rojo todos los div que contengan la palabra “hola” ó

$('input:password')

para obtener todos los campos que sean para password.

6. Indicadores con clases

Podés usar indicadores ó flags para monitorear lo que el usuario está haciendo o bien revisar si algo en particular se efectuó o no. El método addClass es bastante útil en este caso ya que provee una forma fácil de agregar una nueva clase css a un elemento. Así que podés chequear la existencia de la clase con la función hasClass.

Un uso muy común de los indicadores se da cuando a aplicación tiene uno o más modos de trabajo; al entrar en el segundo modo, el indicador se fija a un elemento predeterminado y, cuando se necesite, el método hasClass es usado para revisar el modo de trabajo actual. Sencillo no?

function editModeOn ()
{
// Inicializa el modo de edición y fija un indicador
$('#flags').addClass ("editModeOn");
// hacer otras cosas
}

function saveData ()
{
// guarda los datos pero primero sale del modo de edición (si está ahí)
if ($('#flags').hasClass ('editModeOn')) {
exitEditMode ();
$('#flags').removeClass ('editModeOn');
}

save ();
}

7. No llamés el mismo selector cientos de veces

De verdad, no lo hagas. Perfectamente en lugar de hacer algo como:

$('p.hola').css ('color', '#000000');
$('p.hola').text ('hoola');
$('p.hola').addClass ('parrafo');
$('p.hola').fadeTo (1000, 1);

Podés hacer algo como:

var $p = $('p.hola');
$p.css ('color', '#000000');
$p.text ('hola');
$p.addClass ('parrafo');
$p.fadeTo (1000, 1);

Eso va a mantener la información del selector lista para ser reutilizada.

8. Encadenando (Casi) todo

El encadenado, o chaining de jQuery es muy útil.
El código anterior podría ser reescrito como:

$('p.hola').css ('color', '#000000').text ('hola').addClass ('parrafo').fadeTo (1000, 1);

Eso sí, sin exagerar, es sabido que este patrón puede ser un poco lento.

9. La utilidad toggleClass

Podés encender y apagar la clase de un elemento para variar su comportamiento sin mucho esfuerzo. Digamos que tenés una clase .hidden que esconde los elementos que la usen. Fácilmente podrías mostrar los elementos de nuevo usando:

$('p.hidden').toggleClass ();

Otro punto de toggleClass es que, con el nuevo release de jQuery 1.3.3, el método .toggleClass() va a tener nuevas formas de operar. Va a ser capaz de cambiar multiples clases, además de que podrá quitar y poner todas las clases.

Estás son las formas en que vas a poder usar toggleClass:

// Con un elemento dado

	// Cambiar todas las Clases
	$('div').toggleClass(); //
	<div>
	$('div').toggleClass(); //
	<div class="a b c">
	$('div').toggleClass( false ); //
	<div>
	$('div').toggleClass( true ); //
	<div class="a b c">

	// Cambiar múltiples clases
	$('div').toggleClass( "a b" ); //
	<div class="c">
	$('div').toggleClass( "a c" ); //
	<div class="a">
	$('div').toggleClass( "a b c", false ); //
	<div>
	$('div').toggleClass( "a b c", true ); //</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

10. Guardá los resultados de jQuery

Cuando se trata de funciones, podrías querer tener algunos resultados disponibles en otros lugares. Acá hay dos posibilidades.

Una posible solución sería guardar los resultados dentro de objetos dentro de una variable global, así se pueden usar después:

// usamos el objeto Window
	window.$resultados = {
	uno : 0,
	dos : 0
	};

	// esta es la función que podria corre más de una vez
	function getResults (first, second)
	{
	$resultados.uno = first;
	$resultados.dos = second;
	}

	// corre la funcion
	getResults ($('li.azul'), $('a.rojo));
	$resultados.uno.hasClass ('azul'); // true
	$resultados.dos.hasClass ('azul'); // false

	// corre de nuevo
	getResults ($('li.rojo'), $('a.azul));
	$resultados.uno.hasClass ('azul'); // false
	$resultados.dos.hasClass ('azul'); // true

La otra, y a mi parecer la mejor, como se recomienda en el punto 4 es usar el método Data en lugar de crear una variable global.

$.data(window, "resultados", { uno: false, dos: true });

//Para accesar los valores:

$.data(window, "resultados").uno; // false
$.data(window, "resultados").dos; // true

// Y para cambiarlos:

$.data(window, "resultados").uno = true;
$.data(window, "resultados").dos = false;

Una de las formas de arreglarlo es cambiando dinámicamente el orden por default de los elementos de la página. Esto asegura que los elementos en el código HTML tengan el índice adecuado, resolviendo la mayoría de los problemas que causa IE7.

El modo de hacerlo usando jQuery sería algo como:

$(function() {
	var zIndexNumber = 1000;
	$('div').each(function() {
		$(this).css('zIndex', zIndexNumber);
		zIndexNumber -= 10;
	});
});

Con esto básicamente lo que hacemos es comenzar con un z-index de 1000 y decrementar el indice de cada div de la página en tractos de 10, es decir, el primer elemento tendrá un z-index de 1000, el segundo 990 el tercero 980 y así sucesivamente. Notá que el selector de jQuery encuentra todos los divs con el codigo “$(’div’)”, usando la misma syntaxis que los selectores de CSS, nada dificil.

Ah… y así se hace lo mismo pero con MooTools, por si estás usando esa biblioteca:

if(Browser.Engine.trident){
	var zIndexNumber = 1000;
	$$('div').each(function(el,i){
		el.setStyle('z-index',zIndexNumber);
		zIndexNumber -= 10;
	});
};

Saluuú.

$(window).load(function(){
//Acá tu código
});

De verdad sencilla y conveniente si ya estás usando jQuery en el proyecto, pero qué pasa si no? Ahí es donde cobra sentido este post. No nos conviene cargar 30k de código extra para poder resolver este problema solamente, sería matar una mosca con un cañón.

Hace poco más de un año dí con una solución, eficiente, agnóstica y que responde bien en todos los browsers… Para ie a veces basta con agregar defer cómo atributo.

<script defer src="ie_load.js" type="text/javascript"></script>

Y el contenido del ie_load.js sería el script que ie debe cargar cuando esté listo. Suena bien, pero es una solución que no funciona adecuadamente con los otros browsers que simplemente ignorarían el defer, Mozilla y Safari quedarían rezagados.

Afortunadamente Mozilla responde a su propio DOMContentLoaded entonces solo queda escuchar el evento y ejecutar lo que queramos con él:

document.addEventListener("DOMContentLoaded", init, false);

Y John Resig, el creador de jQuery, dió con la solución para safari hace un tiempo:

if (/WebKit/i.test(navigator.userAgent)) { // sniff
		var _timer = setInterval(function() {
			if (/loaded|complete/.test(document.readyState)) {
				init(); // call the onload handler
			}
		}, 10);
	}

Para los demás browsers, solo nos queda hacer uso del window.onload común y corriente que todos conocemos:

window.onload = init;

Ya teniendo todos estos ingredientes dispuestos, solo queda hacerlos funcionar en conjunto, haciendo uso del soporte para compilaciones condicionales que tiene ie (para que no se meta con lo demás) y uno que otro tweak, ponemos todo en un solo script que se encargue del onload adecuado para cada browser.

function init() {
 		if (arguments.callee.done) return;

 		arguments.callee.done = true;

 		if (_timer) {
			clearInterval(_timer);
			_timer = null;
		}

		// Acá va lo que queramos ejecutar

	};

	/* Para Mozilla */
	if (document.addEventListener) {
		document.addEventListener("DOMContentLoaded", init, false);
	}

	/* Para Internet Explorer */
	/*@cc_on @*/
	/*@if (@_win32)
		document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
		var script = document.getElementById("__ie_onload");
		script.onreadystatechange = function() {
			if (this.readyState == "complete") {
				init(); // call the onload handler
			}
		};
	/*@end @*/

	/* Solución de John Resig Para Safari */
	if (/WebKit/i.test(navigator.userAgent)) { // sniff
		var _timer = setInterval(function() {
			if (/loaded|complete/.test(document.readyState)) {
				init(); // call the onload handler
			}
		}, 10);
	}
	window.onload = init;