Базовые и иерархические селекторы

Как видно из предыдущей главы, одной из сильных сторон фреймворка jQuery является мощный "движок" отбора CSS. Его задача заключается в выборе конкретных элементов в документе, для последующей работы с методами jQuery.

Начиная с версии 1.3 создатель jQuery Джон Резиг, решил переписать и сделать независимым код, который сейчас является отдельноым проектом jQuery. По его мнению, двигатель Sizzle может расти независимо от jQuery и, возможно, полагаться на поддержку со стороны других команд, чтобы улучшить ее и без того отличные характеристики.

И так, перейдем к практике: как мы видели ранее, для выбора элементов в документе, будет достаточно идентифицировать их с помощью селектора CSS (то же самое что вы использовали бы в таблице стилей) и передать строку функции $:



теперь в объекте jQuery будут доступны все элементы list из menu

jQuery, помимо всего спектра CSS3 селекторов, включает в себя некоторые специальные фильтры, которые могут значительно упростить нам жизнь ;)

Базовые селекторы

Во-первых, вы можете использовать простые селекторы (все комбинации тегов, классы и ID):




Как и в правилах таблиц стилей CSS, можем указать несколько селекторов одновременно:




Ну и наконец, можно выбрать все элементы документа:



Иерархические селекторы

Другой возможностью является использование иерархических селекторов, чтобы искать элементы внутри других элементов, а не в рамках всего документа. Самый изветный иерархический переключатель, несомненно это "родитель > наследник":




Однако jQuery поддерживает другие селекторы, которые часто могут быть очень полезны, такие селекторы как "родитель > наследник" в которых можно выбирать только те элементы, которые содержатся напрямую в родительском элементе:



Более интересными являются селекторы "предыдущий + следующий", в которых все элементы выбираются непосредственно из определенного предыдущего элемента:




или же "предыдущий ~ соседний" который выбирает все соседние элементы (т.е. вокруг него) :


Наглядный пример