Грамматика селекторов делится на три уровня. Вы наверняка уже встречались с простейшими видами селекторов ранее. Селектор «#test» выбирает элемент с атрибутом id, имеющим значение «test». Селектор «blockquote» выбирает все элементы
<blockquote>
в документе, а селектор «div.note» выбирает все элементы
<div>
с атрибутом class, имеющим значение «note». Простые селекторы можно объединять в «комбинированные селекторы», такие как «div.note>p» и «block-quote і», отделяя их символом-комбинатором. И простые, и комбинированные селекторы можно группировать в списки, отделяя их точкой с запятой. Такие группы селекторов являются наиболее универсальной разновидностью селекторов, обычно передаваемых функции
$
. Прежде чем перейти к обсуждению комбинированных селекторов
и групп селекторов, необходимо познакомиться с синтаксисом простых селекторов.
19.8.1.1. Простые селекторы
Простой селектор начинается (явно или неявно) с имени тега. Если, к примеруг интерес представляют только элементы
<р>,
простой селектор должен начинаться с «р». Если требуется выбрать элементы независимо от имени тега, используется шаблонный символ «*». Если селектор не начинается с имени тега или шаблонного символа, подразумевается присутствие шаблонного символа.
Имя тега или шаблонный символ определяют начальное множество элементов документа, кандидатов на выбор. Фрагмент селектора, следующий за определением имени тега, состоит из нуля или более фильтров. Фильтры применяются слева направо, в порядке их следования, и каждый из них сужает множество выбранных элементов. Фильтры, поддерживаемые библиотекой jQuery, см. в табл. 19.1.
Обратите внимание, что некоторые из фильтров, перечисленных в табл. 19.1, принимают аргументы в круглых скобках. Следующий селектор, например, выберет абзацы, которые являются первыми или каждыми третьими дочерними элементами своих родителей при условии, что они содержат слово «JavaScript» и не содержат элемент
<а>
.
p:nth-child(3n+1):text(JavaScript):not(:has(a))
Обычно фильтры действуют более эффективно, если им предшествует имя тега. Например, вместо использования простого фильтра «:radio» для выбора радиокнопок лучше использовать селектор «input:radio». Исключение составляют фильтры, проверяющие значение атрибута
id
, которые наиболее эффективно действуют, когда они употребляются автономно. Например, селектор «#address» обычно действует эффективнее, чем более явный селектор «form#address».
19.8.1.2. Комбинированные селекторы
Простые селекторы могут объединяться с использованием специальных операторов, или «комбинаторов», для представления отношений между элементами в дереве документа. В табл. 19.2 перечислены комбинированные селекторы, поддерживаемые библиотекой jQuery. Эти же комбинированные селекторы поддерживаются стандартом CSS3.
Ниже приводится несколько примеров комбинированных селекторов:
"blockquote і" // Соответствует элементу <і> в элементе <blockquote>
"ol > li" // Элемент <li>, прямой потомок элемента <ol>
"#output + *" // Братские элементы, следующие за элементом с id="output"
"div.note > hi + р" // Элемент <р>, следующий за <h1> в <div class="note">
Обратите
внимание, что комбинированные селекторы не ограничены комбинациями из двух селекторов: допустимыми являются также комбинации из трех и более селекторов. Обработка комбинированных селекторов выполняется слева направо.
19.8.1.3. Группы селекторов
Группа селекторов, которая является разновидностью селекторов, передаваемых функции
$
(или используемых в таблицах стилей), - это просто список простых или комбинированных селекторов, разделенных запятыми. Группе селекторов соответствуют все элементы, которые соответствуют любому из комбинированных селекторов в группе. С позиции нашего обсуждения даже простой селектор можно рассматривать как комбинированный. Ниже приводится несколько примеров групп селекторов:
"h1, h2, h3" // Соответствует элементам <h1>, <h2> и <h3>
"#р1, #р2, #р3” // Соответствует элементам с id, равным р1, р2 и р3
"div.note, p.note" // Соответствует элементам <div> и <р> с class="note"
"body>p,div.note>p" // , вложенный в <body>, и <div class="note">
Обратите внимание, что синтаксис селекторов CSS и jQuery позволяет использовать круглые скобки в некоторых фильтрах в простых селекторах, но не допускает более обобщенного их использования для группировки селекторов. Нельзя поместить группу селекторов или комбинированный селектор в скобки и интерпре тировать их как простой селектор, например:
(hi. h2, h3)+p // Недопустимо
h1+p, h2+p, h3+p // Следует использовать этот вариант
19.8.2. Методы выбора
В дополнение к грамматике селекторов, поддерживаемой функцией
$
, библиотека jQuery определяет несколько методов выбора. Большинство методов из библиотеки jQuery, с которыми мы встречались в этой главе до сих пор, выполняют некоторые операции над выбранными элементами. Методы выбора отличаются от них: они изменяют множество выбранных элементов, фильтруя, расширяя или используя его в качестве отправной точки для нового выбора.
В данном разделе описываются эти методы выбора. Здесь вы увидите, что многие методы реализуют те же функциональные возможности, которые обеспечивает грамматика селекторов.
Самой простой является операция фильтрации выбора по позициям элементов в выбранном множестве. Метод
first
возвращает объект
jQuery
, содержащий только первый выбранный элемент, а метод
last
возвращает объект
jQuery
, содержащий только последний выбранный элемент. Более обобщенный метод
eq
возвращает объект
jQuery
, содержащий единственный выбранный элемент с указанным индексом. (В версии jQuery 1.4 допускается использовать отрицательные индексы, в этом случае отсчет начинается с конца выбранного множества.) Обратите внимание, что эти методы возвращают объект
jQuery
с единственным элементом, что отличает их от обычной операции индексирования массива, которая возвращает единственный элемент без объекта
jQuery
, обертывающего его:
var paras = $("р");
paras.fіrst // Выберет только первый элемент <р>
paras.last // Выберет только последний элемент <р>
paras.eq(1) // Выберет второй элемент <р>
paras.eq(-2) // Выберет второй с конца элемент <р>