Hva er jQuery querySelector?
jQuery querySelector velger eller finn et DOM (dokumentobjektmodell) -element i et HTML-dokument. JQuery lar oss manipulere HTML-elementene. Det brukes til å velge ett eller flere HTML-elementer basert på id, navn, typer, attributter, klasse, attributtverdier, etc. Det er basert på eksisterende CSS-velgere.
Introduksjon til spørring
Metoden querySelector () returnerer bare det første elementet som samsvarer med en spesifisert CSS-velger (er) i dokumentet. Hvis en ID i dokumentet brukes mer enn en gang, vil den returnere det første samsvarende elementet.
Syntaks for spørringSelektor
Nedenfor er syntaks for spørringSelektor:
- querySelector (CSS-velgere)
- Det returnerer det første elementet som samsvarer med de spesifiserte velgerne.
- For å returnere alle elementene som samsvarer, bruker vi metoden querySelectorAll ().
- CSS-velgerne som vi passerer skal være av strengtype.
- Det er obligatorisk å passere CSS-velgerne.
- Strengen som vi passerer må være en gyldig CSS-velger.
- Hvis den passerte strengen er ugyldig, kastes en SYNTAX_ERR-unntak.
- Hvis ingen kamp blir funnet, vil den returnere null.
- Matchingen av det første elementet gjøres ved hjelp av en dybde-første forhåndsbestilling av dokumentet.
- Angir en eller flere CSS-valg som passer til elementet.
- For flere velgere, skill med komma.
- Tegn som ikke er en del av standard CSS-syntaks, må rømmes ved hjelp av et skråstrek-tegn.
Eksempler på querySelector () -metode
Nedenfor er eksemplene på querySelector () -metoder:
I jQuery kan du velge elementer på en side ved å bruke mange forskjellige egenskaper for elementet de er Type, Klasse, ID, Attributtsbesittelse, Attributtverdier, etc. Nedenfor er eksemplet på Jquery ved å bruke type.
Eksempel 1 - Velge etter type
1. Følgende spørringsvelger inneholder to <a>
Forklaring av koden over: I dette eksemplet kan vi se at vi har brukt to ankermerker og inne i ankeretiketten har vi passert hyperkoblingen til to bilder. Ved å bruke querySelector (“a”). Style.backgroundColor = “rød”; vi har sendt ankeretiketten (“a”) til spørreselgeren. I metoden querySelector (), hvis vi passerer flere velgere, vil det returnere det første elementet som samsvarer med de spesifiserte velgerne. Selv om den inneholder to ankermerker, den første ankeretiketten som ble funnet, anvendte stilen sin .backgroundColor = “rød”; til bare for første ankermerke.
Utgang 1: Før du klikker på knappen (“Klikk meg”).
Utgang 2: Etter å ha klikket på knappen (“Klikk meg”) endres bakgrunnsfargen på blomsten til “rød”.
Utgang 3: Når du klikker på hyperkoblingene, vil de respektive bildene bli åpnet.
2. Denne spørringen Selector inneholder også to Men i eksemplet nedenfor har jeg endret bildesekvensen. Jeg har holdt ørkenens hyperkobling først, deretter hyperkobling til blomsten.
Forklaring av koden ovenfor: I dette eksemplet kan vi også se at vi har brukt to ankermerker og inne i ankeretiketten har vi passert hyperkoblingen til to bilder. Ved å bruke querySelector (“a”). Style.backgroundColor = “rød”; vi har gitt ankeret ("a") til spørringsvelgeren. Denne gangen i querySelector () vil den finne ut "Desert" hyperkoblingen først da vi endret sekvensen. Selv om den inneholder to ankermerker, den første ankeretiketten som ble funnet, anvendte stilen sin .backgroundColor = “rød”; til bare for første ankermerke.
Output 1: I output kan vi se at det første bildet er Desert. Så på grunn av metoden querySelector () endret bakgrunnsfargen på ørkenen til rød.
Utgang 2: Når du klikker på hyperkoblingen, vil ørkenbildet bli åpnet.
Utgang 3: Når du klikker på hyperkoblingen til blomsten, vil blomsterbildet åpnes.
Eksempel 2 - Valg etter klasse
I dette eksemplet nedenfor velger vi ved å bruke klassens navn.
Forklaring av koden over: I eksemplet ovenfor bruker vi klassens navn, og her er klassens navn Selector. Samme klassens navn sendes for både h2 (overskrifttag) og avsnittkode. For metoden querySelector () passerer vi klassens navn, den vil se etter det aktuelle klassens navn i programmet. Nå har den funnet kodene som har samme klassens navn som nevnt. Ved å bruke den første dybde-forhåndsbestillingen av dokumentet blir samsvaret med det første elementet gjort. Det første elementet i eksemplet som inneholder klassens navn som Selector er h2 (overskriftsmerke). Metoden querySelector () henter h2-koden og etter style.backgroundColor bruker den den spesielle bakgrunnsfargen på h2-koden.
Utgang 1: Før du klikker på knappen ("klikk meg") endrer ikke innholdet i h2-taggen bakgrunnsfargen til blå.
Utgang 2: Etter å ha klikket på knappen (“klikk meg”) endrer h2-merkets innhold bakgrunnsfargen til blå.
Eksempel 3 - Velge etter ID
I dette eksemplet nedenfor velger vi ved å bruke id.
Forklaring av koden over: I eksemplet velger vi å bruke id iden her er Selector. For metoden querySelector () passerer vi iden, den vil se etter det spesifikke ID-navnet i programmet. Nå har den funnet koden som har samme ID-navn som nevnt. Ved å bruke den første dybde-forhåndsbestillingen av dokumentet blir samsvaret med det første elementet gjort. Elementet i eksemplet som inneholder ID-navnet som Selector er avsnitt tag. Metoden querySelector () henter avsnittkoden og bruker bestemte endringer på innholdet i henhold til koden som er nevnt.
Utgang 1: Før du klikker på knappen "klikk meg" vil innholdet i avsnittet være "Dette er et element med id =" selector ".
Utgang 2: Etter å ha klikket på knappen "klikk meg" vil innholdet i avsnittet bli endret til "Endring i teksten".
Bruker av jQuery querySelector
Nedenfor er de to punktene som forklarer bruken av spørringSelektor:
- Kodene for jQuery er mer presise, kortere og enklere enn standard JavaScript-koder. Den kan utføre en rekke funksjoner.
- Samtalen til spørringenSelektor () returnerer det første elementet mens det plukker et, så det er raskere og også kortere å skrive.
Anbefalte artikler
Dette er en guide til jQuery querySelector. Her diskuterer vi hva som er jQuery querySelector, introduksjon til querySelector, syntax og eksemplet på Jquery ved å bruke type. Du kan også gå gjennom andre relaterte artikler for å lære mer -
- jQuery-hendelser
- Bruk av JQuery
- jQuery Methods
- Hvordan installerer Jquery?
- HTML-hendelser
- Topp 5 HTML-attributter med eksempler
- Kast vs kaster | Topp 5 forskjeller du burde vite
- Eksempel på JQuery Progress Bar