Подключение jquery библиотеки от cdn google

jQuery Core — All 2.x Versions

• jQuery Core 2.2.4 — uncompressed, minified
• jQuery Core 2.2.3 — uncompressed, minified
• jQuery Core 2.2.2 — uncompressed, minified
• jQuery Core 2.2.1 — uncompressed, minified
• jQuery Core 2.2.0 — uncompressed, minified
• jQuery Core 2.1.4 — uncompressed, minified
• jQuery Core 2.1.3 — uncompressed, minified
• jQuery Core 2.1.2 — uncompressed, minified
• jQuery Core 2.1.1 — uncompressed, minified
• jQuery Core 2.1.0 — uncompressed, minified
• jQuery Core 2.0.3 — uncompressed, minified
• jQuery Core 2.0.2 — uncompressed, minified
• jQuery Core 2.0.1 — uncompressed, minified
• jQuery Core 2.0.0 — uncompressed, minified

PixaBay jQuery-autoComplete

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

Пользовательские DOM-свойства

Элементы в DOM не ограничиваются перечнем только стандартных (встроенных) для каждого из них свойств. К любому элементу в DOM пользователь может добавить свои собственные свойства.

По сути, DOM элементы (узлы) – это обычные объекты JavaScript. Следовательно, к ним, как и к любым другим объектам можно добавлять свои свойства.

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

Рассмотрим добавление собственного DOM-свойства к элементам на следующем примере.

В этом примере добавим к элементам пользовательское DOM-свойство , которое будем использовать для хранения количество нажатий (click-ов):

<button class="counter">Нажми на меня</button>
<button class="counter">Нажми на меня</button>
<button class="counter">Нажми на меня</button>

<script>
var 
  counters = $('.counter'), // получим все кнопки
  defaultButtonText = 'Нажми на меня'; // текст кнопки по умолчанию
// добавим ко всем кнопкам DOM-свойство count со значением 0.
counters.prop('count', 0);
// добавим обработчик события click для каждой кнопки (при нажатии на кнопку будем увеличивать значение его DOM-свойства count на 1)
counters.click(function(){
  // сохраним текущее значение DOM свойства count в переменную count
  var count = $(this).prop('count');
  // увеличим значение переменной count на 1
  count++;
  // сохранить значение переменной count в пользовательское DOM-свойство count этого элемента
  $(this).prop('count',count);
  // изменим текст текущей кнопки
  $(this).text(defaultButtonText + ': ' + count);
});
</script>

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

Удаление пользовательского DOM-свойства у элемента осуществляется с помощью метода .

Синтаксис метода removeProp:

.removeProp( propertyName )
// propertyName (тип: Строка) - свойство, которое нужно удалить

Данный метод предназначен исключительно для удаления собственных DOM-свойств. Удалить стандартные (встроенные) DOM-свойства у элементов нельзя, вы можете им просто установить значение по умолчанию.

Пример, в котором будем добавлять и удалять у элемента пользовательское DOM-свойство при нажатии соответственно на ту или иную кнопку:

<p id="paragraph"></p>
<button id="add-custom-property">Добавить DOM-свойство myProp к элементу #paragraph</button>
<button id="remove-custom-property">Удалить DOM-свойство myProp у элемента #paragraph</button>
  
<script>
// при нажатию на кнопку с #add-custom-property
$('#add-сustom-property').click(function(){
  // добавим к элементу #paragraph свойство myProp
  $('#paragraph').prop('myProp', 'Этот текст является значением DOM-свойства myProp');
  // выведим в качестве контента элементв #paragraph значение свойства myProp
  $('#myParagraph').text($('#myParagraph').prop('myProp'));
});
// при нажатию на кнопку с #remove-custom-property
$('#remove-custom-property').click(function(){
  // удалим у элемента #paragraph свойство myProp
  $('#paragraph').removeProp('myProp');
  // вывести сообщение о том, что свойство myProp не существует
  if ($('body').prop('myProp') === undefined ) {
    $('#paragraph').text('У элемента нет DOM-свойства myProp!');
  }
});
</script>    

jQuery – События клавиатуры

При нажатии клавиши клавиатуры браузер генерирует события в следующем порядке:

keydown -> keypress -> keyup

• (клавиша нажата, но ещё не отпущена);
• (событие генерируется для букв, цифр и других клавиш, за исключением управляющих) – предназначено для того чтобы получить код символа (события и позволяют узнать только о коде клавиши, но не символа);
• (генерируется браузером при отпускании клавиши).

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

<input id="target" type="text" value="">
...
<script>
$('#target').on('keydown keypress keyup', function(e) {
   console.log('Тип события: ' + e.type); // keydown, keypress, keyup
   console.log('Код нажатой клавиши или символа: ' + e.which); // код символа позволяет получить только keypress
   console.log('Нажата клавиша Alt: ' + e.altKey);
   console.log('Нажата клавиша Ctrl: ' + e.ctrlKey);
   console.log('Нажата клавиша Shift: ' + e.shiftKey);
   console.log('Нажата клавиша Cmd (osMac): ' + e.metaKey);
});
</script>

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

$(document).keypress("c",
  function(e) {
    if(e.ctrlKey) {
      console.log('Нажато сочетание клавиш Ctrl+c');
    }
});

Пример, как можно прослушать сочетание клавиш Ctrl+Enter:

$(document).keydown(function(e) {
  // с поддержкой macOS X
  if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) {
    // ваши действия...

  }
}

Пример, с использованием событий и :

<input id="name" type="text">
...
<script>
$('#name').
  keydown(function(){
    $(this).css('background-color', 'yellow');
  }).
  keyup(function(){
    $(this).css('background-color, 'pink');
  });
</script>

Добавление событий к динамически созданным объектам

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

$(document).on(eventName, selector, handler);

// document или любой другой существующий родительский элемент
// eventName - имя события
// selector - селектор, осуществляющий фильтрацию потомков, для которых необходимо запустить обработчик события
// handler - обработчик события

Это действие можно осуществить благодаря тому, что событие всплывает, и, следовательно, возникает у всех предков этого элемента. А объект, до которого всплывают все события на странице, является . Поэтому в большинстве случаев выбирают именно его. После этого зная селектор, функция может программно отобрать среди элементов (элемента, который вызвал это событие () и всех его предков включая родителя) те, которые соответствуют ему. И затем для всех отобранных элементов выполнить указанный в функции обработчик. Действия, посредством которых обработка события переносится на другой элемент (предок), называется в jQuery ещё процессом делегирования события.

Например, добавим событие к элементу, которого ещё нет на странице:

<button id="addButton" type="button">Добавить кнопку</button>

<script>
// при нажатии на элемент с id="addButton" добавить в начало страницы новую кнопку
$('#addButton').on('click', function(e) {
  $('body').prepend('<button class="deleteMe" type="button">Удалить меня</button>');
});
// добавить событие click, которое будет выполнено для элементов, которых ещё нет на странице
$(document).on('click','.deleteMe', function() {
  $(this).remove();
});
</script>

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

$(document).on('click','#comment a',function(e) {
  if(!(location.hostname === this.hostname || !this.hostname.length)) {
    e.preventDefault();
    location.href='away?link='+encodeURIComponent($(this).attr('href'));
  }
});

Создание пользовательского события

Для создания пользовательских событий в jQuery используются методы и .

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

<div class="module">
  <p>...</p>
  <button class="success" type="button">Вызвать пользовательское событие highlight (цвет зелёный)</button>
  <button class="error" type="button">Вызвать пользовательское событие highlight (цвет красный)</button>
</div>
...
<script>
// добавляем ко всем элементам p пользовательское событие, которое будет изменять цвет текста и его содержимое
// получения данных, переданных методом trigger, осуществим посредством аргументов color и title
$('.module p').on('highlight', function(e, color, title) {
  $(this).css('color',color);
  $(this).text('Вызвано пользовательское событие highlight ' +title);
});
// при нажатии на элемент с классом success вызвать кастомное событие highlight и передать ему параметры
$('.success').click(function(){
  // используя второй аргумент передадим данные в обработчик события
  $(this).closest('.module').find('p').trigger('highlight',);
});
// при нажатии на элемент с классом error вызвать кастомное событие highlight и передать ему параметры
$('.error').click(function(){
  // используя второй аргумент передадим данные в обработчик события
  $(this).closest('.module').find('p').trigger('highlight',);
});
</script>

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!

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

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

document.getElementById(«myElement»)
document.getElementsByTagName(«td»)
document.getElementsByClassName(«myClass»)

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

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

$(«myElement»)

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

Пример манипуляции с объектами

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

var $elem = $(«.SomeClass») //Выбираем элементы.

$elem.remove(); //Удаляем их.

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

$elem.prepend($someOtherElem);

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

$elem.before($someOtherElem);

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

$elem.replaceWith($someOtherElem);

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

$elem.fadeIn();

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

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

XHTML

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

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

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

XHTML

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

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

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

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

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

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

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

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

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

Получение значения элемента формы

В jQuery чтение значений элементов , и осуществляется посредством метода .

Например, получим значение элемента :

<input type="text" id="quantity" name="quantity" value="3" />
...
<script>
// сохраним значение в переменную quantity
var quantity = $('#quantity').val();
// выведем значение переменной quantity в консоль
console.log(quantity);
</script>

Метод , если в коллекции присутствует несколько элементов, вернёт значение только первого из них.

<input name="color" type="radio" value="white"> Белый<br>
<input name="color" type="radio" value="green" checked> Зелёный<br>
<input name="color" type="radio" value="brown"> Коричневый<br>
...
<script>
  // получим значение первого элемента в коллекции
  var valColor = $('input').val();
  console.log(valColor); // white
  // получим значение выбранной (checked) радиокнопки
  var valCheckedColor = $( "input:checked" ).val();
  console.log(valCheckedColor); // green
</script>

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

// получить значение выбранной опции select
$('select.color option:checked').val();
// получить значение выбранного select
$('select.size').val();
// получить значение отмеченного (checked) checkbox
$('input:checked').val();
// получить значение установленной радиокнопки
$('input:checked').val();

Если коллекции нет элементов, то метод возвращает значение .

Например, получим значение элемента , имеющего имя :

var valDescription =  $('textarea').val();
if (valDescription !== undefined) {
  console.log('Значение элемента textarea: ' + valDescription);
} else {
  console.log('Элемент textarea с именем description на странице не найден!');
}

Получим значение элемента :

<select id="volume">
  <option>16Gb</option>
  <option>32Gb</option>
</select>
...
<script>
// получим значение выбранной опции элемента select
var volume = $('#volume').val();
// выведем это значение в консоль
console.log(volume);
// выведем значение в консоль при изменении select
$('#volume').change(function(){
  var volume = $(this).val();
  console.log(volume);  
});
</script>

Если элемент имеет множественный выбор (атрибут ), то метод возвратит в качестве результата массив, содержащий значение каждой выбранной опции (). Если ни одна опция не отмечена, то данный метод вернёт в качестве ответа пустой массив (до версии jQuery 3 значение ).

<select id="brands" multiple="multiple">
  <option selected="selected">Acer</option>
  <option>Samsung</option>
  <option selected="selected">Asus</option>
</select>

<script>
// var brands = $('#brands').val() || []; // до версии jQuery 3
var brands = $('#brands').val(); // для версии jQuery 3
// преобразуем массив в строку, используя разделитель ", "
var output = brands.join( ", " );
// выведем строку в консоль
console.log(output);
</script>

5 последних уроков рубрики «PHP»

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

Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак

В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение

В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

Подборка PHP песочниц
Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.

Особенности запуска скрипта

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

Теперь проверяем работоспособность плагина на сайте. Если все сделано правильно и нет ошибок в коде, скрипт сработает корректно и на странице появится слайдер с изображениями.

Теперь стало очевидно, что подключить JQuery намного быстрее и проще, чем создавать JS-код с нуля. Работа с этой библиотекой помогает сэкономить время заказчика и исполнителя, быстро подобрать готовое решение и протестировать его на практике. Именно поэтому многие программисты и верстальщики обращаются к библиотеке готовых решений для оптимизации и ускорения своей работы.

Подключение с внешнего ресурса

Альтернативный вариант добавления библиотеки в исходный код на странице — использование CDN. В переводе это значит сеть доставки контента. При таком варианте ядро фреймворка находится на стороннем ресурсе. Это может быть Гугл, Майкрософт, Яндекс.

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Как начать писать код на jQuery

Написание конструкций на jQuery всегда начинается с или её псевдонима .

При этом все создаваемые конструкции на jQuery можно разделить на 2 вида:

• получение jQuery объекта с помощью функции или для последующего выполнения связанных с ним операций посредством jQuery методов;
• выполнение действий с использованием глобальных методов объекта $, например, , и др.

Пример конструкции 1 вида

Пример конструкции 1 вида на jQuery:

$(document).ready(function() {
  console.log('Готово!');
});

Этот пример выводит в консоль сообщение «Готово!» когда браузер закончит создание DOM страницы.

Из чего состоит этот код?

Первая часть – это получение объекта jQuery. Мы это выполнили посредством вызова функции с передачей ей в качестве значения аргумента DOM-элемента :

Вторая часть – это выполнения действий над объектом jQuery (полученным в 1 части конструкции) с помощью методов jQuery. В этом примере – это . Он предназначен для однократного вызова переданной в него функции (в данном случае анонимной) сразу после того, как DOM будет готов.

Этот пример показывает основной принцип написания конструкций на jQuery. Такие конструкции всегда начинаются с вызова функции jQuery. Целью этого действия является получения jQuery объекта. После того как мы это сделали мы можем для этого объекта вызвать jQuery метод и тем самым выполнить некоторые действия каким-то образом, связанные с ним.

Пример конструкции 2 вида

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

Например, используя переберём массив чисел и выведем из них в консоль те, которые меньше 0:

// переменная numbers, содержащая массив чисел
var numbers = ;
// вызов глобального метода jQuery $.each
$.each(numbers, function(index, value) {
  if (value < 0) {
    console.log(value);
  }
});

Что это такое

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

Уметь работать с ним должен любой вебмастер, который хочет создать профессиональный интернет-проект. Перед началом изучения ознакомьтесь с моей статьей «JavaScript для чайников».  Она поможет вам в дальнейшем изучении jquery. Используя эту библиотеку, вы получите такие преимущества по сравнению с использованием javascript:

• Работает со всеми современными браузерами;
• Быстрое внедрение визуальных эффектов, а также скрытие и появление элементов на блоге;
• Много плагинов, облегчающих работу — галереи, слайдеры формы, выпадающее меню и другие элементы страницы.
• Работа с ajax. Это технология, разрешающая отправлять запрос к серверу без перезагрузки браузера.

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

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

Что такое CDN

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

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

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

Как подключить jQuery с CDN

CDN (Content Delivery Network) – это технология, которая позволяет увеличить скорость доставки контента конечным пользователям.

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

Т.е. CDN предоставляет ещё один способ подключить библиотеку jQuery. При этом непосредственно загружать его себе на сервер не нужно, он будет браться с CDN.

Загрузку jQuery с CDN предоставляют множество компаний, например, таких как Google, Microsoft, Cloudflare, jQuery, Yandex и т.д.

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

Код для онлайн подключения jQuery последней версии (3.5.1) с Google CDN:

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

Если нужна не эта, а какая-то другая версия, то тогда следует перейти страницу и выбрать её.

Например, ссылка для подключения версии из ветки 1.x (1.12.4):

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

Google CDN для последней версии из ветки 2.x (2.2.4):

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

Другие популярные CDN

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>

jQuery CDN:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Cloudflare CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Yandex CDN (последняя опубликованная версия 3.3.1):

<script src="https://yastatic.net/jquery/3.3.1/jquery.min.js"></script>

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

Как подключить плагин к коду HTML

Для того, чтобы подключить плагин jQuery к коду страницы, в теге link нужно прописать пути ко всем файлам из архива на вашем компьютере. Сначала добавляем в HTML файл с расширением CSS и подключаем точно также, как файл стилей: . Эта ссылка располагается в теге head сразу же после скрипта со ссылкой на библиотеку. Следующим подключаем файл с расширением js. Это скрипт, и добавить его можно тем же способом, что и файл с библиотекой. Всего подключаем три файла: саму библиотеку jQuery, стили и скрипт.

Следующий шаг – запуск или инициализация плагина. На странице с документацией будет несколько вариантов кода для различных целей. Выбираем нужный, копируем его и вставляем в HTML, как скрипт в тег head. Для этого просто копируем написанный код в тег script. Теперь разберемся с синтаксисом плагина jQuery. На первой строчке скопированного кода будет название класса родительского блока, который необходимо добавить в HTML проекта. Подсказка о том, куда его вставить, будет на странице с документацией. В случае со слайдером, нужный класс добавляется к блоку со ссылками на изображения.

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: