Пакетные операции

Umbrella JS — лёгкая библиотека для работы с DOM, предоставляющая компактный и удобный синтаксис для выборки элементов и их массовой обработки. Одной из ключевых возможностей библиотеки являются пакетные операции, которые позволяют выполнять действия над множеством элементов одновременно, минимизируя количество кода и повышая читаемость.

Выборка элементов и цепочки вызовов

Выборка элементов в Umbrella JS выполняется через функцию u(), которая возвращает объект-обёртку над коллекцией DOM-элементов. Этот объект поддерживает цепочки вызовов, что облегчает применение нескольких операций к набору элементов.

u('div.item').addClass('highlight').attr('data-active', 'true').css('color', 'red');

В этом примере все div с классом item получают класс highlight, атрибут data-active со значением 'true' и красный цвет текста.

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

Манипуляции с классами

Umbrella JS предоставляет методы для пакетного управления классами:

  • addClass(className) — добавляет класс ко всем элементам коллекции.
  • removeClass(className) — удаляет класс.
  • toggleClass(className) — переключает наличие класса.
  • hasClass(className) — проверяет, есть ли класс хотя бы у одного элемента коллекции.

Пример:

u('.menu-item').addClass('active').removeClass('disabled');

Все элементы с классом menu-item становятся активными и одновременно теряют класс disabled.

Работа с атрибутами и свойствами

Методы attr и prop позволяют изменять или получать значения атрибутов и свойств DOM:

// Установка атрибутов
u('input[type="text"]').attr('placeholder', 'Введите текст');

// Получение атрибутов
let values = u('input[type="text"]').attr('placeholder');

При указании двух аргументов (ключ, значение) атрибут устанавливается для всех элементов коллекции. Если указан только ключ, метод возвращает значение атрибута первого элемента коллекции.

Управление стилями

Метод css обеспечивает пакетное изменение стилей:

u('p').css({
  'font-size': '16px',
  'line-height': '1.5',
  'color': '#333'
});

Поддерживается как установка одного свойства, так и передача объекта с несколькими стилями. Для получения значения стиля используется вызов с одним аргументом:

let color = u('p').css('color');

Изменение содержимого

Методы html, text, val позволяют управлять содержимым элементов:

  • html(content) — задаёт или получает HTML-содержимое.
  • text(content) — задаёт или получает текстовое содержимое.
  • val(value) — задаёт или получает значение элемента формы.

Примеры пакетного изменения содержимого:

u('div.note').html('<strong>Важно:</strong> Обновлено');
u('span.label').text('Новый статус');
u('input[type="text"]').val('Введите данные');

Манипуляции с DOM

Umbrella JS позволяет добавлять, удалять и перемещать элементы в DOM:

  • append(content) — добавляет содержимое внутрь каждого элемента коллекции.
  • prepend(content) — добавляет в начало содержимого.
  • before(content) и after(content) — вставляют элементы перед или после текущих элементов.
  • remove() — удаляет все элементы коллекции из DOM.

Пример пакетного добавления элементов:

u('ul.menu').append('<li class="menu-item">Новый пункт</li>');

Обработка событий

Методы on и off предоставляют механизм пакетной привязки событий:

u('button.submit').on('click', function() {
  u('form').submit();
});

u('button.reset').off('click');

Метод on добавляет обработчик ко всем выбранным элементам, а off снимает его.

Итерации по коллекции

Метод each используется для выполнения произвольной функции над каждым элементом коллекции:

u('li').each(function(el, index) {
  el.textContent = `Пункт ${index + 1}`;
});

Параметры функции: текущий элемент и его индекс. Это особенно удобно для пакетных операций, не покрываемых встроенными методами.

Взаимодействие с атрибутами data

Методы data и removeData упрощают работу с пользовательскими атрибутами:

u('div.card').data('id', 123).data('role', 'admin');
let role = u('div.card').data('role');
u('div.card').removeData('id');

Все операции выполняются одновременно для всех элементов коллекции, поддерживая пакетную логику.

Фильтрация коллекции

Методы filter и not позволяют выделить подмножества элементов:

u('li').filter('.active').css('font-weight', 'bold');
u('li').not('.active').css('opacity', '0.5');

filter оставляет только элементы, удовлетворяющие условию, а not исключает их из коллекции.

Сводка ключевых особенностей пакетных операций

  • Единообразие методов: все методы Umbrella JS применяются ко всей коллекции элементов.
  • Цепочки вызовов: возвращаемые объекты позволяют комбинировать множество операций.
  • Гибкость: операции охватывают классы, атрибуты, стили, содержимое, события и манипуляции с DOM.
  • Индивидуальная обработка: метод each даёт полный контроль над элементами при необходимости.

Пакетные операции делают Umbrella JS мощным инструментом для краткой и выразительной работы с множеством элементов, обеспечивая лёгкую замену громоздких циклов и стандартного DOM API.

Оглавление