jQuery -hendelser | Forklart
JQuery er designet for å håndtere hendelser på websiden også, hendelser (hvis du ikke allerede er kjent) er brukerhandlinger som får en webside til å reagere. For bedre å forklare hendelser, kan vi si at enhver handling som en webside kan svare på er kjent som en websidehendelse for eksempel mus-over, klikk, dokumentere lasting.
jQuery -hendelser | Syntaks og hendelsesmetoder
Syntaksen til jQuery -hendelser er å bruke en Dot-Operator Etter fabrikkfunksjonen $ () som inneholder velgerne.
$ ("P").klikk ();
Med ovennevnte linje er det opprettet en hendelseslytter, neste trinn er å definere hva du skal gjøre når den spesifikke hendelsen kjøres. For å gjøre det, definer funksjonen inne i parentesen til hendelsen som:
$ ("P").klikk (funksjon ()
// Body of the Function
);
jQuery -hendelser | Eksempler
For å demonstrere arbeidet med jQuery -arrangementer og hendelsesbehandlere skal vi sette opp en HTML -webside med Google CDN Hosted JQuery inkludert i skriptetoden:
HTML-nettsiden inneholder disse linjene for å sette opp vår testing av websiden:
Jeg endrer farge på belastningen
Hallo! Jeg er Linuxbot
Dobbeltklikk meg!
Klikk for å skjule meg!
Hvis du kjører HTML -filen, får du følgende resultat på nettleseren:
De Første begivenhet at vi kommer til å gå over er Dokument-på-klar begivenhet. Denne hendelsen blir automatisk utført når DOM verifiserer at nettsiden er fullstendig lastet og ikke venter på ytterligere handlinger eller svar. Så vi kommer til å endre bakgrunnen til Merk ved dokumentbelastning, med følgende kodelinjer:
$ (dokument).klar (funksjon ()
$ ("H1").CSS ("bakgrunn", "rød");
);
Du får følgende utdata:
Som du ser, kunne vi endre bakgrunnsfargen på H1 med jQuery -hendelser.
De Neste til og medt kommer til å være knappetrykk, Vi kommer til å be brukeren om navnet hans på knappetrykk. Bruk koden:
$ ("knapp").klikk (funksjon ()
var xyz = spør ("Skriv inn ditt fulle navn");
);
Du får følgende utdata ved å trykke på knappen:
Som du kan se, når du klikker på knappen som sier “Klikk meg!”, Ble en rask dialogboks vist og ba om brukerens fulle navn.
Musklikkhendelser er ganske vanlige, men noe som er mye brukt er dobbeltklikk -hendelsen. For å demonstrere dette, vil vi vise en melding på skjermen som et varsel når brukeren dobbeltklikker på avsnittet med IDen “dblclick”Med følgende kodelinjer:
$ ("#dblclick").dblclick (funksjon ()
Varsel ("Ha en fin dag!");
)
Med linjene ovenfor er utgangen som som
Ved dobbeltklikk på teksten ble en ny varslingsdialogboks vist for brukeren med en hilsen.
Vi kan til og med bruke “dette”Referanse når vi jobber med jQuery -hendelser, for å demonstrere at vi kommer til å skjule teksten med ID”gjemme seg”Etter klikk. Vi gjør dette ved å bruke følgende kodelinjer:
$ ("#skjul").klikk (funksjon ()
$ (dette).gjemme seg();
);
Du får følgende utdata når du klikker på teksten som sier “Klikk for å skjule meg!”:
Teksten var skjult etter å ha klikket på den en gang.
Konklusjon
JQuery Library gir funksjonaliteten til å administrere og reagere på hendelser på websiden som er grunnen til at jQuery blir referert til som "Skreddersydd”For hendelseshåndtering. jQuery -hendelser legges til jQuery -velgerfunksjonen ($ ()) Ved å bruke en dot -operatør oppretter dette en hendelseslytter på det elementet som lytter til en bestemt hendelse. For å utføre en handling basert på denne hendelsen må du opprette en funksjon som forteller websiden hva du skal gjøre for den spesifikke hendelsen. Denne funksjonen er ofte skrevet innenfor parentesen til hendelseslytteren.