Что такое jQuery
jQuery — библиотека JavaScript, которая делает короче типовые действия со страницей: поиск элементов, изменение текста и классов, обработку событий, анимацию и запросы к серверу. Курс написан для jQuery 3.7 — текущей версии, которая используется в большинстве проектов.
Первый пример
Вся библиотека доступна через одну функцию — $ (её второе имя — jQuery). Ей передают CSS-селектор, а она возвращает найденные элементы:
<h1>Мои задачи</h1>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$('h1').text('Список дел');
console.log($('h1').text()); // Список дел
</script>Первый тег <script> подключает jQuery, второй меняет текст заголовка. Под примером видно новый заголовок и вывод console.log.
То же на обычном JavaScript
Из раздела учебника о DOM вы знаете, как сделать то же самое без библиотеки:
<h1>Мои задачи</h1>
<script>
document.querySelector('h1').textContent = 'Список дел';
</script>Разница небольшая. Но jQuery работает сразу со всеми найденными элементами: $('li').addClass('done') отметит все пункты списка, а на чистом JavaScript для этого нужен цикл.
Зачем jQuery появилась
Библиотека вышла в 2006 году, когда браузеры поддерживали JavaScript по-разному. jQuery скрывала эти различия: один и тот же код работал везде. С тех пор браузеры сблизились, и почти всё, что делает jQuery, есть в самом языке: querySelectorAll, classList, fetch, addEventListener.
Стоит ли её учить сегодня
| Ситуация | Нужна ли jQuery |
|---|---|
| Новый проект на React, Vue, Svelte | Нет, у них свой подход к странице |
| Новый небольшой сайт | Обычно хватает чистого JavaScript |
| Сайт на WordPress, его темы и плагины | Да, jQuery входит в WordPress |
| Старый проект на jQuery | Да, его нужно поддерживать |
| Плагины на jQuery: слайдеры, маски ввода | Да, они требуют библиотеку |
jQuery по-прежнему подключена на огромном числе сайтов, поэтому читать и править такой код — полезный навык. В конце курса есть урок о переходе с jQuery на чистый JavaScript.
Пример курса
Через весь курс проходит один пример — список дел: поле ввода, кнопка «Добавить», пункты, которые можно отмечать и удалять. В уроках о формах к нему добавится простая форма регистрации.
Частая ошибка
Код, который использует $, стоит выше подключения библиотеки:
<script>
$('h1').text('Привет'); // Ошибка: $ is not defined
</script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>Браузер выполняет скрипты по порядку, и в момент вызова функции $ ещё нет. Подключайте jQuery раньше своего кода.