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), але це ще далеко. На жаль, я не навожу дуже вагомих аргументів для цього в цій трансляції, але ви будете знати, коли вам це потрібно! Наприклад, "Виберіть усі модулі., Які містять h3.sports-bar" - подібні речі.
Ви також можете зробити власні розширення для вибору, якщо хочете. Ось стаття про це. Прикладом є make, :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); ) ));