JQuery, et bibliotek med JavaScript, lar brukerne skrive mindre og gjøre mer. Du kan utføre flere handlinger ved å skrive bare en kodelinje. Et eksempel på dette er kjettingmetoden som lar deg kombinere en serie jQuery -metoder og bruke dem på et element på en gang. Det er en veldig morsom teknikk som reduserer arbeidet ditt og sparer mye tid. Denne guiden er designet for å opplyse leserne om hvordan de kan kjede forskjellige metoder i jQuery.

Kjettingmetoder i jQuery

Som allerede nevnt kan vi kjede forskjellige jQuery -metoder for å utføre flere handlinger på et HTML -element på en gang. Dette kan gjøres ved å velge et element og skrive alle nødvendige metoder i en enkelt linje atskilt med en prikk.

Den største fordelen med å bruke kjettingmetoden er at den forhindrer at nettleseren sporer opp det samme elementet mer enn en gang. Det er med andre ord absolutt ingen grunn til å bruke den samme velgeren om og om igjen, og dermed redusere sjansene for å bremse koden din.

La oss utforske hvordan du kjeder metoder i jQuery videre ved hjelp av eksempler.

Eksempel 1

I dette eksemplet lenker vi to jQuery -metoder som er CSS () og AniMe ().

Html

JQuery Chaining Methods

Klikk her

I ovennevnte HTML -kode opprettes to elementer som er

, og . Nå skal vi kjede CSS () og animere () metoder på

element for å se hvordan kjettingmetoder i jQuery fungerer.

jQuery

$ (dokument).klar (funksjon ()
$ (".knapp").klikk (funksjon ()
$ ("P").CSS ("Color", "Green").Animer (bredde: "100%")
.Animer (FontSize: "46px").Animer (opacity: "0.4 ");
);
);

I koden ovenfor har vi brukt farge på

element ved bruk av CSS () -metoden og angi bredde, skriftstørrelse og opacitet på samme element ved bruk av animatemetoden ().

Produksjon

Når knappen er klikket, er her hva som skjer.

CSS () og animere () -metodene er lenket med suksess.

Som du kan se i eksemplet ovenfor, lenket vi jQuery -metodene i bare en kodelinje, men koden vil fungere helt fint selv om du vil dele koden i flere linjer for å forbedre lesbarheten.

jQuery

$ ("P").CSS ("Color", "Green")
.Animer (bredde: "100%")
.Animer (FontSize: "46px")
.Animer (opacity: "0.4 ");

Det vil absolutt ikke være noen effekt på utdataene.

Eksempel 2

Følgende eksempel illustrerer hvordan du kan kjede Slideup (), Slidedown () og Fadeout () -metoder samtidig.

Html

JQuery Chaining Methods

Klikk her

I ovennevnte HTML -kode opprettes to elementer som er

, og . La oss kjede Slideup (), Slidedown () og Fadeout () Metoder for å se den resulterende effekten.

jQuery

$ (dokument).klar (funksjon ()
$ (".knapp").klikk (funksjon ()
$ ("H1").Slideup (1000).Slidedown (1000).fadeout (1000);
);
);

I koden ovenfor har hver av metodene fått en hastighet på 1000 millisekunder.

Produksjon

Slideup (), Slidedown () og Fadeout () -metodene er lenket og fungerer ordentlig.

Kjettemetoder uten å bestå argumenter

Hvis du ikke gir noen parameter til en jQuery -metode, vil den ikke returnere et jQuery -objekt, snarere vil det ganske enkelt returnere innholdet i det spesifiserte elementet i stedet.

Eksempel

I dette eksemplet lenker vi HTML (), AddClass () og Hide () -metodene.

Html

Noen overskrifter

Noe avsnitt.

Klikk her

Tre HTML -elementer er opprettet som er

,

, og .

jQuery

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
// dette vil fungere
$ ("H1").HTML ("Noe overskrift").AddClass ("Demo").fadeout (1000);
// dette vil ikke fungere
$ ("P").html ().addclass ("demo");
);
);

I koden ovenfor har vi passert parameteren til HTML () -metoden når vi bruker på

bare. Imidlertid ble ingen parameter gitt til HTML () -metode i tilfelle av

. Derfor vil effekten av kjetting bare fungere for

, Og ikke for

.

Produksjon

Ingen effekt på avsnittet.

Konklusjon

Kjedning av forskjellige jQuery -metoder kan gjøres ved å velge et element og skrive alle nødvendige metoder i en enkelt linje atskilt med en prikk for å utføre flere handlinger på et HTML -element på en gang. Fordelen med å gjøre det er at det forhindrer at nettleseren sporer opp det samme elementet om og om igjen, dessuten, reduserer sjansene for å bremse koden din. Denne oppskrivningen guider deg om hvordan du kjeder metoder i jQuery ved hjelp av passende eksempler.