Почему раньше JQuery всем нравился, а теперь все от него уходят? Что произошло-то? Чем плох JQuery?

Когда-то JS умел мало и JQuery реально был очень полезен. Со временем JS подтянулся и научился делать всё то же самое. Поэтому сегодня можно работать без JQuery так же эффективно. Недостаток JQuery в том, что он всё обёртывает в свой JQuery-объект, который не поймёшь что такое. Что это? Элемент? Множество? Если это множество, то с ним не поработаешь как с массивом. К нему не применишь функции массивов и так далее. Если это элемент, то опять-таки это не стандартный HTML-элемент из JS, а какой-то другой. Таким образом JQuery отделяется от стандартного JS, создаёт свой собственный мир. И приходится всегда задумываться: это стандартный JS или это JQuery? Надо объект упаковать в JQuery или он уже упакован? Надо его распаковать? Ну и конечно производительность без JQuery выше.

И никто не сказал, что сейчас есть фреймворки - React и Vue - именно они и заменили jQuery, поскольку ещё более "высокоуровневые", чем он.

Надо мыслить шире. Тогда окажется, что ещё jQuery заменили готовые опен-сорсные проекты сайтов - некоторые коммерческие делаются на их основе. Таких пока единицы, но и одного хватит, чтобы сделать карьеру. Это сложные и крупные сервисы, а не просто сайтики.

Одна из главных причин - появление мобильный устройств, которое в свою очередь стимулировало более четкое разделение разработки на frontend и backend. Соотвественно такое разделение позволяет легко прикрутить к одному backend'у несколько frontend'ov (декстопный и мобильный), а для этой задачи jQuery на фронте мягко сказать не подходит, нужно формировать полностью страницу на основе полученных с бэка данных (обычно json).

Раньше чтобы при клике на элемент, переключать ему какой-то класс, писали примерно такую функцию:

var bubu = document.getElementById('bubu');

bubu.onclick = function(){
  toggleClass(this, "active");
}

function toggleClass(elem, className) {
  var reg = new RegExp("(^|\\s)" + className + "($|\\s)", "ig");
  if( elem.className.match(reg) ){
    elem.className = elem.className.replace(reg, "");
  } else {
    elem.className += (" " + className);
  }
}
_______________________

А jQuery пришел с кучей готовых и коротких решений. Там для того же действия пишут

$('#bubu').on('click', function(){
  $(this).toggleClass('active');
}
______

Или те же fadeOut, fadeIn.

А сейчас в самом JS уже можно писать

elem.classList.toggle('active');

Код на jQuery всё еще местами короче, чем на JS, но сейчас есть куча песочниц, с авто-дополнением кода... в итоге чуть более длинный код на JS, по времени не приходится писать дольше, чем на jQuery.

И не хочется подключать целую библиотеку, чтобы сэкономить пару секунд на писанину (что не факт).