Установка значений полей

Библиотека Cash предоставляет компактный и удобный интерфейс для работы с DOM, упрощая большинство операций, доступных в jQuery, с акцентом на легковесность и производительность. Одной из ключевых операций является установка значений полей формы и любых элементов, поддерживающих свойства value или текстовое содержимое.

Методы установки значений

.val()

Метод .val() используется для получения и установки значения элементов формы: <input>, <textarea>, <select>.

Синтаксис для установки значения:

cash('селектор').val('новое значение');

Примеры:

cash('#username').val('admin');       // Устанавливает значение input с id="username"
cash('textarea.comment').val('Привет!'); // Устанавливает текст в textarea

Для элементов <select> можно передавать:

  • Строку с конкретным значением <option>
  • Массив значений для мультиселектов
cash('#countries').val(['RU', 'US']); // Устанавливает несколько выбранных опций

Если метод вызывается без аргумента, он возвращает текущее значение элемента.

.prop() и .attr()

Для установки свойств, влияющих на состояние элемента, применяются методы .prop() и .attr().

  • .prop(propertyName, value) — задаёт свойства DOM-элемента. Используется для checked, disabled, selected.
cash('#agree').prop('checked', true);   // Устанавливает checkbox в состояние "отмечено"
cash('#submit').prop('disabled', false); // Активирует кнопку
  • .attr(attributeName, value) — устанавливает HTML-атрибут элемента. Полезно для установки значений, которые должны быть видимы в разметке.
cash('#email').attr('placeholder', 'Введите e-mail');

Разница между .prop() и .attr() в том, что .prop() работает с текущим состоянием элемента, а .attr() — с его HTML-атрибутами.

Установка текста и HTML-контента

Для элементов, не являющихся полями формы, Cash предоставляет методы .text() и .html().

  • .text(content) — устанавливает текстовое содержимое элемента:
cash('.title').text('Новый заголовок');
  • .html(content) — устанавливает HTML-контент:
cash('.container').html('<p>Новый абзац</p>');

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

cash('li').text((i, oldText) => oldText + ' #' + (i + 1));

Множественные элементы

Cash позволяет работать с коллекциями элементов. Если селектор возвращает несколько элементов, установка значения применяется ко всем элементам одновременно.

cash('input.required').val('Заполнено'); // Все input с классом required получат одно значение
cash('select[multiple]').val(['RU', 'FR']); // Все мультиселекты

При динамическом формировании формы это особенно полезно для массового заполнения полей.

Использование функций для динамического значения

Методы .val(), .text() и .html() поддерживают передачу функции вместо фиксированного значения. Аргументы функции:

  • index — индекс элемента в коллекции
  • currentValue — текущее значение или текст элемента

Пример:

cash('input.score').val((i, oldValue) => parseInt(oldValue || 0) + 10);

Такой подход позволяет изменять значения на основе текущего состояния элементов, что удобно при обновлении форм с сохранением данных пользователя.

Особенности для <select> и <input type="checkbox">

  • <select> Если значение, переданное в .val(), не соответствует ни одной опции, ни одна опция не будет выбрана. Для мультиселектов можно передавать массив; элементы, которых нет в списке, игнорируются.

  • <input type="checkbox"> и <input type="radio"> Для установки состояния рекомендуется использовать .prop('checked', true/false). Метод .val() лишь изменяет значение value, но не отмечает элемент.

cash('#newsletter').prop('checked', true); // Подписка на рассылку активирована
cash('input[name="gender"]').val('male');   // Устанавливает значение value, но не выбирает radio

Взаимодействие с событиями

После установки значения или свойства событийные обработчики не вызываются автоматически. Для триггера событий используют метод .trigger():

cash('#username').val('newUser').trigger('change'); // Вызывает событие change после изменения значения

Это особенно важно для форм с валидацией или динамическим обновлением интерфейса.

Итоговые рекомендации по установке значений

  1. Для полей формы использовать .val() для значения, .prop() для состояния, .attr() для атрибутов.
  2. Для текстового содержимого и HTML использовать .text() и .html().
  3. Для динамического изменения значений передавать функцию с индексом и текущим значением.
  4. Массовые операции на коллекциях элементов выполняются автоматически на всех элементах селектора.
  5. Для корректного обновления интерфейса после изменения значений инициировать события вручную через .trigger().

Эти методы образуют основу управления состоянием элементов через библиотеку Cash, обеспечивая лаконичное и эффективное взаимодействие с DOM без громоздкого кода.

Оглавление