Mikä on jQuery querySelector?
jQuery querySelector valitse tai etsi DOM (asiakirjaobjektimalli) -elementti HTML-asiakirjasta. JQuery antaa meille mahdollisuuden manipuloida HTML-elementtejä. Sitä käytetään yhden tai useamman HTML-elementin valintaan id: n, nimen, tyyppien, määritteiden, luokan, määritteen arvojen jne. Perusteella. Se perustuu olemassa oleviin CSS-valitsimiin.
Johdanto querySelectoriin
QuerySelector () -menetelmä palauttaa vain ensimmäisen elementin, joka vastaa dokumentissa määritettyä CSS-valitsinta (valitsimia). Jos asiakirjassa käytetään tunnusta useammin kuin kerran, se palauttaa ensimmäisen vastaavan elementin.
QuerySelectorin syntaksi
Alla on kyselySelector-syntaksi:
- querySelector (CSS-valitsimet)
- Se palauttaa ensimmäisen elementin, joka vastaa määritettyjä valitsimia.
- Palautamme kaikki tällöin vastaavat elementit käyttämällä querySelectorAll () -menetelmää.
- Läpäisemämme CSS-valitsimien tulisi olla merkkijonotyyppejä.
- CSS-valitsimien läpäiseminen on pakollista.
- Lähettämämme merkkijonon on oltava kelvollinen CSS-valitsin.
- Jos ohitettu merkkijono on virheellinen, SYNTAX_ERRexception heitetään.
- Jos vastaavuutta ei löydy, se palaa nollaksi.
- Ensimmäisen elementin sovittaminen tapahtuu käyttämällä asiakirjan ennakkotilauksen syvyyttä.
- Määrittää yhden tai useamman CSS-valitsimen vastaamaan elementtiä.
- Useita valitsimia varten erota pilkulla.
- Merkit, jotka eivät kuulu CSS: n tavanomaiseen syntaksiin, on poistettava selkänumeron avulla.
Esimerkkejä querySelector () -menetelmästä
Alla on esimerkkejä querySelector () -menetelmistä:
JQuery-sovelluksessa voit valita sivun elementtejä käyttämällä monia erilaisia elementin ominaisuuksia, joita ovat tyyppi, luokka, tunnus, ominaisuuden hallussapito, ominaisuusarvot jne. Alla on esimerkki Jquerystä tyypin avulla.
Esimerkki 1 - valinta tyypin mukaan
1. Seuraava kyselyvalitsin sisältää kaksi <a>
Yllä olevan koodin selitys: Tässä esimerkissä voimme havaita, että olemme käyttäneet kahta ankkuritagia ja ankkuritunnisteen sisällä olemme läpäisseet kahden kuvan hyperlinkin. Käyttämällä kyselyvalintaa (“a”). Style.backgroundColor = “punainen”; olemme siirtäneet ankkuritunnisteen (“a”) querySelectorille. Jos ohitamme useita valitsimia, kyselyvalinta () -menetelmässä se palauttaa ensimmäisen elementin, joka vastaa määritettyjä valitsimia. Vaikka se sisältää kaksi ankkuritunnistetta ensimmäisen löydetyn ankkuritunnisteen, käytti sen style.backgroundColor = “punainen”; vain ensimmäiselle ankkuritunnisteelle.
Tulos 1: Ennen kuin napsautat painiketta (“Napsauta minua”).
Tulos 2: Kun olet napsauttanut painiketta (“napsauta minua”), kukan taustaväri muuttuu punaiseksi.
Tulos 3: Napsauttamalla hyperlinkkejä, vastaavat kuvat avautuvat.
2. Tämä querySelector sisältää myös kaksi, mutta alla olevassa esimerkissä olen muuttanut kuvan järjestystä. Olen pitänyt ensin aavikon hyperlinkin ja sitten kukan hyperlinkin.
Yllä olevan koodin selitys: Tässä esimerkissä voimme myös havaita, että olemme käyttäneet kahta ankkuritagia ja ankkurimerkinnän sisällä olemme läpäisseet kahden kuvan hyperlinkin. Käyttämällä kyselyvalintaa (“a”). Style.backgroundColor = “punainen”; olemme siirtäneet ankkuritunnisteen (“a”) kyselyn valitsimelle. Tällä kertaa kyselyvalinnassa () se selvittää ensin “Desert” -hyperlinkin, kun muutimme sekvenssiä. Vaikka se sisältää kaksi ankkuritunnistetta ensimmäisen löydetyn ankkuritunnisteen, käytti sen style.backgroundColor = “punainen”; vain ensimmäiselle ankkuritunnisteelle.
Tulos 1: Tulosteessa voidaan havaita, että ensimmäinen kuva on Desert. Joten querySelector () -menetelmän vuoksi aavikon taustaväri muuttui punaiseksi.
Tulos 2: Kun napsautat hyperlinkkiä, aavikon kuva avautuu.
Tulos 3: Napsauttamalla kukan hyperlinkkiä kukkakuva avataan.
Esimerkki 2 - valinta luokan mukaan
Tässä alla olevassa esimerkissä valitsemme luokan nimen.
Yllä olevan koodin selitys: Yllä olevassa esimerkissä käytämme luokan nimeä ja tässä luokan nimi on valitsin. Sama luokan nimi välitetään sekä h2: lle (otsikkotunniste) että kappaleille. KyselylleSelector () -menetelmälle välitetään luokan nimi, joka tarkistaa tietyn luokan nimen ohjelmassa. Nyt se on löytänyt tunnisteet, joilla on sama luokan nimi kuin mainittiin. Käyttämällä asiakirjan syvyys-ennakkotilauksen ennakkomahdollisuutta, ensimmäinen elementti sovitetaan yhteen. Esimerkin ensimmäinen elementti, joka sisältää luokan nimen valitsimena, on h2 (otsikkotunniste). QuerySelector () -menetelmä noutaa h2-tunnisteen ja style.backgroundColor käyttää sitä tiettyä taustaväriä h2-tunnisteeseen.
Tulos 1: Ennen kuin napsautat painiketta (“napsauta minua”), h2-tunnisteen sisältö ei muuta taustaväriä siniseksi.
Tulos 2: Kun olet napsauttanut painiketta (“napsauta minua”), h2-tunnisteen sisältö muuttaa taustan värin siniseksi.
Esimerkki 3 - valitseminen tunnuksella
Tässä alla olevassa esimerkissä valitaan tunnuksella.
Yllä olevan koodin selitys: Esimerkissä valitsemme tunnuksella id, jonka tunnus on valitsin. Meille ohitetaan kyselyvalinta () -menetelmällä tunnus, joka tarkistaa tietyn tunnuksen nimen ohjelmassa. Nyt se on löytänyt tunnisteen, jolla on sama tunnusnimi kuin mainittiin. Käyttämällä asiakirjan syvyys-ennakkotilauksen ennakkomahdollisuutta, ensimmäinen elementti sovitetaan yhteen. Elementti esimerkissä, joka sisältää tunnuksen nimen valitsijana, on kappaletunniste. QuerySelector () -menetelmä hakee kappaleitagin ja soveltaa tietyt muutokset sisältöön mainitun koodin mukaisesti.
Tulos 1: Ennen kuin napsautat painiketta “napsauta minua”, kappaleitagin sisältö on ”Tämä on ap-elementti id =” -valitsin ”.
Tulos 2: Kun olet napsauttanut painiketta "napsauta minua", kappaleitagin sisältö muuttuu "Muuta tekstissä".
JQuery querySelectorin käyttö
Alla on kaksi pistettä, jotka selittävät querySelectorin käyttöä:
- JQuery-koodit ovat tarkempia, lyhyempiä ja yksinkertaisempia kuin tavalliset JavaScript-koodit. Se voi suorittaa erilaisia toimintoja.
- Puhelu querySelector (): lle palauttaa ensimmäisen elementin poimittaessa sitä, joten se on nopeampi ja lyhyempi kirjoittaa.
Suositellut artikkelit
Tämä on opas jQuery querySelector -sovellukseen. Tässä keskustellaan siitä, mikä on jQuery querySelector, johdanto querySelectoriin, syntaksi ja esimerkki Jquerystä tyypin avulla. Voit myös käydä läpi muiden aiheeseen liittyvien artikkeleidemme saadaksesi lisätietoja -
- jQuery-tapahtumat
- JQueryn käyttö
- jQuery-menetelmät
- Kuinka asentaa Jquery?
- HTML-tapahtumat
- 5 suosituinta HTML-tapahtumamääritettä esimerkillä
- Heitä vs heittää | 5 suosituinta eroa, jotka sinun pitäisi tietää
- Opas JQuery-edistymispalkkiesimerkkeihin