Вам не нужен jQuery

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

Содержание

Переводы
Query Selector
CSS & Style
Манипуляция DOM
Ajax
События
Утилиты
Альтернативы
Поддержка браузеров

Переводы

한국어
简体中文
Bahasa Melayu
Bahasa Indonesia
Português(PT-BR)
Tiếng Việt Nam
Español
Русский
Кыргызча
Türkçe
Italiano
Français
日本語
Polski

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README-ru.md

README-ru.md

Вам не нужен jQuery

Содержание

Переводы

Query Selector

CSS & Style

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

Ajax

События

Утилиты

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

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

License

Files

README-ru.md

Latest commit

History

README-ru.md

File metadata and controls

Вам не нужен jQuery

Содержание

Переводы

Query Selector

CSS & Style

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

Ajax

События

Утилиты

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

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

License