Cadenas de jQuery (Chaining)

jQuery ofrece otra función poderosa llamada enlace de métodos.

El enlace nos permite ejecutar múltiples métodos jQuery en el mismo elemento en una sola declaración.

Cadena de métodos de jQuery

Hasta ahora, solo escribimos una declaración de jQuery a la vez (uno tras otro).

Sin embargo, hay una técnica llamada enlace que permite ejecutar múltiples comandos jQuery en el mismo elemento en una sola declaración.

De esta manera, el navegador no tiene que buscar el mismo elemento varias veces.

Esto es posible porque la mayoría de los métodos de jQuery devuelven un objeto jQuery, que se puede usar para llamar a otro método.

Los siguientes ejemplos se enlazan juntoscss(),hide()yshow()Método:

$("button").click(function(){
　　$("p").css("background-color", "coral").hide(2000).show(2000);
});

También podemos dividir una línea de código en varias para mejorar la legibilidad.

Por ejemplo, la secuencia de métodos en el ejemplo anterior también se puede escribir como:

$("button").click(function(){
　　$("p")
　　　　.css("background-color", "coral")
　　　　.hide(2000)
　　　　.show(2000);
});

Podemos enlazar una cantidad ilimitada de métodos en una sola declaración:

$("button").click(function(){
　　$("div")
　　　　.animate({width:"500px"})
　　　　.animate({height:"200px"})
　　　　.animate({fontSize: "10em"})
　　　　.animate({opacity: 0.3});
});

Nota:Algunos métodos de jQuery no devuelven un objeto jQuery, mientras que otros solo devuelven según los parámetros que les pasamos. Considera el siguiente ejemplo:

//　Uso correcto
$("p").css("background-color", "coral").hide(2000).show(2000);
//　Uso incorrecto
$("p").css("background-color", "coral").hide().show();