Таблица соответствия методов

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

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

Umbrella JS	jQuery	Vanilla JS
`u('selector')`	`$('selector')`	`document.querySelectorAll('selector')`
`u('#id')`	`$('#id')`	`document.getElementById('id')`
`u('.class')`	`$('.class')`	`document.getElementsByClassName('class')`
`u('tag')`	`$('tag')`	`document.getElementsByTagName('tag')`

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

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

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

Umbrella JS	jQuery	Vanilla JS
`.html()`	`.html()`	`element.innerHTML`
`.html('новое содержимое')`	`.html('новое содержимое')`	`element.innerHTML = 'новое содержимое'`
`.text()`	`.text()`	`element.textContent`
`.text('новый текст')`	`.text('новый текст')`	`element.textContent = 'новый текст'`
`.val()`	`.val()`	`element.value`
`.val('значение')`	`.val('значение')`	`element.value = 'значение'`

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

Методы .html() и .text() автоматически применяются ко всем выбранным элементам.
Для .val() поддерживаются элементы <input>, <textarea>, <select>.

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

Umbrella JS	jQuery	Vanilla JS
`.attr('attr')`	`.attr('attr')`	`element.getAttribute('attr')`
`.attr('attr', 'value')`	`.attr('attr', 'value')`	`element.setAttribute('attr', 'value')`
`.removeAttr('attr')`	`.removeAttr('attr')`	`element.removeAttribute('attr')`
`.prop('prop')`	`.prop('prop')`	`element.prop` (или `element.checked`/`element.disabled`)

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

.attr() и .prop() имеют схожий синтаксис с jQuery.
Метод .removeAttr() позволяет удалять атрибуты у всех элементов выборки за один вызов.

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

Umbrella JS	jQuery	Vanilla JS
`.addClass('class')`	`.addClass('class')`	`element.classList.add('class')`
`.removeClass('class')`	`.removeClass('class')`	`element.classList.remove('class')`
`.toggleClass('class')`	`.toggleClass('class')`	`element.classList.toggle('class')`
`.hasClass('class')`	`.hasClass('class')`	`element.classList.contains('class')`

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

Все методы автоматически применяются ко всем элементам выборки.
toggleClass может принимать второй параметр true/false для принудительного добавления или удаления.

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

Umbrella JS	jQuery	Vanilla JS
`.append(content)`	`.append(content)`	`element.appendChild(node)` / `element.insertAdjacentHTML('beforeend', html)`
`.prepend(content)`	`.prepend(content)`	`element.insertBefore(node, element.firstChild)` / `element.insertAdjacentHTML('afterbegin', html)`
`.before(content)`	`.before(content)`	`element.parentNode.insertBefore(node, element)` / `element.insertAdjacentHTML('beforebegin', html)`
`.after(content)`	`.after(content)`	`element.parentNode.insertBefore(node, element.nextSibling)` / `element.insertAdjacentHTML('afterend', html)`
`.remove()`	`.remove()`	`element.parentNode.removeChild(element)`

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

Методы поддерживают как DOM-элементы, так и HTML-строки.
Порядок применения сохраняется для всех выбранных элементов.

Работа с событиями

Umbrella JS	jQuery	Vanilla JS
`.on('event', handler)`	`.on('event', handler)`	`element.addEventListener('event', handler)`
`.off('event', handler)`	`.off('event', handler)`	`element.removeEventListener('event', handler)`
`.click(handler)`	`.click(handler)`	`element.addEventListener('click', handler)`
`.hover(handlerIn, handlerOut)`	`.hover(handlerIn, handlerOut)`	`element.addEventListener('mouseenter', handlerIn)` + `element.addEventListener('mouseleave', handlerOut)`

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

Поддерживаются все стандартные события браузера.
Методы .on() и .off() применяются ко всем элементам выборки сразу, обеспечивая массовую обработку.

Работа с CSS

Umbrella JS	jQuery	Vanilla JS
`.css('property')`	`.css('property')`	`window.getComputedStyle(element).getPropertyValue('property')`
`.css('property', 'value')`	`.css('property', 'value')`	`element.style.property = 'value'`
`.show()`	`.show()`	`element.style.display = '' / 'block'`
`.hide()`	`.hide()`	`element.style.display = 'none'`
`.toggle()`	`.toggle()`	`element.style.display = (element.style.display === 'none') ? '' : 'none'`

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

Методы .show() и .hide() изменяют свойство display.
.css() поддерживает как отдельное свойство, так и объект с множеством CSS-пар.

Работа с размерами и позиционированием

Umbrella JS	jQuery	Vanilla JS
`.width()`	`.width()`	`element.offsetWidth` / `element.clientWidth`
`.height()`	`.height()`	`element.offsetHeight` / `element.clientHeight`
`.outerWidth([includeMargin])`	`.outerWidth([includeMargin])`	`element.offsetWidth + parseInt(getComputedStyle(element).marginLeft) + parseInt(getComputedStyle(element).marginRight)`
`.outerHeight([includeMargin])`	`.outerHeight([includeMargin])`	`element.offsetHeight + parseInt(getComputedStyle(element).marginTop) + parseInt(getComputedStyle(element).marginBottom)`

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

Методы Umbrella JS упрощают вычисление размеров без необходимости вручную учитывать паддинги, бордеры и margin.
outerWidth(true) включает margin при вычислении ширины.

Работа с коллекциями

Umbrella JS	jQuery	Vanilla JS
`.each(callback)`	`.each(callback)`	`Array.from(elements).forEach(callback)`
`.eq(index)`	`.eq(index)`	`elements[index]`
`.first()`	`.first()`	`elements[0]`
`.last()`	`.last()`	`elements[elements.length - 1]`

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

Методы возвращают новый объект Umbrella JS, позволяя строить цепочки вызовов.
Индексация начинается с 0.

Работа с данными

Umbrella JS	jQuery	Vanilla JS
`.data('key')`	`.data('key')`	`element.dataset.key`
`.data('key', value)`	`.data('key', value)`	`element.dataset.key = value`
`.removeData('key')`	`.removeData('key')`	`delete element.dataset.key`

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

Поддерживаются все data-* атрибуты.
Umbrella JS позволяет работать с данными без привязки к DOM напрямую, используя внутренний кэш.

Эта таблица обеспечивает полное соответствие методов Umbrella JS и аналогичных операций в jQuery и Vanilla JS. Использование таблицы позволяет быстро ориентироваться между синтаксисами и применять библиотеку максимально эффективно.