„jQuery“ gali pasirinkti viską, ką gali pasirinkti CSS3. Bet tuo viskas nesibaigia! „JQuery“ siūlo keletą papildomų selektorių (per „Sizzle“ selektoriaus variklį), kurie kartais yra gana naudingi. Pavyzdžiui, CSS turi atributų parinkiklius, leidžiančius pasirinkti elementą pagal bet kokį savavališką atributą, kurį elementas gali turėti. Pavyzdžiui:
Yra CSS selektorius, kurį galime naudoti „jQuery“ norėdami pasirinkti:
$("(data-whatever='elephant-eyeballs')");Atributų parinkiklyje yra variantų, pvz., Vietoj to, =kad ^=galėtumėte nurodyti „prasideda nuo šios vertės“. Bet dėl tam tikrų priežasčių CSS neturi! = Arba „nėra lygus šiai vertei“. „jQuery“ daro! Tai yra „jQuery“ selektoriaus plėtinio pavyzdys.
Šių selektoriaus plėtinių yra daug. Keletas, apie kuriuos mes konkrečiai kalbame šiame ekrane:
- : eq () - 0 indeksuota n-vaiko () versija
- : lyginis - spartusis klavišas: n-tasis vaikas (lyginis)
- : gt (n) - pasirinkite elementus, kurių indeksas didesnis nei n. Taip pat nuoroda į sudėtingesnį: n-asis vaikas () forumla.
Galbūt pats naudingiausias parinkiklio išplėtimas yra: has () - kuris apriboja pasirinkimą tiems elementams, kuriuose yra tai, ką jūs perduodate šį pseudo selektorių (ar tai yra pseudo pseudo selektorius :) Tikėtina, kad kada nors ateityje CSS turės kažką panašaus tai mums (manau, kad taip bus pre ! code), bet tai dar toli. Deja, šiame ekrane nepateikiu labai įtikinamų argumentų, tačiau žinosite, kada jums to reikės! Pvz., „Pasirinkite visus .modulius, kuriuose yra baras„ h3.sports-bar “- toks dalykas.
Jei norite, taip pat galite padaryti savo pasirinkimo plėtinius. Štai straipsnis apie tai. Pavyzdys yra padaryti, :inviewkuris pasirenka elementą tik tuo atveju, jei jis yra matomas puslapyje dabartinėje slinkties vietoje. Tai būtų taip:
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); ) ));
