От автора: приветствую вас, друзья. В этой статье мы продолжим изучение библиотеки jQuery. Основа основ работы с jQuery заключается в умении выбрать нужные элементы со страницы, чтобы затем произвести с ними необходимые манипуляции. В данной статье мы рассмотрим селекторы jQuery для работы с полями и элементами форм.
Формы — это неотъемлемая часть практически любой странички HTML. Поэтому с ними придется работать достаточно часто, используя jQuery. Например, нам может потребоваться проверить заполнение обязательных полей формы без перезагрузки страницы. Или проверить, отметил ли пользователь чекбокс и, если отметил, тогда разблокировать кнопку отправки формы, в противном же случае — заблокировать ее.
Итак, давайте рассмотрим набор селекторов jQuery, которые упрощают выборку тех или иных элементов формы для последующей работы с ними. Для этого создадим простейшую форму с некоторым набором полей:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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, который позволяет выбрать все поля формы:
|
1 2 |
var fields = $(':input'); console.log(fields); |
Обратите внимание, данный селектор позволяет получить все поля формы: input, textarea, button. Данный селектор может пригодиться нам, если мы хотим пройтись в дальнейшем по всем элементам формы в цикле и что-то сделать с ними.
Также мы можем получить некоторые элементы по отдельности. Например, поля input типа text поможет получить селектор :text. Поля типа checkbox и radio можно получить селекторами :checkbox и :radio, соответственно.
|
1 2 3 |
console.log($(':text')); console.log($(':checkbox')); console.log($(':radio')); |
Также отдельно можно обратиться к кнопке — селектор :button и к полю для ввода пароля — селектор :password.
|
1 2 |
console.log($(':button')); console.log($(':password')); |
Ну и, конечно же, нам интересно, как получить отдельно отмеченные чекбоксы и радиокнопки. Для этого jQuery предлагает селектор :checked.
|
1 |
console.log($(':checked')); |
И отдельно познакомимся с селекторами :disabled и :enabled. Первый выбирает неактивные элементы формы, второй, напротив, — активные. Добавим для поля ввода имени атрибут disabled:
|
1 |
<input type="text" name="name" disabled> |
И попробуем проверить, получится ли его выбрать:
|
1 |
console.log($(':disabled')); |
На этом сегодня все. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!
