Прогресс выполнения

jQuery — это лёгкая библиотека JavaScript, предназначенная для упрощения работы с DOM (Document Object Model), обработки событий, выполнения анимаций и AJAX-запросов. Основная идея jQuery заключается в том, чтобы обеспечить краткий и читаемый синтаксис для операций, которые в чистом JavaScript требуют больше кода.

Ключевой элемент jQuery — функция $(), которая возвращает объект jQuery, позволяющий выполнять методы над выбранными элементами:

// Выбор всех элементов <p> на странице
var paragraphs = $('p');

// Изменение текста всех абзацев
paragraphs.text('Новый текст для всех абзацев');

Селекторы jQuery

Селекторы jQuery построены по аналогии с CSS. Они позволяют выбрать элементы по тегу, классу, идентификатору или любому CSS-селектору.

Основные типы селекторов:

  • По тегу: $('div') выбирает все <div>.
  • По классу: $('.active') выбирает элементы с классом active.
  • По идентификатору: $('#header') выбирает элемент с id header.
  • Комбинированные селекторы: $('div.active') выбирает все <div> с классом active.

Также jQuery поддерживает псевдоселекторы:

$('p:first'); // первый абзац
$('li:odd');  // элементы списка с нечётными индексами
$('input:checked'); // отмеченные чекбоксы

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

jQuery облегчает изменение содержимого и структуры страницы.

  • Изменение текста и HTML:
$('#info').text('Новый текст');   // только текст
$('#info').html('<b>Жирный текст</b>'); // HTML-контент
  • Изменение атрибутов и CSS:
$('#logo').attr('src', 'logo2.png'); // изменение атрибута src
$('#logo').css('width', '200px');     // изменение стиля
  • Добавление и удаление элементов:
$('#list').append('<li>Новый элемент</li>'); // добавление в конец
$('#list').prepend('<li>Первый элемент</li>'); // добавление в начало
$('#list li:first').remove(); // удаление первого элемента
  • Клонирование элементов:
var clone = $('#box').clone(); 
$('#container').append(clone);

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

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

  • Методы для конкретных событий:
$('#button').click(function() {
    alert('Кнопка нажата');
});
$('#input').focus(function() {
    console.log('Поле в фокусе');
});
  • Универсальный метод .on():
$('#list').on('mouseenter', 'li', function() {
    $(this).css('color', 'red');
});

.on() позволяет делегировать события, что особенно полезно при динамически добавляемых элементах.

  • Удаление обработчиков:
$('#button').off('click'); // снимает все клики

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

jQuery содержит встроенные методы для создания анимаций:

  • Плавное появление/исчезновение:
$('#box').fadeIn(500);  // плавное появление за 0.5 сек
$('#box').fadeOut(500); // плавное исчезновение
  • Скрытие и показ с анимацией:
$('#menu').slideUp(400);   // скрыть с вертикальной анимацией
$('#menu').slideDown(400); // показать
  • Произвольные анимации через .animate():
$('#box').animate({
    width: '300px',
    height: '200px',
    opacity: 0.5
}, 1000);

AJAX в jQuery

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

  • Метод .load() для загрузки HTML:
$('#content').load('page.html');
  • Методы для GET и POST:
$.get('data.json', function(response) {
    console.log(response);
});

$.post('submit.php', {name: 'Иван'}, function(response) {
    alert(response);
});
  • Метод .ajax() для полной настройки:
$.ajax({
    url: 'data.json',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});

Работа с прогрессом выполнения и асинхронностью

Для отображения процесса выполнения операций можно использовать события и методы обратного вызова.

  • Методы .done(), .fail(), .always() для AJAX:
$.ajax('data.json')
    .done(function(data) {
        console.log('Успешно получены данные', data);
    })
    .fail(function() {
        console.error('Ошибка при запросе');
    })
    .always(function() {
        console.log('Запрос завершён');
    });
  • Цепочки анимаций:
$('#box').fadeOut(500)
         .fadeIn(500)
         .animate({left: '100px'}, 1000);

jQuery автоматически выстраивает последовательность анимаций, что позволяет отслеживать прогресс выполнения визуальных изменений.

  • Использование индикаторов загрузки:
$('#loader').show();
$.get('data.json', function(data) {
    $('#loader').hide();
    $('#content').text(JSON.stringify(data));
});

Методы работы с массивами и коллекциями jQuery

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

  • Перебор с .each():
$('li').each(function(index, element) {
    $(element).text('Элемент ' + index);
});
  • Фильтрация и поиск элементов:
var visibleItems = $('li').filter(':visible');
  • Преобразование наборов:
var texts = $('li').map(function() {
    return $(this).text();
}).get(); // возвращает обычный массив

Расширение jQuery

jQuery позволяет создавать собственные методы через плагины:

$.fn.highlight = function(color) {
    this.css('background-color', color);
    return this; // поддержка цепочек
};

$('p').highlight('yellow');

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

Итоговая структура

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

Оглавление