В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для манипуляций с элементами в документе.
Описание всех селекторов на api.jquery.com .
Если в названии класса или атрибута есть спец-символы (!"#$%&'()*+,./:;<=>?@[]^`{|}~
), то они должны экранироваться.
Например, для элемента с id="foo.bar"
, будет такой селектор $("#foo\.bar")
.
$("*")
Все теги
$("p")
Все <p>
$("h1,div,p")
Все <h1>
, <div>
, <p>
$(":header")
Все заголовки <h1>
, <h2>
...
$("#lastname")
Элемент с id="lastname"
$(".intro")
Все элементы с class="intro"
$(".intro,.demo")
Все элементы с классами «intro», «demo»
$(".intro.demo")
Все элементы с классом «intro» и «demo»
$(".intro .demo")
Все элементы с классом «demo», которые находится внутри «intro»
$("div > p")
Все <p>
, которые являются прямыми потомками <div>
$("div p")
Все <p>
, которые являются потомками <div>
$("div + p")
<p>
, которые идут за <div>
$("div ~ p")
Все <p>
, которые идут за <div>
, в общем родителе
$("[href]")
Все элементы с атрибутом href
$("[href][title]")
Все элементы с атрибутами href
и title
$("[href='default.htm']")
Все элементы с атрибутом href="default.htm"
$("[href!='default.htm']")
Все элементы с атрибутом href
, но без значения «default.htm»
$("[href$='.jpg']")
Все элементы с атрибутом href
, с значением по маске «.jpg»
$("[title|='Tomorrow']")
Все элементы с атрибутом title
, равным «Tomorrow» или начинающемуся с «Tomorrow», за которым следует дефис
$("[title^='Tom']")
Все элементы с атрибутом title
, начинающимся с «Tom»
$("[title~='hello']")
Все элементы с атрибутом title
, содержащим определенное слово «hello»
$("[title*='hello']")
Все элементы с атрибутом title
, содержащим слово «hello»
$("p:first")
Первый <p>
$("p:last")
Последний <p>
$("tr:even")
Четные <tr>
$("tr:odd")
Нечетные <tr>
Поиск в родителе
$("div p:first-child")
Первый <p>
в <div>
$("div p:first-of-type")
Первый <p>
в <div>
, игнорируя другие элементы
$("div p:last-child")
Последний <p>
в <div>
$("div p:last-of-type")
Последний <p>
в <div>
, игнорируя другие элементы
$("div p:nth-child(2)")
Второй <p>
в <div>
$("div p:nth-last-child(2)")
Второй с конца <p>
в <div>
$("div p:nth-of-type(2)")
Второй <p>
в <div>
, игнорируя другие элементы
$("div p:nth-last-of-type(2)")
Второй с конца <p>
в <div>
, игнорируя другие элементы
$("div p:only-child")
<p>
, который является единственным потомком в <div>
$("div p:only-of-type")
<p>
, который является единственным потомком в <div>
, игнорируя другие элементы
Поиск по индексу (индекс элементов начинается с нуля)
$("ul li:eq(3)")
Четвертый <li>
в списке <ul>
$("ul li:gt(3)")
Все <li>
с индексом > 3
$("ul li:lt(3)")
Все <li>
с индексом < 3
$(":animated")
Элементы, которые находятся в процессе анимации
$(":focus")
Элемент в фокусе
$(":contains('Hello')")
Все теги, содержащие текст «Hello»
$("div:has(p)")
Элементы <div>
, которые содержат хотя бы один элемент <p>
$(":empty")
Пустые элементы
$(":not(:empty)")
Непустые элементы
$(":parent")
Все элементы, у которых есть хотя бы один дочерний элемент или текст
$("p:hidden")
Скрытые элементы <p>
(display: none;
)
$("p:visible")
Видимые элементы <p>
$(":root")
Выбирает элемент, который является корнем документа (<html>
)
$("p:lang(ru)")
Выбирает все элементы c указанным языком <p lang="ru">...</p>
$(":input")
Все поля input
$(":text")
Текстовые поля type="text"
$(":password")
Поля с паролем type="password"
$(":radio")
Радиокнопки
$(":checkbox")
Чекбоксы
$(":submit")
Кнопки с type="submit"
$(":reset")
Кнопки с type="reset"
$(":button")
Кнопки с type="button"
$(":image")
Кнопки с type="image"
$(":file")
Выбор файла type="file"
Состояние полей
$(":enabled")
Все активные элементы (без disabled="disabled"
)
$(":disabled")
Заблокированные элементы
$(":selected")
Выбранные <option>
в <select>
$(":checked")
Отмеченные чекбоксы и радиокнопки