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

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

Выборка элементов

u('selector')

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

const items = u('.item'); // все элементы с классом item
const firstItem = u('#first'); // элемент с id first

Особенности:

  • Поддержка CSS-селекторов.
  • Возвращает коллекцию, даже если элемент один.
  • Можно комбинировать с методами для изменения содержимого или атрибутов.

Манипуляции с содержимым

Текст и HTML

u('selector').text('Новый текст');
u('selector').html('<span>HTML содержимое</span>');
  • text() — получает или устанавливает текстовое содержимое элементов.
  • html() — получает или устанавливает HTML-код внутри элементов.

Пример:

u('.title').text('Заголовок обновлён');
u('.container').html('<p>Новый параграф</p>');

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

Атрибуты

u('selector').attr('attribute', 'value');
  • Если указан только ключ, возвращает значение атрибута первого элемента.
  • Если указаны ключ и значение, устанавливает атрибут для всех выбранных элементов.

Пример:

u('img').attr('src', 'image.jpg'); // менять путь изображения
const linkHref = u('a').attr('href'); // получить href первой ссылки

Свойства

u('input').prop('checked', true);
  • prop() используется для установки или получения свойств элементов, таких как checked, disabled, value.

Работа с классами

u('selector').addClass('active');
u('selector').removeClass('hidden');
u('selector').toggleClass('highlight');
  • addClass() — добавляет класс ко всем элементам.
  • removeClass() — удаляет указанный класс.
  • toggleClass() — переключает класс: добавляет, если отсутствует, удаляет, если есть.

Пример:

u('.menu-item').addClass('active');
u('.menu-item').toggleClass('highlighted');

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

u('selector').css('color', 'red');
u('selector').css({ background: 'blue', fontSize: '16px' });
  • Поддерживается передача объекта для множественных свойств.
  • Можно получить значение свойства без второго аргумента:
const color = u('.title').css('color');

Добавление и удаление элементов

Вставка в DOM

u('selector').append('<div>Новый элемент</div>');
u('selector').prepend('<div>Элемент в начале</div>');
u('selector').before('<p>Перед элементом</p>');
u('selector').after('<p>После элемента</p>');
  • append() и prepend() добавляют содержимое внутрь выбранных элементов.
  • before() и after() — добавляют элементы на том же уровне в DOM.

Удаление элементов

u('selector').remove();
  • Удаляет выбранные элементы из DOM полностью.

События

u('selector').on('click', function() { ... });
u('selector').off('click');
  • on() — добавляет обработчик событий.
  • off() — удаляет обработчик.
  • Поддерживаются все стандартные события: click, input, mouseenter и др.

Пример:

u('.button').on('click', function() {
    u(this).toggleClass('active');
});

Анимации и эффекты

u('selector').fadeIn(400);
u('selector').fadeOut(400);
u('selector').slideUp(300);
u('selector').slideDown(300);
  • Время задаётся в миллисекундах.
  • Можно комбинировать с цепочками методов.

Пример:

u('.alert').fadeOut(500).remove();

Работа с формами

u('input').val(); // получить значение
u('input').val('новое значение'); // установить значение
  • val() используется для всех типов полей ввода.
  • Можно использовать для управления textarea и select.

Пример:

u('#username').val('user123');
const password = u('#password').val();

Цепочки методов

Umbrella JS поддерживает цепочки методов, что позволяет писать компактный и понятный код:

u('.item')
    .addClass('highlighted')
    .css('color', 'red')
    .on('click', function() {
        u(this).toggleClass('active');
    });
  • Методы возвращают объект Umbrella, что позволяет сразу применять следующие действия.

Итоги по методам

  • u(selector) — выбор элементов.
  • text(), html() — управление содержимым.
  • attr(), prop() — работа с атрибутами и свойствами.
  • addClass(), removeClass(), toggleClass() — классы CSS.
  • css() — стили.
  • append(), prepend(), before(), after(), remove() — управление DOM.
  • on(), off() — события.
  • val() — формы.
  • fadeIn(), fadeOut(), slideUp(), slideDown() — анимации.

Каждый метод предназначен для работы с коллекцией элементов и может быть объединён в цепочки для упрощения кода.

Оглавление