Content Security Policy

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

Подключение библиотеки может осуществляться как через CDN, так и локально:

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

Локальное подключение требует загрузки файла jquery.min.js в проект и ссылки на него:

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

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

$(document).ready(function() {
    // код здесь
});

Сокращенная запись:

$(function() {
    // код здесь
});

Выбор элементов

Выбор элементов в jQuery осуществляется через функцию $(), которая поддерживает CSS-селекторы.

  • По тегу:
$('p').css('color', 'blue');
  • По идентификатору:
$('#myId').hide();
  • По классу:
$('.myClass').show();
  • Комбинированные селекторы:
$('div.myClass > p:first').addClass('highlight');
  • Фильтрация элементов:
$('li:even').css('background-color', '#f2f2f2');

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

Чтение и установка атрибутов:

let src = $('#image').attr('src');
$('#image').attr('alt', 'Описание изображения');

Работа с CSS-свойствами:

$('.box').css('width', '200px');
let height = $('.box').css('height');

Добавление и удаление классов:

$('#menu').addClass('active');
$('#menu').removeClass('active');
$('#menu').toggleClass('active');

Работа с текстом и HTML

  • Чтение и изменение текста:
let text = $('#title').text();
$('#title').text('Новый заголовок');
  • Чтение и изменение HTML:
let htmlContent = $('#content').html();
$('#content').html('<p>Новый абзац</p>');

События

jQuery предоставляет удобные методы для работы с событиями, включая их делегирование.

Основные события:

$('#button').click(function() {
    alert('Кнопка нажата');
});

$('#input').focus(function() {
    $(this).css('border-color', 'red');
});

Универсальный метод .on() для привязки событий:

$('#list').on('mouseenter', 'li', function() {
    $(this).addClass('hover');
});

Удаление обработчика:

$('#button').off('click');

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

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

  • Показ и скрытие элементов:
$('#box').hide();   // мгновенно скрыть
$('#box').show();   // мгновенно показать
$('#box').toggle(); // переключить состояние
  • Плавное появление и скрытие:
$('#box').fadeIn(500);
$('#box').fadeOut(500);
$('#box').fadeToggle(500);
  • Скользящие эффекты:
$('#box').slideUp(400);
$('#box').slideDown(400);
$('#box').slideToggle(400);
  • Анимация CSS-свойств:
$('#box').animate({width: '300px', opacity: 0.5}, 1000);

Работа с DOM-структурой

jQuery позволяет добавлять, удалять и заменять элементы:

  • Добавление элементов:
$('#list').append('<li>Новый элемент</li>');      // в конец
$('#list').prepend('<li>Первый элемент</li>');   // в начало
  • Удаление элементов:
$('#list li:last').remove();
  • Клонирование элементов:
let clone = $('#item').clone();
$('#list').append(clone);
  • Заменить элемент:
$('#old').replaceWith('<div id="new">Новый элемент</div>');

AJAX-запросы

jQuery упрощает работу с асинхронными запросами через метод .ajax() и вспомогательные функции .get() и .post().

Пример GET-запроса:

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

Пример POST-запроса:

$.post('submit.php', {name: 'John', age: 30}, function(response) {
    console.log(response);
});

Полная настройка через .ajax():

$.ajax({
    url: 'data.json',
    method: 'GET',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, status, error) {
        console.error(error);
    }
});

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

  • Чтение значений:
let value = $('#input').val();
  • Установка значений:
$('#input').val('Новое значение');
  • Сериализация формы:
let formData = $('#form').serialize();
  • Отключение стандартного действия формы:
$('#form').submit(function(event) {
    event.preventDefault();
    // обработка данных через AJAX
});

Управление цепочками методов

jQuery позволяет объединять несколько действий с элементом в одну цепочку:

$('#box')
    .css('color', 'red')
    .slideUp(500)
    .slideDown(500)
    .fadeOut(300)
    .fadeIn(300);

Цепочки повышают читаемость кода и позволяют экономить переменные.

Хранение данных в элементах

jQuery предоставляет механизм для хранения пользовательских данных через метод .data():

$('#item').data('id', 123);
let id = $('#item').data('id');

Данные, сохраненные через .data(), не отображаются в атрибутах HTML и доступны только через jQuery.

Расширение функционала

Создание пользовательских плагинов в jQuery осуществляется через $.fn:

$.fn.highlight = function(color) {
    this.css('background-color', color);
    return this;
};

$('#box').highlight('yellow');

Это позволяет создавать многоразовые методы и расширять библиотеку без модификации исходного кода.

Оптимизация и производительность

  • Использовать id-селекторы для быстрого поиска элементов.
  • Минимизировать количество DOM-манипуляций путем кэширования объектов:
let $items = $('.item');
$items.css('color', 'blue');
  • Использовать делегирование событий для динамически создаваемых элементов:
$(document).on('click', '.dynamic-btn', function() {
    // обработчик
});
  • Уменьшать количество цепочек .animate() для предотвращения “тормозов” интерфейса.

Совместимость с CSP (Content Security Policy)

При работе с Content Security Policy важно учитывать:

  • Подключение jQuery через CDN может требовать включения script-src с указанием источника.
  • Использование встроенных скриптов (inline scripts) может быть заблокировано. Предпочтительно использовать внешние файлы.
  • Методы .html() и .append() с пользовательскими данными могут создавать уязвимости XSS. Следует избегать вставки непроверенного контента.
  • Для анимаций и обработчиков событий использовать методы jQuery без eval или jav * ascript: URL, чтобы соответствовать строгим CSP.

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

Оглавление