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

Похожие посты

Руководство по синтаксису в jQuery

Оператор jQuery обычно начинается со знака доллара ($) и заканчивается точкой с запятой (;). В jQuery знак доллара ($) — это просто псевдоним для jQuery. Давайте рассмотрим следующий пример кода, который демонстрирует синтаксис кода на jQuery. Приведенный выше пример просто отображает предупреждающее сообщение «Hello World!» пользователю. Объяснение кода Давайте разберем приведенный выше пример подробнее. Тег…

Руководство по методу animate() в jQuery

jQuery-метод animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых CSS-свойств, таких как width, height, margin, padding, opacity, top, left и т. д., Но нечисловые свойства, такие как color или background-color нельзя анимировать с помощью базовой функциональности jQuery. Не все CSS-свойства являются анимируемыми. Как правило, любое CSS-свойство, которое принимает значения в…

Руководство по callback-функциям в jQuery

Операторы JavaScript выполняются построчно. Но, поскольку для завершения эффекта jQuery требуется некоторое время, код следующей строки может выполняться, пока предыдущий эффект все еще выполняется. Чтобы этого не происходило, jQuery предоставляет функцию обратного вызова (Callback) для каждого метода. Функция обратного вызова — это функция, которая выполняется после завершения эффекта. Функция обратного вызова передается в качестве аргумента…

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

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

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

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