jQuery valitsimet
- Edellinen sivu jQuery syntaksi
- Seuraava sivu jQuery tapahtumat
Valitsimet sallivat sinun suorittaa toimintoja elementtiyhmille tai yksittäisille elementeille.
jQuery valitsimet
Edellisissä luvuissa olemme esitelleet joitakin esimerkkejä siitä, miten HTML-elementtejä valitaan.
Avainkohta on oppia, miten jQuery-valitsimet valitsevat tarkasti elementit, joihin haluat soveltaa vaikutuksia.
jQuery elementti- ja ominaisuusvalitsimet sallivat sinun valita HTML-elementtejä tagin, ominaisuuden tai sisällön perusteella.
Valitsimet sallivat sinun suorittaa toimintoja HTML-elementti-ryhmille tai yksittäisille elementeille.
HTML DOM -termeissä:
Valitsimet sallivat sinun suorittaa toimintoja DOM-elementti-ryhmille tai yksittäisille DOM-solmuille.
jQuery elementti-valitsimet
jQuery käyttää CSS-valitsimia valitakseen HTML-elementtejä.
$("p") valitsee <p> -elementit.
$("p.intro") valitsee kaikki class="intro" - <p> -elementit.
$("p#demo") valitsee kaikki id="demo" - <p> -elementit.
jQuery ominaisuusvalitsimet
jQuery käyttää XPath-lausekkeita valitakseen elementtejä, joilla on annettu ominaisuus.
$("[href]") valitsee kaikki href-ominaisuudet
$("[href='#']") valitsee kaikki href-arvot, jotka ovat "#"
$("[href!='#']") valitsee kaikki href-arvot, jotka eivät ole "#"
$("[href$='.jpg']") valitsee kaikki href-arvot, jotka päättävät ".jpg"
jQuery CSS-valitsimet
jQuery CSS-valitsimet voidaan käyttää HTML-elementtien CSS-ominaisuuksien muuttamiseen.
Seuraavassa esimerkissä kaikki p-elementtien taustaväri muutetaan punaiseksi:
Esimerkki
$("p").css("background-color","red");
Lisää valitsinmalleja
| Syntaksi | Kuvaus |
|---|---|
| $(this) | Nykyinen HTML-elementti |
| $("p") | Kaikissa <p> -elementissä |
| $("p.intro") | Kaikissa class="intro" - <p> -elementissä |
| $(".intro") | Kaikissa class="intro" -elementissä |
| $("#intro") | id="intro" -elementti |
| $("ul li:first") | Jokaisen <ul> -elementin ensimmäinen <li> -elementti |
| $("[href$='.jpg']") | Kaikissa href-ominaisuuksissa, jotka päättävät ".jpg" |
| $("div#intro .head") | id="intro" -elementin kaikissa class="head" -elementissä |
Täydellinen referenssikirja löytyy vierailemalla jQuery valitsinreferenssikirja.
- Edellinen sivu jQuery syntaksi
- Seuraava sivu jQuery tapahtumat
