Skip navigation

Voy a traducir dos artículos de la web Queness.com donde recopilan algunos consejos y trucos útiles a la hora de desarrollar con jQuery, tanto para solucionar pequeñas incidencias como para optimizar los resultados.

1.- Evitar conflictos entre librerías

Existe la posibilidad de que en una misma web se estén utilizando diferentes frameworks de javascript. Esto puede provocar conflictos entre ellos. Para el caso de jQuery se puede evitar asignando el método a otra variable diferente al dólar:

var $j = jQuery.noConflict();
$j(‘#myDiv’).hide();

2.- Comprobar que jQuery está cargado

Antes de llamar a nuestro desarrollo conviene comprobar que jQuery se ha cargado correctamente. Para ello podemos usar cualquiera de estas dos opciones:

/* Metodo 1 */
if (jQuery) {
// jQuery esta cargado
} else {
// jQuery no esta cargado
}

/* Metodo 2 */
if (typeof jQuery == ‘undefined’) {
// jQuery no esta cargado
} else {
// jQuery esta cargado
}

3.- Mejorar la selección de elementos

Al buscar en el DOM por los elementos siempre conviene realizarlo en base al ID del mismo en vez de la clase (aunque en las nuevas versiones de la librería se haya optimizado mucho).

/* ID */
$(“#myid”).html();
/* es mas rapido que */
$(“.myclass”).html();

Y en caso de seleccionar por clase, siempre es mejor idicando el tipo de elemento:

$(“ul.myclass”);
/* es mas rapido que */
$(“.myclass”);

4.- Obtener el total de elementos seleccionados

Al realizar una selección de elementos como la que comentábamos anteriormente puede que nos interese saber el número de elementos que se han visto afectados. Para ello podemos usar la siguiente función:

$(‘.someClass’).length;

5.- Obtener jQuery de los servidores de Google

Cargar la librería desde los servidores de Google ofrece unas ventajas muy interesantes. Para integrarlo en nuestro proyecto tenemos dos opciones, una más estandar y otra más eficiente:

<script src=”http://www.google.com/jsapi”></script&gt;
<script type=”text/javascript”>
google.load(“jquery”, “1.2.6”);
google.setOnLoadCallback(function() {
//Code to be inserted in this area
});
</script>

/* la mejor forma */
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js”></script&gt;
<script type=”text/javascript”>
$(document).ready(function() {
//This is more like it!
});
</script>

6.- Comprobar que una checkbox está marcada

Tenemos tres formas de realizar esta comprobación:

// Primera
$(‘#checkBox’).attr(‘checked’);
// Segunda
$(‘#edit-checkbox-id’).is(‘:checked’);
// Tercera
$(“[:checkbox]:checked”).each(
function() { … }
);

7.- Convertir el elemento LI completamente en el enlace

Solemos basarnos en el elemento UL para realizar nuestros menús. En ocasiones, el area del LI es superior a la del enlace que contiene, por lo que el elemento no es funcional 100%. Para evitarlo podemos hacer lo siguiente:

$(“ul li”).click(function(){
// se obtiene la url del enlace que contiene y se lanza
window.location=$(this).find(“a”).attr(“href”); return false;
});

8.- Obtener las coordenadas X e Y del cursor del ratón

$().mousemove(function(e){
//muestra las coordenadas X e Y en un parrafo
$(‘p’).html(“X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
});

9.- Como activar y descativar un elemento con jQuery

// Para desactivar
$(‘.someElement’).attr(‘disabled’, ‘disabled’);

// Para activar
$(‘.someElement’).removeAttr(‘disabled’);
// O puedes asignar el attr a “”
$(‘.someElement’).attr(‘disabled’, ”);

10.- Desactivar las animaciones de jQuery
Esta instrucción deshabilitará todas las animaciones de la librería:

jQuery.fx.off = true;

Anuncios

One Comment

  1. Muy buen post, lo he encontrado muy interesante, al igual q todo el blog, seguì asi.


One Trackback/Pingback

  1. By Bitacoras.com on 07 Abr 2009 at 5:16 pm

    Información Bitacoras.com…

    Valora en Bitacoras.com: Voy a traducir dos artículos de la web Queness.com donde recopilan algunos consejos y trucos útiles a la hora de desarrollar con jQuery, tanto para solucionar pequeñas incidencias como para optimizar los resultados. 1.- Evita…..

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: