Первое, что вам понадобится при работе с jQuery, это скачать библиотеку и включить ее в свой документ. Для загрузки доступны две версии jQuery — сжатая (минифицированная) и несжатая.
Несжатый файл лучше всего подходит для разработки или отладки; в то время как минифицированный файл рекомендуется для продакшена, поскольку он экономит драгоценную пропускную способность и повышает производительность благодаря меньшему размеру файла.
Библиотеку jQuery вы можете скачать здесь: jquery.com/download
Загрузив файл jQuery, вы увидите, что он имеет расширение .js; поскольку jQuery — это просто библиотека JavaScript, поэтому вы можете подключить файл jQuery в ваш HTML-документ тегом <script>, так же как и обычные JavaScript-файлы.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple HTML Document</title>
<link rel="stylesheet" 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 попытается получить к нему доступ.
Как видите, мы пропустили атрибут type="text/javascript" внутри тега <script> потому что это не требуется в HTML5. JavaScript является языком скриптов по умолчанию в HTML5 и во всех современных браузерах. Тем не менее, вы все равно можете использовать его, чтобы сделать код более понятным для пользователей.
Подключение jQuery через CDN
Вы можете подключить jQuery в свой документ через CDN (Content Delivery Network), если вы не хотите загружать и размещать jQuery самостоятельно.
CDN могут повысить производительность за счет сокращения времени загрузки, поскольку они размещают jQuery на нескольких серверах по всему миру, и когда пользователь запрашивает файл, он будет запрошен с ближайшего к нему сервера.
Это также дает преимущество в том, что если посетитель вашего сайта уже загрузил копию jQuery с того же CDN во время посещения других сайтов, его не нужно будет загружать повторно, поскольку он уже находится в кэше браузера.
Вот пример самого простого подключения jQuery через CDN:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>Использование jQuery в HTML
Итак, вы уже поняли цели библиотеки jQuery и то, как ее включить в свой документ, теперь пришло время использовать jQuery в реальных условиях.
В этом разделе мы выполним простую операцию jQuery, изменив цвет текста заголовка с черного по умолчанию на красный.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First jQuery Powered Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#0088ff");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>В приведенном выше примере мы выполнили простую операцию jQuery, изменив цвет заголовка, то есть элемента <h1>, используя селектор элемента jQuery и метод css(), когда документ ready() — событие готовности документа. Мы узнаем о селекторах, событиях и методах jQuery в следующих главах руководства.
