Содержание
Материал из JQuery
Соответствует элементам, которые являются текстовыми полями (input-элементы с типом text).
Замечание 1: использовать фильтр без предшествующего селектора (то есть $(":text") вместо $("selector:text")) не рекомендуется, поскольку это эквивалентно $("*:text"), а универсальный селектор "*" работает очень медленно. Лучше будет использовать такую запись: $("input:text").
Замечание 2: "input:text" сработает так же, как и селектор по атрибутам "[type=text]". Однако, рекомендуется использовать первый вариант.
$(".formBox input:text") | вернет текстовые поля, находящиеся внутри элементов с классом formBox. |
В действии
Найдем текстовые поля на странице и выделим их красной рамкой:
На этом уроке мы познакомимся с селекторами элементов формы, которые будем использовать в качестве аргумента функции jQuery("селектор") для выбора элементов.
Назначение селекторов элементов формы
Селекторы элементов формы предназначены для выбора элементов в зависимости от:
- их типа (значения атрибута type ) — :button , :checkbox , :file , :image , :password , :radio , :reset , :submit , :text .
- того, является ли их тег input , textarea , select или button — :input .
- того, находится ли элемент в фокусе или нет — :focus .
- того, находятся ли элементы в активном состоянии ( :enabled ) или не активном ( :disabled ).
- того, находятся ли элементы option в состоянии selected или нет — :selected .
- того, находятся ли элементы checkbox , select и radio в состоянии selected или нет — :checked .
Селекторы элементов формы
:button — выбирает все элементы button и элементы с type="button" . Селектор $(":button") эквивалентен $("button, input[type=’button’]") .
Например, выбрать все элементы button или элементы с type="button" , которые расположены внутри формы:
:checkbox — выбирает все элементы с type="checkbox" . Селектор $(":checkbox") эквивалентен $("[type=checkbox]") .
Перед селектором :checkbox как и перед селекторами псевдоклассов (т.е. теми которые начинаются со знака " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если перед знаком " : " ничего не указывать, то подразумевается использование универсального селектора ( * ). Другими словами, $(":checkbox") эквивалент $("*:checkbox") . Но более правильно в этом случае вместо * использовать тег input : $("input:checkbox") .
Например, выбрать все элементы input , которые имеют атрибут type="checkbox" , т.е. являются флаговыми кнопками:
:checked — выбирает все элементы с состоянием checked или selected . Селектор :checked предназначен для элементов checkbox , select и кнопок radio .
:disabled — выбирает все элементы, которые отключены (disabled).
Перед селектором :disabled как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":disabled") эквивалентен $("*:disabled") . Но в этом случае более правильно вместо " * " использовать тега input : $("input:disabled") .
Селектор :disabled отличается от селектора атрибута [disabled] . Селектор :disabled проверяет логическое значение (истина/ложь) свойства disabled элемента, в то время как селектор атрибута [disabled] просто проверяет наличие атрибута disabled у элемента.
Селектор :disabled можно использовать только для выбора HTML-элементов, которые поддерживают атрибут disabled : , , , ,
:submit — выбирает все элементы с type="submit" . Селектор :submit предназначен для элементов button или input .
:text — выбирает все элементы с type="text" .
jQuery функция $(":text") позволяет нам выбрать элементы . Перед селектором :text как и перед селекторами псевдоклассов (т.е. теми которые начинаются с " : ") рекомендуется указывать тег или другой селектор (например, имя класса). Если Вы перед знаком " : " ничего не указываете, то подразумевается использование универсального селектора (" * "). Другими словами, $(":text") эквивалентен $("*:text") . Но более правильно этом случае вместо " * " использовать тег input : $("input:text") .
Начиная с версии jQuery 1.5.2, селектор :input также выбирает элементы input , у которых не указан атрибут type (в этом случае подразумевается, что элемент имеет type="text" ).
Разницу между $(":text") и $("[type=text]" ) продемонстрируем на следующем примере:
Предположим, что на веб-странице есть текстовое поле вот такого формата.
Иногда возникает необходимость вытащить текст, который в это текстовое поле будет вводить пользователь.
Здесь есть два варианта:
1. Нам нужен текст, который задан для текстового поля по умолчанию в атрибуте value.
В этом случае, получить значение этого атрибута можно вот так:
Как это работает, можно посмотреть на следующем живом примере.
2. Нужен текст, который пользователь будет вводить в это текстовое поле.
Тот, текст, который пользователь будет вводить в текстовое поле, не записывается в значение атрибута alt. Для того, чтобы получить доступ к нему, нужно воспользоваться вот такой командой:
Посмотрите на следующий пример и попробуйте ввести в это текстовое поле какой-либо текст.