JQuery Syntax | Forklart
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
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.