Селекторы

Материал из JQuery

Перейти к: навигация, поиск

Селекторами называют строчные выражения, с помощью которых задаются условия поиска элементов 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)