Мир веб-разработки быстро и постоянно развивается и обновляется. Возможно, сейчас настало именно то время, когда библиотека jQuery должна выйти из игры. Современные браузеры имеют встроенные BOM и DOM API, которые уже являются отраслевыми стандартами и могут использоваться при создании веб-приложений.

Что такое jQuery?

JQuery - JavaScript библиотека, которая облегчает манипулирование DOM и создание обработок. Библиотека была представлена в 2006 году, когда DOM API еще не был развит. Появление jQuery коренным образом изменило мир веб-разработки, так как эта библиотека легка в использовании и проста в понимании.

С тех пор многие люди думают, что написание JavaScript кода без jQuery - настоящая пытка. По этой причине JavaScript стали отождествлять с jQuery. Но время идет, и в настоящее время неверно считать их синонимами. Мы должны принять тот факт, что JavaScript - язык, а jQuery - библиотека. Несмотря на новые достижения в DOM и DOM API, механизмы манипулирования DOM и создания обработок с помощью jQuery не изменились.

---

В то же время, появление и развитие новых JavaScript библиотек (React, Vue) и фреймворков (Angular) изменили подход к манипулированию DOM, сделав его анти-паттерном, что в свою очередь привело к снижению популярности jQuery.

---

Сравнение jQuery и JavaScript

Нижен приведены фрагменты кода, демонстрирующие различия между Jquery и JavaScript.

Поиск элемента по ID

С помощью jQuery:

const item = $('#item');

С помощью JavaScript:

const item = document.getElementById("item");

Добавление класса

С помощью jQuery:

$(el).addClass(className);

С помощью JavaScript:

el.classList.add(className);

querySelector

С помощью jQuery:

const items = $('.list .item');
const lastItem = $('.item:last-item');

С помощью JavaScript:

const items = document.querySelectorAll('.list .item');
const lastItem = document.querySelector('.item:last-item');

Позиционирование

С помощью jQuery:

var offset = el.offset();

{
  top: offset.top - document.body.scrollTop,
  left: offset.left - document.body.scrollLeft
}

С помощью JavaScript:

el.getBoundingClientRect()

Еще больше примеров можно найти здесь.

Приведенные примеры, демонстрируют, что задачи можно решать с помощью JavaScript, не прибегая к jQuery.

Внимание

Селекторы JavaScript (VanillaJS) всегда быстрее, чем у jQuery

jQuery все еще можно использовать

jQuery незаменим для браузеров, использующих различные стандарты. В настоящее время проблема введения общих стандартов использования различных API для браузеров эффективно решается.

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

jQuery эффективен при написании сложных фрагментов кода, часто приводящих к возникновению ошибок при использовании только JavaScript.

Например:

с помощью jQuery:

$(document).ready(function(){

});
}

с помощью JavaScript:

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

Фрагменты, приведенные выше, ведут к одному и тому же результату. Но понимание необходимости использования свойства readyState часто бывает сложным для начинающих разработчиков.

Свойство readyState возвращает статус текущего документа

Другой пример:

с помощью jQuery:

$.type(obj);

с помощью JavaScript:

Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, '$1').toLowerCase();

---

Заключение

jQuery - великолепная библиотека и этот факт не вызывает сомнений. Тем не менее, будет неверным утверждать, что невозможно писать код на JavaScript, не зная jQuery.

jQuery полезен при написании сложных и больших фрагментов кода, так как такой подход позволит избежать большого количества ошибок.

Нет необходимости включать библиотеку jQuery во все проекты.

JavaScript без jQuery в любом случае демонстрирует лучшую производительность.

Каждый раз необходимо принимать индивидуальное решение: включать или не включать jQuery в текущий проект.

---

Спасибо за внимание.