JQuery - kirjasto menetelmistä, jotka on kirjoitettu kielelläJavaScript, jonka tarkoituksena on yksinkertaistaa HTML-sivuelementtien kanssa työskentelemistä. Tämä kirjasto myös yksinkertaistaa huomattavasti näiden elementtien valintaa, koska se tukee valintajoukkoja, joista suurin osa on lainattu CSS: ltä. Tässä artikkelissa puhumme yksityiskohtaisesti kaikista jQuery-valitsimista ja annamme esimerkkejä niiden käytöstä.
CSS ja jQuery
Kuten edellä mainittiin, jQueryn valitsimet lainataan CSS: ltä, mutta täällä on muutama BUT.
- Ensinnäkin jQuery tukee vain valitsimia, jotka valitsevat DOM-elementtejä, ts. Et voi työskennellä esimerkiksi ensimmäisen rivin tapahtumavalitsimien, esimerkiksi hover- ja pseudoelementtien kanssa.
- Toiseksi, jQueryllä on monia muita valitsijoita, joita et ole nähnyt CSS-säännöissä. Siksi, jos tiedät jo kaikki CSS-elementit, tämä artikkeli on silti merkityksellinen sinulle.
Peruselementit
Näitä valitsimia käytetään useimmiten, koska tämä on helpoin ja luotettavin tapa valita elementtejä. Tämä ryhmä on täysin yhdenmukainen CSS-valitsimien kanssa:
| Valitsin | Valitsimen kuvaus |
| $ ("*") | Kaikki sivun elementit kuuluvat valintaan |
| $ ("b") | Elementit, joissa on valittu tunniste HTML-merkinnästä, kuuluvat valintaan, tässä esimerkissä ... -elementit |
| $ (".A luokka") | Elementit, joilla on määritetty luokka, kuuluvat valintaan ( ) |
| $ ("# IDone") | Elementit, joilla on määritetty tunnus ( ), kuuluvat valintaan |
Kuten CSS: ssä, voit valita useitajQuery-valitsimet samanaikaisesti. Ne voidaan kirjoittaa pilkulla. Käytä esimerkiksi jquery-valitsinta tunnisteen nimen ja tunnuksen mukaan - $ ("# IDone, b"). On myös sallittua valita tunniste + luokka tai tunniste + ID, esimerkiksi $ ("b.classA").
Attribuutin valitsimet
Erilaisia CMS: iä käytettäessä saatat kohdataTilanne, jossa HTML-merkintäelementtiä ei voida asettaa tunnukseen tai luokkaan. Sama ongelma ilmenee käyttäjän luoman sisällön käsittelyssä. Tämä herättää ongelman tiettyjen elementtien valinnassa, mutta se on helppo ratkaista käyttämällä attribuutin valitsinta jquerystä.
| Valitsin | Valitsimen kuvaus |
| $ ("div [attribute]") | Prosessoi kaikki määritellyllä määritteellä varustetut elementit, kun taas sen arvoa ei oteta huomioon |
| $ ("div [attribute =" value "]") | Elementin valinta ottaa huomioon sen ominaisuuden ja arvon |
| $ ("div [attribute! =" value "]") | Valitsee elementin, jonka määritetyllä määritteellä on eri arvo kuin määritellyllä. Elementit, joilla ei ole tätä ominaisuutta, kuuluvat myös valintaan. |
| $ ("div [attribute ^ =" value "]") | Valitsee elementin, jolle määritetty määrite alkaa arvolla määritellyllä merkkijonolla |
| $ ("div [attribute $ =" value "]") | Valitsee elementin, jonka määritetty ominaisuus päättyy arvolla määritettyyn riviin |
| $ ("div [attribute * =" value "]") | Valitsee elementin, jolle määritetty attribuutti sisältää missä tahansa osassa arvona määritetyn merkkijonon |
| $ ("div [attribute ~ =" value "]") | Valitsee elementin, jolle määritetyllä määritteellä on sana määritettynä arvolla (merkkijono ilman välilyöntejä) |
| $ ("div [ominaisuus | =" arvo "]") | Valitsee elementin, jolle määritetty attribuutti vastaa arvolla määritettyä arvoa, tai alkaa siitä, jota seuraa tavuviiva |
Voit yhdistää attribuutteja kaventaaksesi sopivien kohteiden hakua, esimerkiksi $ ("img [leveys = 500] [korkeus = 260]").
Elementtien valinta sisällön perusteella
Tutki HTML-sivuelementtien javalitse haluamasi tuloksista - ainutlaatuinen jQuery-ominaisuus. Tätä menetelmää käyttämällä voit esimerkiksi tehdä jquery valitsimen kappaleen sisältämän tekstin perusteella (
teksti
).| Valitsin | Valintaesimerkki | Valitsimen kuvaus |
| : sisältää () | $ ("p: sisältää (" arvo ")") - valitsee kaikki kappaleet , jotka sisältävät merkkijonon "arvo". | Valitsee kohteen, joka sisältää määritetynlinja. Elementti on tyydyttävä, vaikka määritetty merkkijono on sen alaelementin sisällä. Muista, että tämä valitsin on kirjainkoko, joten merkkijono "text" ei vastaa määritettyä arvoa "TEXT" |
| : on () | $ ("p: has (b)") - valitsee kaikki elementit, jotka sisältävät . | Valitsee elementin, joka sisältää toisen suluissa ilmoitetun elementin. Tämä valitsin ottaa huomioon myös lapsielementit. |
| : vanhempi | $ ("p: parent") - valitsee kaikki <p>, jotka sisältävät jotain. | Valitsee elementin, joka sisältää mitä tahansa |
| : tyhjä | $ ("p: tyhjä") - valitsee kaikki tyhjät . | Valitsee kohteen, joka ei sisällä mitään. |
Kukin esitetyistä valitsimista valitsee tietyn elementin alla olevan kuvan koodista.
Tämä valintakytkin voidaan myös yhdistää muiden kanssa, esimerkiksi $ ("p.mail: sisältää (" e-mail ")") valitsee kaikki luokan "mail" kappaleet, jotka sisältävät merkkijonon "e-mail".
Jäsenten valinta hierarkian mukaan
Tämä menetelmä on täysin identtinen valitsimien kanssaCSS. Sen avulla voit valita elementtejä niiden sijainnin perusteella suhteessa sisarelementteihin DOM-rakenteessa. Tässä on parempi jäsentää jquery-valitsimet välittömästi esimerkkien avulla.
| Valintaesimerkki | Valitsimen kuvaus |
| $ ("ul> li") | Valitsee kaikki <li> -tagilla varustetut elementit, jotka ovat <ul>: n suoria jälkeläisiä (lapsia) |
| $ ("ul a") | Valitsee kaikki elementit, jotka on merkitty <a> ja jotka ovat minkä tahansa <ul> -tason jälkeläisiä |
| $ ("h1 + p") | Valitsee sisarelementin, joka on merkitty <p> heti <h1> jälkeen |
| $ ("li ~ a") | Valitsee elementin <a> -tagilla, joka seuraa välittömästi <li>, mutta he eivät välttämättä ole sisaruksia, mutta heillä on oltava yhteinen esi-isä |
| $ ("li: ensimmäinen lapsi") | Valitsee <li> -tagilla varustetun elementin, joka on vanhemmansa ensimmäinen lapsi, esimerkiksi <ul> |
| $ ("li: viimeinen lapsi") | Valitsee elementin, joka on merkitty <li>, joka on vanhemman viimeinen lapsi, esimerkiksi <ul> |
| $ ("li: n. lapsi (3)") | Valitsee elementin, joka on merkitty <li>, joka on vanhemman kolmas lapsi. Tripletin sijasta voit tietysti käyttää mitä tahansa muuta numeroa. |
| $ ("li: vain-lapsi") | Valitsee ne elementit, joissa on <li> -tagi, joiden vanhemmalla on vain suoria jälkeläisiä (lapsia) |
Erikseen kannattaa puhua jquery li -valitsimesta:n-lapsi (n), koska sen avulla voit määrittää enemmän kuin tiettyjä numeroita. Joten hän voi valita kaikki parilliset elementit, jos n: n sijaan määritetään vakio parillinen tai pariton, määritetään pariton. Voit myös käyttää lauseketta n: n sijasta, esimerkiksi $ ("li: nth-child (2n + 3)") valitsee jokaisen toisen elementin alkaen kolmannesta suorasta lapsesta.
Lomakekenttien käsittely
Syötetunnisteessa on monia erilaisia muunnelmia, riippuen toimivan tyypin attribuutista. JQuery tarjoaa erityiset valitsimet erityyppisten syöttökenttien valitsemiseksi.
| Valitsin | Valintaesimerkki | Valitsimen kuvaus |
| : -painike | $ ("input: painike") | Valitsee kaikki painikkeet |
| : valintaruutu | $ ("input: valintaruutu") | Valintaruudut |
| : tiedosto | $ ("input: tiedosto") | Tiedoston latauskentät |
| : kuva | $ ("input: kuva") | Kuvan syöttökentät |
| : Salasana | $ ("input: salasana") | Salasanakentät |
| : radio | $ ("input: radio") | Radiopainikkeet |
| : nollaus | $ ("input: reset") | Palauta painikkeet |
| : Lähetä | $ ("input: lähetä") | Lomakkeen lähetyspainikkeet |
| : teksti | $ ("input: teksti") | Kentät tekstille |
| : syöttö | $ (": input") | Kaikki lomakekentät |
| : tarkastettu | $ ("input: valittu") | Merkityt kentät valintaruuduissa tai valintanäppäimissä |
| : valittu | $ ("vaihtoehto: valittu") | Vaihtoehto-valikkokohdat |
| : liikuntarajoitteinen | $ ("input: pois käytöstä") | Poistettu käytöstä lomakekentät |
| : käytössä | $ ("input: käytössä") | Mukana olevat lomakekentät |
Sijainnin valinta
JQuery-sijainnin valitsin on hyvin samanlainen kuin hierarkian valitsin. Se valitsee elementin sijainnin perusteella edellistä ehtoa vastaavien elementtien luettelosta.
| Valitsin | kuvaus |
| : ensin | Toimii vastaavan luettelon ensimmäisen kohteen kanssa |
| : viimeinen | Luettelon viimeisen kohteen kanssa |
| : eq (n) | Valitsee elementin luettelosta hakemistonsa (n) perusteella. Huomio! JQuery select -ehtoa vastaavat elementit on numeroitu 0: sta! |
| : lt () | Valitsee kaikki elementit luettelosta elementtiin n |
| : gt () | Valitsee luettelosta kaikki elementit, jotka ovat sen indeksin n kanssa |
| : tasainen | Valitsee elementit, joilla on parillinen indeksinumero |
| : outo | Valitsee elementit, joilla on pariton indeksinumero |
Muut valitsimet
Näitä valitsimia ei voi kiinnittäämikä tahansa ryhmä, mutta ne eivät ole yhtä tärkeitä. Esimerkiksi valitsin: not (), jota voidaan kutsua loogiseksi arvoksi, antaa sinun "kääntää" ehtoa tai sen osaa valitsemalla sopimattomista olosuhteista.
Hyödyllinen on myös: piilotettu valitsin, joka laajentaa 0x0 px -elementtiä täyttämään koko näytön esimerkiksi painamalla painiketta.
| Valitsin | kuvaus |
| : ei () | Valitsee elementit, jotka eivät vastaa sulkeissa ilmoitettua ehtoa |
| : animoitu | Valitsee jQueryä tällä hetkellä animoivia elementtejä |
| : piilotettu | Valitsee elementit, joilla on näyttöominaisuus:none, kirjoita = "hidden" ja korkeus ja leveys 0px. Koskee myös elementtejä, jotka sisältävät piilotettuja elementtejä jollakin edellä mainituista tavoista. Huomio! Elementtiä, jonka näkyvyys on asetettu "piilotetuksi", ei sisälly jquery-valintaan |
| : näkyvä | Päinvastoin: piilotettu |
| : otsikko | Valitsee h1-, h2-, h3-, h4-, h5- ja h6-elementit |
Mikä on paras tapa käyttää valitsimia?
Sivuston optimointi on tärkeä tehtävä, koska alkaensen suorittamisen laatu riippuu palvelimen kuormituksesta, käyttäjän mukavuudesta sekä käyttöliittymän vasteajasta. JQueryn ja JavaScriptin komentosarjojen optimoinnista on kirjoitettu paljon kirjoja, mutta ne eivät kuulu tämän artikkelin piiriin. Annamme vain muutaman yksinkertaisen vinkin, jotka parantavat merkittävästi komentosarjojen suorituskykyä kohteita valittaessa.
- Yritä tulla toimeen jQuery-perusvalitsimien avulla.
- Kun valitset useita kohteita käsiteltäväksiyritä yhdistää ne johonkin ryhmään, älä valitse kutakin erikseen. Tämä voidaan tehdä luokan kautta tai käyttämällä tarkempia valitsimia.
- Käyttämällä valintaa sijainnin mukaan yritä minimoida luettelo, josta valinta tehdään, mahdollisimman paljon - tämä vähentää merkittävästi halutun elementin löytämisen nopeutta.
Esimerkki skripti jQuerystä ja sen valitsimista:
johtopäätös
Nyt kun tiedät ehdottomasti kaikki jQueryn valitsimet, toivomme, että esimerkit auttoivat sinua ymmärtämään kuinka rakentaa haluttu ehto useista eri valitsimista.
