JQuery Syntax | Forklart

I JQuery Syntax, Alle utsagnene er basert på en grunnleggende mal som bruker forskjellige metoder og funksjoner for HTML -elementene og deres relaterte attributter. Du kan også tilpasse jQuery -syntaksen i henhold til den ekstra velgeren og handlingen, som kan være en metode eller funksjon.

Denne oppskrivningen vil forklare jQuery-syntaks i detalj ved hjelp av passende eksempler. Så la oss starte!

JQuery Syntax | Forklart

I jQuery er det første du må gjøre å velge HTML -elementene du vil utføre enhver handling. Den grunnleggende syntaks for jQuery er som følger:

$ (velger).handling();

I den ovennevnte jQuery-syntaksen må du legge til en "$”Skilt for tilgang til eller definere jQuery; Så en "velger”Legges til i parentesene, som representerer spørringen for å finne HTML -elementene. Til slutt, “handling()”Er operasjonen som skal utføres på de valgte HTML -elementene.

La oss nå sjekke ut hvilke typer velgere du kan legge til jQuery -syntaks.

Typer velgere i jQuery Syntax

JQuery Selectors regnes som en essensiell del av jQuery -biblioteket. For å bruke eventuelle jQuery -metoder, må du opprette et jQuery -objekt ved å velge et spesifikt HTML -element.

Ulike typer velgere finnes i jQuery, for eksempel Elementnavnvelger, Element #id velger, og Element .Klassevelger. For eksempel for å velge alle avsnitt "p”Elementer, vi vil bruke elementnavnvelgeren på følgende måte:

$ ("P").gjemme seg()

Du kan også tilordne en ID til et HTML -element og deretter utføre den samme operasjonen på den ved å bruke elementet #ID -velgeren:

$ ("#btnclick").gjemme seg()

Ved hjelp av element .Klassevelger, du kan velge forskjellige HTML -elementer samtidig som tilhører samme klasse:

$ (".klassenavn").gjemme seg()

Merk: For å velge HTML -elementer ved hjelp av ID, legg til hasjkarakter "#,”Etterfulgt av element -ID og for å finne elementer ved å bruke klassenavnet deres, legg til et“.”Periodekarakter etterfulgt av klassenavnet.

Dokument klar begivenhet i jQuery Syntax

Før du jobber med en "dokument”I jQuery må du sørge for at det er fullastet og er klar til bruk. “klar()”Hendelse av“dokument”Element kan brukes til dette formålet:

$ (dokument).klar (funksjon ()
// Skriv ut jQuery -metoder i kroppen
);

Den ovennevnte metoden vil forhindre utførelse av jQuery når "dokument”Element er ikke klart. Imidlertid, hvis du prøver å skjule et HTML -element som ikke er opprettet ennå, vil den spesifiserte handlingen mislykkes i dette tilfellet. Så sørg for at “dokument”Er klar før jeg kjører jQuery -koden.

Her er en kortere metode for å skrive dokumentets klare begivenhet:

$ (funksjon ()
// Skriv ut jQuery -metoder i kroppen
);

Eksempel: Bruke jQuery -syntaks for å skjule et HTML -element
Dette eksemplet vil demonstrere deg bruken av jQuery -syntaks for å skjule et HTML -element ved hjelp av elementnavnvelgeren. For det første i vår “indeks.html”Fil vil vi legge til en overskrift med“H2”Tag, et avsnitt som bruker“

”Tag, og en“Klikk på meg!”Knapp:

Finn HTML -elementer i jQuery

Dette er hovedparagrafen med noen eksempler på tekst

Klikk på meg!

Du kan bruke hvilken som helst online kodende sandkasse eller din favorittkodeditor for å utføre programmet; Vi vil imidlertid bruke Visual Studio -koden:

Deretter går du mot JavaScript -filen din, som er "mitt prosjekt.JS”I vårt tilfelle og skriv ut følgende kode i den:

$ (dokument).klar (funksjon ()
$ ("knapp").klikk (funksjon ()
$ ("H2").gjemme seg();
);
);

Den oppgitte koden spesifiserte at jQuery “$ (dokument).klar()”Metoden vil skjule HTML -elementet med“H2”Elementnavn når brukeren klikker på knappen:

Etter å ha lagret begge filene, vil vi åpne “indeks.html”Ved å bruke VS -kode”Leverserver" Utvidelse:

Nå klikker vi på knappen uthevet i det undergitte bildet under:

Som du kan se, har vi med hell skjule “H2”HTML -element ved å følge jQuery -syntaks:

Det handlet om den grunnleggende syntaksen til jQuery. Du kan utforske det videre i henhold til dine preferanser.

Konklusjon

$ (Velgeren).Handling () er den grunnleggende jQuery -syntaksen som kan brukes til å velge HTML -elementer og anvende spesifikk handling på dem. Når du har skrevet den nødvendige koden ved å følge JQuery Syntax, kan du bruke $ (dokumentet).klar (funksjon () ) metode for å utføre programmet. Denne oppskrivningen diskuterte jQuery-syntaks, typer jQuery-velgere og funksjonaliteten til $ (dokument).klar (funksjon () ) metode i detalj.