Этот раздел содержит полный список селекторов, относящихся к последней библиотеке JavaScript jQuery. Все селекторы сгруппированы по категориям.

Базовые селекторы

Селектор Пример Описание
* $("*") Выбирает все элементы.
#id $("#foo") Выбирает все элементы с id="foo".
.class $(".bar") Выбирает все элементы с class="bar".
element $("p") Выбирает все элементы <p>.
selector1, selector2, selectorN $("h1, p.bar, span") Выбирает все элементы <h1>, <span> и элементы <p>, которые имеют class="bar".

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

Селектор Пример Описание
:first $("p:first") Выбирает первый элемент <p>.
:last $("p:last") Выбирает последний элемент <p>.
:even $("tr:even") Выбирает все четные элементы <tr>.
:odd $("tr:odd") Выбирает все нечетные элементы <tr>.
:eq() $("tr:eq(1)") Выбирает 2-й элемент <tr>, индекс начинается с нуля.
:not() $("p:not(:empty)") Выбирает все элементы <p> elements that are not empty.
:lt() $("ul li:lt(3)") Выбирает все элементы <li> с индексом меньше трех в соответствующем наборе (то есть выбирает 1-й, 2-й, 3-й элементы списка).
:gt() $("ul li:gt(3)") Выбирает все элементы <li> элементы с индексом больше трех в соответствующем наборе (то есть выбирает 4-й, 5-й, … элементы списка).
:header $(":header") Выбирает все элементы заголовков, т.е. <h1>, <h2>, <h3> и т.д.
:lang() $(":lang(en)") Выбирает все элементы которые имеют значение language «en«, т.е. lang="en", lang="en-us" и т.д.
:root $(":root") Выбирает корневой элемент документа <html>.
:animated $(":animated") Выбирает все элементы, которые анимируются во время запуска селектора.

Дочерние селекторы

Child Filter Selectors

Селектор Пример Описание
:first-child $("p:first-child") Выбирает все элементы <p>, которые являются первыми потомками своих родителей.
:last-child $("p:last-child") Выбирает все элементы <p>, которые являются последними потомками своих родителей.
:nth-child(n) $("p:nth-child(3)") Выбирает все элементы <p>, которые являются третьими дочерними элементами своих родителей.
:only-child $("p:only-child") Выбирает все элементы <p>, которые являются единственными потомками своих родителей.
:first-of-type $("p:first-of-type") Выбирает все элементы <p>, которые являются первыми элементами <p> родителя.
:last-of-type $("p:last-of-type") Выбирает все элементы <p>, которые являются последними элементами <p> родителя.
:only-of-type $("p:only-of-type") Выбирает все элементы <p> у которых нет братьев и сестер с тем же именем элемента.
:nth-last-child(n) $("p:nth-last-child(3)") Выбирает все элементы <p>, которые являются третьими дочерними по отношению к их родителю, считая от последнего элемента.
:nth-of-type(n) $("p:nth-of-type(2)") Выбирает все элементы <p>, которые являются 2-м <p> элементом от их родителя.
:nth-last-of-type(n) $("p:nth-last-of-type(2)") Выбирает все элементы <p>, которые являются 2-ыми дочерними элементами их родителя, считая от последнего элемента.

Селекторы для контента

Селектор Пример Описание
:contains() $('p:contains("Hello")') Выбирает все элементы <p>, содержащие текст «Hello».
:empty $("td:empty") Выбирает все пустые элементы <td>, т.е. не имеющие дочерних элементов, включая текст.
:has() $("p:has(img)") Выбирает все элементы <p>, которые содержат хотя бы один <img>.
:parent $(":parent") Выбирает все элементы у которых есть хотя бы один дочерний узел: элемент или текст.

Селекторы для форм

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

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

Селектор Пример Описание
[attribute] $("[href]") Выбирает все элементы с любым значением атрибута href.
[attribute="value"] $('a[target="_blank"]') Выбирает все элементы <a>, которые имеют атрибут target со значением "_blank".
[attribute="value"] $('a[target!="_blank"]') Выбирает все элементы <a>, которые не имеют атрибут target со значением "_blank".
[attribute$="value"] $('img[src$=".png"]') Выбирает все элементы <img>, которые имеют атрибут src со значением ".png".
[attribute|="value"] $('a[hreflang|="en"]') Выбирает все элементы <a>, которые имеют атрибут hreflang со значением "en" или начинающимся с "en" с последующим дефисом, как "en-US".
[attribute^="value"] $('img[title^="Smiley"]') Выбирает все элементы <img>, которые имеют атрибут title со значением, начинающимся точно со строки «Smiley».
[attribute~="value"] $('img[title~="Kites"]') Выбирает все элементы <img>, которые имеют атрибут title со значением, содержащим слово «Kites», разделенный пробелами.
[attribute*="value"] $('input[name*="male"]') Выбирает все элементы <input>, которые имеют атрибут name со значением, содержащим подстроку «male».

Селекторы иерархии

Селектор Пример Описание
parent > child $("ul > li") Выбирает все элементы <li>, которые являются прямыми потомками своего родителя <ul>.
ancestor descendant $("form label") Выбирает все элементы <label>, которые являются потомками своего предка <form>.
prev + next $("h1 + p") Выбирает все следующие элементы <p> после тега <h1>.
prev ~ siblings $("h1 ~ p") Выбирает все соседние элементы <p> после тега <h1>.

Селекторы видимости

Селектор Пример Описание
:hidden $("p:hidden") Выбирает все скрытые элементы <p>.
:visible $("p:visible") Выбирает все видимые элементы <p>.

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.