В jquery селекторы используют для того чтобы схватить элемент или несколько элементов DOM. Потом с захваченными элементами DOM что-то делают. Благодаря селекторам вы можете находить элементы по различным признакам: значению атрибутов, порядковым номерам, именам классов, идентификаторов, содержимому элементов, родительским элементам, дочерним элементам.

Приведу вам самый простой пример. Для того чтобы схватить все блоки div вы должны использовать селектор $("div"). Обратите внимание на то, что будут выделены все блоки div. Если хотите узнать сколько таких блоков на странице, то применить функцию length. Например, $("div").length. Селектор $('.class-name') найдет все элементы с классом class-name. Точка перед началом селектора обязательна. Если вы забудете указать точку, то вернется пустой результат. $( ) — это функция для поиска элементов по заданному селектору jQuery. Подробно об изменении свойств класса читайте на странице как получить изменить свойства класса для элемента css() jquery.

<div class="left-block">1</div>
<div class="left-block">2</div>
<div class="left-block">3</div>

var count_block = $(".left-block").length;
console.log(count_block);
// вывод: 3

Теперь пример посложней. Допусти у вас несколько id и они похожи друг на друга. Как их всех схватить. Вся сложность в том, что id разные? Тут нам поможет условие в атрибуте $("div[id^='left-block']"). Есть ещё один способ перечисления атрибутов. Он заключается в перечислении атрибутов через запятую. Например, $("#left-block1, #left-block2, #left-block3"). Обратите внимание на то что строка внутри селектора становится слишком большой. Это не удобно. Можно эту запись записать по другому: $("div[id='left-block1'][id='left-block2'][id='left-block3']").

<div class="left-block1">блок 1</div>
<div class="left-block2">блок 2</div>
<div class="left-block3">блок 3</div>

$("div[id^='left-block']").css({"color": "red"});

Базовые

• "*" - все элементы
• ".className" - элементы с классом className
• "#idName" - элемент (один!) с идентификатором idName
• "tagName" - элементы с заданным именем тега

Фильтры по содержимому

• ":contains(text)" - элементы, содержащие заданный текст
• ":empty" - элементы без содержимого (без текста и других элементов)
• ":has(selector)" - элементы, которые содержат хотя бы один элемент из selector
• ":parent" - непустые элементы

Фильтры дочерних элементов. Cелекторы отфильтровывают элементы согласно их расположению в родительских элементах

• ":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 типа image)
• ":input" - элементы, являющиеся элементами формы (с тегами input, textarea или button)
• ":selected" - выбранные элементы (со статусом selected). Это могут быть элементы типа
• ":focus" - элементы формы, находящиеся в фокусе
• ":checked" - выбранные элементы (со статусом checked). Это могут быть элементы типа или
• ":enabled" - активные элементы формы (со статусом enabled)
• ":disabled" - неактивные элементы формы (со статусом disabled)

Комбинированные селекторы. Эти селекторы находятся в одном выражении.

• "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" - элемент, который является корневым в документе