3.13. Селекторы jQuery

Селекторы jQuery выбирают элементы веб-страницы, а методы выполняют операции с этими элементами.

Чтобы выбрать элементы, нужно передать селектор функции $(), например, $("img:odd"). Данный селектор будет применен ко всему дереву DOM, и чтобы ограничить процедуру отбора элементов, можно указать определенный фрагмент дерева DOM — $("img:odd", "div#slideshow"). Таким образом будут выбраны все четные картинки из блока с id=slideshow.

Для более точного выбора элементов селекторы можно комбинировать, например, следующая запись позволит выбрать все флажки полей формы, которые были выделены пользователем — $("input[type=checkbox][checked]").

А с помощью этой комбинации селекторов $("input:checkbox:checked:enabled") можно выбрать только активные и отмеченные флажки полей формы.

Также, допускается объединять несколько селекторов в одно выражение, разделяя селекторы запятой — $("p,span"), что позволит отобрать все элементы <p> и <span>.

Таблица 1. Селекторы jQuery
Селектор Описание, пример
Элемента Выбирает все элементы данного типа на странице, например, $("div").
Элемент1 элемент2 Выбирает все элементы2, вложенные непосредственно в элемент1, например, $("p img").
Класса Выбирает все элементы заданного класса, например, $(".sidebar").
Идентификатора Выбирает элемент с указанным идентификатором, например, $("#main").
Элемент класс Выбирает из элементов данного типа только те элементы, которым назначен указанный класс, например, $("p.first").
Потомка Выбирает все указанные элементы выбранного селектора, например, $(".sidebar a").
Дочерние Выбирает элементы, соответствующие второму селектору, которые содержатся непосредственно внутри первого селектора, являющиеся дочерними по отношению к нему, например, $("body > p").
Сестринские Выбирает элементы, соответствующие второму селектору, идущие непосредственно за первым элементом, являющимся для него сестринским, например, $("h2 + p").
Выбирает элементы, соответствующие второму селектору, являющиеся сестринскими по отношению к первому элементу и расположенные после него, например, $("h2 ~ p").
Атрибута Выбирает все элементы, которые содержат данный атрибут или указанно значение атрибута, например, $("img[alt]"), $("a[href]"), $("input[type='text']").
Выбирает все элементы, начинающиеся с определенного значения, например, $("a[href^='http://']").
Выбирает все элементы, заканчивающиеся на определенное значение, например, $("a[href$='.pdf']").
Выбирает все элементы, содержащие в любом месте определенное значение, например, $("a[target*='blank']").
:even Выбирает элементы по четным значениям индекса 0, 2, 4…, т.е. выбирает 1, 3, 5… элементы, например, $("li:even").
:odd Выбирает элементы по нечетным значениям индекса, т.е. выбирает 0, 2, 4… элементы.
:first Выбирает только один элемент, первый из подходящих, например, $("p:first").
:last Выбирает только один элемент, последний из подходящих.
:first-child Выбирает элементы, которые являются первыми дочерними элементами своих родителей.
:last-child Выбирает элементы, которые являются последними дочерними элементами своих родителей.
:only-child Выбирает элементы, являющиеся единственными дочерними элементами своих родителей.
:nth-child(n) Выбирает элементы, которые являются n-дочерними элементами своих родителей.
:nth-child(Xn+Y) Выбирает n-элемент, порядковый номер которого рассчитывается по формуле в круглых скобках.
:nth-of-type(n) Выбирает элементы, являющиеся n-ми дочерними элементами данного типа для своих родителей.
:parent Выбирает непустые элементы, которые имеют вложенные (дочерние) элементы, а также содержащие текст.
:eq(n) Выбирает элементы с индексом n, при этом индексы отсчитываются от нуля.
:gt(n) Выбирает все элементы, индекс которых больше n, индексы отсчитываются от нуля.
:lt(n) Выбирает все элементы, расположенные перед n-элементом, не включая n-элемент.
:not(селектор) Позволяет выбрать элемент, не соответствующий данному типу селектора, например, $("a:not(.link)"), $("a:not([href$='.pdf'])").
:has(селектор) Выбирает элементы, которые содержат внутри себя указанный селектор, например, элементы списка, содержащие внутри себя ссылки: $("li:has(a)").
:contains(текст) Выбирает элементы, которые содержат указанный в скобках текст, например, $("a:contains(Скачать)").
:hidden Выбирает скрытые элементы, для которых установлено значение display: none;, а также элементы форм со значением type="hidden" например, $("ul:hidden").show() — делает скрытые элементы видимыми.
:visible Выбирает видимые элементы, к видимым элементам относятся элементы, размеры которых больше нуля, а также элементы со значением visibility: hidden и opacity: 0.
:active Выбирает элемент, который активизирован пользователем, например, с помощью щелчка мыши.
:checked Выбирает только отмеченные флажки или радиокнопки.
:focus Выбирает элемент, находящийся в фокусе.
:hover Выбирает элемент, на который наведен указатель мыши.
:disabled Выбирает неактивные элементы (форм).
:enabled Выбирает активные элементы (форм).
:empty Выбирает элементы, не содержащие дочерних элементов.
:target Выбирает элементы, на которые ссылается идентификатор фрагмента в url-адресе.
:animated Выбирает все анимируемые в данный момент элементы.
:button Выбирает все кнопки input[type=submit], input[type=reset], input[type=button], button.
:checkbox Выбирает элементы-флажки input[type=checkbox].
:file Выбирает элементы типа file, input[type=file].
:header Выбирает элементы-заголовки от h1 до h6.
:image Выбирает изображения в элементах форм input[type=image].
:input Выбирает элементы форм input, select, textarea, button.
:password Выбирает элементы ввода пароля input[type=password].
:radio Выбирает радиокнопки input[type=radio].
:reset Выбирает кнопки сброса input[type=reset], button[type=reset].
:selected Выбирает выделенные элементы option.
:submit Выбирает кнопки отправки формы input[type=submit], button[type=submit].
:text Выбирает элементы ввода текстаinput[type=text].

Поделиться: