Бібліотека функцій jQuery

jQuery - javascript-бібліотека, розроблена для полегшення роботи з DOM веб-сторінки, анімації та асинхронними запитами до сервера за технологією AJAX.

http://jquery.com - домашня сторінка бібліотеки.

http://api.jquery.com - документація.

https://jquery-docs.ru - документація російською мовою.

http://code.jquery.com - версії бібліотеки.

Версії:

1.x - підтримує старі версії браузерів, в т.ч. IE 6-7
2.x - прибрана підтримка старих версій браузерів
3.x - підтримуються тільки свіжі версії браузерів і такі, що мають значну долю ринку
3.x slim - "тонка" версія, видалено ajax, анімацію та деякі функції, що рідко використовуються.

Підключення та використання jQuery

Бібліотеки підключаємо в першу чергу, далі - плагіни, користувацькі скрипти - в останню чергу:

<script src="js/jquery-1.9.min.js"></script>
<script src="js/script.js"></script>

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery.cycle2.min.js"></script>
<script src="js/script.js"></script>

Перевірте, чи підключена бібліотека jQuery до даної сторінки, введіть в консолі:

jQuery

Повторіть цю операцію до сторінки пошуку Google.

Для уникнення конфліктів з іншими бібліотеками, плагінами та користувацькими змінними код jQuery пишуть у функції-обгортці.

Наприклад, в проекті потрібно використати дві бібліотеки, і обидві використовують символ долара як ім'я функції чи змінної:

(function($){
  // код, що використовує jQuery
  ...
})(jQuery);

(function($){
  // код, що використовує бібліотеку jsSuperTool
  ...
})(jsSuperTool);

При цьому ми ізолюємо змінну з ім'ям значка долара лише межами даної функції.

Всередині цього замикання можна використовувати як псевдонім, так і повне ім'я функції:

(function($){
  jQuery('.active').text('Active item');
  $('.active').removeClass('active');
})(jQuery);

Обгортки можуть мати різний вигляд, але суть у них одна - ізолювати змінну $.

Заради справедливості - ви можете використовувати і повне ім'я функції, і псевдонім без всілякої обгортки:

jQuery('.active').text('Active item');
$('.active').removeClass('active');

Таким чином, $ === jQuery, в цьому можна переконатися переглянувши код внизу скрипта code.jquery.com/jquery-latest.js.