jQuery môže vybrať čokoľvek, čo môže vybrať CSS3. Tým to však nekončí! Existuje množstvo ďalších selektorov, ktoré jQuery ponúka (prostredníctvom nástroja na výber Sizzle), ktoré sú niekedy veľmi užitočné. Napríklad CSS má selektory atribútov, ktoré vám umožňujú vybrať element na základe ľubovoľného atribútu, ktorý by element mohol mať. Napríklad:
Existuje výber CSS, ktorý môžeme v jQuery použiť na výber tohto:
$("(data-whatever='elephant-eyeballs')");Selektor atribútov obsahuje variácie, napríklad namiesto nich =môžete ^=označiť „začína touto hodnotou“. Ale z nejakého dôvodu nemá CSS! = Alebo „nerovná sa tejto hodnote“. jQuery áno! Toto je príklad rozšírenia selektora jQuery.
Existuje veľa týchto rozšírení selektora. Niekoľko z nich, o ktorých konkrétne hovoríme v tomto vysielaní:
- : eq () - verzia s 0 indexmi: nth-child ()
- : even - shortcut for: nth-child (even)
- : gt (n) - vyberte prvky s väčším indexom ako n. Tiež skratka pre zložitejšie: nth-child () forumla.
Možno najužitočnejším rozšírením selektora zo všetkých je: has () - ktoré obmedzuje výber na prvky, ktoré obsahujú to, čo odovzdáte tomuto pseudo selektoru (alebo je to pseudo pseudo selektor :) Je pravdepodobné, že niekedy v budúcnosti bude mať CSS niečo ako toto pre nás (myslím si, že to bude ako pre ! code), ale to je ešte ďaleko. Bohužiaľ v tomto obrazovom vysielaní za to nedávam veľmi presvedčivý argument, ale budete vedieť, kedy to budete potrebovať! Napríklad „Vyberte všetky .moduly, ktoré obsahujú h3.sports-bar“ - také veci.
Ak chcete, môžete si tiež vytvoriť vlastné rozšírenia pre výber. Tu je článok o tom. Príkladom je vytvorenie, :inviewktoré vyberie prvok, iba ak je viditeľný na stránke v aktuálnej polohe posúvania. Bolo by to takto:
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); ) ));