Skip navigation

Category Archives: Documentación

Comparto con vosotros dos recursos con los que obtener información de la API de jQuery. Son dos sitios web que suelo utilizar frecuentemente cuando tengo alguna duda al realizar un desarrollo: jQuery API y Visual jQuery

jQuery API

apijquery

Visual jQuery

visualjquery

Ambos utilizan un menú de navegación muy intuitivo, bien dividido y con ejemplos del uso de cada método.

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;

En el blog From Far East te puedes encontrar esta cheatsheet, o chuleta, en formato de fondo de pantalla con toda la información básica de la librería jQuery:

jquery-cheatsheet

Y si os interesa tener una en formato PDF en el blog de gscottolson os la podeis descargar.