Погружение в jquery

Варианты библиотеки

Для начала следует понимать, что существуют не только различные версии данного дополнения JS, а еще и разные виды. Все библиотеки делятся на сжатые, т.е. compressed, и несжатые – uncompressed. Для чего же было придумано такое разделение? А прежде всего для разных режимов работы.

Во время отладки веб-приложения удобнее и целесообразнее пользоваться несжатой версией jQuery. Однако при выпуске продукта в продакшн стоит использовать сжатую версию. Она меньше весит и как следствие страницы грузятся быстрее. Многие разработчики отдают предпочтения сжатой библиотеке и качают только ее.

Начинаем писать код на jQuery

В вашем скрипте вы можете для начала записать код, который что-либо выводит или в консоль, или с помощью диалогового окна alert(), чтобы проверить работоспособность кода:

Проверяем скрипт на jQuery

JavaScript

$(document).ready(function(){
console.log(‘jQuery works’);
// или
alert(‘jQuery works’);
});

Можно использовать сокращенную форму записи:

Сокращенная запись функции $(document).ready()

JavaScript

$(function() {
console.log( «jQuery works!» );
});

Вызов функции обязателен в том случае, если вы подключили скрипты в блоке ДО того, как браузер сможет прочитать и распарсить всю структуру элементов в теле документа (тег ). Если вы подключаете скрипты перед закрывающим тегом , вызывать ее необязательно, хотя некоторые плагины могут требовать обязательного ее наличия.

Достаточно 1  раз написать вызов и весь код писать внутри этой функции вне зависимости от того, 5 строк в этом коде или 225.

Вызов   аналогичен обработке события , при наступлении которого браузер уже знает обо всех элементах в структуре DOM, но еще не загрузил картинки или видео. То есть вы уже можете обращаться к элементам и манипулировать ими, что чаще всего и является целью использования JavaScript и jQuery.

Что можно сделать, чтобы устранить проблему?

Первое — использовать PageSpeed Insights. Это может и не дать существенного прироста производительности. Результат в значительной степени зависит от целого ряда условий. В первую очередь, есть ли на сайте другие блокирующие кроме JQuery. Например, CSS или другие файлы JavaScript.

Если на сайте есть хотя бы один такой ресурс, то их количество уже не имеет особого значения. Потому что они будут загружаться браузером параллельно (в отличие от JQuery Google CDN). Если только для загрузки одного из них не требуется значительно больше времени, чем для других.

Но нужно постараться устранить блокираторы. И многим это удается, пока они не упрутся в JQuery. Рассмотрим некоторые способы решения этой проблемы:

1. Удалить или не использовать функционал, зависящий от JQuery

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

Существует плагин Rocket Lazy Load, для работы которого не требуется JQuery. После того как вы успешно удалите JQuery зависимый функционал, проблемы при отложенной загрузке, асинхронном вызове или объединении JQuery должны исчезнуть.

3. Загрузить Jquery с Google, а не локально

Если JQuery загружается с , то он (технически) все равно остается ресурсом, блокирующим загрузку. Но он таковым не является. Почему? Потому что миллионы сайтов используют JQuery Google.

Это означает, что с огромной долей вероятности пользователь вашего сайта уже посещал сайт с JQuery, и он сохранен в кэше его браузера. То есть JQuery не будет загружаться еще раз. Получается, что JQuery не блокирует отображение страницы (в отличие от локального варианта использования).

Как загрузить копию JQuery от Google

Шаг 1: Определите, какая версия Jquery используется на вашем сайте

• Просмотрите исходный код вашей страницы;
• Найдите JQuery. Он будет выглядеть примерно так: http://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.11.3;
• Три цифры в конце, в данном примере 1.11.3, обозначают версию JQuery;
• Если вы не видите номер версии подключаемого JQuery Google, откройте файл;
• В верхней части файла (в начале кода) вы увидите что-то вроде JQuery v1.11.3;
• В этом примере 1.11.3 — это версия JQuery.

Шаг 2: Исключите из очереди загрузки локальную копию JQuery и добавьте копию Google

Вставьте в файл functions.php темы следующий код или используйте плагин, наподобие Code Snippets:

function modify_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery’);
wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js’, false, ‘x.x.x’);
wp_enqueue_script(‘jquery’);
}
}
add_action(‘init’, ‘modify_jquery’);

Важно:

Везде, где вы видите в приведенном выше коде «x.x.x«, замените эти символы номером версии подключаемого JQuery Google.

Шаг 3: Танцуйте от радости

Когда не следует использовать копию JQuery от Google

1. Когда вы можете объединить JQuery с другими скриптами.
2. Когда у вас есть много китайских пользователей, так как сервисы запрещены в этой стране.

Это все, ребята!

Пожалуйста, оставляйте ваши комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, отклики, лайки, подписки, дизлайки!

Общие сведения о jQuery и CDN.

Библиотека скриптов jQuery весит примерно 90 Кб (без сжатия). Если использовать YUI Compressor и включить gzip-сжатие на сервере, то объем передаваемых данных при загрузке библиотеки уменьшится. И все же это «бутылочное горлышко» в загрузке сайта, которое нужно и можно расширить.

Важно, что более новые версии библиотеки зачастую весят больше, чем более старые. Также важно знать, что плагины и компоненты сайта могут быть несовместимы со старыми версиями jQuery. По умолчанию, загрузка библиотеки jQuery происходит с вашего сайта (если сайт на WordPress, то из папки /wp-includes/js/jquery/)

По умолчанию, загрузка библиотеки jQuery происходит с вашего сайта (если сайт на WordPress, то из папки /wp-includes/js/jquery/).

Некоторые плагины сами подключают библиотеку jQuery. Это может вызывать множественную загрузку скрипта или одновременную загрузку нескольких версий библиотеки

Важно за этим следить и устранять такую проблему — как это сделать — читайте ниже

CDN — это Content Delivery Network или сеть доставки контента. Такая сеть позволяет существенно ускорить загрузку файлов, размещенных в сети. Принцип работы CDN состоит в том, что имеется сеть серверов, на каждом из которых дублируется размещенная информация. Когда пользователь запрашивает загрузку объекта (скрипта, файла стилей и т.д.), то происходит определение ближайшего к клиенту сервера и с него загружаются данные. В итоге задержки загрузки минимальны, скорость максимальна.

Минусы технологии CDN состоят в ее сложности и высокой стоимости использования.

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

Для загрузки jQuery существует несколько общедоступных бесплатных CDN:

• jQuery CDN
• Google CDN
• Microsoft CDN
• CDNJS CDN
• Яндекс CDN

Вы можете выбрать любой сервис для подключения библиотеки jQuery к вашему сайту. Я решил подключать библиотеку с сервера Google.

В сети встречается мнение, что подключение jQuery с внешнего сервера ненадежно, что сервер может упасть и тогда ваш сайт будет нефункционален. Однако это совершенно не так. Поверьте, стабильность работы и принципы архитектуры CDN-серверов таких монстров как Google или Яндекс настолько хороша, что эти серверы фактически всегда в строю. Вероятность падения сервера стремится почти к нулю. И конечно же , ваш хостинг гораздо менее стабилен, чем сервер CDN. Поэтому смело подключайте библиотеку с внешнего сервера.

Для наглядности приведу картинку, показывающую разницу в скорости загрузки библиотеки с хорошего хостинга и с CDN сервера Google:

Как вы видите, разница в скорости загрузки библиотеки в 15 раз в пользу Google CDN! Если в обычного хорошего хостинга библиотека скриптов загружается 475 мс (полсекунды), то с CDN всего лишь 32 мс.

Быть может, вы думаете: полсекунды — это ничтожно мало! Но тут вы ошибаетесь. Это загрузка лишь одной библиотеки скриптов, а не всего сайта. Скорость загрузки сайта очень важна — она определяет лояльность посетителей сайта. А с учетом того, что все больше людей выходят в интернет с мобильных устройств, у которых интернет-соединение довольно-таки медленное, то разница существенная.

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

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

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

Наиболее популярные CDN — это Google CDN и jQuery CDN. Мы рассмотрим подключение с Google CDN, но подключение с других серверов аналогично и можете выбрать любой понравившийся вариант.

Google CDN

2. Разместите полученный код между тегами и :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Должно получится примерно следующее:

<!doctype html>
<html>
<head>
	<title>jQuery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
	<h1>Подключение jQuery</h1>
</body>
</html>

Как проверить правильность подключения

Чтобы убедиться, что все работает как следует, напишите такой скрипт в html-коде между тегами «head»:

<script type="text/javascript">
$(document).ready(function(){
$('body').append('<br/>Работает');
});
</script>

Если добавление выполнено правильно, то в окне браузера появится слово «Работает».

Важно! Не изменяйте название скачанного файла. Хотя ошибки в работе не возникнет, все-таки лучше будет если вы оставите официальное название, полученное при загрузке

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

Подключаем jQuery со страницы своего сайта

И так, ситуация первая

Предположим, что у Вас есть сайт (не важно где, на локальном или реальном хостинге). Вы сами пишете этот сайт или его страницу, то есть не используете никаких CMS (систем управления сайтом), как WordPress

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

1. Загружаем свежую версию jQuery

Самое первое, что стоит сделать, это скачать её свежую версию с сайта разработчика. Там, сразу на главной странице, нам предложат 2 варианта jQuery (PRODUCTION и DEVELOPMENT). По функциональности эти варианты идентичны. Вариант “DEVELOPMENT” («разработка») — это, грубо говоря, исходный код этой библиотеки, он структурирован в удобном для чтения виде с кучей комментариев, и предназначен в первую очередь для разработчиков, которые захотят посмотреть, как всё устроено внутри jQuery, что-то там изменить или найти ошибки. Вариант “PRODUCTION” — это сжатый вариант библиотеки, оттуда удалены все комментарии, и этот вариант занимает намного меньше места (32Кб против 250Кб), следовательно страница, на которую будет подключена эта библиотека, будет загружаться быстрее. Так что советую Вам выбрать именно эту версию. Затем надо будет нажать кнопку «Download». Скорее всего, перед Вами появиться jQuery в текстовом виде, и библиотеку можно будет сохранить в нужное место через меню браузера «Сохранить страницу как».

2. Закачиваем jQuery на сайт

Затем библиотеку необходимо «положить» в какое-то место на сайте, то есть закачать на сайт. Если Вы используете реальный хостинг, то сделать это можно, загрузив jQuery через панель управления сайта, или же через FTP. Далее будем считать, что в главной директории Вашего сайта есть поддиректория “javascript”, в которую складываются всякие библиотеки, и jQuery Вы тоже положили туда.

Если Вы используете локальный хостинг типа Денвера, тогда тоже можно создать директорию “javascript” в корневом каталоге Вашего сайта, и скопировать туда библиотеку.

3. Создаём веб-страницу и вставляем туда ссылку на jQuery

Структура веб-страницы, на которую Вы подключаете jQuery, может быть разной. Но в ней обязательно присутствуют теги HTML, HEAD и BODY. Так вот, подключить jQuery можно, если добавить тег SCRIPT со ссылкой на библиотеку внутрь тега HEAD.

  <script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>  

После добавления, Ваша страница может иметь такой вид:

  <!DOCTYPE html>  <html dir="ltr" lang="ru-RU">  <head>  <meta charset="UTF-8" />  <title>Страница, на которую я подключаю jQuery</title>  <script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>  </head>  <body>  Контент моей страницы  </body>  <html>  

Значение атрибута SRC тега script указывает на путь к внешнему JavaScript, который необходимо подключить на страницу. Обычно так подключается любой внешний JavaScript (хотя не обязательно вставлять тег SCRIPT именно в секцию HEAD, но так принято делать). В нашем случае внешним JavaScript-ом является библиотека jQuery

На момент написания статьи последняя версия jQuery — 1.7.2, но когда Вы будете читать эту статью, ситуация может измениться, следовательно, обратите внимание на имя скачанного файла js и подставьте его в код

link jQuery Migrate Plugin

We have created the
to simplify the transition from older versions of jQuery. The plugin restores deprecated features and behaviors so that older code will still run properly on newer versions of jQuery. Use the uncompressed development version to diagnose compatibility issues, it will generate warnings on the console that you can use to identify and fix problems. Use the compressed production version to simply fix compatibility issues without generating console warnings.

There are two versions of Migrate. The first will help you update your pre-1.9 jQuery code to jQuery 1.9 up to 3.0. You can get that version here:

The second version helps you update code to run on jQuery 3.0 or higher, once you have used Migrate 1.x and upgraded to jQuery 1.9 or higher:

EasyAutocomplete

EasyAutocomplete is a highly customizable jQuery autocomplete plugin with all the commonly required features. It supports local and remote data sets in JSON, XML, and plain text formats. It also supports callback handlers along with some default styling.

What sets this plugin apart is their . Templates are used to define the results view. You can create a custom template or use one of the available built-in presets which include:

• Description Template
• Icon Right/Left Template
• Link Template

Implementing a basic autocomplete with this plugin is quite easy, see the following example code:

HTML:

JavaScript:

JSON:

To learn more, visit the following link:

• Website
• Download
• Source

Как проверить работу jQuery на сайте

А как проверить, подключена и работает ли библиотека jQuery на сайте? Сделать это достаточно просто. Можно пойти двумя путями: добавить небольшой скрипт в поле head или body, или воспользоваться возможностями браузера.

В сети нашёл несколько вариантов скриптов для этой цели:

<script>
$(document).ready(function(){
    $('body').append('<br/>Этот текст добавлен с помощью jQuery');
});
</script>

Или так:

<script>
 $(document).ready(function(){
 alert(jQuery.fn.jquery);
 });
 </script>

Как это работает? Если jQuery подключена, то при переходе на любую страницу своего сайта, мы увидим надпись: «Этот текст добавлен с помощью jQuery».

Ещё один вариант скрипта:

<script>
if (window.jQuery) alert("jQuery подключен");
else alert("jQuery не подключен");
</script>
<script>
$(document).ready(function(){
alert(jQuery.fn.jquery);
});
</script>

Если jQuery не работает, то увидим такое сообщение: «jQuery не подключен».

Есть и более простой способ проверить правильность подключения jQuery. При помощи клавиши F12 вызвать консоль браузера и выполнить следующую команду:

Если увидели цифры, то это и есть версия подключенной jQuery.

Или так:

Попробуйте такой код в консоли:

var msg;
if (window.jQuery) {
    msg = 'Вы используете такую версию jQuery: ' + jQuery.fn.jquery;
} else {
    msg = 'jQuery не подключена';
}
alert(msg);

Всем WEB!

Минус: нет понимания технологии

Чрезмерное увлечение jQuery может привести к тому, что программист просто не будет понимать, как работают механизмы у него на странице и не сможет их исправить, если что-то пойдёт не так.

Например, программист прикрутил на страницу какой-то эффект на базе jQuery. Потом еще один, и они начали конфликтовать. Если программист не может разобраться в устройстве этих библиотек, он не сможет разрешить конфликт — а для этого нужно понимать чистый javaScript и уметь отлаживать код.

Получается, что знать jQuery всё-таки полезно, но нужно понимать, когда без него можно обойтись.

Скоро возьмем эту библиотеку за основу и сделаем какой-нибудь полезный проект. Подписывайтесь, мы напишем, когда что-нибудь такое выйдет.

На что нужно обязательно обратить внимание при подключении библиотеки jQuery?

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

2.Так же, большое значение играет сама версия jQuery

К примеру, если у вас на сайте используется слайдер, разработанный на основе библиотеки версии jQuery 2.2, а вы подключаете jQuery 2.1, либо какую-то другую версию, то данный слайдер может у вас не работать.

3.Так же, при подключении данной библиотеки следует обратить внимание на то, подключается у вас в шапке сайта какие-то другие скрипты или библиотеки, связанные с jQuery. Если они у вас подключаются, то выполнить подключение самой библиотеки jQuery вам нужно будет не перед закрытием тега , а немножко раньше

Иначе, у вас эти библиотеки или скрипты могут не работать. Да и вообше, при подключении данной библиотеки, порядок подключения скриптов имеет большое значение.

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

5.Может быть такое, что вы подключаете какую-то библиотеку, затем прописываете какой-то свой скрипт, и этот скрипт у вас не работает. Это так же связано с конфликтом jQuery, и для того, чтобы решить эту проблему нужно прописать этот скрипт в режиме jQuery no-conflict. Для этого, сам скрипт оборачивается вот в такой вот код:

XHTML

1
2
3
4
5

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

XHTML

1
2
3
4
5

Как добавить библиотеку в html

Работать с фреймворком можно добавив ссылку в исходный код вашего блога с официального интернет-проекта Jquery, или же скачав библиотеку к себе на сервер.

Используем первый способ

Откроется страница, где нажимаем правой кнопкой мыши по «Download the compressed» и выбираем в открывшемся окне строку «Копировать адрес ссылки».

Далее осталось в исходном коде перед закрывающимся тегом head написать следующее:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

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

Атрибут «src» указывает путь к внешнему файлу. Хотелось бы отметить, что не обязательно подключать данный скрипт в тег «head». На момент написания статьи последняя версия была 3.2.1. Когда вы будете читать данный пост, она может измениться. Выйдет новая.

Важно! Перед началом работы с данным фреймворком у вас должны быть начальные знания в области веб-программирования. Это не так сложно, как кажется

На начальных этапах обучения рекомендую почитать статью «Первые шаги в коддинге».

Как подключить, скачав файл на свой сервер

На официальном сайте, так же, как и в первом способе, жмем на кнопку «Загрузить».

В новом окне нажимаем ссылку «Download the compressed» левой кнопкой мыши и прописываем путь, куда нужно скачать файл библиотеки.

На сервере создайте папку, например, «JS» и скопируйте в него этот файл.

Теперь его нужно подключить для этого в теге «head» пишем такой код:

<script type="text/javascript" src="js/ jquery-3.2.1.min.js"></script>

Наблюдательный читатель заметит, что можно скачать сжатую и полную версию файла.

Они отличаются размером. Сжатая версия, та что использовалась в примере, имеет размер 85 килобайт, а полная — 260. В первом варианте были убраны все пробелы и переводы строк. Также сократили имена переменных. Больше между ними разницы нет. Я советую использовать способ, описанный выше, так как в нем размер подключаемого файла меньше и поэтому загружаться он будет быстрее. Полная версия используется разработчиками, и вебмастерами, которые захотят изучить работу библиотеки подробнее.

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

Если вы не исправляете саму библиотеку jquery, а используете только версию Compressed (файлик  min.js), то есть смысл не загружать библиотеку на локальный сервер, а подключать его напрямую с CDN (Content Delivery Networks) — в данном случае библиотека jQuery находится физически в ctnb CDN — а мы просто ссылаемся на неё.

Что такое CDN

В двух словах, CDN — это сети из серверов разнесенных на большое расстояние между собой. Когда в сеть CDN приходит запрос на какой-либо файл, внутри сети определяется, какой сервер ближе расположен к месту запроса и отправляет его на тот сервер, таким образом, выбирается оптимальный маршрут по которому наиболее быстро будет отправлен скачиваемый файл в ответ на запрос.

Строка подключения библиотеки jQuery с CDN сервера

Строка подключения к CDN серверу также находится на странице  http://jquery.com/download и выглядит следующим образом (в зависимости от версии):

Отложенные и асинхронные сценарии

Как отмечалось ранее, по умолчанию файлы JavaScript-кода прерывают синтаксический анализ (парсинг) HTML-документа до тех пор, пока скрипт не будет загружен и выполнен, тем самым увеличивая промежуток времени до первой отрисовки страницы.
Возьмём пример, в котором элемент расположен где-то в середине страницы:

В этом примере, пока пока браузер не загрузит и не выполнит script.js, он не покажет часть страницы под ним. Такое поведение браузера называется «синхронным» и может доставить проблемы, если мы загружаем несколько JavaScript-файлов на странице, так как это увеличивает время её отрисовки.

А что, если HTML-документ на самом деле не зависит от этих JS-файлов, а разработчик желает контролировать то, как внешние файлы загружаются и выполняются?

Кардинально решить проблему загрузки скриптов помогут атрибуты и элемента .

Атрибут async

Async используется для того, чтобы указать браузеру, что скрипт может быть выполнен «асинхронно».

При обнаружении тега браузер не останавливает обработку HTML-документа для загрузки и выполнения скрипта, выполнение может произойти после того, как скрипт будет получен параллельно с разбором документа. Когда скрипт будет загружен – он выполнится.

Для сценариев с атрибутом не гарантируется вы­полнение скриптов в порядке их добавления, например:

В примере второй скрипт может быть выполнен перед первым, поэтому важно, что­бы между этими сценариями не было зависимостей. Примечание: Атрибут используется, если нужно разрешить браузеру продолжить загрузку страницы, не дожидаясь завершения загрузки и выполнения сценария

Примечание: Атрибут используется, если нужно разрешить браузеру продолжить загрузку страницы, не дожидаясь завершения загрузки и выполнения сценария.

Атрибут defer

Атрибут откладывает выполнение скрипта до тех пор, пока вся HTML-страница не будет загружена полностью.

Как и при асинхронной загрузке скриптов — JS-файл может быть загружен, в то время как HTML-документ ещё грузится. Однако, даже если скрипт будет полностью загружен ещё до того, как браузер закончит обработку страницы, он не будет выполнен до тех пор, пока HTML-документ не обработается до конца.

Несмотря на то, что в приведенном примере теги включены в элемент HTML-документа, выполнение сценариев не начнется, пока браузер не дойдет до закрыва­ющего тега .

Кроме того, в отличие от , относительный порядок выполнения скриптов с атрибутом будет сохранён.

Применение атрибута бывает полезным, когда в коде скрипта предусматривается работа с HTML-документом, и разработчик должен быть уверен, что страница полностью получена.

Примечание: Атрибуты и поддерживаются только для внешних файлов сценариев, т.е. работают только при наличии атрибута .

Как использовать jQuery на странице

Использование jQuery рассмотрим на простом HTML5 документе. Для этого мы его создадим, подключим к нему эту библиотеку с помощью Google CDN, и произведём с помощью неё ряд изменений на странице. А именно, изменим цвет фона на , выровняем по центру и добавим в конец страницы элемент с контентом «Я люблю jQuery».

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Страница, к которой подключен jQuery</title>
  <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <h1>Моя страница, к которой подключён jQuery</h1>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      /* код на jQuery */
      // установим body фон #eee
      $('body').css('background-color', '#eee');
      // выровняем h1 по центру
      $('h1').css('text-align', 'center');
      // добавим в конец страницы элемент div с контентом "Я люблю jQuery"
      $('body').append('<div style="text-align: center; font-size: 20px;">Я люблю jQuery</div>');
    });
  </script>
</body>
</html>

Синтаксис jQuery начинается с функции или с более короткого и красивого псевдонима — знака (как в этом примере).

Что делать при конфликте jQuery с другой библиотекой

Но что делать если знак у вас занят и используется другой библиотекой?

В этом случае, чтобы избежать конфликтов можно воспользоваться одним из следующих 3 способов.

1 способ: обращение к jQuery по её полному имени.

// вызываем метод noConflict
jQuery.noConflict();
// обращаемся к jQuery по её полному имени
jQuery('body').css('background-color', '#eee');
// ...

2 способ: обращение к jQuery по другому псевдониму, например .

// установка $j в качестве псевдонима функции jQuery
var $j = jQuery.noConflict();
$j('body').css('background-color', '#eee');
// ...

3 способ: обращение к jQuery по .

Как подключить скрипт jQuery в html

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

Подключение последней версии jQuery:

<script src="/assets/js/jquery-3.5.1.min.js"></script>

При этом разместить можно как секции в , так и в . Но где же лучше?

Раньше (до появления режимов и ) это рекомендовалось делать перед закрывающим тегом :

  ...
  <script src="/assets/js/jquery-3.5.1.min.js"></script>
</body>
</html>

При таком размещении скрипт не будет блокировать парсинг веб-страницы, т.к. его загрузка и выполнение будет осуществляться в самом конце. В результате, это приведёт к тому, что пользователь увидит содержимое страницы быстрее и сможет раньше с ней начать взаимодействовать.

Если бы мы сделали это по-другому, например, поместили в раздел , то создали бы «задержку» при обработке страницы в самом её начале. А это привело бы к тому, что пользователю пришлось бы дольше ждать отображения контента страницы.

Но сейчас так делать не рекомендуется. Лучше размещать скрипты как можно выше (в разделе ) с добавлением к ним атрибута или . Эти атрибуты будут «говорить» браузеру, что скрипт нужно загрузить в фоне, не останавливая при этом основной поток обработки страницы. Это позволит сделать сайт более производительным.

  ...
  <!-- отложенная загрузка библиотеки jQuery -->
  <script defer src="/assets/js/jquery-3.5.1.min.js"></script>
  ...
</head>
...

Использовать атрибут применительно к jQuery не имеет смысла, т.к. эту библиотеку мы в основном используем для изменения DOM. Но перед тем, как править DOM, он должен быть построен. Это сделать нам поможет использование атрибута . Атрибут гарантирует что скрипт выполниться только после того, как дерево DOM будет построено, но до события .

При этом, если на странице имеется несколько внешних скриптов с атрибутом , то они будут выполняться строго в том порядке, в котором они расположены в коде.

Пример отложенного подключения jQuery и своего внешнего скрипта, зависящего от этой библиотеки:

<!-- сначала выполнится jQuery -->
<script defer src="/assets/js/jquery-3.5.1.min.js"></script>
<!-- после jQuery свой скрипт, зависящий от jQuery -->
<script defer src="/assets/js/main.min.js"></script>

При непосредственном размещении JavaScript кода в HTML документе его необходимо поместить в обработчик события DOMContentLoaded (в этом случае его код выполнится после загрузки библиотеки jQuery):

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // код, зависящий от jQuery
    ...
  });
</script>
<!-- отложенная загрузка jQuery -->
<script defer src="/assets/js/jquery-3.5.1.min.js"></script>