Vanilla JavaScript tilsvarer jQuery's $.klar?

Mens de utvikler nettsteder, bruker programmerere det enkle JavaScript kalt “Vanilla JavaScript”Og JavaScript -biblioteket”jQuery”. Mange moderne nettutviklingsrammer og biblioteker oppmuntrer eller krever til og med å bruke Vanilla JavaScript i stedet for jQuery, da det kan være mer effektivt, fleksibelt og lettere å forstå og vedlikeholde.

Denne bloggen vil demonstrere Vanilla JavaScript -ekvivalent til jQuery $.klar () Metode.

Vanilla JavaScript tilsvarer jQuery's $.klar()

Vanilla JavaScript -ekvivalenten til JQuery's $.klar () -funksjonen er “dokument.AddEventListener (“DomcontentLoaded”, funksjon () …);”Funksjon.

Hvordan bruke "DomcontentLoaded" -hendelsen til Vanilla JavaScript?

“DomcontentLoaded”Er en hendelse i JavaScript som blir avfyrt eller utløst uten å måtte vente på stilark, grafikk eller underrammer for å laste helt før du analyserer det grunnleggende HTML -innholdet.

Syntaks

element.AddEventListener (hendelse, funksjon, usecapture);

I denne syntaksen:

• “begivenhet”Er den første parameteren, som kan være ethvert gyldig JavaScript -arrangement.
• “funksjon”Er hoveddelen utført når hendelsen utløses.
• “Bruket”Er en valgfri parameter.

Eksempel

I dette eksempelet utføres skriptet når DOM er fullastet ved hjelp av Vanilla JavaScript.

For å gjøre det, vil vi opprette overskrifter i en HTML -fil som vises på siden etter å ha lastet siden:

Vanilla JavaScript

Dom er fullastet

I “”Merk, vis en varslingsmelding mens du laster inn siden og skriv ut meldingen på konsollen når siden er lastet inn:

I henhold til ovennevnte kodebit:

• Påkalle “AddEventListener ()”Metode med arrangementet”DomcontentLoaded”Og en funksjon som vil skrive ut en melding etter lasting av hele siden.
• Varslingsdialogboksen vises før du laster inn siden.

Det kan observeres at innholdet er vist når DOM er fullastet:

Hvordan du bruker jQuery $ klar () funksjon?

“$.klar()”Funksjon i jQuery brukes til å kjøre en funksjon eller en kodeblokk så snart DOM er klar/tilgjengelig for manipulasjon. Dette betyr at funksjonen vil bli utført så snart siden er ferdig med å laste og analysere HTML, men før alle andre ressurser, for eksempel bilder og stilark, er ferdig med lasting.

Syntaks

For "klar()”Funksjon i jQuery, bruk den undergitte syntaks:

$ (dokument).klar () body

I denne syntaksen, "kropp”Utføres etter at hele siden er fullstendig lastet.

Eksempel

I det følgende eksemplet vil det spesifikke HTML -dokumentet skjule elementet på knappeklikk etter å ha lastet hele siden.

For å bruke jQuery i koden din, er det viktig å først laste biblioteket:

Legg til noe innhold i HTML -fil som vises på siden etter å ha lastet DOM:

JQuery Ready () -funksjon

Dom er fullastet

Skjul elementet

Vis først en varslingsmelding i taggen mens du laster inn DOM. Etter å ha vist innhold, må du skjule overskriften mens du klikker på knappen:

Det kan sees at innholdet er lastet på siden etter å ha lastet DOM -elementet og overskriften vil gjemme seg på knappeklikk:

Det handlet om tilsvarende jQuery $ klar () -funksjon i Vanilla JavaScript.

Konklusjon

“DomcontentLoaded”Arrangementet tilsvarer jQuerys“$.klar()”Metode. "DomcontentLoaded" og "$.klar () ”vil skyte før lastarrangementet. Dette betyr at du kan bruke den til å utføre kode så snart DOM er klar uten å vente på at alle ressurser skal lastes. Denne bloggen demonstrerte Vanilla JavaScript -ekvivalent til jQuery $.klar () Metode.