Создание первого скрипта на jQuery. Инициализация jQuery.
В этом уроке вы узнаете:
- Как начать писать скрипты на jQuery,
- Улучшим наш первый скрипт,
- Создадим скрипт, который будет анимированно скрывать заголовок, при нажатии по кнопке.
Как начать писать скрипты на jQuery?
Чтобы начать писать скрипты на jQuery, нужно:
- Написать слово jQuery,
- В скобках выбрать элемент над которым будет производиться действие,
- Далее написать имя метода, самого действия.
Общий вид кода в файле index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Заголовок -->
<h1>Header</h1>
<!-- Подключаем библиотеку jQuery -->
<script src="jquery-3.6.3.js"></script>
<!-- Пишем свой первый скрипт на jQuery -->
<script>
jQuery("h1").hide(3000);
</script>
</body>
</html>
Открываем файл index.html в браузере, заголовок скроется в течении 3 секунд.
Улучшаем наш первый скрипт
Скрипт можно и нужно улучшить.
Первое, вместо слова jQuery, можно использовать знак доллара $.
Второе, любой скрипт который выбирает элементы на странице, должен запускаться после загрузки HTML-кода страницы, для этого нам поможет событие ready(), помещаем наш код в это событие.
Итоговая разметка должна выглядеть следующим образом:
<!-- Заголовок страницы -->
<h1>Header</h1>
<!-- Подключаем библиотеку jQuery -->
<script src="jquery-3.6.3.js"></script>
<!-- Пишем свой первый скрипт на jQuery -->
<script>
$(document).ready(function() {
$("h1").hide(3000);
});
</script>
Что здесь происходит? jQuery, выбирает весь HTML-код страницы document и дожидается его загрузки, как только он полностью загрузится, происходит событие ready() и запускается код внутри него, в нашем случае, это $("h1").hide(3000); (заголовок страницы скрывается в течении 3х секунд).
Скрываем заголовок при клике по кнопке
Создадим скрипт, который будет скрывать заголовок, при нажатии по кнопке.
- Создаём кнопку над заголовком,
- Оборачиваем код сокрытия заголовка событием
click, - Помещаем всё это в событие
ready().
Итоговый код:
<!-- При нажатии по кнопке, заголовок скрывается -->
<script>
$(document).ready(function() {
$("button").on("click", function() {
$("h1").hide(3000);
});
});
</script>
Вы пока можете не вникать в сам код, потому что в следующих уроках мы каждый его кусочек рассмотрим и изучим более подробно. Данный пример показывает, что буквально двумя строчками кода на jQuery, можно создавать интерактивные скрипты реагирующие на действия пользователя.
Сейчас для вас самое главное, это понять суть работы с библиотекой jQuery, состоящий из:
- Выбора элемента или элементов на странице,
- Выполнение над элементом или элементами какого-либо действия,
- Сам скрипт желательно обернуть событием
ready(), или разместить его перед закрывающим тегом</body>, чтобы скрипт запускался после загрузки HTML-кода страницы.