Создание первого скрипта на jQuery 4

В этом уроке вы:

• Узнаете, как начать писать скрипты на jQuery 4,
• Улучшите свой первый скрипт,
• Создадите скрипт, который будет анимированно скрывать заголовки, при нажатии по кнопке.

Этот урок содержит темы, которые мы будем проходить на курсе. Если что-то сейчас не понятно, это будет объяснено позже.

Как начать писать скрипты на jQuery?

Чтобы начать писать скрипты на jQuery, нужно:

• Написать слово jQuery,
• В скобках выбрать элементы, над которыми будут производиться действия,
• Далее написать имя метода, который и будет выполнять действие.

PS: При выборе элементов оберните их кавычками.

Пример кода, который находит все теги h1 на странице и скрывает их в течение 3-х секунд:

// Найти заголовки H1,
// анимированно их скрывать в течение 3 секунд
jQuery('h1').hide(3000);

Поместите этот код между тегами <script></script> вместо строки console.log($);. Также добавьте на страницу несколько заголовков h1.

Общий вид кода в файле index.html должен выглядеть так:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <!-- Заголовки -->
  <h1>Заголовок 1</h1>
  <h1>Заголовок 2</h1>

  <!-- Подключаем библиотеку jQuery -->
  <script src="jquery-4.0.0.js"></script>

  <!-- Пишем свой первый скрипт на jQuery -->
  <script>
    jQuery('h1').hide(3000);
  </script>

</body>
</html>

Откройте файл index.html в браузере, заголовки h1 будут анимированно скрываться в течение 3-х секунд, пока не исчезнут. Обновите страницу браузера (F5) несколько раз и каждый раз после обновления вы будете наблюдать, как в течение 3-х секунд заголовки исчезают.

Улучшите свой первый скрипт

Первое, вместо слова jQuery, можно использовать знак доллара $:

$('h1').hide(3000);

Второе, любой скрипт рекомендуется запускать после загрузки HTML-кода страницы. Для этого используйте метод ready().

Оберните этим методом свой код:

$(document).ready(function() {
  $('h1').hide(3000);
});

Итоговая разметка должна выглядеть следующим образом:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <!-- Заголовки -->
  <h1>Заголовок 1</h1>
  <h1>Заголовок 2</h1>

  <!-- Подключаем библиотеку jQuery -->
  <script src="jquery-4.0.0.js"></script>

  <!-- Заголовки скроются как только загрузится вся страница -->
  <script>
    $(document).ready(function() {
      $('h1').hide(3000);
    });
  </script>

</body>
</html>

Что происходит между тегами <script></script>?

jQuery выбирает весь HTML-код страницы document и дожидается его загрузки, как только HTML-код страницы полностью загрузится, сработает метод ready() (документ полностью загружен, а значит над элементами страницы можно производить действия), и только после этого запустится код внутри этого метода, в нашем случае, это код $('h1').hide(3000); (заголовки страницы скрываются в течение 3-х секунд).

Скрываем заголовок при клике по кнопке

Напишем скрипт, который будет скрывать заголовки, при нажатии по кнопке. Т.е. воспроизведём наиболее часто встречающийся паттерн (шаблон) взаимодействия пользователя и страницы сайта, а именно пользователь что-то делает на странице, а страница ему отвечает, в нашем случае это скрытие заголовков, по клику по кнопке.

• Создайте кнопку над заголовками,
• Оберните код сокрытия заголовков событием click,
• Поместите всё это в метод ready().

Итоговый код урока:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <!-- Кнопка -->
  <button>Кнопка</button>

  <!-- Заголовки -->
  <h1>Заголовок 1</h1>
  <h1>Заголовок 2</h1>

  <!-- Подключаем библиотеку jQuery -->
  <script src="jquery-4.0.0.js"></script>

  <!-- При нажатии по кнопке, заголовки скрываются -->
  <script>
    $(document).ready(function() {
      $("button").on("click", function() {
        $("h1").hide(3000);
      });
    });
  </script>

</body>
</html>

Пока можете не вникать в сам код, в следующих уроках каждый его кусочек вы хорошо изучите. Данный пример лишь показывает, что буквально двумя строчками кода на jQuery, можно создавать интерактивные скрипты, реагирующие на действия пользователя.

Сейчас для вас самое главное, это понять суть работы с библиотекой jQuery, состоящей из:

• Выбора элементов на странице,
• Выполнения над элементами какого-либо действия,
• Сам скрипт желательно обернуть в метод ready() (чтобы скрипт запускался после загрузки HTML-кода страницы),
• Разместить скрипт перед закрывающим тегом </body> (чтобы скрипт запускался после загрузки HTML-кода страницы).

Пока этих знаний более чем достаточно. В течение курса, всё будет раскрываться более подробно.

Также хотелось бы отметить, я специально показал вам, что jQuery выбирает и скрывает сразу все выбранные элементы на странице (в нашем случае заголовки). Если вам нужно, чтобы скрывался один конкретный элемент (например первый заголовок), то можно воспользоваться селекторами, фильтрами и т.п. Их вы будете изучать в следующем модуле.

На этом первый модуль курса, который знакомит вас с библиотекой jQuery закончен. В следующем модуле вы научитесь выбирать различными способами, элементы на странице.

PS: вместо $(document).ready(function() {}) можно использовать сокращённую запись $(function(){}). В базовом курсе мы будем использовать обычную запись, а сокращённую в следующих.