jQuery поддерживает все стандартные селекторы CSS и псевдоклассы и псевдоэлементы CSS.
Кроме того, jQuery поддерживает нестандартные селекторы (псевдоклассы). Их список с описанием приведен ниже. Под таблицами находятся примеры использования.
:first | Выбирает первый найденный элемент. |
:last | Выбирает последний найденный элемент. |
:eq(номер) | Выбирает элемент идущий под заданным номером среди выбранных. |
:lt(число) | Выбирает элементы с номером в наборе меньшим, чем заданное число. |
:gt(число) | Выбирает элементы с номером в наборе превышающим заданное число. |
:even | Выбирает элементы с четными номерами позиций в наборе выбранных элементов. |
:odd | Выбирает элементы с нечетными номерами позиций в наборе выбранных элементов. |
:header | Выбирает заголовки (теги h1, h2, h3, h4, h5, h6). |
:has(селектор) | Выбирает элементы, которые содержат хотя бы один элемент по заданному селектору. |
:contains(текст) | Выбирает элементы, содержащие заданный текст. |
:parent | Выбирает элементы, являющиеся родителями (то есть непустые элементы). |
:empty | Выбирает элементы без содержимого (без текста и других элементов). |
:animated | Выбирает элементы, которые в данный момент задействованы в анимации. |
:hidden | Выбирает невидимые элементы страницы. |
:visible | Выбирает видимые элементы страницы. |
Формы
:button | Выбирает кнопки: тег button или инпут с типом button. |
:radio | Выбирает радио переключатели. |
:checkbox | Выбирает чекбоксы. |
:text | Выбирает инпуты с типом text. |
:password | Выбирает поля для ввода пароля. |
:file | Выбирает элементы, являющиеся полями загрузки файлов. |
:submit | Выбирает элементы, являющиеся кнопками отправки формы. |
:reset | Выбирает элементы, являющиеся кнопками очистки формы. |
:image | Выбирает элементы, являющиеся изображениями для отправки формы (input типа image). |
:input | Выбирает элементы формы: теги input, textarea или button. |
:selected | Выбирает элементы с атрибутом selected. |
Как пользоваться
Рассмотрим псевдокласс :first, который позволяет выбрать первый элемент в наборе jQuery. Давайте с его помощью найдем первый <li> на странице:
$('li:first');
Сравните со стандартным псевдоклассом :first-child:
$('li:first-child');
С помощью :first-child мы найдем все li, которые являются первыми потомками своих родителей, а с помощью :first мы найдем первый li среди выбранных (так как выбирали мы все li, то по сути мы найдем первый li на странице).
То есть :first и другие подобные селекторы jQuery работают так: находят все элементы по заданному селектору, а затем берут первый элемент среди найденных.
Аналогичным образом работает :last, только он находит не первый элемент, а последний.
С помощью :eq мы можем выбрать элемент с любым номером в наборе, к примеру, таким образом - :eq(3) - мы выберем третий найденный элемент.
С помощью :lt и :gt можно выбирать элементы с номером, меньшим или большим заданного числа соответственно. К примеру, так - :lt(3) - мы выберем элементы с номером, меньшим трех, то есть элементы номер 2, 1 и 0.
С помощью :even и :odd можно выбирать четные и нечетные элементы в наборе.
Еще полезные селекторы jQuery
Кроме селекторов по набору элементов, jQuery предоставляет нам некоторые другие полезные вещи, которых нет в CSS.
Псевдокласс :header
Например, псевдокласс :header выбирает одновременно все заголовки от h1 до h6.
Псевдокласс :has
Псевдокласс :has выбирает элементы по их содержимому. К примеру, можно выбрать так: все абзацы, внутри которых есть теги b:
<p>Абзац с тегом <b>b</b>.</p>
<p>Абзац с тегом <i><b>b</b></i>.</p>
<p>Абзац без b.</p>
$('p:has(b)')
Обратите внимание на то, что в примере выберется как первый абзац, так и второй, не смотря на то, что во втором абзаце тег b не лежит непосредственно внутри p, а лежит сначала в i.
Если же вам нужна непосредственная вложенность, то следует сделать так:
<p>Абзац с тегом <b>b</b>.</p>
<p>Абзац с тегом <i><b>b</b></i>.</p>
<p>Абзац без b.</p>
$('p:has(>b)')
В этом случае будет выбран только первый абзац.
Псевдокласс :contains
Псевдокласс :contains выбирает элементы по наличию определенного текста в них.
В следующем примере мы выберем абзац, внутри которого есть слово "текст":
<p>Слово "текст".</p>
<p>Просто абзац.</p>
$('p:contains("текст")')
С помощью :contains() элемент будет выбран, если строка присутствует непосредственно внутри него или если она находится внутри одного из его потомков.
Псевдоклассы :empty и :parent
Псевдокласс :empty позволяет выбрать все пустые элементы (в которых нету текста), а псевдокласс :parent - наоборот, все непустые (parent потому что он выбирает все элементы, являющиеся родителями).