Optimizar selectores usando el modelo "r2l" y buscar primero los elementos secundarios. Usar live() en lugar de click() para que los eventos se actualicen ante cambios en el DOM. Utilizar noConflict() para evitar conflictos con otros frameworks al crear un alias para jQuery.

2. 11 tips para optimizar el uso de jQuery como framework de JavaScript

3. Optimizar los selectores utilizando el modelo "r2l" (right to left) $(“#id div.class2”) Sizzle es una librería creada por el mismo Resign que se especializa en la selección de elementos dentro del HTML, esta librería utiliza el modelo r2l, o sea busca primero los elementos secundarios (div.class2) y luego compara contra los elementos padres. Por lo tanto es mejor optimizar el segundo selector.

4. Utilizar live() en vez de click() $(elemento).live('click') Al llamar a un evento directamente este debe cumplir con el requisito obligatorio de ser leído por el DOM. El problema es que si éste es alterado por medio de otro factor y modifica la estructura del HTML inicial el evento queda "desactualizado". La mejor forma es tener un vigilante que esté al tanto de cada modificación y la almacene en una memoria interna.

5. Utilizar punteros para evitar conflictos Si algo ha hecho famoso a jQuery es la compatibilidad con distintos frameworks gracias al método noConflict() Por dentro crea un alias al signo dólar ($) con un nombre de referencia (jQuery)

6. Ejemplo 1 jQuery.noConflict(); // Do something with jQuery jQuery("div p").hide(); Ejemplo 2 var j = jQuery.noConflict(); // Do something with jQuery j("div p").hide();

7. Ejemplo 3 jQuery.noConflict(); (function($) { $(function() { // more code using $ as alias to jQuery }); })(jQuery); // other code using $ as an alias to the other library Usado por Drupal

8. Utilizar find() Para estructuras complejas o en las que no se tienen el control la mejor forma de ubicar elementos es con el find() ya que le da un plus al performance del selector. var panels = $('div.panel', $('#content')); utilizando find() var panels=$('#content').find('div.panel');

9. Utilizar callbacks para sincronizar efectos $('#sliding').slideDown('slow', function(){ $('#sliding').slideUp('slow'); }); La mejor forma de lograr que los efectos estén bien sincronizados, además se podría extender más para abajo.

10. Método css El método css se encarga de darle estilos al elemento seleccionado. $('div.panel').css('color', 'red'); Pero si se desean aplicar muchos estilos lo mejor es recurrir al tag: $('<style type=&quot;text/css&quot;> div.class { color: red; } </style>').appendTo('head'); O bien utilizar el método addClass y setearla en la hoja de estilos.

11. Sizzle compatible con Google Page Speed Con este plugin de firebug ya se puede testear los selectores utilizados en jQuery.

12. Agrupar en un mismo script una ejecución para varios eventos 2 tips en 1: jQuery es capaz de detectar los eventos que realizan una acción y lo contrario. $(&quot;p&quot;).bind(&quot;mouseenter mouseleave&quot;, function(e){ $(this).toggleClass(&quot;mouse-over&quot;); });

13. Detectar el navegador $.browser.safari $.browser.msie -> $.browser.version <= 6 $.browser.mozilla $.browser.opera $.browser.chrome

14. Utilizar las versiones comprimidas Para un mejor tiempo de carga en la página, el uso de librerías comprimidas (minifield) ayudará a reducir el peso del js. Muchos plugins poseen esa opción de descarga también. También existen herramientas para comprimir nuestros propios scripts.

15. Aprender sobre los métodos menos conocidos Es parte del aprendizaje, aunque jQuery sea un framework en constante actualización, es muy importante leer sobre los distintos métodos que existen. Unos que pueden ayudar map(), slice(), stop(), queue(), dequeue(), prevAll() o inArray().

16. $(document).has('finished');