jQuery selectors

jQuery.js

$=jQuery

Базовые
"*"все элементы
".className"элементы с классом className
"#idName"элемент (один!) с идентификатором idName
"tagName"элементы с заданным именем тега
                  
Комбинированные селекторы
Селекторы, находящиеся в одном выражении, взаимодействуют между собой практически так же, как в правилах 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( )" ":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). Это могут быть элементы типа <option>.
":focus"элементы формы, находящиеся в фокусе.
":checked"выбранные элементы (со статусом checked). Это могут быть элементы типа <checkbox> или <radio>.
":enabled"активные элементы формы (со статусом enabled)
":disabled"неактивные элементы формы (со статусом disabled)


$("css-selector[href^="http"] "). // ^ используется в выражениях для обозначения начала строки

$("css-selector::pseudoElement "). // Псевдоэлементы можно использовать для придания стилей фрагменту элемента, 
//например, первой строке или первой букве. Применяется только к блочным элементам.
//
$("css-selector::first-letter "). // Первая буква
$("css-selector::first-line"). // Первая строка

$("css-selector[href*="example"] "). // Звездочка значит, что искомое значение может находиться в любой части атрибута href.

$("css-selector[data-*="example"]"). // Можно создать собственный атрибут data-filetype или data-example  и добавить его к каждому атрибуту.

$("css-selector:animated "). // Для выборки всех элементов, которые в данный момент анимируются следует воспользоваться селектором :animated. 
//Единственный нюанс: выборка будет осуществляться только по элементам, которые анимируются через jQuery.

$("css-selector:header "). // Чтобы выбрать заголовок не обязательно прописывать $("h1 h2 h3 h4 h5 h6"), 
//можно использовать селектор $(":header") или $("article").filter(":header").

$("css-selector [attr!="value"] ").       // определения элементов атрибут которых отсутствует или не равен заданному значению.
$("css-selector :not([attr="value"] ").   // определения элементов атрибут которых отсутствует или не равен заданному значению.
$("css-selector").not("[attr='value']").  // определения элементов атрибут которых отсутствует или не равен заданному значению.
//------------------------------------------- Пример
$("li[data-category!='css']").each(function() {
  $(this).addClass("mismatch");
   
  $(".mismatch").attr("data-category", attributeValue);

});
//-------------------------------------------

$("css-selector:contains(text)"). //  селектор выбирает элементы где присутствует искомый текст
//------------------------------------------- Пример
//JavaScript Код, который выделит все варианты:
$("section:contains('Lorem Ipsum')").each(function() {
  $(this).html(
      $(this).html().replace(/Lorem Ipsum/g, "<span class='match-o'>Lorem Ipsum</span>")
    );
});
//-------------------------------------------

$("css-selector:has(selector) "). // содержится искомый селектор, который не обязательно должен быть прямым потомком. 
$("pure-css-selector").has(selector) // содержится искомый селектор, который не обязательно должен быть прямым потомком.

$("css-selector[foo~="selector"] "). // Тильда позволяет нам выбирать атрибуты со значениями, разделенными пробелами

$("  "). // 

$("  "). // 

$("  "). //