Johdatus JQuery-valitsimiin ja heidän t
Kun työskentelet JavaScriptin kanssa, joudut usein tilanteeseen, jossa sinun on löydettävä ja muokattava sivun jotain sisältöä. Näissä tapauksissa sinun on käytettävä valitsimen tukea JQuery-sovelluksessa. JQuery tekee melko helpoksi löytää sivun elementtejä niiden tyyppien, arvojen, määritteiden jne. Perusteella. Nämä elementit perustuvat CSS-valitsimiin. Kun käytät jotakin käytäntöä, huomaat, että sivujen elementtien löytäminen on kakku. Niiden käytöstä riippuen voimme luokitella erityyppiset JQuery-valitsimet erityyppisiksi. Katsotaanpa joitain eniten käytettyjä valitsimia.
Valitsimen käyttäminen
Seuraava on JQuery-valitsimen syntaksi:
- $ (Valitsin) .methodname ():
Tarvittaessa voit ketjuttaa useita valitsimia lisäämällä ”.” Menetelmien väliin.
- $ (valitsin) .method1 (). menetelmällä2 (). menetelmä3 ();
Valitsintyypit JQueryssä
Tässä on JQueryn erityyppiset valitsimet
1) JQuery-perusvalitsimet
Voimme valita sivuelementit käyttämällä niiden tunnusta, luokkaa tai tunnisteen nimeä. Tarvittaessa voidaan käyttää myös näiden yhdistelmää. Seuraavassa on joitain perusvalitsijoita:
- : header Selector - Tämä on perusvalitsintyyppi, jonka avulla voimme löytää elementtejä niiden HTML-otsikoilla. Tätä varten käytämme verbose $ (“osa h1, osa h2, osa h3”) -valitsinta tai voimme käyttää myös paljon lyhyempää $ (“osa: otsikko”) -valitsinta.
- : kohdevalitsin - Tämä valitsin löytää kohteet sivulle tai hash asiakirjan URI: lle. Esimerkiksi, jos sivun URI on “https://example.com/#test”. Sitten valitsin $ (“h2: kohde”) valitsee elementin
.
- : animoitu valitsin - Tätä valitsinta käytetään löytämään kaikki elementit, joissa on animaatio. Muista, että jotta animaatio voidaan valita, sen on oltava käynnissä, kun valitsin on käynnissä.
2) Valitsijat perustuvat hakemistoon
JQueryllä on oma joukko hakemistopohjaisia valitsimia, jotka käyttävät nollapohjaista indeksointia. Seuraavassa on joitain esimerkkejä:
- : eq (k) -valitsin - Tämä valitsin palauttaa elementin indeksiin k. Se tukee myös negatiivisia indeksiarvoja.
- : lt (k) valitsin - Tämä valitsin palauttaa kaikki elementit, joiden indeksi on alle k. Kuten edellä, myös negatiiviset arvot hyväksytään
- : gt (n) valitsin - Tämä valitsin on samanlainen: lt (k) valitsin paitsi, että se toimii indeksin arvon ollessa suurempi tai yhtä suuri kuin k.
3) Lapsen valitsimet
JQueryn avulla voit valita minkä tahansa elementin lapset tyypin tai hakemiston perusteella.
- : ensimmäinen lapsi - Tämä valitsin palauttaa kaikki elementit, jotka ovat heidän vanhempiensa ensimmäinen lapsi.
- : first-of-type - Tätä JQuery-valitsinta käytetään valitsemaan kaikki elementit, jotka ovat ensimmäisiä sisaruksia
- : viimeinen lapsi - Kuten nimestä voi päätellä, tämä valitsin valitsee vanhemman viimeisen lapsen.
- : viimeinen tyyppi - Tämä valitsee kaikki lapset, jotka ovat viimeisimmän tyyppisiä vanhemmissa. Jos vanhempia on enemmän kuin yksi, se valitsee useita elementtejä.
- : Vain tyyppi - Voimme käyttää ainoan tyyppistä valitsinta kaikkien elementtien löytämiseen, joilla on samantyyppisiä sisaruksia sivulta.
- : vain lapsi - Voit käyttää tätä valitsinta tilanteissa, joissa sinun on löydettävä ja valittava elementit, jotka ovat heidän vanhempiensa ainoa lapsi. Jos sivun vanhemmalla on useampi kuin yksi lapsi, se jätetään huomioimatta.
4) Ominaisuuden valitsijat
Elementit voidaan valita niiden määritteiden perusteella. Seuraavassa on joitain yleisiä ominaisuuksien valitsijoita:
- $ (“(Attribuutti | = 'valuehere')") - "Attribuutti sisältää etuliitteen valitsimen" valitsee kaikki elementit attribuuteilla, joiden arvo on yhtä suuri tai alkaa annetulla merkkijonolla, jota seuraa tavuviiva.
- $ (“(Attribuutti ~ = 'valuehere') ')) - Tämä palauttaa kaikki elementit attribuuteilla, joissa arvo sisältää tietyn sanan, joka on erotettu välilyönneillä.
- $ (“(Attribuutti * = 'valuehere')") - Se valitsee elementit, joiden arvo sisältää annetun alimerkkijonon. Niin kauan kuin arvo vastaa, paikalla ei ole merkitystä
5) Sisällönvalinnat
Kuten nimestä voi päätellä, näitä JQuery-valitsimia käytetään elementtien sisällön etsimiseen ja valintaan.
- : sisältää (teksti) - Tätä käytetään elementtien valintaan, joiden tekstisisältö on määritetty. Yksi asia, joka on pidettävä mielessä tätä valitsinta käytettäessä, on, että tässä testi on iso ja iso.
- : on (valitsin) - Se palaa elementeillä, joiden sisällä on ainakin yksi elementti, joka vastaa määritettyä valitsinta. Esimerkiksi $ (“osio: sisältää (h1)”) palaa kaikkien osien kanssa, joissa on h1-elementti.
- : tyhjä - Tämä valitsin palauttaa sivun osat, joilla ei ole lapsia, mukaan lukien tekstisolmut.
- : vanhempi - Tätä valitsinta käytetään valitsemaan kaikki verkkosivun elementit, joissa on ainakin yksi alisolmu. Voit pitää sitä käänteisenä tyhjälle JQuery-valitsimelle.
6) Hierarkian valitsimet
- $ (“Esi-jälkeläinen”) - Sitä käytetään kaikkien vanhempien jälkeläisten elementtien valitsemiseen. Jälkeläinen meidän tapauksessamme voi olla lapsi, lapsenlapset ja niin edelleen.
- $ (”Vanhempi> lapsi”) - Tätä käytetään tapauksissa, joissa meidän on valittava vain tietyn vanhemman suora lapsi.
- $ (“Edellinen + seuraava”) - Jos meidän on valittava kaikki elementit, jotka vastaavat “seuraava” -valitsinta ja joiden emoyhtiö on “edellinen”. Valitut elementit etenevät myös välittömästi “edellinen”, joka on sisar.
7) Näkyvyyden valitsimet
Kaksi valitsinta: näkyvä ja piilotettu ovat myös saatavissa JQueryssä. Niitä voidaan käyttää näkyvien tai piilotettujen elementtien löytämiseen verkkosivulta. Mitä tahansa verkkosivun elementtiä pidetään piilotettuna, jos:
- Sen näyttö on oikein nolla.
- Sen leveys ja korkeus on määritelty nollaksi.
- Sen tyyppi = piilotettu mainitaan lomakeelementissä.
- Kaikki elementin esi-isät ovat jo piilotettu.
Muista, että vaikka elementin opasiteetti olisi asetettu nollaksi, sitä pidetään silti näkyvänä, koska se vie silti tilaa.
8) Lomakkeen valitsimet
Jotta säästät aikaa ja vaivaa, JQueryllä on lajittelijaversiot verkkolomakkeiden syöttöelementtien valitsimista.
Esimerkiksi, kun $ (“painike, syöttö (tyyppi =” painike ”)”) toimii valitaksesi painikkeen sivulle, voimme käyttää dollaria (“: painike”) tehdä sen nopeasti.
Samoin voimme käyttää $ (“: radio”) -valintanappulaa.
Johtopäätös - JQuery-valitsimen tyypit
Valitsimet ovat yksi JQueryn tärkeitä ominaisuuksia, JavaScriptin valinta ei ole yhtä intuitiivinen ja vankka bitti lisäämällä valitsimia JQueryn kautta, ohjelmointi webille on tullut helpommaksi.
Suositellut artikkelit
Tämä on opas JQueryn valitsinlajeihin. Tässä keskustellaan JQuery-valitsimien erityypeistä syntaksin kanssa. Voit myös katsoa seuraavia artikkeleita saadaksesi lisätietoja-
- jQuery-menetelmät
- jQuery-vaihtoehdot
- JQueryn käyttö
- Mitä Javascript voi tehdä?
- jQuery querySelector
- Opas JQuery-edistymispalkkiesimerkkeihin