Селекторы jQuery. Элементы форм. Часть 4

Селекторы jQuery

От автора: приветствую вас, друзья. В этой статье мы продолжим изучение библиотеки jQuery. Основа основ работы с jQuery заключается в умении выбрать нужные элементы со страницы, чтобы затем произвести с ними необходимые манипуляции. В данной статье мы рассмотрим селекторы jQuery для работы с полями и элементами форм.

Формы — это неотъемлемая часть практически любой странички HTML. Поэтому с ними придется работать достаточно часто, используя jQuery. Например, нам может потребоваться проверить заполнение обязательных полей формы без перезагрузки страницы. Или проверить, отметил ли пользователь чекбокс и, если отметил, тогда разблокировать кнопку отправки формы, в противном же случае — заблокировать ее.

Итак, давайте рассмотрим набор селекторов jQuery, которые упрощают выборку тех или иных элементов формы для последующей работы с ними. Для этого создадим простейшую форму с некоторым набором полей:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Первый селектор, с которым мы познакомимся, — селектор :input, который позволяет выбрать все поля формы:

Селекторы jQuery

Обратите внимание, данный селектор позволяет получить все поля формы: input, textarea, button. Данный селектор может пригодиться нам, если мы хотим пройтись в дальнейшем по всем элементам формы в цикле и что-то сделать с ними.

Также мы можем получить некоторые элементы по отдельности. Например, поля input типа text поможет получить селектор :text. Поля типа checkbox и radio можно получить селекторами :checkbox и :radio, соответственно.

Селекторы jQuery

Также отдельно можно обратиться к кнопке — селектор :button и к полю для ввода пароля — селектор :password.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Селекторы jQuery

Ну и, конечно же, нам интересно, как получить отдельно отмеченные чекбоксы и радиокнопки. Для этого jQuery предлагает селектор :checked.

Селекторы jQuery

И отдельно познакомимся с селекторами :disabled и :enabled. Первый выбирает неактивные элементы формы, второй, напротив, — активные. Добавим для поля ввода имени атрибут disabled:

И попробуем проверить, получится ли его выбрать:

Селекторы jQuery

На этом сегодня все. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree