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