В этой статье мы рассмотрим простой пример программы (скрипта) на 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>
Всегда подключайте файл 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 в следующих главах.
Оставить комментарий