Содержание
- Материал из JQuery
- В действии
- Назначение селекторов элементов формы
- Селекторы элементов формы
Материал из JQuery
Соответствует элементам, которые являются текстовыми полями (input-элементы с типом text).
Замечание 1: использовать фильтр без предшествующего селектора (то есть $(«:text») вместо $(«selector:text»)) не рекомендуется, поскольку это эквивалентно $(«*:text»), а универсальный селектор «*» работает очень медленно. Лучше будет использовать такую запись: $(«input:text»).
Замечание 2: «input:text» сработает так же, как и селектор по атрибутам «[type=text]». Однако, рекомендуется использовать первый вариант.
В действии
Найдем текстовые поля на странице и выделим их красной рамкой:
На этом уроке мы познакомимся с селекторами элементов формы, которые будем использовать в качестве аргумента функции 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. Для того, чтобы получить доступ к нему, нужно воспользоваться вот такой командой:
Посмотрите на следующий пример и попробуйте ввести в это текстовое поле какой-либо текст.
Источник: