Ligação do jQuery (Chaining)

jQuery oferece outra funcionalidade poderosa chamada linkagem de métodos.

A linkagem permite que executemos vários métodos jQuery no mesmo elemento em uma única instrução.

Cadeia de métodos jQuery

Até agora, escrevemos uma instrução jQuery por vez (um de cada vez).

No entanto, há uma técnica chamada linkagem, que permite executar várias comandos jQuery no mesmo elemento em uma única instrução.

Dessa forma, o navegador não precisa buscar o mesmo elemento várias vezes.

Isso é possível porque a maioria dos métodos jQuery retorna um objeto jQuery, que pode ser usado para chamar outro método.

Os exemplos a seguir são concatenadoscss(),hide()eshow()Método:

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

Também podemos dividir uma linha de código em várias linhas para melhorar a legibilidade.

Por exemplo, a sequência de métodos acima pode ser escrita da seguinte forma:

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

Podemos ligar um número ilimitado de métodos em uma única instrução:

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

Atenção:Alguns métodos do jQuery não retornam objeto jQuery, enquanto outros retornam baseado nos parâmetros que passamos a ele. Considere o seguinte exemplo:

//　Uso Correto
$("p").css("background-color", "coral").hide(2000).show(2000);
//　Uso Errado
$("p").css("background-cor", "coral").hide().show();