Как работает jQuery
В ВМ уже предоставлен файл index.html.
Этот файл будет автоматически сгенерирован во время инициализации среды. Если он не генерируется автоматически, создайте файл и функцию, как показано на изображении выше. Код функции выглядит так:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<p>jQuery</p>
<script src="jquery.min.js"></script>
<script>
// Ваш код здесь.
</script>
</body>
</html>
Атрибут src в элементе <script> должен ссылаться на копию jQuery. Скачайте копию jQuery со страницы Загрузка jQuery и сохраните файл jquery.min.js в том же каталоге, что и ваш HTML-файл.
Примечание: Когда вы загружаете jQuery, имя файла может содержать номер версии, например, jquery-x.y.z.js. Убедитесь, что вы переименуете этот файл в jquery.js или обновите атрибут src элемента <script> для соответствия имени файла.
Запуск кода при готовности документа
Чтобы убедиться, что их код выполняется после того, как браузер загрузит документ, многие программисты JavaScript заключают свой код в функцию onload:
window.onload = function () {
alert("welcome");
};
К сожалению, код не выполняется, пока не будут загружены все изображения, включая баннерные объявления. Чтобы запускать код сразу, как документ готов к манипуляциям, у jQuery есть инструкция, известная как событие готовности:
$(document).ready(function () {
// Ваш код здесь.
});
Примечание: Библиотека jQuery экспортирует свои методы и свойства через два свойства объекта window, называемых jQuery и $. $ - это просто псевдоним для jQuery, и его часто используют, потому что он короче и быстрее для написания.
Например, внутри события готовности вы можете добавить обработчик клика для ссылки:
$(document).ready(function () {
$("button").click(function () {
$("p").text("Hello jQuery!");
});
});
Скопируйте вышеприведенный код jQuery в ваш HTML-файл, где написано // Ваш код здесь. Затем сохраните ваш HTML-файл и обновите тестовую страницу в вашем браузере.
Полный пример
Следующий пример иллюстрирует код обработки клика, обсужденный выше, встраиваемый непосредственно в HTML-элемент <body>. Обратите внимание, что на практике обычно лучше размещать свой код в отдельном JS-файле и загружать его на страницу с помощью атрибута src элемента <script>.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<button>click me</button>
<p>Hello World</p>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").text("Hello jQuery!");
});
});
</script>
</body>
</html>
Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.
