jQuery - Encadeamento


Com jQuery, você pode encadear ações/métodos.

O encadeamento nos permite executar vários métodos jQuery (no mesmo elemento) em uma única instrução.


Encadeamento de métodos jQuery

Até agora, escrevemos instruções jQuery uma de cada vez (uma após a outra).

No entanto, existe uma técnica chamada encadeamento, que nos permite executar vários comandos jQuery, um após o outro, no(s) mesmo(s) elemento(s).

Dica: Dessa forma, os navegadores não precisam encontrar o(s) mesmo(s) elemento(s) mais de uma vez.

Para encadear uma ação, basta anexar a ação à ação anterior.

O exemplo a seguir encadeia os métodos css(), slideUp()e . slideDown()O elemento "p1" primeiro muda para vermelho, depois desliza para cima e depois para baixo:

Exemplo

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

Também poderíamos ter adicionado mais chamadas de método, se necessário.

Dica : Ao encadear, a linha de código pode se tornar bastante longa. No entanto, o jQuery não é muito rigoroso na sintaxe; você pode formatá-lo como quiser, incluindo quebras de linha e recuos.

Isso também funciona muito bem:

Exemplo

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

jQuery joga fora espaço em branco extra e executa as linhas acima como uma longa linha de código.