Er det en enkel måte å konvertere jQuery -kode til JavaScript?
Selv om det er mange likheter mellom jQuery og JavaScript, eksisterer det også flere forskjeller i syntaks og funksjonalitet. For det første, forstå hva jQuery -koden prøver å gjøre. Bruk deretter de alternative metodene eller attributtene til Vanilla JavaScript.
Denne bloggen vil diskutere konvertering av jQuery -koden til JavaScript.
Hvordan konvertere jQuery -kode til JavaScript?
For å konvertere jQuery -kode til JavaScript, er det viktig å forstå hva koden gjør og hvilke jQuery -metoder som brukes. Bruk deretter de alternative metodene i JavaScript, for eksempel "$ ()”Brukes i jQuery for å velge elementer mens du er i JavaScript, for å velge elementer”dokument.QuerySelector ()”Eller“QuerySelectorAll ()”Metoder brukes.
La oss forstå konverteringsprosessen ved hjelp av et eksempel.
Eksempel
Her har vi en jQuery -kode som endrer tekstfargen og viser en forklarende tekst på et knappeklikk. For det inneholder HTML -dokumentet to knapper, tekst og en tom
Tag der den nye teksten vises på knappeklikk:
JavaScript -opplæring
Mens du jobber med jQuery, er det obligatorisk å legge til jQuery -biblioteket i taggen til HTML -dokumentet:
I taggen brukes den gitte koden:
$ (dokument).klar (funksjon ()$ ('#mydiv').Finn ('Button: First').klikk (funksjon ()
$ ('.tekst').CSS ('farge', 'blå');
$ ('#melding').tekst ('Jeg er den første knappen som vil stille fargen på teksten til blå');
);
$ ('#knapp').Neste ().klikk (funksjon ()
$ ('.tekst').CSS ('farge', 'grønn');
$ ('#melding').tekst ('Jeg er den andre knappen som vil stille fargen på teksten til grønn');
);
);
I koden ovenfor
- Først, bruk "klar()”Funksjon som vil utføres når DOM er fullastet. Det brukes ofte for å sikre at DOM er fullastet før utførelsen av en JavaScript -kode som samhandler med eller manipulerer DOM -elementene.
- Få tilgang til Div -elementet ved å bruke det tildelte ID “$ ('#mydiv')”Og ring“finne()”Metode For å finne den første knappen, legg ved en klikkhendelse på den ved hjelp av“Klikk ()”Metode der fargen på teksten vil bli endret og en tekstmelding vises under knappen på knappeklikk.
- Så, for å finne den andre knappen i Div, har vi brukt jQuery “Neste ()”Metode og anvendte den samme funksjonaliteten.
Som du kan se at utdataene viser en tekstmelding på knappeklikket som vil forklare arbeidet, og samtidig endres fargen på den eksisterende teksten:
Nå, her, vil vi konvertere ovennevnte jQuery -kode til JavaScript uten å endre utdata. Du kan bruke forskjellige tilnærminger for konvertering, men vi vil bruke JavaScript -metodene som et alternativ til jQuery -metodene.
Først får vi tilgang til knappen ved hjelp av “dokument.QuerySelector ()”Metode:
var knapp = dokument.QuerySelector ('Button');Deretter, fest en "Klikk”Arrangement ved hjelp av“AddEventListener ()”Metode. For å endre fargen på teksten, i JavaScript, bruk "stil”Attributt mens vi i jQuery bruker“CSS ()”Metode. Tilsvarende, for tekst, bruk "indrehtml”Eiendom i JavaScript mens“tekst()”Metode brukes i jQuery:
knapp.AddEventListener ('klikk', funksjon ()dokument.QuerySelector ('.tekst').stil.farge = "blå";
dokument.QuerySelector ('#melding').indrehtml = 'Jeg er den første knappen som vil stille fargen på teksten til blå';
);
For den andre knappen bruker vi “nextelementsibling”Attributt i JavaScript, mens vi i jQuery har brukt“Neste ()”Metode:
knapp.nextelementsibling.AddEventListener ('klikk', funksjon ()dokument.QuerySelector ('.tekst').stil.farge = "grønn";
dokument.QuerySelector ('#melding').textContent = 'Jeg er den andre knappen som vil stille fargen på teksten til grønn';
);
Produksjon
jQuery alternative metoder eller attributter i JavaScript
I den gitte tabellen kan du se de alternative metodene og attributtene til jQuery:
| jQuery | JavaScript | |
|---|---|---|
| Utføre en funksjon når DOM er klar | $ (dokument).klar (funksjon () // kode .. ); | dokument.AddEventListenmerm (“DomcontentLoaded”, funksjon () // kode .. ); |
| For valg av hele HTML | $ (“HTML”) | dokument.QuerySelector (velger) |
| For å velge hele HTML -kroppen | $ (“Body”) | dokument.kropp |
| Legg til en klasse i et HTML -element | $ element.AddClass (klassenavn) | element.Klasseliste.Legg til (klassenavn) |
| Fjern en klasse til et HTML -element | $ element.Fjerningsklass (klassenavn) | element.Klasseliste.Fjern (klassenavn) |
| Veksle en klasse til et HTML -element | $ element.TOGGLECLASS (klassenavn) | element.Klasseliste.Toggle (klassenavn) |
| Sjekk om et HTML -element inneholder en klasse | $ element.hasclass (klassenavn) | element.Klasseliste.har (klassenavn) |
| Klikk på hendelsen | $ (“.knapp").klikk (funksjon (hendelse) ); | dokument.QuerySelector (“.knapp") .AddEventListener (“Klikk”, (hendelse) => ); |
| Legg til CSS -styling | $ div.CSS (farge: “gul”) | div.stil.farge = “gul” |
| Velge alle elementer | $ ('.. .') | dokument.querySelectorAll (); |
| Velg første element | .først(); | dokument.querySelector (); |
| Finn elementer | .finne(); | dokument.querySelector (); eller dokument.querySelectorAll (); metode |
| Velge barneelement | .barn (); | Parentnode.barn; |
| Velge overordnet element | .foreldre (); | Node.parentnode; |
| Velg søsken | .søsken (); | Node.Parentnode.QuerySelectorAll (“: Ikke (#ELEM)”); |
| Velg Neste søsken | .neste (); | Nondocumenttypechildnode. nextelementsibling; |
| Velg tidligere søsken | .prev (); | Nondocumenttypechildnode. tidligere elementer; |
| Finn det nærmeste matchende elementet | .nærmest (); | Element.nærmest (); |
| Få attributt | .attr ('attr-name'); | Element.getAttribute ('attr-name'); |
| Legg til et nytt barneelement | .vedlegg ('HTML-streng'); | Node.appendchild (); |
| Fjern alle barneknuter | .tømme(); | Element.erstatningChildren (); |
| Få eller angi HTML -innhold | .html (); | Element.indrehtml; |
| Skjul element | .gjemme seg(); | ElementCssinlinestyle.stil.display = 'ingen'; |
| Vis element | .forestilling(); | ElementCssinlinestyle.stil.display = ”; |
| Legg til hendelseslytter | .på(); | EventTarget.AddEventListener ('Event', FunctionName); |
| Fjern hendelseslytteren | .av(); | EventTarget.RemoveEventListener ('Event', FunctionName); |
| Sløyfe gjennom et objekt, matrise eller samling | .Hver(); | Nodelist.prototype.for hver(); |
Det handler om å konvertere jQuery -kode til JavaScript.
Konklusjon
Det er ingen enkel måte å konvertere jQuery -kode til JavaScript. Du kan ganske enkelt kjenne forskjellene mellom begge og bruke Vanilla JavaScript innebygde metoder som er lik jQuery-metoder. Denne bloggen diskuterte konverteringen av jQuery -koden til JavaScript.