Зачем вам jQuery

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

jQuery — спе­ци­аль­ная биб­лио­те­ка, напи­сан­ная на JavaScript, в кото­рой мно­гие типо­вые дей­ствия про­пи­са­ны как одна коман­да. Пред­ставь­те, что это набор гото­вых дета­лей кон­струк­то­ра, из кото­ро­го собрать про­грам­му полу­ча­ет­ся быст­рее. Прав­да, не все зада­чи реша­ют­ся дета­ля­ми кон­струк­то­ра…

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

    
language: 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

Что­бы вся магия jQuery зара­бо­та­ла, нуж­но его под­клю­чить в HTML-странице:

<script src="https://yastatic.net/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>

Эта коман­да гово­рит бра­у­зе­ру: «Иди на сер­вер Яндек­са по вот тако­му пути, най­ди там файл jquery.min.js, будем рабо­тать с этой биб­лио­те­кой и писать на ней скрип­ты». Даль­ше мы собра­ли спи­сок плю­сов и самых вес­ких при­чин исполь­зо­вать jQuery в про­ек­тах. Это будет полез­но знать тем, кто хочет делать что-то для веба или луч­ше пони­мать, как устро­е­ны сай­ты изнут­ри.

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

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.getElementsByTagName("td")
document.getElementsByClassName("myClass")

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

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

$("myElement")

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

Пример манипуляции с объектами

Пред­ставь­те, что у нас есть стра­ни­ца, на кото­рой есть важ­ные плаш­ки. Такие же, как на этой, и у всех задан класс “SomeClass”. И в зави­си­мо­сти от вре­ме­ни суток, бра­у­зе­ра или настро­е­ния про­грам­ми­ста сайт дол­жен эти плаш­ки скры­вать, добав­лять новые или как-то их менять. Вот, что мож­но, к при­ме­ру, с ними делать:

  • уда­лять все плаш­ки:

var $elem = $(".SomeClass") //Выбираем элементы.

$elem.remove(); //Удаляем их.

  • добав­лять новые:

$elem.prepend($someOtherElem);

  • встав­лять ещё одни перед ними:

$elem.before($someOtherElem);

  • заме­нять их на что-то дру­гое:

$elem.replaceWith($someOtherElem);

  • и про­сто плав­но пока­зы­вать на экране:

$elem.fadeIn();

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

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

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

    
language: JavaScript
<!--[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 всё-таки полез­но, но нуж­но пони­мать, когда без него мож­но обой­тись.

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