2. Установка и подключение

Существует несколько способов добавить jQuery в проект.

📦 Способ 1: CDN (рекомендуется для начинающих)

Google CDN

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Demo</title>
</head>
<body>
  <h1>Hello jQuery!</h1>

  <!-- jQuery через Google CDN -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

  <!-- Твой код -->
  <script>
    $(document).ready(function() {
      $('h1').css('color', 'blue');
    });
  </script>
</body>
</html>

jQuery CDN (официальный)

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

cdnjs

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

💾 Способ 2: Локальная загрузка

Скачать с jquery.com

Перейди на jquery.com/download
Скачай jquery-3.7.1.min.js
Помести в папку проекта:

project/
├── index.html
└── js/
    └── jquery-3.7.1.min.js

Подключение

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

📦 Способ 3: NPM (для сборщиков)

Установка

npm install jquery

Использование (с Webpack/Vite)

import $ from 'jquery';

$(document).ready(() => {
  console.log('jQuery loaded!');
});

⚙️ Версии jQuery

jQuery 3.x (текущая)

Поддержка современных браузеров
Улучшенная производительность
Рекомендуется для новых проектов

jQuery 2.x (устарела)

Отказ от поддержки IE 6-8
Меньший размер файла

jQuery 1.x (legacy)

Поддержка IE 6-8
Для старых проектов

🔍 Проверка загрузки

Способ 1: Консоль браузера

if (typeof jQuery != 'undefined') {
  console.log('jQuery version: ' + jQuery.fn.jquery);
} else {
  console.log('jQuery not loaded!');
}

Способ 2: Проверка глобального объекта

if (window.jQuery) {
  console.log('jQuery is ready!');
}

🎯 Готовность DOM

$(document).ready()

Код выполнится после полной загрузки DOM:

$(document).ready(function() {
  // DOM готов, можно работать
  $('button').click(function() {
    alert('Clicked!');
  });
});

Сокращенная форма

$(function() {
  // То же самое
  $('button').click(() => alert('Clicked!'));
});

Vanilla JS аналог

document.addEventListener('DOMContentLoaded', () => {
  // DOM готов
});

⚡ Минифицированная vs обычная версия

jquery.min.js (production)

Сжатый код без пробелов
Меньший размер (~30KB)
Используй на рабочем сайте

jquery.js (development)

Читаемый код с комментариями
Больший размер (~90KB)
Удобно для отладки

🛠️ Настройка окружения

Базовый HTML шаблон

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Project</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 50px auto;
      padding: 20px;
    }
  </style>
</head>
<body>
  <h1>My jQuery App</h1>
  <button id="testBtn">Click Me!</button>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <!-- App code -->
  <script>
    $(function() {
      $('#testBtn').click(function() {
        $(this).text('Clicked!');
      });
    });
  </script>
</body>
</html>

🚀 Практика

Создай HTML файл с подключенным jQuery и проверь, что он работает: