Como os métodos da cadeia no jQuery?
JQuery, uma biblioteca de JavaScript, permite que seus usuários escrevam menos e façam mais. Você pode executar várias ações escrevendo apenas uma linha de código. Um exemplo disso é o método de encadeamento que permite combinar uma série de métodos de jQuery e aplicá -los a um elemento de uma só vez. É uma técnica muito divertida que diminui seu trabalho e economiza muito tempo. Este guia foi projetado para esclarecer seus leitores sobre como encadear vários métodos no jQuery.
Métodos de encadeamento em jQuery
Como já mencionado, podemos encadear vários métodos jQuery para executar várias ações em um elemento HTML de uma só vez. Isso pode ser feito selecionando um elemento e escrevendo todos os métodos necessários em uma única linha separada por um ponto.
A maior vantagem de usar o método de encadeamento é que ele impede o navegador de rastrear o mesmo elemento mais de uma vez. Em outras palavras, não há absolutamente nenhuma necessidade de usar o mesmo seletor repetidamente, diminuindo as chances de diminuir seu código.
Vamos explorar como encadear métodos em jQuery com a ajuda de exemplos.
Exemplo 1
Neste exemplo, estamos encadeando dois métodos jQuery que são CSS () e Animate ().
Html
Métodos de encadeamento de jQuery
No código HTML acima, dois elementos são criados que são
, e . Agora vamos encadear os métodos CSS () e Animate () no
elemento para ver como os métodos de encadeamento no jQuery funciona.
jQuery
$ (documento).pronto (function ()$ (".botão").clique (function ()
$ ("p").CSS ("Color", "Green").Animate (Width: "100%")
.Animate (fontsize: "46px").animar (opacidade: "0.4 ");
);
);
No código acima, aplicamos a cor ao
elemento usando o método css () e largura de conjunto, fontsize e opacidade no mesmo elemento usando o método Annimate ().
Saída
Quando o botão é clicado, aqui está o que acontece.
Os métodos CSS () e Animate () são acorrentados.
Como você pode ver no exemplo acima, acorrentamos os métodos jQuery em apenas uma linha de código, no entanto, o código funcionará muito bem, mesmo que você queira dividir o código em várias linhas para aprimorar a legibilidade.
jQuery
$ ("p").CSS ("Color", "Green").Animate (Width: "100%")
.Animate (fontsize: "46px")
.animar (opacidade: "0.4 ");
Não haverá absolutamente nenhum efeito na saída.
Exemplo 2
O exemplo a seguir ilustra como encadear slide -up (), slidown () e fadeout () métodos simultaneamente.
Html
Métodos de encadeamento de jQuery
No código HTML acima, dois elementos são criados que são
, e . Métodos Slide -Up (), Slidown () e Fadeout () para ver o efeito resultante.
jQuery
$ (documento).pronto (function ()$ (".botão").clique (function ()
$ ("H1").slide -up (1000).arredora (1000).Fadeout (1000);
);
);
No código acima, cada um dos métodos recebeu uma velocidade de 1000 milissegundos.
Saída
Os métodos slide -up (), slidown () e fadeout () estão acorrentados e funcionando corretamente.
Métodos de encadeamento sem passar argumentos
Se você não passar nenhum parâmetro para um método jQuery, ele não retornará um objeto jQuery, em vez disso, simplesmente retornará o conteúdo do elemento especificado em vez disso.
Exemplo
Neste exemplo, estamos encadeando os métodos html (), addclass () e hide ().
Html
Alguns cabeçalham
Algum parágrafo.
Foram criados três elementos HTML que são
,
, e .
jQuery
$ (documento).pronto (function ()$ ("botão").clique (function ()
// Isso vai funcionar
$ ("H1").html ("Alguns cabeçalhos").addclass ("demonstração").Fadeout (1000);
// Isso não vai funcionar
$ ("p").html ().addclass ("demonstração");
);
);
No código acima, passamos o parâmetro para o método html () ao aplicar
apenas. No entanto, nenhum parâmetro foi passado para o método html () no caso de
. Portanto, os efeitos do encadeamento só funcionarão para
, e não para
.
Saída
Sem efeito no parágrafo.
Conclusão
A encadeamento de vários métodos de jQuery pode ser feita selecionando um elemento e escrevendo todos os métodos necessários em uma única linha separada por um ponto para executar várias ações em um elemento HTML de uma só vez. A vantagem de fazer isso é que ele impede que o navegador rastreie o mesmo elemento repetidamente, diminuindo as chances de diminuir o seu código. Este artigo o orienta sobre como encadear métodos em jQuery com a ajuda de exemplos adequados.