Селекторы JQuery

В jQuery, селекторы в основном позаимствованы из CSS 1-3, также добавлены свои, что дало хороший набор инструментов для манипуляций с элементами в документе.

Описание всех селекторов на api.jquery.com.

Если в названии класса или атрибута есть спец-символы (!"#$%&'()*+,./:;<=>?@[]^`{|}~), то они должны экранироваться.
Например, для элемента с id="foo.bar", будет такой селектор $("#foo\.bar").

1

Теги, ID и классы

$("*") Все теги
$("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>, в общем родителе
2

Атрибуты

$("[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»
3

Порядок элементов

$("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
4

Состояние элементов

$(":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>
5

Поля форм

$(":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") Отмеченные чекбоксы и радиокнопки
07.08.2019 104
Предыдущая запись Textarea для ввода SMS

Поделится

Темы

jQuery

Другие публикации

Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery...
В статье представлены способы зафиксировать блок при прокрутки страницы с примерами для горизонтального меню и баннера...
При отправки sms через сервисы (smsc.ru, smsaero.ru) длина одного sms обычно ограничена 70-ю символами кириллицы, если...
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
Пример верстки слайдера на плагине bxSlider, который растягивается на всю ширину сайта, оставляя по центру...