Селектори jQuery. Елементи форм. Частина 4

23

Від автора: вітаю вас, друзі. У цій статті ми продовжимо вивчення бібліотеки jQuery. Основа основ роботи з jQuery полягає в умінні вибрати потрібні елементи зі сторінки, щоб потім зробити з ними необхідні маніпуляції. У даній статті ми розглянемо селектори jQuery для роботи з полями і елементами форм.

Форми — це невід’ємна частина практично будь-сторінки HTML. Тому з ними доведеться працювати досить часто, використовуючи jQuery. Наприклад, нам може знадобитися перевірити заповнення обов’язкових полів форми без перезавантаження сторінки. Або перевірити, зазначив користувач чекбокс і, якщо зазначив, тоді розблокувати кнопку «надіслати», в іншому ж випадку — заблокувати її.

Отже, давайте розглянемо набір селекторів jQuery, які спрощують вибірку тих чи інших елементів форми для подальшої роботи з ними. Для цього створимо найпростішу форму з деяким набором полів:

Go

Перший селектор, з яким ми познайомимося, — селектор :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:

І спробуємо перевірити, чи вийде його вибрати:

console.log($(‘:disabled’));

Селекторы jQuery

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