jQuery poate selecta orice poate selecta CSS3. Dar nu se oprește aici! Există o serie de selectoare suplimentare pe care jQuery le oferă (prin intermediul motorului de selecție Sizzle) care sunt destul de utile uneori. De exemplu, CSS are selectoare de atribute care vă permit să selectați un element pe baza oricărui atribut arbitrar pe care îl poate avea elementul. De exemplu:
Există un selector CSS pe care îl putem folosi în jQuery pentru a selecta că:
$("(data-whatever='elephant-eyeballs')");Există variații în selectorul de atribute, cum ar fi în loc =să faceți ^=pentru a indica „începe cu această valoare”. Dar, dintr-un anumit motiv, CSS nu are! = Sau „nu este egal cu această valoare”. jQuery face! Acesta este un exemplu de extensie jQuery selector.
Există o mulțime de aceste extensii de selecție. Câteva despre care vorbim în mod specific în acest screencast:
- : eq () - o versiune 0 indexată a: nth-child ()
- : par - comandă rapidă pentru: al n-lea copil (par)
- : gt (n) - selectați elemente cu un indice mai mare decât n. De asemenea, o comandă rapidă pentru un forumla mai complex: nth-child ().
Este posibil ca cea mai utilă extensie a selectorului dintre toate să fie: has () - care limitează selecția la elementele care conțin ceea ce treceți acest pseudo selector (sau este un pseudo pseudo selector :) Este posibil ca într-o zi în viitor CSS să aibă ceva de genul asta pentru noi (cred că va fi așa pre ! code), dar asta e departe. Din păcate, nu fac un argument foarte convingător pentru aceasta în acest ecran, dar veți ști când veți avea nevoie! De exemplu, „Selectați toate .modulurile care conțin o bară h3.sports” - genul acesta de lucruri.
De asemenea, puteți face propriile extensii de selecție, dacă doriți. Iată un articol despre asta. Exemplul este de a face :inviewcare selectează un element numai dacă este vizibil pe pagină în poziția curentă de derulare. Ar fi așa:
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); ) ));