Урок 1: Что такое jQuery и где его использовать?

Это первый урок по jQuery из нашего большого курса и сегодня мы разберемся с основами, что же это за библиотека, зачем она нужна в 2026 году и как сделать с ней первые шаги. Мы не будем просто заучивать теорию, а сразу же начнем практиковаться, потому что именно так знания усваиваются лучше всего. Если вы только начинаете свой путь в веб-разработке, то вам точно сюда.

Давайте начнем с самого главного вопроса, что такое jQuery? Если говорить просто, jQuery это быстрая, небольшая и богатая возможностями JavaScript-библиотека. Ее главная цель, значительно упростить взаимодействие JavaScript с HTML-документом или, как это называют разработчики, манипуляции с DOM (Document Object Model).

Представьте себе 2006 год. Интернет стремительно развивался, веб-страницы становились все более интерактивными, но браузеры были очень разными. Написать код на чистом JavaScript, который бы одинаково хорошо работал в Internet Explorer, Firefox и зараждался Chrome, было настоящей головной болью. Разработчикам приходилось писать десятки строк кода для простых операций, таких как поиск элемента на странице или обработка клика. Именно в этой непростой обстановке молодой разработчик Джон Резиг создал и выпустил jQuery. Его философия была выражена в знаменитом девизе, «Write less, do more» («Пиши меньше, делай больше»). И библиотека блестяще справилась с этой задачей.

jQuery предлагал простой и лаконичный синтаксис для решения самых распространенных задач:

• Поиск элементов на странице с помощью мощных селекторов, позаимствованных из CSS.

• Манипуляции с содержимым и внешним видом этих элементов.

• Обработка событий (клики, наведение курсора, отправка форм и т.д.).

• Создание анимаций и эффектов.

• Упрощение работы с AJAX для загрузки данных без перезагрузки страницы.

Библиотека абстрагировала все несовместимости браузеров, предоставляя единый, чистый API. Это сделало ее мгновенно невероятно популярной. На пике своей славы jQuery использовался на огромном количестве сайтов по всему миру.

А почему jQuery до сих пор стоит учить?

Закономерный вопрос в эпоху современных фреймворков, таких как React, Vue и Angular. Вот несколько веских причин:

1. Наследие и поддержка старых проектов. Огромное количество существующих веб-сайтов и веб-приложений по-прежнему используют jQuery. Если вы планируете работать веб-разработчиком, вы почти наверняка столкнетесь с legacy-кодом, написанным на jQuery. Умение его понимать и поддерживать, это ценный навык на рынке труда.

2. Идеальный мост для начинающих. jQuery прекрасный следующий шаг после изучения HTML и CSS. Он позволяет сразу же увидеть результат своих действий: «оживить» статичную страницу, заставив элементы двигаться, появляться и реагировать на пользователя. Это очень мотивирует! Он учит вас работать с DOM и событиями, что является фундаментальным знанием для любого фронтенд-разработчика, даже если вы потом перейдете на фреймворки.

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

4. Огромная экосистема. За годы существования вокруг jQuery выросла колоссальная экосистема плагинов, готовых решений для слайдеров, галерей, модальных окон и многого другого. Иногда проще и быстрее подключить готовый плагин, чем писать функционал с нуля.

Таким образом, изучение jQuery это не шаг в прошлое, а инвестиция в понимание эволюции веб-разработки и приобретение практического навыка, который все еще востребован.

Как подключить jQuery к проекту?

Прежде чем мы напишем первую строчку кода, нам нужно подключить саму библиотеку к нашей HTML-странице. Сделать это можно двумя основными способами. Используя CDN или загрузив файл локально. Давайте разберем оба варианта.

Способ 1: Подключение через CDN

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

Преимущества:

• Высокая скорость загрузки. Благодаря географическому распределению и кешированию.

• Возможность кеширования. Высока вероятность, что библиотека jQuery уже есть в кеше браузера пользователя, если он до этого посещал другой сайт, использующий тот же CDN-адрес. Это ускоряет загрузку вашего сайта.

Самый известный и надежный CDN для jQuery, это официальный CDN от jQuery Foundation, но также популярны CDN от Google и Microsoft.

Вот как это выглядит в коде. Мы добавляем тег <script> в раздел <head> нашего HTML-документа (хотя часто его подключают перед закрывающим тегом </body> для оптимизации загрузки страницы).

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Мой первый jQuery проект</title>
    <!-- Подключение jQuery через официальный CDN -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <h1>Привет, jQuery!</h1>
    <!-- Здесь будет наш код -->
</body>
</html>

Способ 2: Подключение локальной версии

Этот способ предполагает, что вы скачиваете файл библиотеки (обычно это один .js файл, например, jquery-3.7.1.min.js) и размещаете его в папке вашего проекта, например, в js/.

Преимущества:

• Независимость от интернета. Вы можете разрабатывать проект без подключения к сети.

• Контроль над версией. У вас всегда одна и та же версия, которая не изменится без вашего ведома.

Недостатки:

• Нет преимуществ кеширования от CDN.

• Вы сами отвечаете за размещение и обновление файла.

Скачать последнюю версию jQuery всегда можно на официальном сайте: https://jquery.com/. Файл с суффиксом .min.js является «минифицированным». Из него удалены все лишние пробелы и комментарии, чтобы уменьшить размер и ускорить загрузку. Именно его следует использовать на «боевом» сайте.

Пример подключения локального файла:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Мой первый jQuery проект</title>
    <!-- Подключение локальной версии jQuery -->
    <script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
    <h1>Привет, jQuery!</h1>
</body>
</html>

Какой способ выбрать?

Для большинства случаев, особенно для обучения и реальных проектов, я рекомендую использовать CDN. Это проще, надежнее и, как правило, быстрее для конечного пользователя. В этом курсе мы будем использовать именно этот способ.

Практическая задача 1:

• Создайте новую папку для проекта.

• Внутри создайте файл index.html.

• Скопируйте базовый HTML-код, приведенный выше и подключите jQuery через CDN.

• Откройте файл в браузере. Пока визуально ничего не изменится, но библиотека уже готова к работе!

Первый код: $(document).ready().

Теперь, когда библиотека подключена, мы можем написать наш первый код на jQuery. И он начнется с очень важной конструкции: $(document).ready().

Чтобы понять, зачем она нужна, давайте представим, как браузер загружает страницу. Он читает HTML сверху вниз. Как только он встречает тег <script>, он начинает его выполнять. Если наш скрипт пытается найти какой-то HTML-элемент (например, <h1>) и что-то с ним сделать, но этот элемент еще не был «прочитан» и создан браузером (то есть расположен в коде ниже скрипта), то наш код потерпит неудачу. Он просто не найдет этот элемент.

Конструкция $(document).ready() решает эту проблему. Она говорит браузеру: «Эй, выполни этот код только тогда, когда весь HTML-документ полностью загружен и готов к работе, но до полной загрузки медиафайлов (вроде картинок)». Это событие «готовности DOM».

Синтаксис:

$(document).ready(function() {
    // Весь ваш jQuery-код будет находиться здесь, внутри этой функции.
    console.log("DOM готов! Можно безопасно работать с элементами.");
});

Существует также сокращенный, полностью эквивалентный синтаксис, который используется даже чаще:

$(function() {
    // Код здесь выполнится, когда DOM будет готов.
    console.log("И эта запись означает то же самое!");
});

Оба варианта абсолютно равнозначны. Я рекомендую использовать тот, который вам больше нравится. В этом курсе я буду использовать короткую запись $(function() { ... });.

Использование $(document).ready() это признак хорошего тона и залог отсутствия трудноуловимых ошибок, когда скрипт не срабатывает потому, что «не нашел элемент». Это основа стабильной работы любого jQuery-кода.

Практическая задача 2:

• В ваш файл index.html, после подключения jQuery, но перед закрывающим тегом </body>, добавьте новый тег <script>.

• Внутри него используйте конструкцию $(function() { ... });.

• Внутри фигурных скобок напишите код: alert("Мой первый jQuery-код работает!");.

• Сохраните файл и обновите страницу в браузере. Вы должны увидеть всплывающее окно сразу после загрузки страницы.

Пример кода:

<!-- ... предыдущий HTML ... -->
<script>
    $(function() {
        alert("Мой первый jQuery-код работает!");
    });
</script>
</body>
</html>

Основной синтаксис: $(селектор).действие().

Вот мы и добрались до основе jQuery, его основного синтаксиса. Он настолько прост и логичен, что именно за это библиотеку и полюбили миллионы разработчиков. Вся магия строится на одной схеме:

$(селектор).действие();

Давайте разберем каждую часть этого выражения.

• $ (Доллар) или jQuery. Это просто функция, псевдоним для jQuery. Когда вы пишете $, вы обращаетесь к главной функции библиотеки. Все операции в jQuery начинаются с этого символа.

• Селектор. Это строка в кавычках, которая указывает, какие именно HTML-элементы мы хотим выбрать. Селекторы пришли прямиком из CSS, так что если вы умеете писать CSS-стили, вы уже почти умеете выбирать элементы в jQuery!

  1. $("p") выберет все элементы <p> (параграфы) на странице.

  2. $("#header") выберет элемент с id="header".

  3. $(".my-class") выберет все элементы с class="my-class".

• Действие (Метод). Это то, что мы хотим сделать с выбранными элементами. jQuery предоставляет сотни методов для самых разных задач: изменить текст, скрыть элемент, обработать клик и многое другое.

  1. .hide() скрыть выбранные элементы.

  2. .text("Новый текст") изменить текстовое содержимое.

  3. .addClass("active") добавить CSS-класс.

Теперь давайте соберем все вместе и напишем несколько простых, но работающих примеров. Предположим, у нас есть такой HTML:

<body>
    <h1 id="main-title">Заголовок страницы</h1>
    <p class="content">Это первый абзац.</p>
    <p class="content">Это второй абзац.</p>
    <button id="myButton">Нажми на меня!</button>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(function() {
            // Пример 1: Скрываем все параграфы с классом .content
            $(".content").hide();

            // Пример 2: Меняем текст заголовка
            $("#main-title").text("jQuery это здорово!");

            // Пример 3: Обрабатываем клик по кнопке
            $("#myButton").click(function() {
                // При клике показываем все скрытые параграфы
                $(".content").show();
            });
        });
    </script>
</body>

Что произойдет при загрузке этой страницы?

1. Страница загрузится, DOM будет готов.

2. Сработает код внутри $(function() { ... });.

3. Все элементы с классом content (наши два параграфа) будут мгновенно скрыты.

4. Текст внутри заголовка с id="main-title" поменяется на «jQuery это здорово!».

5. На кнопку будет навешан обработчик события click. При нажатии на кнопку выполнится функция, которая снова покажет все скрытые параграфы.

Видите, как это просто и логично? Мы буквально на естественном языке описываем, что хотим сделать: «Для всех элементов с классом content выполни действие «hide»».

Практическая задача 3:

• Добавьте в ваш index.html кнопку и несколько параграфов, как в примере выше.

• Напишите jQuery-код, который при загрузке страницы меняет цвет текста всех параграфов на синий (подсказка: используйте метод .css("color", "blue")).

• Затем напишите код, который при клике на кнопку меняет текст заголовка <h1> на «Я освоил базовый синтаксис jQuery!».

Возможное решение:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Практика с jQuery</title>
</head>
<body>
    <h1>Изначальный заголовок</h1>
    <p>Первый параграф.</p>
    <p>Второй параграф.</p>
    <button id="changeTitle">Изменить заголовок</button>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(function() {
            // Меняем цвет всех параграфов на синий
            $("p").css("color", "blue");

            // Обработчик клика на кнопку
            $("#changeTitle").click(function() {
                $("h1").text("Я освоил базовый синтаксис jQuery!");
            });
        });
    </script>
</body>
</html>

Итоги первого урока

Вы только что сделали первый и самый важный шаг в изучении jQuery. Сегодня мы узнали:

• Что такое jQuery и почему он был так важен в истории веб-разработки.

• Почему его изучение до сих пор является ценным навыком.

• Как правильно подключить библиотеку к проекту через CDN или локально.

• Зачем нужна и как работает конструкция $(document).ready().

• Освоили основной синтаксис $(селектор).действие() и применили его на практике.

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

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