Зачем вам jQuery

Представьте, что вам нужно на сайт добавить форму обратной связи и кнопку быстрого заказа. Вы пишете 200 строк на JavaScript: нужно, чтобы поля проверялись, данные отправлялись, если человек не заполнил — на него выпадала выпадайка и т. д. Всё это нужно внимательно описать, запрограммировать и протестировать. На это уходит, допустим, полтора-два часа. Работает? Да. Получилось быстро? Не очень. Чтобы было быстрее, многие используют jQuery.

Чтобы было понятно, насколько jQuery может ускорить написание кода, вот пример. Двум программистам дали задачу: сделать так, чтобы по клику в самом низу страницы она сама плавно прокручивалась до самого верха. Один решил эту задачу на чистом JavaScript:

var t;
function scrolltop() {
  var top =
    Math.max(document.body.scrollTop, document.documentElement.scrollTop);
  if (top > 0) {
    window.scrollTo(0, Math.floor(top / 1.5));
    t = setTimeout("scrolltop()", 30);
  }
  else {
    clearTimeout(t);
  }
  return false;
}

Другой использовал jQuery. У него код состоит из одной строки: 

$("html,body").animate({scrollTop:0},500);

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

Плюс: простой синтаксис

jQuery читается несколько проще, чем JavaScript, многие вещи сделаны понятнее. Например, нам нужно скрыть на странице второй по счету заголовок уровня H2.

JS:

document.querySelectorAll('h2')[1].style.setProperty('display','none');

jQ:

jQuery('h2:eq(1)').hide();

Плюс: плагины на любой случай

Что бы вы ни хотели сделать на веб-странице, скорее всего, для этого уже есть готовые плагины на jQuery. Формы подписки, всплывающая реклама, захват телефонного номера — всё это уже есть и доступно за пару команд.

Несколько примеров:

      Scrollpane — кроссбраузерный скролбар любого элемента на странице;

      jReject — проверяет, не устарел ли используемый браузер;

      GridScrolling — навигация по сайту с помощью клавиш;

      FlickerPlate — плагин для слайдеров с поддержкой сенсорных экранов;

      Animsition — создание анимированной загрузки страниц на сайте;

      SlideBars — создание адаптивного меню на сайте

и ещё тысячи готовых плагинов.

Плюс: простой доступ к странице

В чистом JavaScript обратиться к объекту на странице можно одним из способов:

document.getElementById("myElement") document.getElementsByClassName("myClass")

и еще несколько подобных

В jQuery то же самое делает одна прекрасная команда. Заодно она же совмещает в себе кучу других функций. Фактически она говорит jQuery: «Возьми ЭТО и сделай с ним что-то»:

$("myElement")

Поэтому какие-то простые манипуляции с объектами на странице выглядят элегантнее именно с jQuery. Это не значит, что их нельзя делать с простым JavaScript — можно. Но это не так красиво.

Плюс: кроссбраузерность

Многие пользователи используют старые браузеры, например Internet Explorer 11. Они это делают не потому, что не знают, как обновиться, а потому что на работе админ запретил установку любого софта; или в госучереждениях давно не обновляли компьютеры.

Тут и спасает jQuery: разработчики сами предусмотрели поддержку старых браузеров. Например, вот как может выглядеть проверка на версии Intertet Explorer:

< !--[if expression]> рабочий код < ![endif]-- >
// если Internet Explorer
[if IE]
// если НЕ Internet Explorer
[if !IE]
// если Internet Explorer 7
[if IE 7]
// если НЕ Internet Explorer 7
[if !(IE 7)]

И такие условные блоки есть для всех старых версий IE.

Если всё настолько круто, как здесь написано, то все должны уже были давно перейти на jQuery и забыть про JavaScript, но этого не происходит. Более того, у jQuery есть свои существенные минусы и ограничения.

Минус: вы контролируете не всё

Если вам нужен максимальный контроль за всем, что происходит на сайте, то лучше использовать чистый JavaScript. В этом случае вы полностью уверены в том, как ведёт себя страница, и не зависите от стороннего кода.

Если используете редкий плагин, есть риск, что он может не работать настолько надёжно, как вам нужно. К тому же, не все сторонние плагины так же хорошо оптимизированы, как сам jQuery: в итоге у вас ради какого-то одного эффекта или блока на странице появится огромная библиотека, которая будет всё страшно замедлять.

Минус: много всего

Подключать целую библиотеку ради одного эффекта — не самая лучшая идея. Иногда проще потратить лишних пять минут и сделать то же самое на JavaScript, чем тащить в проект лишних 64 килобайта кода.

Например, чтобы однократно вызвать обработчик события,  можно подключить jQuery и написать так:

$elem.one("click", someFunc);

А можно ничего не подключать и использовать простой JavaScript, который уже научился делать то же самое через третий, необязательный, параметр в addEventListener:

elem.addEventListener('click', someFunc, { once: true, });

Плюс-минус: многое можно уже сделать и на JavaScript

В самом начале, когда jQuery только появился, он сильно помогал разработчикам, потому что сам JavaScript многое не умел делать так же легко и изящно. Сейчас JS по возможностям и удобству почти догнал jQ, и то, на что раньше уходило 10 команд, теперь делается одной.

Замена одного элемента на странице на другой.

С jQuery:

$elem.replaceWith($someOtherElem);

Без jQuery:

elem.replaceWith(someOtherElem);

Минус: нет понимания технологии

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

Например, программист прикрутил на страницу какой-то эффект на базе jQuery. Потом еще один, и они начали конфликтовать. Если программист не может разобраться в устройстве этих библиотек, он не сможет разрешить конфликт — а для этого нужно понимать чистый javaScript и уметь отлаживать код.

Получается, что знать jQuery всё-таки полезно, но нужно понимать, когда без него можно обойтись.

Скоро возьмем эту библиотеку за основу и сделаем какой-нибудь полезный проект. Подписывайтесь, мы напишем, когда что-нибудь такое выйдет.