1. $(document).ready () Todo el camino

Todo en su interior se carga tan pronto como se ha cargado el DOM y antes de que el contenido de la página se carga. Le permite conectar a cualquier elementos y eventos en la página directamente sin interferir con la carga de la pagina web, y todos los molestos onload, onclick onloquesea y no se necesita más, sólo en escribir aquí. Un ejemplo con-creado en el terreno de las funciones, que mantiene todo muy compacto y muy comprensible, seria:

$(document).ready (function () {

$(".dummy").click (function () {

$(this).css ('color', '#000000');

});

});

2. Use $(window).load ()

Aunque la gran mayoría de los ejemplos vienen con la amplia propagación $ (document).Ready () pseudo evento, es mejor evitar poner todo en el mismo.

Este último es muy útil, pero hace que la pagina se produzca, mientras que los objetos todavía están descargando.

la funcionalidad de desplazarse, arrastrar y soltar, etc, se podría poner en el interior de la función $ (window). Load () , que se ejecuta después de que todos los objetos se han descargado y evita la carga de las páginas.

Sintaxis es el mismo que el evento conocido $ (document). Ready ()

$(window).load (function () {



});

3. Cargar cuando realmente se necesite

Todo mundo esta tentado a escribir el codigo JS en la pagina, en un solo lugar, y luego lo copian. JQuery se toma su tiempo para mirar todos los elementos, incluso si no existen, y se pone lento.

Hay dos maneras que yo sugeriría que tu puedes conseguir en torno a esta terrible situación. El más simple sería la de un solo cuerpo con la etiqueta de un nombre (el nombre de la página, por ejemplo) y ejecute el código necesario de la página solamente.

$(document).ready (function () {



if ('body').hasClass ('home') {



// home page code



}



else if ('body').hasClass ('blog') {



// blog code



}



// and so on



});

El otro metodo es mas dificil para mi, is construir una biblioteca y llamar el codigo que se necesita en cada pagina.

// global JS library



var jslib =



{



home:



{



init: function () {



// home page code



}



},



blog:



{



init: function () {



// blog code



}



}



}

4. Aprende que metodo de 'datos' es y usalo

Yo veo esto todo el tiempo, la gente no piensa en ello y siempre escribe cosas como

$('.myselector').attr ('alt', 'orange');

para almacenar (y asociar), algunos datos diversos en el DOM. Esto es técnicamente incorrecto, así como bastante confuso para alguien ajeno a la programación original de los pensamientos.

jQuery actualmente proporciona un método para almacenar datos en el DOM, que son los datos. El ejemplo anterior sería:

$('.myselector').data ('myfavcolor', 'orange');



//Entonces se encontro otro mas simple



$('myselector').data ('myfavcolor');

5. Construye Selectores personalizados

Estar familiarizado con los selectores de CSS es una gran ayuda cuando se trata de jQuery, Pero empezar a conocer acerca de construir selectores en JQuery podras hacer las cosas mas facilmente y como quieras. Hecha un vistazo a: docs.jquery.com/Selectors para buscar mas al respecto.

Por ejemplo, podrias usar:

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

Para colorear el fondo de color rojo todo div que contenga 'hola', o:

$('input:password')

para seleccionar todos los campos tipo password.

6. Clases con banderas o 'Flag'

Puede utilizar las banderas para controlar lo que el usuario está haciendo, o incluso, para comprobar si una cosa se ha hecho o no. El método addClass viene muy bien este tiempo, proporcionando una manera fácil de agregar una nueva clase a un elemento. Más tarde, puede comprobar la existencia de la clase (por lo tanto, la bandera) con la función hasClass.

Un ejemplo muy común el uso de banderas es siempre que la aplicación tiene dos o más modos de funcionamiento, al entrar en el segundo modo, la bandera se establece en un elemento predeterminado y, en caso necesario, la hasClass método se utiliza para comprobar el modo de trabajo actual. Que fácil!

function editModeOn ()



{



// turns on edit mode and sets a flag



$('#flags').addClass ("editModeOn");



// do other cool things



}



function saveData ()



{



// to save data, first exit edit mode (if editing)



if ($('#flags').hasClass ('editModeOn')) {



exitEditMode ();



$('#flags').removeClass ('editModeOn');



}



save ();



}

7. No llames varias veces el mismo selector

Es muy muy mala idea hacer eso.

$('p.hello').css ('color', '#000000');



$('p.hello').text ('hello');



$('p.hello').addClass ('paragraph');



$('p.hello').fadeTo (1000, 1);

Haz mejor esto:

var $p = $('p.hello');



$p.css ('color', '#000000');



$p.text ('hello');



$p.addClass ('paragraph');



$p.fadeTo (1000, 1);

Almacena en variables para uso rapido.

8. Encadena (casi) todo

El encadenamiento es extremadamente útil. El código anterior podría ser re-escrito como:

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

Cuidado al encadenar, podría no salir las cosas bien.

9. toggleClass Utility

Puedes cambiar un elemento de la clase y fuera de cambiar su comportamiento sin mucho esfuerzo. Si ocultas clase no mostrará ningun elemento, puede mostrar ellos con:

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

debido a que el párrafo ahora se ve como si tuviera la siguiente marca

texto aqui

Otro punto de la toggleClass es que, con la próxima versión de jQuery 1.3.3 el método ToggleClass () tendrá un par de modos de operación: será capaz de activar múltiples nombres de clase y también será capaz de cambiar todos dentro o fuera de clases. Aquí están las diferentes maneras en que usted será capaz de utilizar. ToggleClass ().-

Brandon Aaron

// Con el siguiente elemento



//



// Cambia 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">



// Cambiando multiples 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. Store jQuery Results

Cuando se trata de funciones, es posible que desee tener algunos resultados disponibles en otros lugares; una posible solución es almacenar los resultados en los objetos con un alcance global, almacenado para su posterior uso.

// Usando el objeto 'window' para instanciar



window.$results = {



one : 0,



two : 0



};



// Esta es la funcion, Preparando para mas de uno



function getResults (first, second)



{



$results.one = first;



$results.two = second;



}



// Aplicando la funcion



getResults ($('li.blue'), $('a.red));



$results.one.hasClass ('blue'); // Verdadero



$results.two.hasClass ('blue'); // falso



// Aplicandola de nuevo



getResults ($('li.red'), $('a.blue));



$results.one.hasClass ('blue'); // falso



$results.two.hasClass ('blue'); // verdadero

Post traducido Entrada original