Что такое jquery? как его скачать и подключить к сайту?

Содержание:

Установка версии библиотеки jQuery UI, предназначенной для разработки
- Подключение библиотеки jQuery UI к HTML-документу
Общие сведения о jQuery и CDN.
Проверка подключения библиотеки jQuery
PixaBay jQuery-autoComplete
Что такое jQuery и её поддержка браузерами
- Преимущества и недостатки jQuery
- Статистика использования jQuery
Как переместить элемент в jQuery
Плюс: простой доступ к странице
Версии jQuery
jQuery Slim build
Преимущества jQuery
Установка библиотеки jQuery UI для производственной среды
- Использование библиотеки jQuery UI через сеть распространения содержимого
Проверка подключения библиотеки jQuery
Получаем и запускаем код JavaScript с помощью метода $.getScript()
Динамическое подключение
EasyAutocomplete
jQuery — Событие загрузки (load)
Подключаем jQuery с CDN

Установка версии библиотеки jQuery UI, предназначенной для разработки

Загрузочный архив jQuery UI содержит все файлы, необходимые для использования библиотеки как в процессе разработки, так и в производственной среде. Для работы с примерами вам понадобятся файлы, которые содержат несжатый исходный код и предназначены для использования в процессе разработки. В случае возникновении каких-либо проблем вы сможете легко изучить код для ознакомления с внутренним устройством библиотеки jQuery UI, что окажет неоценимую помощь при отладке сценариев.

Вы должны скопировать в папку с файлами примеров следующие файлы и папки:

development-bundle\ui\jquery-ui.custom.js;
development-bundle\themes\sunny\jquery-ui.css;
папка development-bundle\themes\sunny\images.

Содержащиеся в папках ui и themes файлы JavaScript и CSS используются отдельными компонентами и средствами, входящих в состав библиотеки. У вас не будет необходимости обращаться к ним, но они могут пригодиться в том случае, если вы захотите работать с ограниченным набором средств библиотеки jQuery UI.

Имена JavaScript- и CSS-файлов включают номер версии загруженного выпуска библиотеки. В моем случае это версия 1.10.3. Библиотека jQuery UI активно разрабатывается, и вы можете загрузить более позднюю версию, чем 1.10.3.

Подключение библиотеки jQuery UI к HTML-документу

Все, что вам теперь остается сделать — это включить библиотеку jQuery UI в свой HTML-документ. Это можно сделать, добавив в документ элементы script и link, содержащие ссылки на файлы JavaScript и CSS, которые вы загрузили, как показано в примере ниже:

Ссылаться непосредственно на папку images необязательно. Коль скоро папка images и CSS-файл находятся на своих местах, jQuery UI сможет самостоятельно найти все необходимые ресурсы.

Библиотека jQuery UI зависит от библиотеки jQuery. Для того чтобы использовать jQuery UI в документе, ее следует предварительно подключить к нему. Библиотека jQuery UI не относится к числу автономно используемых библиотек.

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

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

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

Событие onclick в javascript и jquery на примерах

Библиотека скриптов 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

Что такое услуга «быстрый платёж» в сбербанке и как её подключить?

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

XHTML

1
2
3
4

if(window.jquery)alert(«Библиотека jquery подключена»);

elsealert(«Библиотека jquery не подключена»);

</script>

Данный скрипт нужно вставить в код сайта перед закрытием тега </body> .

Если библиотека подключена правильно, то на сайте должно будет высветиться сообщение о том, что библиотека jQuery подключена.

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

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

PixaBay jQuery-autoComplete

Как назначить новый url сайту, созданному в google сайтах

Pixabay.com, a free stock site, have an awesome open-source autocomplete jQuery plugin you can use for your project. Originally they were using DevBridge’s jQuery Autocomplete (no 4. in the list). Later they created a fork and started updating it to meet their own needs. Eventually, they did so much hacking into the original source code they ended up with their own ultra lightweight optimized plugin.

The plugin is only 1.4 kB compressed with support for multiple data sources, callbacks and features a smart caching system. Here is an example implementation of the plugin:

JavaScript:

To learn more, visit the following links:

Demo
Source
Download

Что такое jQuery и её поддержка браузерами

jQuery — это быстрая, лёгкая и многофункциональная JavaScript библиотека, основанная на принципе «пиши меньше, делай больше».

Её создал Джон Резиг в начале 2006 года. В настоящее время jQuery разрабатывается и поддерживается распределенной группой разработчиков как проект с открытым исходным кодом.

Сейчас последней версией jQuery является 3.5.1. Она поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Edge, Opera и Internet Explorer 9+.

Преимущества и недостатки jQuery

Преимущества, которые даёт нам библиотеки jQuery при её использовании для написания клиентских сценариев:

компактность кода. Позволяет писать код более компактно чем на чистом javaScript, т.е. за гораздо меньшее количество строк кода.
простой и понятный синтаксис. Значительно упрощает написание многих вещей, например, таких как манипулирование DOM элементами, обработку событий, добавление эффектов анимации на страницу, AJAX запросов и т.д.
кроссбраузерность. Код написанный на jQuery будет гарантированно работать во всех основных браузерах. В то время как код, написанный на чистом JavaScript надо будет однозначно проверять во всех браузерах. Т.к. некоторые фрагменты кода могут не поддерживаться и их реализацию для этих браузеров нужно будет выполнять как-то по-другому, или например, использовать полифиллы.
открытый код. Библиотека jQuery является полностью бесплатной как для личных, так и для коммерческих проектов.

Кроме преимуществ, приведённых выше, у библиотеки jQuery имеются конечно и недостатки.

К недостаткам jQuery можно отнести то, что она может немного увеличивать скорость загрузки веб-страницы (её сжатый размер составляет около 30КБ), а также немного снижать производительность выполнения кода, чем если он был бы написан на чистом JavaScript.

Статистика использования jQuery

Если перейти к статистике, то многие крупные компании, используют jQuery в своих приложениях и сайтах. При этом растущий тренд продолжается, несмотря на очень горячие дискуссии в ИТ сообществах на тему: «Стоит ли использовать jQuery или нет в 2021 году?»

Статистика использования jQuery 10k крупнейшими сайтами:

Как переместить элемент в jQuery

Если вам нужно именно переместить элемент, а не скопировать, то в jQuery это можно выполнить посредством использования нескольких методов.

Пример:

<div class="content-1">
  <p>...</p>
  <button id="move">Переместить кнопку в .content-2</button>
</div>
<div class="content-2">
  <p>...</p>
</div>

<script>
  $('#move').detach().appendTo('.content-2');

  // после выполнения:
  // <div class="content-1">
  //   <p>...</p>
  // </div>
  // <div class="content-2">
  //   <p>...</p>
  //   <button id="move">Переместить кнопку в .content-2</button>
  // </div>
</script>

Как в этом примере осуществляется перемещение? Сначала мы получаем элемент, который мы хотим переместить, в данном случае «#move». После этого вызываем метод , который удалит элемент из текущего места. В качестве результата он нам возвратит удалённый элемент. Далее удалённый элемент с помощью метода вставляем в нужное место.

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

В чистом JavaScript обратиться к объекту на странице можно одним из способов:

и еще несколько подобных

В jQuery то же самое делает одна прекрасная команда. Заодно она же совмещает в себе кучу других функций. Фактически она говорит jQuery: «Возьми ЭТО и сделай с ним что-то»:

Поэтому какие-то простые манипуляции с объектами на странице выглядят элегантнее именно с jQuery. Это не значит, что их нельзя делать с простым JavaScript — можно. Но это не так красиво.

Представьте, что у нас есть страница, на которой есть важные плашки. Такие же, как на этой, и у всех задан класс “SomeClass”. И в зависимости от времени суток, браузера или настроения программиста сайт должен эти плашки скрывать, добавлять новые или как-то их менять. Вот, что можно, к примеру, с ними делать:

добавлять новые:

вставлять ещё одни перед ними:

заменять их на что-то другое:

и просто плавно показывать на экране:

Версии jQuery

На данный момент существуют три версии jQuery: 1.x, 2.x и 3.x. Отличие второй версии лишь в том, что в ней перестали поддерживаться старые браузеры, такие как Internet Explorer ниже 8 версии. Это позволило уменьшить размер файла библиотеки и ускорить её работу. Третья версия получила еще больше ускорения, новых методов и исправлений.

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

jQuery Slim build

Иногда вам не нужно делать ajax запросы, или вы предпочитаете использовать отдельные библиотеки для этих целей, например request,axios, или модуль $http в AngularJS. По этому вместе с стандартной сборкой jQuery, которая содержит под модули ajax, и анимационных эффектов, предоставляется урезанная ‘slim’ версия. В наше время размер библиотеки jQuery кажется крошечным по сравнению с другими фреймворками и библиотеками, но все же можно уменьшить нагрузку на сервер используя slim сборку, которая весит всего 6kb при использовании gzip сжатия, обычная версия весит 24 килобайта.

https://code.jquery.com/jquery-3.3.1.slim.js https://code.jquery.com/jquery-3.3.1.slim.min.js

Изменения в jQuery 3.3.0

Теперь методы .addClass(), .removeClass(), и .toggleClass() принимают как параметр массив классов.

jQuery(‘section.main’).addClass();

Изменения в jQuery 3.2.0

Добавлена поддержка кастомных CSS свойств

<div style="--margin: 10px; margin: var(--margin)">
Some content
</div> 
<script>
$('div').css('--margin') ; // should return 10
$('div').css('--margin',20') ; // should change block margin to 20
</script>

Методы jQuery.holdReady,jQuery.nodeName,jQuery.isArray стали deprecated
Исправлена ошибка в методах .width(), .height() и других связанных методах где учитывались CSS transforms свойства. Например, елемент со стилем transform: scale(3x) не должен иметь высоту и ширину в три раза больше.
Добавлена поддержка элемента <template> в методе .contents().

let deferred = jQuery.Deferred();
deferred.then(function() {
console.log("first promise");
throw new Error("Some error occured");
})
.then(function() {
console.log("second promise");
}, function(err) {
console.log("rejection promise", err instanceof Error);
});
deferred.resolve();

Изменения в jQuery 3.0

jQuery.Deferred теперь совместим с Promises/A+

Объекты класса jQuery.Deferred теперь совместимы с Promises/A+ и промисами ES2015. Всем кто использовал этот метод ранее, нужно будет внести изменения, или заменить его на метод pipe. Также исключение выброшено в колбек .then() теперь становится значением reject. Все объекты deferred которые базировались на то что будет выброшено исключения никогда не будут выполены (resolved).

Раньше первый промис выполнялся и далее выбрасывалось исключения, и дальнейшее выполнение прекращалось. Связи с требованиями стандарта, выполняются все три колбека.

Колбеки будут выполняться асинхронно, не смотря на то Deferred был resolved

let defer = jQuery.Deferred();
defer.resolve();
defer.then(function() {
    console.log("success message");
});
console.log("after message");

Раньше в консоль бы вывелось «success message» потом «after message», а в последней версии наоборот.

К Deferred был добавлен метод catch()

Анимации теперь используют requestAnimationFrame В браузерах что поддерживают requestAnimationFrame будет использоваться это API для управления анимациями. Что уменьшит использование ресурсов CPU и увеличит время работы батареи на мобильных устройствах

Увеличена производительность кастомных селекторов.
Для некоторых селектора например таких как :visible скорость работы была увеличена в 17 раз

Просмотры:
9 551

Преимущества jQuery

Легко учиться: jQuery легко научиться, потому что он поддерживает то же самое кодирование в стиле JavaScript.

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

Отличная документация по API: jQuery предоставляет отличную онлайн-документацию по API.

Кросс-браузерная поддержка: jQuery обеспечивает отличную кросс-браузерную поддержку без написания дополнительного кода.

Ненавязчивый: jQuery является ненавязчивым, что позволяет разделить проблемы путем разделения HTML и jQuery кода.

Установка библиотеки jQuery UI для производственной среды

Завершив разработку своего веб-приложения и подготовившись к его развертыванию, можете использовать минимизированные версии файлов, включенных в загрузочный архив. Эти файлы имеют меньшие размеры, однако прочитать их содержимое, если это потребуется в интересах отладки, будет нелегко. Чтобы использовать версии файлов, предназначенные для развертывания, скопируйте в каталог своего веб-сервера следующие файлы и папки:

jquery-ui-1.10.3.custom.min;
jquery-ui-1.10.3.custom.min
папка css\sunny\images

Папка images и файл CSS здесь те же, что и в версии для разработки; изменения могут касаться лишь файла JavaScript. Чтобы выполнить чистую установку, достаточно скопировать эти файлы в каталог сервера.

Использование библиотеки jQuery UI через сеть распространения содержимого

Вопрос об использовании CDN для загрузки библиотеки jQuery уже затрагивался ранее. Если вы приверженец такого подхода, то вас порадует тот факт, что точно так же можно поступить и в случае библиотеки jQuery UI. Как Google, так и Microsoft обеспечивают хостинг файлов jQuery UI в своих сетях CDN. Для нашего базового примера я использую службу Microsoft, поскольку она предоставляет как JavaScript-файлы jQuery UI, так и стандартные темы оформления.

Чтобы использовать CDN, необходимо располагать URL-адресами нужных файлов. Если речь идет о службе Microsoft, то перейдите на страницу Microsoft Ajax Content Delivery Network. Прокрутив страницу вниз, вы увидите список ссылок, соответствующих различным версиям jQuery UI. Щелкните на ссылке той версии, которую вы используете (в моем случае это версия 1.10.3). Вы увидите URL-адреса для обычной и минимизированной версий файла библиотеки jQuery UI.

На оставшейся части страницы отображаются готовые темы, под каждой из которых указывается URL-адрес файла CSS.

Чтобы подключить эти файлы к документу через CDN, достаточно поместить в элементы script и link не ссылки на локальные файлы jQuery UI, а соответствующие URL-адреса, как показано в примере ниже:

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

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

XHTML

1
2
3
4

if(window.jquery)alert(«Библиотека jquery подключена»);

elsealert(«Библиотека jquery не подключена»);

</script>

Данный скрипт нужно вставить в код сайта перед закрытием тега </body> .

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

Получаем и запускаем код JavaScript с помощью метода $.getScript()

Также как и метод , который является короткой записью вызова метода для получения данных в формате JSON, метод является короткой записью вызова метода для получения и выполнения кода JavaScript, то есть аналогично использованию параметра формата данных . Метод получает два аргумента:

URL файла JavaScript для загрузки.
Опциональную возвратную функцию, которая выполняется по завершению выполнения загруженного JavaScript кода.

Метод используется для загрузки библиотек и плагинов JavaScript «на лету», то есть тогда, когда они нужны. Так можно уменьшить время начальной загрузки страницы, потому что не нужно включать в заголовок страницы каждую библиотеку JavaScript, которая может быть понадобится, а может быть и нет.

Для демонстрации работы метода переместим код, который выводит прогноз в отдельный файл JavaScript . Весь код будет размещен в функции :

function showForecast( forecastData ) {
  var forecast = forecastData.city + ". Прогноз погоды на " + forecastData.date;
  forecast += ": " + forecastData.forecast + ". Максимальная температура:" + forecastData.maxTemp + "C";
  alert( forecast );
}

Также изменим страницу для получения нашего кода JavaScript с помощью метода :

<!doctype html>
<html lang="ru">
<head>
<title>Прогноз погоды</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<script>
 
$( function() {
 
    $.getScript( "showForecast.js", function() {
 
      $('#getForecast').click( function() {
        var data = { city: "Васюки", date: "20120318" };
        $.get( "getForecast.txt", data, showForecast, "json" );
      } );
 
    } );
 
  } );
 
</script>
 
</head>
 
<body>
 
<button id="getForecast">Получить прогноз погоды</button>
 
</body>
</html>

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

Код JavaScript в файле начинается с вызова для загрузки библиотеки . Также создается анонимная возвратная функция, которая выполняется сразу после загрузки . Данная функция добавляет обработчик события для кнопки , который вызывает метод для получения файла и выполнения загруженной функции для вывода сообщения.

Метод добавляет случайный параметр к строке запроса (например,) для предотвращения кэширования браузером файла JavaScript.

Динамическое подключение

Динамическое подключение jQuery осуществить проще всего. Для этого достаточно в коде вашего сайта, перед закрытием тега </head> просто добавить вот такой код:

XHTML

1	<script type=»text/javascript»src=»//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js»></script>

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

Если же вам нужно загрузить не последнюю версию библиотеки jQuery, а библиотеку какой-то определенной версии, то вам нужно вставить вот такой код:

XHTML

1 2	<script type=»text/javascript»src=»//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js»> </script>

Где вместо 2.2.0 вы ставите ту версию, которая нужна вам для загрузки.

Для того, что бы убедиться, что по данному адресу в хранилище Google действительно находится нужная вам библиотека, достаточно просто скопировать данный адрес и вставить его в адресную строку браузера и затем нажимать Enter.

И вот мы видим код самой библиотеки, и в самом верху написана ее версия.

Достоинствами динамического подключения:

Простота подключения. То есть вы, просто вставляете код на ваш сайт, и получаете уже подключенную библиотеку jQuery.
Из хранилища Google подключение скрипта происходит быстрее, чем, если скрипт находится на вашем сайте.

Недостатки подключения:

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

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

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 — Событие загрузки (load)

Событие браузер генерирует элементу, когда он и все вложенные в него элементы были полностью загружены. Данное событие предназначено только для элементов, в которых присутствует URL: , , и .

Например, выполнить функцию, когда страница будет полностью загружена (включая картинки):

$(window).on('load', function() {
  // действия после полной загрузки страницы...

});

Например, выведем сообщение в консоль, когда указанное изображение будет загружено:

<img id="image" src="image.png">
...
<script>
$('#image').on('load', function() {
  console.log('Изображение загружено');
});
</script>

Подключаем jQuery с CDN

Раньше можно было загрузить последнюю версию jQuery с официального сайта, записав такую строку:

Загрузка последней версии jQuery с оффсайта

1	<script src=»http://code.jquery.com/jquery-latest.js»></script>

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

Зато с официального сайта code.jquery.com вы можете загрузить/подключить на страницу различные версии этой библиотеки и других продуктов, основанных на jQuery, например, jQuery UI, jQuery Mobile или jQuery Color. Просто кликните на нужной вам версии и скопируйте код. Все версии jQuery вы найдете здесь.

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

CDNJS CDN
jsDelivr CDN

На скриншоте видно, что ссылки на ресурсах представлены на разные версии jQuery.

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

Несколько ссылок с вышеприведенных источников, которые вы можете скопировать и вставить к себе на страницу/сайт сразу же:

Ссылки на jQuery 3.5 CDN

<!— https://code.jquery.com/ —>
<script src=»https://code.jquery.com/jquery-3.5.1.min.js»
integrity=»sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=»
crossorigin=»anonymous»></script>

<!— Google —>
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»></script>

<!— microsoft.com —>
<script src=»https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js»></script>

<!— https://cdnjs.com/ —>
<script src=»https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js»
integrity=»sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=» crossorigin=»anonymous»></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!—https//code.jquery.com/ —>

integrity=»sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=»

crossorigin=»anonymous»></script>

<!—->

<!—microsoft.com—>

<!—https//cdnjs.com/ —>

integrity=»sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=»crossorigin=»anonymous»></script>