Kaj je jQuery querySelector?
jQuery querySelector izberite ali poiščite element DOM (model objekta predmeta dokumenta) v dokumentu HTML. JQuery nam omogoča manipuliranje elementov HTML. Uporablja se za izbiro enega ali več elementov HTML na podlagi id, ime, vrste, atributi, razred, vrednosti atributov itd. Temelji na obstoječih izbirnikih CSS.
Uvod v poizvedbo Selektor
Metoda querySelector () vrne samo prvi element, ki ustreza določenim izbirnikom ali CSS-om v dokumentu. Če se ID v dokumentu uporablja večkrat, bo vrnil prvi ujemajoči se element.
Sintaksa poizvedbeSelektor
Spodaj je sintaksa querySelector:
- querySelector (izbirniki CSS)
- Vrne prvi element, ki ustreza določenim izbirnikom.
- Za vrnitev vseh elementov, ki se ujemajo, uporabimo metodo querySelectorAll ().
- Izbirniki CSS, ki jih prenesemo, bi morali biti vrste niza.
- Obvezno prepustite izbirnike CSS.
- Niz, ki ga prenašamo, mora biti veljaven izbirnik CSS.
- Če je posredovani niz neveljaven, se vrže SYNTAX_ERRexception.
- Če ne najdete nobenega ujemanja, se bo vrnilo v nič.
- Ujemanje prvega elementa se izvede s prečkanjem dokumenta po globini, ki je prednaročeno.
- Določi enega ali več izbirnikov CSS, da se ujemajo z elementom.
- Za več izbirnikov ločite z vejico.
- Znake, ki niso del standardne sintakse CSS, je treba izogniti s črko poševnice.
Primeri metode querySelector ()
Spodaj so primeri metod querySelector ():
V jQuery lahko na strani izberete elemente z uporabo številnih različnih lastnosti elementa, kot so Vrsta, Razred, ID, Posedovanje lastnosti, Vrednosti atributov itd. Spodaj je primer Jqueryja z uporabo vrste.
Primer # 1 - Izbira po vrsti
1. Naslednji izbirnik poizvedb vsebuje dve <a>
Pojasnilo zgornje kode: V tem primeru lahko opazimo, da smo uporabili dve sidrni oznaki in znotraj oznake sidra prešli hiperpovezavo dveh slik. Z uporabo querySelector ("a"). Style.backgroundColor = "rdeče"; Sidrno oznako ("a") smo posredovali querySelectorju. V primeru querySelector (), če prenesemo več izbirnikov, bo vrnjen prvi element, ki ustreza določenim izbirnikom. Čeprav vsebuje dve oznaki sidra, je prva označena sidrna oznaka uporabila style.backgroundColor = "rdeča"; samo za prvo sidrno oznako.
Izhod 1: Preden kliknete na gumb ("Kliknite me").
Rezultat 2: Po kliku na gumb ("Kliknite me") se barva cvetja v ozadju spremeni v "rdečo".
Rezultat 3: S klikom na hiperpovezave se odprejo ustrezne slike.
2. Ta poizvedba Selektor vsebuje tudi dve, vendar sem v spodnjem primeru spremenil zaporedje slike. Prvo sem ohranil puščavsko hiperpovezavo, nato hiperpovezavo cvetlice drugo.
Pojasnilo zgornje kode: Tudi v tem primeru lahko opazimo, da smo uporabili dve sidrni oznaki in znotraj oznake sidra prešli hiperpovezavo dveh slik. Z uporabo querySelector ("a"). Style.backgroundColor = "rdeče"; smo oznako sidra ("a") posredovali izbirniku poizvedb. Tokrat bo v querySelector () najprej ugotovil hiperpovezavo »Puščava«, ko smo spremenili zaporedje. Čeprav vsebuje dve oznaki sidra, je prva označena sidrna oznaka uporabila style.backgroundColor = "rdeča"; samo za prvo sidrno oznako.
Izhod 1: Na izhodu lahko opazimo, da je prva slika puščava. Zaradi metode querySelector () se je barva ozadja Desert spremenila v rdečo.
Rezultat 2: S klikom na hiperpovezavo se odpre slika puščave.
Rezultat 3: S klikom na hiperpovezavo rože se odpre cvetna slika.
Primer # 2 - Izbira po razredu
V tem spodnjem primeru izbiramo z imenom razreda.
Pojasnilo zgornje kode: V zgornjem primeru uporabljamo ime razreda in tukaj je ime razreda Selector. Za h2 (oznako naslova) in oznako odstavka se prenese isto ime razreda. Pri metodi querySelector () prenašamo ime razreda, bo preveril ime posameznega razreda v programu. Zdaj je našel tiste oznake, ki imajo isto ime razreda kot omenjeno. S prečkanjem dokumenta po globini prvega naročila se izvede ujemanje prvega elementa. Prvi element v primeru, ki vsebuje ime razreda kot Izbirnik, je h2 (naslovna oznaka). Metoda querySelector () pridobi oznako h2 in po style.backgroundColor uporabi posebno barvo ozadja za oznako h2.
Rezultat 1: Preden kliknete na gumb ("klikni me"), vsebina oznake h2 ne spremeni barve ozadja v modro.
Rezultat 2: Po kliku na gumb ("klikni me") vsebina oznake h2 spremeni barvo ozadja v modro.
Primer # 3 - Izbira po ID-ju
V tem spodnjem primeru izbiramo s pomočjo id-ja.
Pojasnilo zgornje kode: V primeru izberemo z uporabo id, tukaj je Selector. Pri metodi querySelector () prenašamo id, bo preveril, ali je ime ID-ja v programu. Zdaj je našel oznako, ki ima isto ime kot omenjeno. S prečkanjem dokumenta po globini prvega naročila se izvede ujemanje prvega elementa. Element v primeru, ki vsebuje ime id kot Selector, je oznaka odstavka. Metoda querySelector () pridobi oznako odstavka in določene spremembe v vsebini uporabi v skladu z omenjeno kodo.
Izhod 1: Preden kliknemo na gumb "klikni me", bo vsebina oznake odstavka "To je element elementa z izbirnikom id =".
Rezultat 2: Po kliku na gumb "klikni me" se bo vsebina oznake za odstavek spremenila v "Spremeni besedilo".
Uporaba jQuery querySelector
V nadaljevanju sta opisani dve točki uporabe querySelector:
- Kode jQuery so natančnejše, krajše in preprostejše od standardnih kod JavaScripta. Izvaja lahko različne funkcije.
- Klic na querySelector () vrne prvi element med izbiro enega, tako da je pisanje hitrejše in krajše.
Priporočeni članki
To je vodnik za jQuery querySelector. Tu razpravljamo o tem, kaj je jQuery querySelector, uvod v querySelector, sintakso in primer Jquery z uporabo vrste. Obiščite lahko tudi druge naše sorodne članke, če želite izvedeti več -
- jQuery Dogodki
- Uporabe JQueryja
- jQuery metode
- Kako namestiti Jquery?
- Dogodki HTML
- Prvih 5 atributov dogodkov HTML s primeri
- Vrzi proti metanju | Top 5 razlik, ki bi jih morali vedeti
- Vodnik po primerih JQuery Progress Bar