Полный список методов

Umbrella JS предоставляет удобный способ выбора элементов DOM с помощью функции u(), аналогичной jQuery.

u('div'); // выбирает все элементы <div>
u('#id'); // выбирает элемент с указанным id
u('.class'); // выбирает все элементы с указанным классом

Особенности выбора:

  • Можно передавать сразу несколько селекторов через запятую:

    u('div, p');

  • Поддерживается передача NodeList, массива элементов или одного DOM-узла:

    u(document.querySelectorAll('span'));
u([document.body, document.head]);
u(document.body);

Работа с содержимым элементов

html() и text()

Метод html() используется для получения или установки HTML-содержимого элементов:

u('p').html(); // возвращает HTML первого найденного <p>
u('p').html('<b>Новое содержимое</b>'); // заменяет содержимое всех <p>

Метод text() работает с текстом элементов:

u('p').text(); // возвращает текст первого элемента
u('p').text('Привет'); // устанавливает текст для всех выбранных элементов

val()

Метод val() предназначен для работы со значением <input>, <textarea> или <select>:

u('input').val(); // получает значение первого input
u('input').val('новое значение'); // устанавливает значение для всех input

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

append(), prepend(), before(), after()

Методы добавляют новые элементы относительно выбранных:

u('ul').append('<li>Новый элемент</li>'); // в конец каждого <ul>
u('ul').prepend('<li>Первый элемент</li>'); // в начало каждого <ul>
u('ul').before('<h3>Заголовок перед списком</h3>'); // перед <ul>
u('ul').after('<h3>Заголовок после списка</h3>'); // после <ul>

Можно передавать DOM-элементы или массив элементов вместо HTML-строки.

remove()

Удаляет выбранные элементы из DOM:

u('.remove-me').remove();

empty()

Удаляет содержимое элементов, оставляя сам элемент:

u('#container').empty();

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

attr()

Метод для получения или установки атрибутов:

u('img').attr('src'); // получить src первого <img>
u('img').attr('alt', 'Описание'); // установить alt для всех <img>

prop()

Используется для работы с свойствами DOM-элементов:

u('input[type=checkbox]').prop('checked'); // получить состояние чекбокса
u('input[type=checkbox]').prop('checked', true); // установить состояние

data()

Метод для работы с data-атрибутами:

u('div').data('id'); // получить значение data-id
u('div').data('id', 123); // установить значение data-id

Управление классами

Методы addClass(), removeClass(), toggleClass(), hasClass() позволяют гибко управлять CSS-классами элементов:

u('p').addClass('active'); // добавить класс
u('p').removeClass('active'); // удалить класс
u('p').toggleClass('active'); // переключить класс
u('p').hasClass('active'); // проверить наличие класса, возвращает true/false

Работа с CSS и стилями

css()

Метод позволяет получить или установить CSS-свойства:

u('div').css('color'); // получить цвет первого <div>
u('div').css('color', 'red'); // установить красный цвет всем <div>
u('div').css({ background: 'blue', padding: '10px' }); // несколько свойств

События

on() и off()

Метод on() назначает обработчики событий:

u('button').on('click', function(e) {
  console.log('Кнопка нажата');
});

Метод off() снимает обработчики:

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

Поддерживаются множественные события через пробел:

u('input').on('focus blur', function() {
  console.log('Элемент в фокусе или потерял фокус');
});

trigger()

Метод для программного вызова событий:

u('button').trigger('click');

Путешествие по DOM

parent(), children(), siblings(), closest()

  • parent() — возвращает родителя каждого элемента.
  • children() — возвращает только прямых потомков.
  • siblings() — возвращает всех соседей элемента.
  • closest(selector) — ищет ближайший родительский элемент, соответствующий селектору:
u('.item').parent();
u('.list').children();
u('.active').siblings();
u('.nested').closest('.container');

Итерация и фильтрация

each()

Позволяет пройтись по всем элементам коллекции:

u('li').each(function(el, i) {
  console.log(i, el);
});

filter(), not()

  • filter(selector) — выбирает элементы, соответствующие селектору.
  • not(selector) — исключает элементы, соответствующие селектору:
u('li').filter('.active');
u('li').not('.active');

Размеры и позиции

  • width(), height() — возвращают или устанавливают размеры элементов.
  • offset() — возвращает координаты элемента относительно документа.
  • position() — возвращает координаты относительно родителя с позиционированием:
u('#box').width(); 
u('#box').height(100);
u('#box').offset();
u('#box').position();

Анимации

Umbrella JS поддерживает простые анимации через show(), hide(), toggle(), fadeIn(), fadeOut(), slideUp(), slideDown():

u('#panel').hide();
u('#panel').show();
u('#panel').fadeIn(500);
u('#panel').fadeOut(300);
u('#panel').slideUp(400);
u('#panel').slideDown(400);

Можно задавать продолжительность в миллисекундах и использовать цепочку методов для плавной анимации.

AJAX

Методы u.ajax() и u.get(), u.post() позволяют работать с HTTP-запросами:

u.ajax({
  url: '/data.json',
  method: 'GET',
  success: function(res) { console.log(res); },
  error: function(err) { console.error(err); }
});

u.get('/data.json', function(res) { console.log(res); });
u.post('/submit', { name: 'John' }, function(res) { console.log(res); });

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

  • Все методы возвращают промисоподобный объект.
  • Поддерживаются JSON-запросы и обычные формы.

Цепочка вызовов

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

u('div')
  .addClass('active')
  .css('color', 'blue')
  .append('<span>Новый текст</span>')
  .on('click', function() { console.log('Кликнут div'); });

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

Оглавление