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

Селекторы jQuery

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

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

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

<form>
 <p>
  <input type="text" name="name">
 </p>
 <p>
  <input type="email" name="email">
 </p>
 <p>
  <input type="password" name="password">
 </p>
 <p>
  <input type="checkbox" name="chk1">
  <input type="checkbox" name="chk2" checked>
 </p>
 <p>
  <input type="radio" name="r1">
  <input type="radio" name="r2" checked>
 </p>
 <p>
  <textarea name="text"></textarea>
 </p>
 <button type="submit">Go</button>
</form>

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

var fields = $(':input');
console.log(fields);

Селекторы jQuery

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

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

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

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

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

console.log($(':text'));
console.log($(':checkbox'));
console.log($(':radio'));

Селекторы jQuery

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

console.log($(':button'));
console.log($(':password'));

Селекторы jQuery

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

console.log($(':checked'));

Селекторы jQuery

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

<input type="text" name="name" disabled>

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

console.log($(':disabled'));

Селекторы jQuery

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

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

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

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree