8 métodos de jQuery que deberías conocer

Si trabajas o piensas trabajar a diario con este fantástico framework de JavaScript que es jQuery, más que probablemente te interese leerte esta entrada donde explicamos 8 métodos básicos de jQuery que quizás no conozcas, pero que sin lugar a dudas, deberías conocer. Esta entrada es una traducción y adaptación del original en inglés aparecido en Queness.

1. data()

El método data nos permite manejar datos de cualquier elemento del DOM de una forma segura, evitando referencias circulares y los efectos sobre la memoria de las mismas. Veamos un ejemplo:

<div data-type="page" data-hidden="true" data-options='{"name":"John"}'></div>
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";

O lo que es lo mismo:

$("div").data("role", "page");
$("div").data("hidden", "true");
$("div").data("role", {name: "John"});

Referencia completa en la documentación jQuery de data()

2. stop( [limpiarCola ], [saltarAlFinal] )

El método permite parar, la animación que está actualmente en ejecución. Es verdaderamente útil cuando manejamos imágenes.

Veamos un ejemplo de llamada:

$(this).find('img').stop(true, true).fadeOut();

Referencia completa en la documentación jQuery de stop()

3. toggleClass()

Permite conmutar clases, de forma, que si el elemento tiene ya la clase, la elimina y viceversa. El siguiente código:

$('#home').toggleClass('active');

Hace exactamente lo mismo que este:

if ($('#home').hasClass('active')) {
    $('#home').removeClass('active');
}
else {
    $('#home').addClass('active');
}

Referencia completa en la documentación jQuery de toggleClass()

4. delay(duracion, [nombreCola])

Permite retrasar la ejecución de las funciones que se ejecutan en una cola. Muy útil con las animaciones.

$('#content').slideUp(300).delay(800).fadeIn(400);

Referencia completa en la documentación jQuery de delay()

5. each()

Este método nos permite iterar sobre estructuras del DOM de una forma simple en una sola línea. Cada vez que se llama, itera una vez comenzando en el elemento 0 hasta el final de la estructura. Veamos un ejemplo:

<ul>
    <li>Apple</li>
    <li>Orange</li>
    <li>Mango</li>
    <li>Blueberry</li>
    <li>Watermelon</li>
</ul>

Referencia completa en la documentación jQuery de each()

6. size()

La llamada a esta función es equivalente a la llamada al atributo length. Es mejor usar el atributo, pero siempre viene bien saber más posibilidades.

var size1 = $("li").size(); // es igual a
var size2 = $("li").length;

Referencia completa en la documentación jQuery de size()

7. closest(selector)

Obtiene el primer ancestro (elemento superior en el árbol) que concuerda con la regla incluida en el selector.

$('li.item-a').closest('ul').css('background-color', 'red');

Referencia completa en la documentación jQuery de clostest()

8. position()

El método nos devuelve la posición de un elemento respecto a otro, a diferencia del método offset que lo hace respecto del documento. Sin lugar a dudas, el método más útil para situar elementos de forma relativa a otros:

var p = $("p:first");
var position = p.position();
alert("left: " + position.left + ", top: " + position.top);

Referencia completa en la documentación jQuery de position()