Селекторы jQuery - это строчные выражения, которые задают условия поиска и получения элементов DOM на странице сайта. Селекторы помогают находить элементы страницы по:
- названию тега
- имени класса элемента
- идентификатору элемента
- значениям атрибутов
- содержимому элементов
- родительским элементам
- дочерним элементам
- порядковому номеру элемента
Селекторы используются в двойных или одинарных кавычках. Существует множество типов селекторов jQuery:
Базовые
Значение |
Описание |
"*" |
все элементы |
".className" |
элементы с указанным классом |
"#idName" |
элемент с указанным идентификатором |
"tag" |
элемент с указанным названием (название тега) |
Комбинированные селекторы
Значение |
Описание |
"element1, element2" |
элементы, с перечисленными через запятую селекторами. Например, можно получить сразу несколько элементов с разными классами $('.page, .post'); |
"outer inner" |
элементы inner, являющиеся потомками элементов outer (находятся внутри) |
"parent > child" |
элементы из child, являющиеся прямыми потомками элементов parent |
"prev + next" |
элементы next, находящиеся за элементами prev |
"prev ~ next" |
элементы next, следующие за элементами prev |
Селекторы по атрибутам
Значение |
Описание |
"[name]" |
элементы, содержащие атрибут name |
"[name = value]" |
элементы, с значением атрибута name совпадающим с value |
"[name != value]" |
элементы, у которых значение атрибута name не совпадает с value |
"[name ^= value]" |
элементы, у которых значение атрибута name начинается с value |
"[name $= value]" |
элементы, у которых значение атрибута name заканчивается на value |
"[name *= value]" |
элементы, у которых значение атрибута name содержит подстроку value |
"[name ~= value]" |
элементы, у которых значение атрибута name содержит слово value |
"[name |= value]" |
элементы, у которых значение атрибута name имеют префикс value |
"[first][second]" |
элементы, соответствующие всем заданным условиям на атрибуты одновременно |
Фильтры
Значение |
Описание |
":focus" |
элемент, находящийся в фокусе |
":first" |
первый найденный элемент |
":last" |
последний найденный элемент |
":eq( )" |
элемент идущий под заданным номером среди выбранных |
":not(selector)" |
все найденные элементы, кроме указанных в selector |
":even" |
элементы с четными номерами позиций, в наборе элементов |
":odd" |
элементы с нечетными номерами позиций, в наборе элементов |
":gt( )" |
элементы с индексом превышающим n |
":lt( )" |
элементы с индексом меньшим, чем n |
":header" |
элементы, являющиеся заголовками (с тегами h1-h6) |
":animated" |
элементы, которые в данный момент задействованы в анимации |
":hidden" |
невидимые элементы страницы |
":visible" |
видимые элементы страницы |
":lang(language)" |
элементы, в которых указаны языки содержимого |
":root" |
элемент, который является корневым в документе. |
Фильтры по содержимому
Значение |
Описание |
":contains(text)" |
элементы, содержащие текст |
":empty" |
элементы без содержимого |
":has(selector)" |
элементы, содержащие хотя бы один элемент из selector |
":parent" |
непустые элементы |
Фильтры дочерних элементов
Значение |
Описание |
":first-child" |
элементы, расположенные первыми в своих родительских элементах |
":last-child" |
элементы, расположенные последними в своих родительских элементах |
":nth-child( )"
":nth-child-last( )" |
элементы, расположенные определенным образом в родительских элементах (четные, нечетные, идущие под заданным номером) |
":only-child" |
элементы, являющиеся единственными потомками в своих родительских элементах |
":only-of-type" |
элементы, единственные удовлетворяющие селектору, потомками в своих родительских элементах |
":first-of-type" |
те из выбранных элементов, которые первыми встречаются в своих родительских элементах |
":last-of-type" |
те из выбранных элементов, которые последними встречаются в своих родительских элементах |
":nth-first-of-type( )"
":nth-last-of-type( )" |
те из выбранных элементов, которые в определенную очередь встречаются в своих родительских элементах |
Фильтры элементов форм
Значение |
Описание |
":button" |
элементы с тегом button или типом button |
":radio" |
элементы, являющиеся переключателями |
":checkbox" |
элементы, являющиеся флажками |
":text" |
элементы, являющиеся текстовыми полями |
":password" |
элементы, являющиеся полями ввода пароля |
":file" |
элементы, являющиеся полями загрузки файлов |
":submit" |
элементы, являющиеся кнопками отправки формы |
":reset" |
элементы, являющиеся кнопками очистки формы |
":image" |
элементы, являющиеся изображениями для отправки формы |
":input" |
элементы, являющиеся элементами формы |
":selected" |
выбранные элементы (со статусом selected). |
":focus" |
элементы формы, находящиеся в фокусе. |
":checked" |
выбранные элементы (со статусом checked). |
":enabled" |
активные элементы формы (со статусом enabled) |
":disabled" |
неактивные элементы формы (со статусом disabled) |
0 комментариев