Mis on jQuery querySelector?

jQuery querySelector valige või leidke HTML-dokumendis DOM (dokumendiobjekti mudel) element. JQuery võimaldab meil HTML-elementidega manipuleerida. Seda kasutatakse ühe või mitme HTML-i elemendi valimiseks id, nime, tüüpide, atribuutide, klassi, atribuudi väärtuste jms põhjal. See põhineb olemasolevatel CSS-i valijatel.

Sissejuhatus päringusse Valija

Meetod querySelector () tagastab ainult esimese elemendi, mis sobib dokumendis määratletud CSS-i valija (te) ga. Kui dokumendis olevat ID-d kasutatakse rohkem kui üks kord, tagastab see esimese vasteelemendi.

QuerySelectori süntaks

Allpool on päringuSelector süntaks:

  • querySelector (CSS valijad)
  • Tagastab esimese elemendi, mis vastab määratud valijatele.
  • Kõigi vastavate elementide tagastamiseks kasutame meetodit querySelectorAll ().
  • CSS-selektorid, mida me läbime, peaksid olema stringi tüüpi.
  • CSS-i valijate läbimine on kohustuslik.
  • Me edastatav string peab olema kehtiv CSS-i valija.
  • Kui edastatud string on kehtetu, visatakse SYNTAX_ERRexception.
  • Kui vastet ei leita, naaseb see kehtetuks.
  • Esimese elemendi sobitamine toimub dokumendi eeltellimisel sügavuti läbimisega.
  • Määrab elemendi sobitamiseks ühe või mitu CSS-selektorit.
  • Mitme valija puhul eraldage komaga.
  • Tähemärgid, mis ei kuulu tavapärasesse CSS-i süntaksi, tuleb kustutada kaldkriipsuga.

Näited querySelector () meetodist

Allpool on näited querySelector () meetoditest:

JQuery abil saate valida elemente lehel, kasutades paljusid erinevaid elemendi atribuute, milleks on Tüüp, klass, ID, atribuudi omamine, atribuudi väärtused jne. Allpool on näide Jquery tüübi kasutamise kohta.

Näide nr 1 - valimine tüübi järgi

1. Järgmine päringu valija sisaldab kahte <a>

Ülaltoodud koodi seletus: Selles näites võime täheldada, et oleme kasutanud kahte ankrusilti ja ankrusildi sees oleme kahe pildi hüperlingi ületanud. Kasutades päringut Selector (“a”). Style.backgroundColor = “punane”; oleme ankrusildi (“a”) andnud päringule Selector. Meetodil querySelector (), kui me läbime mitu selektorit, tagastatakse esimene element, mis vastab määratud selektoritele. Ehkki see sisaldab kahte ankrusilti, leidub esimene leitud ankrusilt, rakendades selle stiili.backgroundColor = “punane”; ainult esimese ankrusildi jaoks.

1. väljund: enne nupule klõpsamist (“Click me”).

2. väljund: Pärast nupule klõpsamist (“Click me”) muutub lille taustavärv punaseks.

3. väljund: hüperlinkidel klõpsamisel avatakse vastavad pildid.

2. Selles päringusüsteemis on ka kaks, kuid allpool toodud näites olen pildi järjestust muutnud. Olen hoidnud kõigepealt kõrbe hüperlingi, siis teise lille hüperlingi.

Ülaltoodud koodi selgitus: ka selles näites võime täheldada, et oleme kasutanud kahte ankrusilti ja ankrusildi sees oleme kahe pildi hüperlingi ületanud. Kasutades päringut Selector (“a”). Style.backgroundColor = “punane”; oleme päringu valijale ankrusildi (“a”) edastanud. Seekord saab päringust Selector () teada kõigepealt hüperlingi Desert, kui jada muutisime. Ehkki see sisaldab kahte ankrusilti, leidub esimene leitud ankrusilt, rakendades selle stiili.backgroundColor = “punane”; ainult esimese ankrusildi jaoks.

1. väljund: väljundis võime täheldada, et esimene pilt on Desert. Nii et meetodi querySelector () tõttu muutus Deserti taustvärv punaseks.

2. väljund: hüperlingil klõpsates avaneb kõrbepilt.

3. väljund: lille hüperlingil klõpsates avaneb lille pilt.

Näide 2 - klassi valimine

Allpool toodud näites valime klassi nime kasutades.

Ülaltoodud koodi selgitus: ülaltoodud näites kasutame klassi nime ja siin on klassi nimi Valija. Nii klassi H2 (päisesildi) kui ka lõigumärgise jaoks antakse sama klassi nimi. Meetodil querySelector () edastame klassi nime, see kontrollib programmis konkreetse klassi nime. Nüüd on ta leidnud sildid, millel on sama klassinimi, nagu mainitud. Kasutades dokumendi sügavuse esimese ettetellimise läbimist, viiakse esimene element kokku. Esimene näide näites, mis sisaldab klassi nime valijana, on h2 (pealkirja silt). Meetod querySelector () tõmbab h2-sildi ja style.backgroundColor rakendab seda konkreetset taustavärvi H2-sildile.

1. väljund: enne nupule klõpsamist (“klõpsake mind”) ei muuda h2-sildi sisu taustavärvi siniseks.

2. väljund: Pärast nupule klõpsamist (“klõpsake mind”) muudab h2-sildi sisu oma taustavärvi siniseks.

Näide # 3 - valimine ID järgi

Allpool toodud näites valime ID abil.

Ülaltoodud koodi selgitus: näites valime ID abil id, mille siin on valija. Meetodil querySelector () edastame ID, mille abil kontrollitakse programmis konkreetset id-nime. Nüüd on ta leidnud sildi, millel on sama id-nimetus, nagu mainitud. Kasutades dokumendi sügavuse esimese ettetellimise läbimist, viiakse esimene element kokku. Näite element, mis sisaldab id nime Valijana, on lõigumärgend. Meetod querySelector () tõmbab lõigu sildi ja rakendab konkreetsed muudatused sisus vastavalt mainitud koodile.

1. väljund: enne nupule „klõpsa mind“ klõpsamist on lõigu sildi sisuks „See on ap element id =” valijaga.

2. väljund: pärast nupule „klõpsa mind“ klikkimist muudetakse lõigumärgistuse sisu väärtuseks „Muuda teksti”.

JQuery querySelectori kasutusalad

Allpool on kaks punkti, mis selgitavad päringuSelector kasutamist:

  • JQuery koodid on täpsemad, lühemad ja lihtsamad kui tavalised JavaScripti koodid. See võib täita mitmesuguseid funktsioone.
  • Kutse päringule Elektroonika () tagastab esimese elemendi selle valimisel, seega on see kiirem ja lühem ka kirjutamiseks.

Soovitatavad artiklid

See on juhend jQuery querySelectori jaoks. Siin räägime sellest, mis on jQuery querySelector, sissejuhatus querySelectorisse, süntaks ja Jquery näide tüübi abil. Lisateavet leiate ka meie muudest seotud artiklitest -

  1. jQuery üritused
  2. JQuery kasutusalad
  3. jQuery meetodid
  4. Kuidas installida Jquery?
  5. HTML-i sündmused
  6. 5 parimat HTML-i sündmuse atribuuti koos näidetega
  7. Viska vs viskab | 5 parimat erinevust, mida peaksite teadma
  8. JQuery edenemisriba näidete juhend

Kategooria:

Tarkvaraarendus