Этот раздел содержит полный список селекторов, относящихся к последней библиотеке 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>.

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

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

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

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