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