Пример программы на jQuery

Пример программы на jQuery

В этой статье мы рассмотрим простой пример программы (скрипта) на jQuery. Для того, чтобы написать свою первую программу, вам нужно скачать библиотеку jQuery и подключить ее к своему HTML документу.

Где скачать jQuery

Для загрузки доступны две версии jQuery - сжатая (минифицированная) и несжатая.

Несжатый файл лучше всего подходит для разработки или отладки; в то время как сжатый файл рекомендуется для продакшена, поскольку он экономит драгоценную пропускную способность канала и повышает производительность благодаря небольшому размеру файла.

Вы можете скачать jQuery с официального сайта по этой ссылке: https://jquery.com/download/

Загрузив файл jQuery, вы увидите, что он имеет расширение .js, поскольку jQuery - это просто библиотека JavaScript, поэтому вы можете включить файл jQuery в ваш HTML-документ при помощи элемента <script>, как вы включаете обычные файлы JavaScript.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Simple HTML Document</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>
блок 1

Всегда подключайте файл jQuery перед вашими собственными скриптами на нем; в противном случае API jQuery будут недоступны, когда ваш код jQuery попытается получить к нему доступ.

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

Кроме того, вы можете подключить jQuery в свой документ через свободно доступные ссылки CDN (Content Delivery Network), если вы не хотите загружать и размещать jQuery самостоятельно на своем сервере или локально.

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

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

Пример подключения библиотеки jQuery с использованием MaxCDN:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Создание вашей первой веб-страницы на jQuery

Итак, вы уже поняли цели библиотеки jQuery, а также то, как включить ее в ваш документ, теперь пришло время начать использовать jQuery на практике.

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My First jQuery Powered Web Page</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="js/jquery-1.11.3.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      $("h1").css("color", "#0088ff");
    });
  </script>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

В приведенном выше примере мы выполнили простую операцию jQuery, изменив цвет заголовка, то есть элемента <h1>, используя селектор элемента jQuery и метод css(), когда документ готов, что известно как «document ready event». Мы узнаем о селекторах, событиях и методах jQuery в следующих главах.

блок 3

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*