Подключение и запуск кода

Чтобы пользоваться jQuery, файл библиотеки нужно загрузить на страницу. Проще всего взять его с CDN — сервера, который раздаёт популярные библиотеки. Свой код при этом запускают, когда страница уже построена.

Структура проекта

Для jQuery не нужна специальная программа-генератор. Создайте папку todo и в ней два файла:

todo/
├── index.html
└── script.js

В index.html будет разметка, в script.js — ваш код.

Подключение с CDN

Создайте файл index.html:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Мои задачи</title>
</head>
<body>
  <h1>Мои задачи</h1>
 
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Первый <script> загружает jQuery с официального CDN, второй — ваш файл. Откройте index.html в браузере, и в консоли разработчика команда $.fn.jquery покажет версию 3.7.1.

Файл с .min в названии — сжатая версия без пробелов и комментариев. Она весит меньше, поэтому на сайтах используют её.

Запуск после загрузки страницы

Если скрипт подключён в <head>, он выполняется раньше, чем браузер прочитает <body>, и элементов ещё нет. Поэтому код jQuery принято оборачивать в функцию $(function () { ... }). Создайте script.js:

// script.js
$(function () {
  $('h1').text('Список дел');
  console.log('Страница готова');
});

Функция, переданная в $, вызывается, когда весь HTML разобран. В старом коде встречается длинная запись того же самого — $(document).ready(function () { ... }).

В живых примерах курса скрипт стоит в конце страницы, после разметки, поэтому обёртка в них не нужна. В примерах для файла script.js она есть.

То же на обычном JavaScript

// script.js
document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('h1').textContent = 'Список дел';
});

Подключение через npm

В проекте со сборщиком, например Vite, jQuery ставят как пакет:

npm install jquery

И импортируют в нужном файле:

// src/main.js
import $ from 'jquery';
 
$(function () {
  $('h1').text('Список дел');
});

Сборщик сам положит библиотеку в итоговый файл, отдельный тег <script> не нужен.

Частая ошибка

Подключить на одну страницу jQuery дважды: например, тема сайта уже загружает библиотеку, а вы добавили ещё один тег. Второе подключение заменяет первое, и плагины, которые успели зарегистрироваться в первой копии, пропадают — появляется ошибка вида $(...).slider is not a function. Перед подключением проверьте в консоли, есть ли уже $.fn.jquery.