jQuery може да избере всичко, което CSS3 може да избере. Но това не спира дотук! Има редица допълнителни селектори, които jQuery предлага (чрез механизма за избор на Sizzle), които са доста полезни понякога. Например CSS има селектори на атрибути, които ви позволяват да изберете елемент въз основа на произволен атрибут, който елементът може да има. Например:
Има CSS селектор, който можем да използваме в jQuery, за да изберем това:
$("(data-whatever='elephant-eyeballs')");Има варианти на селектора на атрибути, като вместо да =можете да направите, за ^=да посочите „започва с тази стойност“. Но по някаква причина CSS няма! = Или „не е равна на тази стойност“. jQuery прави! Това е пример за разширение на jQuery селектор.
Има много от тези разширения на селектора. Няколко, за които конкретно говорим в този екран:
- : eq () - 0-индексирана версия на: nth-child ()
- : even - пряк път за: nth-child (even)
- : gt (n) - изберете елементи с по-голям индекс от n. Също така пряк път за по-сложен: nth-child () forumla.
Вероятно най-полезното разширение на селектора от всички е: has () - което ограничава селекцията до елементи, които съдържат това, което подавате на този псевдо селектор (или е псевдо псевдо селектор :) Вероятно някой ден в бъдеще CSS ще има нещо като това за нас (мисля, че ще бъде като pre ! code), но това е много далеч. За съжаление не давам много убедителен аргумент за това в този скрийнст, но ще разберете кога имате нужда! Например „Изберете всички .module, които съдържат h3.sports-bar“ - такива неща.
Можете също така да направите свои собствени разширения за избор, ако желаете. Ето статия за това. Примерът е да се направи, :inviewкойто избира елемент само ако е видим на страницата в текущата позиция на превъртане. Би било така:
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); ) ));