Первое, что вам понадобится при работе с 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 в следующих главах руководства.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.