Селекторы jQuery

113
посл. ред. 02.01.2017

Как и в CSS, селекторы в jQuery используются для определения элемента или группы элементов. Все элементы, удовлетворяющие селектору, добавляютя в выборку (jQuery-объект), после чего с ними можно производить любые операции.

Шаблоны написания селекторов позаимствованы из CSS 1-3. Кроме того, в библиотеке jQuery добавлены собственные шаблоны, значительно упрощающие поиск необходимых элементов на странице.

Если в значении любого атрибута используются специальные символы ( !"#$%&'()*+,./:;<=>?@[\]^`{|}~), тогда при написании селектора эти символы должны экранироваться двумя обратными слешами \\.

$('input[value = 1.5]') /* неправильно */
$('input[value = 1\\.5]') /* правильно */

Простые селекторы

Ниже приводятся шаблоны простых селекторов с пояснениями.

Основные селекторы

Селектор Элемент
* Универсальный селектор для выбора всех элементов страницы.
tag Все элементы <tag> в документе (типовой селектор).
.classname Элементы, у которых атрибут class имеет значение из нескольких слов и одно из них classname.
#idname Элемент, чей атрибут id имеет значение idname.

Селекторы атрибутов

Селектор Элемент
[attr] Элементы с атрибутом attr.
[attr = "val"] Элементы, у которых атрибут attr имеет значение "val".
[attr != "val"] Элементы, у которых атрибут attr отсутствует или имеет значение, отличное от "val".
[attr ~= "val"] Элементы, у которых атрибут attr имеет значение из нескольких слов и одно из них "val".
[attr ^= "val"] Элементы, у которых атрибут attr начинается со строки "val".
[attr $= "val"] Элементы, у которых атрибут attr заканчивается строкой "val".
[attr *= "val"] Элементы, у которых атрибут attr содержит подстроку "val".
[attr |= "val"] Элементы, у которых атрибут attr имеет значение "val" или состоит из нескольких слов, разделенных дефисом, и первое из них "val".

Основные фильтры

Селектор Элемент
:eq() Элемент под указанным номером из всех выбранных.
:first Первый элемент из выбранных.
:last Последний элемент из выбранных.
:even Элементы с чётными индексами среди выбранных.
:odd Элементы с нечётными индексами среди выбранных.
:gt() Элементы с индексами, превышающими заданный.
:lt() Элементы с индексами, меньше заданного.
:root Корневой элемент документа. В HTML корневым является элемент <html>.
:header Элементы, являющиеся заголовками (<h1>, <h2> и т.д.).
:target Целевой элемент с идентификатором, если на него ссылается URL.
:animated Элементы, которые в момент поиска анимировались.
:focus Элемент, активный в данный момент.
:lang() Элементы с указанным языком содержимого.
:not() Все элементы, кроме тех, которые удовлетворяют указанному селектору.

Фильтры дочерних элементов

Селектор Элемент
:first-child Элементы, которые являются первыми среди всех сестринских элементов.
:last-child Элементы, которые являются последними среди всех сестринских элементов.
:nth-child() Элементы, которые расположены под определённым номером среди всех сестринских элементов.
:nth-last-child() Элементы, которые расположены под определённым номером среди всех сестринских элементов. Нумерация элементов начинается с конца.
:only-child Элементы, которые не имеют сестринских элементов.
:first-of-type Элементы, которые являются первыми среди выбранных сестринских элементов.
:last-of-type Элементы, которые являются последними среди выбранных сестринских элементов.
:nth-of-type() Элементы, которые расположены под определённым номером среди выбранных сестринских элементов.
:nth-last-of-type() Элементы, которые расположены под определённым номером среди выбранных сестринских элементов. Нумерация элементов начинается с конца.
:only-of-type В выборке остаются только те элементы, у которых все остальные сестринские элементы не попали в выборку.

Фильтры по содержимому

Селектор Элемент
:contains() Элементы, содержащие заданный текст (регистрозависимый поиск).
:empty Элементы, которые не имеют дочерних узлов (включая текстовые).
:has() Элементы, которые содержат хотя бы один элемент, удовлетворяющий указанному селектору.
:parent Элементы, которые имеют хотя бы один дочерний узел (включая текстовые).

Фильтры элементов форм

Селектор Элемент
:button Все простые кнопки, то есть элементы <button> и <input type="button">.
:input Все элементы форм: <input>, <textarea>, <select> и <button>.
:focus Элемент, активный в данный момент.
:checked Все выбранные в данный момент элементы типа "checkbox", "radio" и выбранные опции <option> элементов <select>.
:selected Все выбранные в данный момент опции <option> элементов <select>.
:disabled Все элементы форм, значения которых изменить нельзя.
:enabled Все элементы форм, значения которых можно изменить.
:checkbox Все элементы типа "checkbox".
:file Все элементы типа "file".
:image Все элементы типа "image".
:password Все элементы типа "password".
:radio Все элементы типа "radio".
:reset Все элементы типа "reset".
:submit Все элементы типа "submit".
:text Все элементы типа "text".

Фильтры видимости

Селектор Элемент
:hidden Все элементы, которые не отображены на странице, но присутствуют в дереве DOM. К ним относятся:
  • элементы с CSS-свойством display: none или с атрибутом hidden;
  • элементы форм с атрибутом type="hidden";
  • все дочерние элементы скрытых элементов.
:visible Все элементы, которые отображены на странице, даже если они имеют нулевые размеры.

Если необходимо выбрать элементы, которые удовлетворяют сразу нескольким простым селекторам, тогда простые селекторы записываются слитно, образуя цепочку простых селекторов. Каждая такая цепочка должна иметь не более одного типового (или универсального) селектора, который обязательно должен записываться первым. Если типовой селектор не указан, тогда по умолчанию используется универсальный селектор.

В цепочке простых селекторов нельзя использовать пробелы, так как пробел является комбинатором.

Комбинаторы

В таблице ниже представлены комбинаторы, которые можно использовать в селекторе (Sel1 и Sel2 - цепочки простых селекторов).

Комбинатор Элемент
Sel1 Sel2 Элемент Sel2, который является потомком элемента Sel1.
Sel1 > Sel2 Элемент Sel2, который является дочерним для элемента Sel1.
Sel1 ~ Sel2 Элемент Sel2, который является сестринским для элемента Sel1.
Sel1 + Sel2 Элемент Sel2, который является сестринским для элемента Sel1 и следует непосредственно за ним.

Группировка селекторов

Если необходимо выбрать элементы, удовлетворяющие разным селекторам, тогда селекторы можно сгруппировать для оптимизации кода. В этом случае селекторы записываются через запятую.

$('h1, .header')