jQuery voi valita kaiken, minkä CSS3 voi valita. Mutta se ei pysähdy tähän! JQuery tarjoaa useita lisävalitsimia (Sizzle-valitsimen kautta), jotka ovat joskus melko hyödyllisiä. Esimerkiksi CSS: ssä on määritteen valitsimet, joiden avulla voit valita elementin minkä tahansa mielivaltaisen attribuutin perusteella. Esimerkiksi:
On CSS-valitsin, jota voimme käyttää jQueryssä valitsemaan sen:
$("(data-whatever='elephant-eyeballs')");Määritevalitsimessa on muunnelmia, kuten sen sijaan, =että voit tehdä ^=ilmaisemaan "alkaa tällä arvolla". Mutta jostain syystä CSS: llä ei ole! = Tai "ei ole yhtä suuri kuin tämä arvo". jQuery tekee! Tämä on esimerkki jQuery-valitsimen laajennuksesta.
Näitä valitsinlaajennuksia on paljon. Muutama, joista puhumme nimenomaan tässä kuvaruudussa:
- : eq () - 0-indeksoitu versio: nth-child ()
- : parillinen - pikakuvake: n. lapsi (parillinen)
- : gt (n) - valitse elementit, joiden indeksi on suurempi kuin n. Myös pikakuvake monimutkaisemmalle: nth-child () forumla.
Mahdollisimman hyödyllinen valintalaajennus kaikista: tämä meille (luulen, että se tulee olemaan pre ! code), mutta se on kaukana. Valitettavasti en esitä kovin vakuuttavaa argumenttia sille tässä kuvaruudussa, mutta tiedät milloin tarvitset sitä! Esimerkiksi "Valitse kaikki .moduulit, jotka sisältävät h3.sports-palkin" - tällainen asia.
Voit myös tehdä omat valintalaajennuksesi, jos haluat. Tässä on artikkeli siitä. Esimerkki on tehdä :inviewmikä valitsee elementin vain, jos se näkyy sivulla nykyisessä vierityskohdassa. Se olisi näin:
jQuery.extend(jQuery.expr(':'), ( inview: function (el) ( var $e = $(el), $w = $(window), top = $e.offset().top, height = $e.outerHeight(true), windowTop = $w.scrollTop(), windowScroll = windowTop - height, windowHeight = windowTop + height + $w.height(); return (top > windowScroll && top < windowHeight); ) ));