Як підключити JQuery до HTML-документа

JQuery — це найбільш об'ємна і популярна бібліотека скриптів для того, щоб максимально доповнити функціонал веб-сторінки. Її використання вважається у багатьох випадках є більш переважним, ніж написання окремих скриптів для сайту, тому що дану бібліотеку відрізняє надійність і можливість роботи у всіх браузерах, в тому числі, на їх старих версіях. Також використання JQuery оптимізує роботу сайту і створює набагато менше навантаження, ніж "чистий" код на jаvascript. У цій статті ми розберемося, як підключити JQuery до вашого сайту.

Як скачати JQuery

Для того, щоб підключити бібліотеку JQuery веб-сторінки, її необхідно завантажити і додати в папку з jаvascript-файлів в директорії, де розташовані файли веб-сторінки. Бібліотеку можна завантажити на офіційному сайті, прямо на головній сторінці буде вказана остання версія JQuery і посилання на скачування. Виглядає це так: Відповідно, ми можемо бачити, що остання версія бібліотеки Jquery на сьогоднішній день (жовтень 2018 року) — v331. Рекомендується стежити за оновленнями і регулярно підключати актуальну версію, щоб уникнути помилок у відображенні інформації на сайті.


Після того, як файл завантажено, його потрібно розмістити в директорії на хостингу, де викладені інші файли сайту. Якщо веб-сторінка ще не викладена в мережу, а знаходиться на комп'ютері, скачаний файл просто поміщають у відповідну папку. Якщо вона вже перенесена на сервер, то потрібно скористатися будь-яким файловим менеджером для перенесення даних (наприклад, WinSCP або FileZilla). Для зберігання JS-скриптів краще виділити окрему папку. У неї переноситься і JQuery.

Підключення завантаженої бібліотеки

Як підключити бібліотеку JQuery в HTML документ. Спочатку відкрийте в будь-якому редакторі тексту або коду HTML сторінки вашого сайту. У тому випадку, якщо ви проводите роботу на CMS, потрібно зайти в розділ, де вносяться зміни у блок head.


Далі області вводиться наступний код з посиланням, яка вказує, як підключити скрипти JQuery і веде у відповідну директорію. Це буде виглядати наступним чином:

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

Відповідно, scripts — це папка, в якій розташована шукана бібліотека, далі слід її повна назва з роздільною здатністю (за аналогією з підключенням будь-яких інших файлів до документа). Як бачите, використовується тег <script> з атрибутом src, задає шлях до файлу.

Цей спосіб підключення JQuery є найпоширенішим, але в деяких випадках може незначно знижувати швидкодію сайту.

Підключення JQuery в Wordpress

Wordpress — одна з найпопулярніших CMS для розробки сайтів і блогів. Розглянемо, як підключити JQuery в Wordpress.

Не буде помилкою підключити бібліотеку методом, описаним вище через блок head, але для оптимізації роботи сайту рекомендується наступний метод.

Скачувати бібліотеку в даному випадку не потрібно. Потрібно зайти в режим редагування файлу functions.php і прописати в ньому наступний код:

  function my_enqueue_scripts() {
 wp_enqueue_script('jquery'); 
} 
 add_action('wp_enqueue_scripts', 'my_enqueue_scripts');  

Таким чином підключення буде виконано.

Використання JQuery за допомогою Google

Існує зручний спосіб використання сервісів Google для підключення JQuery до сайту. До його переваг можна віднести підвищення швидкодії сайту, так як задіяні стають не файли з внутрішньої системи документа, а зовнішній ресурс, тобто, додатковий час на завантаження не витрачається, і сторінка працює швидше.

Як підключити JQuery до сайту за допомогою Google.

Необхідно так само, як і в першому методі, зайти в блок всіх HTML-документів, далі внести туди наступний код:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

Це пряме посилання на бібліотеку, викладену безпосередньо на сервісі Google. Надалі, коли скрипт буде звертатися до бібліотеки, він буде завантажувати відразу звідти. Важливо звернути увагу на те, що в засланні повинна бути вказана остання версія JQuery. Код з останньою версією можна взяти з сервісу Google Developers, знайшовши через пошук по назві бібліотеки.

Варіанти JQuery

Задаючись питанням, як підключити JQuery до сайту, ви, мабуть, звертали увагу на те, що при скачуванні стають доступні два файлу, один з яких має в назві додатковий "min", а другий ні. Обидва ці варіанту можуть бути використані в підключенні до веб-сторінці, проте між ними є різниця. Версія з min в назві є стислою, так як з неї вилучені всі зайві символи, такі як табуляція і переноси рядків. Практично неможливо використовувати її для внесення правок та налагодження, однак вона показує гарну швидкодію при підключенні до сайту. Несжатую версію, навпаки, добре використовувати при налагодженні коду, але вона більше важить, і для підключення до сайту її використовувати не рекомендується.

Висновок

Отже, ми розглянули основні методи і дізналися, як підключити скрипти JQuery до HTML-документа. В залежності від поставлених цілей і завдань, а також спираючись на питання особистого зручності, можна використовувати будь-який варіант із запропонованих. Бібліотека JQuery — це відмінний спосіб розширити функціонал сайту, не втрачаючи в продуктивності.