Статья

Foops 19 Июня

📘 Урок 1: Что такое jQuery и зачем он нужен

Оглавление

🔹 Как подключить jQuery к сайту

Цель: познакомить начинающих с jQuery, объяснить, зачем он нужен, в чём его преимущества и как он используется в реальной разработке.

🔹 Что такое jQuery?

jQuery — это популярная библиотека JavaScript, созданная для упрощения взаимодействия с HTML-документом, обработки событий, анимаций и AJAX-запросов. Она была создана в 2006 году Джоном Резигом и быстро стала стандартом де-факто в веб-разработке.

Её основной девиз:

«Write less, do more» — «Пиши меньше, делай больше».

Это значит, что jQuery позволяет выполнять сложные действия с минимальным количеством кода.

🔹 Почему jQuery был (и остаётся) так популярен?

На заре веб-разработки JavaScript был медленным, громоздким и плохо совместимым между браузерами. Каждому разработчику приходилось писать десятки строк кода, чтобы:

Найти элемент по классу или id,
Повесить событие на кнопку,
Отправить AJAX-запрос без перезагрузки страницы.

jQuery решил все эти проблемы:

Упростил синтаксис,
Сгладил различия между браузерами,
Дал мощные инструменты в коротких конструкциях.

Даже сегодня, когда нативный JavaScript сильно эволюционировал, jQuery остаётся полезным:

В старых проектах,
В небольших сайтах и админках,
Там, где нужен быстрый результат без сборщиков и фреймворков.

🔹 Пример: сравнение кода

Чтобы выбрать все элементы с классом .menu-item и добавить к ним обработчик клика:

📦 JavaScript:

const items = document.querySelectorAll('.menu-item');
items.forEach(item => {
  item.addEventListener('click', function() {
    alert('Clicked!');
  });
});

📦 jQuery:

$('.menu-item').click(function() {
  alert('Clicked!');
});

Разница очевидна. И это только начало.

🔹 Что можно делать с jQuery?

Вот ключевые области, где jQuery помогает:

✅ Работа с DOM

DOM (Document Object Model) — это представление HTML-страницы в виде объекта. jQuery упрощает:

Поиск и выбор элементов
Изменение стилей, классов и атрибутов
Добавление и удаление элементов

✅ Обработка событий

jQuery делает добавление событий простым и кроссбраузерным:

$('#submitBtn').on('click', function() {
  // действие
});

✅ Анимации и эффекты

Можно легко показать/скрыть элементы, анимировать свойства и создавать плавные переходы:

$('#box').fadeIn(500);

✅ AJAX-запросы

Общение с сервером без перезагрузки страницы — важная часть современной веб-разработки. jQuery делает это очень просто:

$.get('/data.json', function(data) {
  console.log(data);
});

🔹 Как подключить jQuery к сайту?

Способ 1: через CDN (рекомендуется)

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

Плюсы:

Не нужно скачивать,
Браузеры могут использовать кэшированные версии,
Быстро и просто.

Способ 2: локально

Скачай jQuery с официального сайта и подключи:

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

🔹 Как проверить, работает ли jQuery?

Подключи jQuery в <head> или перед </body>.
Добавь скрипт:

<script>
  $(document).ready(function() {
    alert('jQuery работает!');
  });
</script>

Если появляется сообщение — всё подключено верно.

🔹 Где jQuery использовать НЕ стоит?

Хотя jQuery всё ещё полезен, у него есть ограничения:

Он не нужен в React/Vue/Angular — там свои системы управления DOM.
В тяжёлых SPA-приложениях предпочтительнее использовать чистый JavaScript или фреймворки.
Если ты создаёшь сложные анимации — лучше использовать CSS/GSAP.

Но для лендингов, админок, форм, галерей и панелей управления jQuery всё ещё идеален.

🔹 Преимущества и недостатки jQuery

Преимущества	Недостатки
Простой и лаконичный код	Библиотека всё же «тяжеловата»
Отличная совместимость	Чуть медленнее, чем чистый JS
Множество плагинов	Устаревает по сравнению с современным JS
Отличная документация	Не подходит для SPA и масштабных проектов

🔹 Реальный пример: показать/скрыть блок по кнопке

<button id="toggle">Показать/Скрыть</button>
<div id="text" style="display:none;">Это скрытый текст</div>

<script>
  $('#toggle').click(function() {
    $('#text').slideToggle();
  });
</script>

🔹 Что изучим в следующих уроках?

В следующих статьях мы подробно разберём:

Все виды селекторов jQuery (как выбирать элементы),
Базовые методы для управления контентом и стилями,
Обработку событий и работу с формами,
AJAX и обмен данными с сервером,
И, конечно, создадим реальные мини-проекты на практике.

📌 Заключение

jQuery — это мощный инструмент, который значительно упрощает веб-разработку. Несмотря на развитие JavaScript, он остаётся актуальным для небольших и средних проектов. Это отличное место для старта, особенно если ты только начинаешь.

Jquery

+ Читать