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

1. Подключение jQuery

Вы можете подключить jQuery с CDN (рекомендуется) или скачать и разместить локально.

Через CDN (например, Google Hosted Libraries)

<!-- Версия jQuery 3.7.1 (актуальная) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Локально

Скачайте файл с jquery.com и подключите:

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

Всегда размещайте скрипты после подключения jQuery.

2. Основной синтаксис и готовность документа

Базовый синтаксис jQuery: $(селектор).действие().
Чтобы код начал выполняться только после полной загрузки DOM, используйте $(document).ready():

$(document).ready(function() {
  // ваш код jQuery
  alert("DOM загружен!");
});

// Сокращённая запись:
$(function() {
  // ваш код
});

3. Селекторы jQuery

Селекторы позволяют находить элементы на странице. Они похожи на CSS-селекторы.

Пример	Описание
$("*")	все элементы
$("#id")	элемент с id="id"
$(".class")	элементы с классом "class"
$("div")	все теги <div>
$("div, p")	все <div> и <p>
$("div p")	потомки <p> внутри <div>
$("div > p")	непосредственные дочерние <p>
$("[href]")	элементы с атрибутом href
$(":button")	все кнопки (<button>, input[type=button])

Фильтры

• :first, :last, :even, :odd
• :eq(index) — элемент с указанным индексом
• :contains("текст") — элемент, содержащий текст

4. Манипуляции с DOM

Получение и изменение содержимого

// Получить HTML содержимое элемента
$("#myDiv").html();

// Установить HTML содержимое
$("#myDiv").html("<strong>Новый текст</strong>");

// Текстовое содержимое (без тегов)
$("#myDiv").text();            // получить
$("#myDiv").text("Новый текст");

// Значение полей ввода
$("input").val();              // получить
$("input").val("новое значение");

Работа с атрибутами

// Получить атрибут
$("img").attr("src");

// Установить атрибут
$("img").attr("src", "image.jpg");

// Удалить атрибут
$("img").removeAttr("alt");

// Для CSS-классов
$("div").addClass("highlight");
$("div").removeClass("old");
$("div").toggleClass("active");
$("div").hasClass("active"); // true/false

CSS свойства

// Получить одно свойство
$("p").css("color");

// Установить одно свойство
$("p").css("color", "red");

// Установить несколько свойств (объект)
$("p").css({
  "color": "white",
  "background-color": "blue",
  "font-size": "16px"
});

Добавление и удаление элементов

// Внутрь элемента
$("#list").append("<li>В конец</li>");
$("#list").prepend("<li>В начало</li>");

// Вне элемента
$("#element").after("<div>После</div>");
$("#element").before("<div>До</div>");

// Удаление
$("#toRemove").remove();      // удаляет элемент и все его данные/события
$("#toEmpty").empty();        // очищает содержимое элемента

5. Обработка событий

jQuery упрощает назначение обработчиков событий.

Основные методы

$("button").click(function() {
  alert("Клик!");
});

$("#field").change(function() {
  console.log("Значение изменено");
});

$("input").focus(function() {
  $(this).css("background", "yellow");
});

$("input").blur(function() {
  $(this).css("background", "white");
});

$("div").hover(
  function() { $(this).addClass("hovered"); }, // при наведении
  function() { $(this).removeClass("hovered"); }  // при уходе
);

Универсальный метод .on()

Рекомендуется для всех событий, особенно для динамически добавляемых элементов.

$("#parent").on("click", ".child", function() {
  // Обработчик сработает для всех .child, даже добавленных позже
});

Отключение обработчика

$("button").off("click");

6. Эффекты и анимации

Базовые эффекты

$("#element").hide();          // мгновенно скрыть
$("#element").hide(1000);      // скрыть за 1 секунду
$("#element").show();          // показать
$("#element").toggle();        // переключить видимость

$("#element").fadeOut(500);    // плавное исчезновение
$("#element").fadeIn(500);     // плавное появление
$("#element").fadeToggle(500);

$("#element").slideUp(300);    // свернуть
$("#element").slideDown(300);  // развернуть
$("#element").slideToggle(300);

Пользовательская анимация .animate()

$("#block").animate({
  left: '+=50px',
  opacity: 0.5,
  width: '300px'
}, 1000, function() {
  // функция обратного вызова после завершения
  alert("Анимация закончена");
});

Примечание: для анимации свойств left, top требуется указать position: relative или absolute.

7. AJAX с jQuery

jQuery предоставляет мощные методы для асинхронных запросов.

.load() — загрузка HTML фрагмента

$("#result").load("file.html");
$("#result").load("file.html #someSection"); // загрузить часть

.get() и .post()

// GET запрос
$.get("api/users", function(data) {
  console.log(data);
});

// POST с данными
$.post("api/save", { name: "John", age: 30 }, function(response) {
  alert("Сохранено");
}, "json");

Универсальный $.ajax()

$.ajax({
  url: "api/posts",
  method: "GET",
  data: { userId: 1 },
  dataType: "json",
  success: function(data) {
    console.log("Успех:", data);
  },
  error: function(xhr, status, error) {
    console.error("Ошибка:", error);
  },
  complete: function() {
    console.log("Запрос завершён");
  }
});

Обработка JSONP (для кросс-доменных запросов)

$.ajax({
  url: "https://api.example.com/data",
  dataType: "jsonp",
  success: function(data) { ... }
});

8. Цепочки методов

Большинство методов jQuery возвращают сам объект jQuery, что позволяет объединять вызовы:

$("#myDiv")
  .css("color", "red")
  .slideUp(300)
  .slideDown(300)
  .addClass("animated");

Это делает код лаконичным и читаемым.

9. Работа с формами

Валидация и получение данных

// Получить значения всех полей формы
$("#myForm").serialize(); // строка вида "name=John&age=30"

// Получить объект с данными формы
const formData = $("#myForm").serializeArray();

// Отправить форму через AJAX
$("#myForm").on("submit", function(e) {
  e.preventDefault();
  $.post("submit.php", $(this).serialize(), function(response) {
    alert("Отправлено");
  });
});

Чекбоксы и радио-кнопки

// Проверить, выбран ли чекбокс
$("#agree").is(":checked");

// Установить состояние
$("#agree").prop("checked", true);

10. Плагины jQuery

jQuery имеет огромную экосистему плагинов (jQuery UI, DataTables, Slick Slider и др.).
Использование плагина обычно выглядит так:

<link rel="stylesheet" href="plugin.css">
<script src="jquery.min.js"></script>
<script src="plugin.min.js"></script>
<script>
  $(function() {
    $("#element").pluginName({ option: value });
  });
</script>

Создать простой плагин можно так:

(function($) {
  $.fn.greenify = function() {
    this.css("color", "green");
    return this; // для цепочек
  };
})(jQuery);

// Использование:
$("p").greenify();

11. Советы и лучшие практики

• Всегда используйте $(document).ready() или его сокращение, чтобы ваш код не пытался обратиться к ещё не созданным элементам.
• Кэшируйте jQuery-объекты, если используете один элемент несколько раз:

  var $myDiv = $("#myDiv");
  $myDiv.hide();
  $myDiv.addClass("test");
  

• Делегируйте события для динамических элементов:

  $("body").on("click", ".dynamic-button", function() { ... });
  

• Старайтесь избегать глобальных селекторов типа $("*") без необходимости.
• Учитывайте производительность — современный нативный JavaScript (querySelector, fetch, classList) часто решает те же задачи быстрее. jQuery хорош для быстрого прототипирования и поддержки старых браузеров.

12. Заключение

jQuery остаётся полезной библиотекой, особенно для поддержки устаревших проектов или быстрой разработки, когда важна кросс-браузерность. Однако многие возможности jQuery уже есть в стандартном JavaScript (ES6+). Рекомендуется изучить и нативный DOM API — это сделает вас более гибким разработчиком.

Полезные ресурсы

• Официальная документация jQuery
• jQuery Learning Center
• Визуальная шпаргалка по селекторам

Пример полного документа с jQuery

<!DOCTYPE html>
<html>
<head>
  <title>Пример jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <style>
    .highlight { background-color: yellow; }
  </style>
</head>
<body>
  <button id="btn">Нажми меня</button>
  <p id="message">Привет, мир!</p>

  <script>
    $(function() {
      $("#btn").click(function() {
        $("#message")
          .html("Клик сработал! <b>Ура!</b>")
          .addClass("highlight")
          .fadeOut(1000)
          .fadeIn(1000);
      });
    });
  </script>
</body>
</html>

Успешного изучения jQuery!