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>.
| Селектор | Описание, пример |
|---|---|
| Элемента | Выбирает все элементы данного типа на странице, например, $("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]. |