В наше время практически каждый сайт использует библиотеку jQuery, и для разработки сайта нужно знать как пользоваться селекторами (паттернами для отбора тегов DOM дерева HTML страницы).
jQuery селекторами называют текстовые выражения, которые задают условия поиска DOM элементов на HTML странице. Селекторы позволяют осуществлять поиск элементов по признакам: по именам классов и идентификаторов, содержимому элементов, значению атрибутов, родительским и дочерним элементам, порядковым номерам.
Базовые
"*"
все элементы
".class-Name"
элементы с классом class-Name
"#id-Name"
один элемент с идентификатором id-Name
"tag-Name"
элементы с заданным именем тега
Комбинированные селекторы
Селекторы взаимодействуют между собой так же, как и в правилах CSS
"first, second, ..."
элементы удовлетворяющие любому из селекторов first, second, ...
"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 (равен value или имеет вид: "value-*")
"[first][second][..."
элементы, соответствующие всем заданным условиям на атрибуты одновременно
Простые фильтры
Фильтры по назначению и синтаксису очень похожи на псевдоклассы в CSS
":focus"
элемент, находящийся в фокусе
":first"
первый найденный элемент
":last"
последний найденный элемент
":eq( )"
элемент идущий под заданным номером среди выбранных
":not(selector)"
все найденные элементы, кроме указанных в selector
":even"
элементы с четными номерами позиций, в наборе выбранных элементов
":odd"
элементы с нечетными номерами позиций, в наборе выбранных элементов
":gt( )"
элементы с индексом превышающим n
":lt( )"
элементы с индексом меньшим, чем n
":header"
элементы, являющиеся заголовками (с тегами h1, h2 и.т.д.)
":animated"
элементы, которые в данный момент задействованы в анимации
":hidden"
невидимые элементы страницы
":visible"
видимые элементы страницы
":lang(language)"
элементы, в которых указаны языки содержимого
":root"
элемент, который является корневым в документе
Фильтры по содержимому
":contains(text)"
элементы, содержащие заданный текст
":empty"
элементы без содержимого (без текста и других элементов)
":has(selector)"
элементы, которые содержат хотя бы один элемент из selector
":parent"
непустые элементы
Фильтры дочерних элементов
Данные селекторы фильтруют элементы по их расположению в родительских элементах
":first-child"
элементы, расположенные первыми в своих родительских элементах
":last-child"
элементы, расположенные последними в своих родительских элементах
":nth-child( )"
элементы, расположенные определенным образом в родительских элементах (четные, нечетные, идущие под заданным номером)
":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 типа image)
":input"
элементы, являющиеся элементами формы (с тегами input, textarea или button)
":selected"
выбранные элементы (со статусом selected). Это могут быть элементы типа option
":focus"
элементы формы, находящиеся в фокусе
":checked"
выбранные элементы (со статусом checked)
":enabled"
активные элементы формы (со статусом enabled)
":disabled"
неактивные элементы формы (со статусом disabled)
Теги, 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>, в общем родителе
Атрибуты
$("[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")
Отмеченные чекбоксы и радиокнопки
Если в названии класса или названии атрибута есть специальные символы такие как: (!"#$%&'()*+,./:;<=>?@[]^`{|}~), то они обязательно должны экранироваться через обратный слеш.
