README-ru

Вам не нужен jQuery

В наше время среда front-end разработки быстро развивается, и современные браузеры достаточно хорошо реализовали работу с DOM/BOM API. Вам не нужно изучать jQuery с нуля для манипуляцией DOM'ом или объектами событий. В то же время, благодаря лидирующим front-end библиотекам, таким как React, Angular и Vue, манипуляция DOM'ом напрямую становится антипаттерном, а jQuery теряет свою значимость. Этот проект объединяет большинство альтернативных методов jQuery в нативном исполнении с поддержкой IE 10+.

Содержание

  1. Переводы

  2. Query Selector

  3. CSS & Style

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

  5. Ajax

  6. События

  7. Утилиты

  8. Альтернативы

  9. Поддержка браузеров

Переводы

Query Selector

Для часто используемых селекторов, таких как class, id или attribute мы можем использовать document.querySelector или document.querySelectorAll для замены. Разница такова:

  • document.querySelector возвращает первый совпавший элемент

  • document.querySelectorAll возвращает все совпавшие элементы как список узлов (NodeList). Его можно конвертировать в массив, используя Array.prototype.slice.call(document.querySelectorAll(selector));

  • Если никакие элементы не совпадут, jQuery и document.querySelectorAll вернет [] где document.querySelector вернет null.

Заметка: document.querySelector и document.querySelectorAll достаточно МЕДЛЕННЫ, старайтесь использовать getElementById, document.getElementsByClassName или document.getElementsByTagName если хотите улучшить производительность.

  • 1.0 Query by selector

    // jQuery
$('selector');

// Native
document.querySelectorAll('selector');

  • 1.1 Запрос по классу

    // jQuery
$('.class');

// Native
document.querySelectorAll('.class');

// или
document.getElementsByClassName('class');

  • 1.2 Запрос по ID

    // jQuery
$('#id');

// Native
document.querySelector('#id');

// или
document.getElementById('id');

  • 1.3 Запрос по атрибуту

    // jQuery
$('a[target=_blank]');

// Native
document.querySelectorAll('a[target=_blank]');

  • 1.4 Найти среди потомков

    // jQuery
$el.find('li');

// Native
el.querySelectorAll('li');

  • 1.5 Родственные/Предыдущие/Следующие Элементы

    • Родственные элементы

      // jQuery
$el.siblings();

// Native
Array.prototype.filter.call(el.parentNode.children, (child) =>
  child !== el
);

    • Предыдущие элементы

      // jQuery
$el.prev();

// Native
el.previousElementSibling;

    • Следующие элементы

      // jQuery
$el.next();

// Native
el.nextElementSibling;

  • 1.6 Ближайший

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

    // jQuery
$el.closest(selector);

// Native - только последние версии браузеров, без IE
el.closest(selector);

// Native - IE10+
function closest(el, selector) {
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  while (el) {
    if (matchesSelector.call(el, selector)) {
      return el;
    } else {
      el = el.parentElement;
    }
  }
  return null;
}

  • 1.7 Родители до

    Получить родителей каждого элемента в текущем результате совпавших элементов, но не включая элемент, совпавший с указанным селектором, узлом DOM'а, или объектом jQuery.

    // jQuery
$el.parentsUntil(selector, filter);

// Native
function parentsUntil(el, selector, filter) {
  const result = [];
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  // Совпадать начиная от родителя
  el = el.parentElement;
  while (el && !matchesSelector.call(el, selector)) {
    if (!filter) {
      result.push(el);
    } else {
      if (matchesSelector.call(el, filter)) {
        result.push(el);
      }
    }
    el = el.parentElement;
  }
  return result;
}

  • 1.8 Форма

    • Input/Textarea

      // jQuery
$('#my-input').val();

// Native
document.querySelector('#my-input').value;

    • Получить индекс e.currentTarget между .radio

      // jQuery
$('.radio').index(e.currentTarget);

// Native
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);

  • 1.9 Содержимое Iframe

    $('iframe').contents() возвращает contentDocument именно для этого iframe

    • Контент Iframe

      // jQuery
$iframe.contents();

// Native
iframe.contentDocument;

    • Iframe Query

      // jQuery
$iframe.contents().find('.css');

// Native
iframe.contentDocument.querySelectorAll('.css');

  • 1.10 Найти body

    // jQuery
$('body');

// Native
document.body;

  • 1.11 Получение и изменение атрибута

    • Найти атрибут

      // jQuery
$el.attr('foo');

// Native
el.getAttribute('foo');

    • Добавление атрибута

      // jQuery, помните, это происходит в памяти без изменения DOM
$el.attr('foo', 'bar');

// Native
el.setAttribute('foo', 'bar');

    • Найти data- атрибут

      // jQuery
$el.data('foo');

// Native (используя `getAttribute`)
el.getAttribute('data-foo');

// Native (используя `dataset`, если не требуется поддержка ниже IE 11)
el.dataset['foo'];

⬆ Наверх

CSS & Style

  • 2.1 CSS

    • Получить стили

      // jQuery
$el.css('color');

// Native
// ЗАМЕТКА: Известная ошибка, возвращает 'auto' если значение стиля 'auto'
const win = el.ownerDocument.defaultView;

// null означает не возвращать псевдостили
win.getComputedStyle(el, null).color;

    • Присвоение style

      // jQuery
$el.css({ color: '#f01' });

// Native
el.style.color = '#f01';

    • Получение/Присвоение стилей

      Заметьте что если вы хотите присвоить несколько стилей за раз, вы можете сослаться на setStyles метод в пакете oui-dom-utils.

  • Добавить класс

    // jQuery
$el.addClass(className);

// Native
el.classList.add(className);

  • Удалить class

    // jQuery
$el.removeClass(className);

// Native
el.classList.remove(className);

  • Имеет ли класс

    // jQuery
$el.hasClass(className);

// Native
el.classList.contains(className);

  • Переключить класс

    // jQuery
$el.toggleClass(className);

// Native
el.classList.toggle(className);

  • 2.2 Ширина и Высота

    Ширина и высота теоретически имеют общие свойства, например возьмем высоту:

    • Высота окна

      // Высота окна
$(window).height();

// вместе с полосой прокрутки
window.document.documentElement.clientHeight;

// без полосы прокрутки, ведет себя как jQuery
window.innerHeight;

    • Высота документа

      // jQuery
$(document).height();

// Native
const body = document.body;
const html = document.documentElement;
const height = Math.max(
  body.offsetHeight,
  body.scrollHeight,
  html.clientHeight,
  html.offsetHeight,
  html.scrollHeight
);

    • Высота элемента

      // jQuery
$el.height();

// Native
function getHeight(el) {
  const styles = window.getComputedStyle(el);
  const height = el.offsetHeight;
  const borderTopWidth = parseFloat(styles.borderTopWidth);
  const borderBottomWidth = parseFloat(styles.borderBottomWidth);
  const paddingTop = parseFloat(styles.paddingTop);
  const paddingBottom = parseFloat(styles.paddingBottom);
  return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}

// С точностью до целого числа（когда `border-box`, это `height - border`; когда `content-box`, это `height + padding`）
el.clientHeight;

// С точностью до десятых（когда `border-box`, это `height`; когда `content-box`, это `height + padding + border`）
el.getBoundingClientRect().height;

  • 2.3 Позиция и смещение

    • Position

      Получить текущие координаты элемента относительно смещения его родителя

      // jQuery
$el.position();

// Native
{ left: el.offsetLeft, top: el.offsetTop }

    • Offset

      Получить текущие координаты элемента относительно документа

      // jQuery
$el.offset();

// Native
function getOffset (el) {
  const box = el.getBoundingClientRect();

  return {
    top: box.top + window.pageYOffset - document.documentElement.clientTop,
    left: box.left + window.pageXOffset - document.documentElement.clientLeft
  };
}

  • 2.4 Прокрутка вверх

    // jQuery
$(window).scrollTop();

// Native
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

⬆ Наверх

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

  • 3.1 Remove

    Удаление элемента из DOM.

    // jQuery
$el.remove();

// Native
el.parentNode.removeChild(el);

  • 3.2 Text

    • Получить текст

      Получить текстовое содержимое элемента, включая его потомков,

      // jQuery
$el.text();

// Native
el.textContent;

    • Присвоить текст

      // jQuery
$el.text(string);

// Native
el.textContent = string;

  • 3.3 HTML

    • Получить HTML

      // jQuery
$el.html();

// Native
el.innerHTML;

    • Присвоить HTML

      // jQuery
$el.html(htmlString);

// Native
el.innerHTML = htmlString;

  • 3.4 Append

    Добавить родительскому элементу новый дочерний элемент.

    // jQuery
$el.append('<div id="container">Hello World</div>');

// Native (строка HTML)
el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');

// Native (элемент)
el.appendChild(newEl);

  • 3.5 Prepend

    Добавить родительскому элементу новый дочерний элемент перед остальными

    // jQuery
$el.prepend('<div id="container">Hello World</div>');

// Native (строка HTML)
el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');

// Native (элемент)
el.insertBefore(newEl, el.firstChild);

  • 3.6 insertBefore

    Вставка нового элемента перед выбранным элементом

    // jQuery
$newEl.insertBefore(selector);

// Native (строка HTML)
el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>');

// Native (элемент)
const el = document.querySelector(selector);
if (el.parentNode) {
  el.parentNode.insertBefore(newEl, el);
}

  • 3.7 insertAfter

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

    // jQuery
$newEl.insertAfter(selector);

// Native (строка HTML)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');

// Native (элемент)
const el = document.querySelector(selector);
if (el.parentNode) {
  el.parentNode.insertBefore(newEl, el.nextSibling);
}

  • 3.8 is

    Возвращает true если совпадает с селектором запроса

    // jQuery - заметьте что `is` так же работает с `function` или `elements` которые не имеют к этому отношения
$el.is(selector);

// Native
el.matches(selector);

⬆ Наверх

Ajax

Fetch API - новый стандарт, заменяющий XMLHttpRequest для ajax. Работает в Chrome и Firefox, вы можете использовать полифилы, для поддержки старых браузеров.

Попробуйте github/fetch для IE9+ или fetch-ie8 для IE8+, fetch-jsonp для JSONP-запросов.

  • 4.1 Загрузить данные с сервера и поместить полученный HTML в элемент.

    // jQuery
$(selector).load(url, completeCallback)

// Native
fetch(url).then(data => data.text()).then(data => {
  document.querySelector(selector).innerHTML = data
}).then(completeCallback)

⬆ Наверх

События

Для полной замены пространства имен и делегирования, используйте oui-dom-events

  • 5.0 Готовность документа по событию DOMContentLoaded

    // jQuery
$(document).ready(eventHandler);

// Native
// Проверяем, что событие DOMContentLoaded было выполнено
if (document.readyState === 'complete' || document.readyState !== 'loading') {
  eventHandler();
} else {
  document.addEventListener('DOMContentLoaded', eventHandler);
}

  • 5.1 Связать событие используя on

    // jQuery
$el.on(eventName, eventHandler);

// Native
el.addEventListener(eventName, eventHandler);

  • 5.2 Отвязать событие используя off

    // jQuery
$el.off(eventName, eventHandler);

// Native
el.removeEventListener(eventName, eventHandler);

  • 5.3 Trigger

    // jQuery
$(el).trigger('custom-event', {key1: 'data'});

// Native
if (window.CustomEvent) {
  const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
  const event = document.createEvent('CustomEvent');
  event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}

el.dispatchEvent(event);

⬆ Наверх

Утилиты

  • 6.1 isArray

    // jQuery
$.isArray(array);

// Native
Array.isArray(array);

  • 6.2 Trim

    // jQuery
$.trim(string);

// Native
string.trim();

  • 6.3 Назначение объекта

    Дополнительно, используйте полифил object.assign https://github.com/ljharb/object.assign

    // jQuery
$.extend({}, defaultOpts, opts);

// Native
Object.assign({}, defaultOpts, opts);

  • 6.4 Contains

    // jQuery
$.contains(el, child);

// Native
el !== child && el.contains(child);

⬆ Наверх

Альтернативы

  • You Might Not Need jQuery - Примеры как исполняются частые события, элементы, ajax и тд с ванильным javascript.

  • npm-dom и webmodules - Отдельные DOM модули можно найти на NPM

Поддержка браузеров

Latest ✔

Latest ✔

10+ ✔

Latest ✔

6.1+ ✔

License

MIT

PreviousREADMENextREADME-tr

Last updated