Hvad er jQuery querySelector?
jQuery querySelector vælger eller find et DOM (dokumentobjektmodel) element i et HTML-dokument. JQuery tillader os at manipulere HTML-elementerne. Det bruges til at vælge et eller flere HTML-elementer baseret på id, navn, typer, attributter, klasse, attributværdier osv. Det er baseret på eksisterende CSS-vælgere.
Introduktion til forespørgselSelektor
Metoden querySelector () returnerer kun det første element, der matcher en eller flere specificerede CSS-valg (er) i dokumentet. Hvis der bruges et ID i dokumentet mere end én gang, returnerer det det første matchende element.
Syntaks for forespørgselSelektor
Nedenfor er syntaks for forespørgselSelektor:
- querySelector (CSS-vælgere)
- Det returnerer det første element, der matcher de specificerede vælgere.
- For at returnere alle de elementer, der matcher, bruger vi metoden querySelectorAll ().
- De CSS-vælgere, som vi videregiver, skal være af strengtype.
- Det er obligatorisk at videregive CSS-vælgerne.
- Strengen, som vi passerer, skal være en gyldig CSS-vælger.
- Hvis den bestilte streng er ugyldig, kastes en SYNTAX_ERRexception.
- Hvis der ikke findes nogen kamp, vil det returnere nul.
- Tilpasningen af det første element udføres ved hjælp af en dybde-første forudbestilling gennemgang af dokumentet.
- Specificerer en eller flere CSS-valg, der skal matche elementet.
- For flere vælgere skal du adskille med et komma.
- Tegn, der ikke er en del af standard CSS-syntaks, skal undgås ved hjælp af et backslash-tegn.
Eksempler på querySelector () -metode
Herunder er eksemplerne på querySelector () -metoder:
I jQuery kan du vælge elementer på en side ved hjælp af mange forskellige egenskaber for elementet, de er Type, Klasse, ID, Attributbesiddelse, Attributværdier osv. Nedenfor er eksemplet på Jquery ved hjælp af type.
Eksempel 1 - Valg efter type
1. Følgende forespørgselsvælger indeholder to <a>
Forklaring af ovenstående kode: I dette eksempel kan vi konstatere, at vi har brugt to ankermærker, og inden i ankermærket har vi bestået hyperlinket til to billeder. Ved at bruge querySelector (“a”). Style.backgroundColor = “rød”; vi har sendt ankermærket (“a”) til forespørgselSelektoren. I metoden querySelector (), hvis vi passerer de flere vælgere, returnerer det det første element, der matcher de specificerede vælgere. Selvom det indeholder to ankermærker, blev det første ankermærke, der findes, anvendt sin stil.backgroundColor = “rød”; til kun for første ankermærke.
Output 1: Før du klikker på knappen ("Klik på mig").
Output 2: Efter at have klikket på knappen (“Klik på mig”) ændres blomsterens baggrundsfarve til “rød”.
Output 3: Når du klikker på hyperlinks, åbnes de respektive billeder.
2. Denne forespørgselVælger indeholder også to Men i nedenstående eksempel har jeg ændret billedets rækkefølge. Jeg har opbevaret ørkenens hyperlink først derefter hyperlink til blomsten anden.
Forklaring af ovenstående kode: I dette eksempel kan vi også se, at vi har brugt to ankermærker, og inden i ankermærket har vi bestået hyperlinket til to billeder. Ved at bruge querySelector (“a”). Style.backgroundColor = “rød”; vi har sendt ankermærket (“a”) til forespørgselsvælgeren. Denne gang i querySelector () vil den finde ud af "Desert" hyperlinket først, da vi ændrede sekvensen. Selvom det indeholder to ankermærker, blev det første ankermærke, der findes, anvendt sin stil.backgroundColor = “rød”; til kun for første ankermærke.
Output 1: I output kan vi observere, at det første billede er Ørken. Så på grund af metoden querySelector () ændrede ørkenens baggrundsfarve til rød.
Output 2: Når man klikker på hyperlinket, åbnes ørkenbilledet.
Output 3: Når du klikker på blomstens hyperlink, åbnes blomsterbilledet.
Eksempel 2 - Valg efter klasse
I dette eksempel nedenfor vælger vi ved hjælp af klassens navn.
Forklaring af ovenstående kode: I ovenstående eksempel bruger vi klassens navn, og her er klassens navn Selector. Det samme klassens navn videregives til både h2 (overskrifttag) og afsnitskode. For metoden querySelector () videregiver vi klassens navn, den vil kontrollere for det bestemte klassens navn i programmet. Nu har den fundet de tags, der har samme klassens navn som nævnt. Ved at bruge den dybde-første forudbestilte gennemgang af dokumentet, matches det første element. Det første element i eksemplet, der indeholder klassens navn som valg er h2 (overskrifttag). Metoden querySelector () henter h2-tagget og efter style.backgroundColor anvender den den bestemte baggrundsfarve på h2-tagget.
Output 1: Før du klikker på knappen (“klik på mig”) ændrer indholdet af h2-tag ikke baggrundsfarven til blå.
Output 2: Efter at have klikket på knappen (“klik på mig”) ændrer h2-tagindholdet baggrundsfarve til blåt.
Eksempel 3 - Valg af ID
I dette eksempel nedenfor vælger vi ved hjælp af id.
Forklaring af ovenstående kode: I eksemplet vælger vi ved hjælp af id iden her er Selector. For metoden querySelector () sender vi id'et, det kontrollerer for det bestemte id-navn i programmet. Nu har den fundet mærket, der har det samme id-navn som nævnt. Ved at bruge den dybde-første forudbestilte gennemgang af dokumentet, matches det første element. Elementet i eksemplet, der indeholder id-navnet som Selector, er afsnitskode. Metoden querySelector () henter afsnitskoden og anvender de særlige ændringer på indholdet i henhold til den nævnte kode.
Output 1: Før du klikker på knappen "klik på mig" vil indholdet af afsnitskoden være "Dette er et element med id =" -vælger.
Output 2: Når du har klikket på knappen "klik på mig", ændres indholdet af afsnitskoder til "Ændring i teksten".
Brug af jQuery querySelector
Nedenfor er de to punkter, der forklarer brugen af querySelector:
- JQuery-koder er mere præcise, kortere og enklere end standardkoderne for JavaScript. Det kan udføre en række funktioner.
- Opkaldet til querySelector () returnerer det første element, når det vælger et, så det er hurtigere og også kortere at skrive.
Anbefalede artikler
Dette er en guide til jQuery querySelector. Her diskuterer vi hvad der er jQuery querySelector, introduktion til querySelector, syntaks og eksemplet på Jquery ved hjælp af type. Du kan også gennemgå vores andre relaterede artikler for at lære mere -
- jQuery-begivenheder
- Brug af JQuery
- jQuery-metoder
- Sådan installeres Jquery?
- HTML-begivenheder
- Top 5 HTML-attributter med eksempler
- Kast vs kaster | Top 5 forskelle, du burde vide
- Vejledning til eksempler på JQuery Progress Bar