Селекторы
Селекторами называют строчные выражения, с помощью которых задаются условия поиска элементов DOM на странице. Вы можете находить интересующие вас элементы, используя выражения в стиле CSS 1-3, в дополнении с некоторыми другими возможностями. Селекторы позволяют находить элементы по различным признакам: значению атрибутов, содержимому элементов, родительским элементам, дочерним элементам, порядковым номерам, ну и конечно по именам классов, идентификаторов и/или тегов.
Например выражение $('div') осуществит поиск всех div-элементов на странице, $('.className') найдет все элементы с классом className и т. д. В данном примере селекторами являются строки 'div' и '.className', а $( ) — это функция, которая осуществляет поиск элементов по заданному селектору (а так же имеет массу других возможностей). Ниже представлены все организованные в jQuery селекторы и правила их комбинирования.
При необходимости, можно создавать собственные селекторы.
Замечание: Если вы используете метасимволы (#;&,.+*~':"!^$[]()=>|/ ) как часть имени идентификатора, класса или названия атрибута, не забывайте экранировать эти символы в селекторах с помощью \\. Например, если вам нужен элемент формы input с атрибутом name='names[]', то используйте следующий код: $('input[name=names\\[\\]]').
Содержание |
Список селекторов
Базовые
"*" | все элементы |
".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) |