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

Содержание:

link Downloading jQuery using Bower
jQuery Tools from CDN
Загрузка библиотеки jQuery
Download
- Slim build
jQuery UI 1.8
- Themes
- Previous Releases
Minor vulnerability fix: Object.prototype pollution
- - Example
link Using jQuery with a CDN
- jQuery’s CDN provided by StackPath
- Other CDNs
Как использовать jQuery на странице
- Что делать при конфликте jQuery с другой библиотекой
С помощью файла functions.php
Build a custom set of Tools.
Подключение jQuery со страницы своего сайта
Что это такое
Как подключить скрипт jQuery в html
Подключаем jQuery с CDN
Deprecating positional selectors and the sunset of Sizzle
jQuery Core — All 2.x Versions
Подключение jQuery на WordPress
Как подключить jQuery с CDN
- Другие популярные CDN
Подключаем jQuery

link Downloading jQuery using Bower

jQuery is also registered as a package with Bower. You can install the latest version of jQuery with the command:

This will install jQuery to Bower’s install directory, the default being . Within you will find an uncompressed release, a compressed release, and a map file.

The jQuery Bower package contains additional files besides the default distribution. In most cases you can ignore these files, however if you wish to download the default release on its own you can use Bower to install jQuery from one of the above urls instead of the registered package. For example, if you wish to install just the compressed jQuery file, you can install just that file with the following command:

jQuery Tools from CDN

Here is a list of all available jQuery Tools combinations from
a free Content Delivery Network.

<!-- UI Tools: Tabs, Tooltip, Scrollable and Overlay (4.45 Kb) --><script src="http://cdn.jquerytools.org/1.2.6/tiny/jquery.tools.min.js"></script> <!-- Form tools: Dateinput, Rangeinput and Validator. No jQuery library. ( Kb) --><script src="http://cdn.jquerytools.org/1.2.6/form/jquery.tools.min.js"></script> <!-- ALL jQuery Tools. No jQuery library --><script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script> <!-- jQuery Library + UI Tools --><script src="http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js"></script> <!-- jQuery Library + ALL jQuery Tools --><script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

HTML

If you prefer to load the jQuery library separately the recommended
practice is to load jQuery from Google’s CDN service. Make sure the
jQuery library is always loaded before the jQuery Tools
library.

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

HTML

Загрузка библиотеки jQuery

Найти библиотеку jQuery для загрузки, можно на официальном сайте разработчика http://jquery.com/download там должны быть представлены различные версии jQuery, можете выбирать самую новую, т.к. принципиальных различий в версии нет, но более новые версии могут содержать методы, которые нет в старых, и быть более оптимизированными.

При загрузке, библиотека jQuery будет представлена в двух вариантах :

Compressed(минимизированная) jquery-****.min.js — если вы не будете лопатить исходный код библиотеки, то вам достаточно будет этого файла
Uncompressed (обычный) jquery-***.js. — версия для разработчиков (Если вы выбираете его, то не забудьте сжать его самостоятельно, прежде чем выгружать на «боевой сервер»)

Download

You can get the files from the jQuery CDN, or link to them directly:

You can also get this release from npm:

Slim build

Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’ve released a “slim” version that excludes these modules. The size of jQuery is very rarely a load performance concern these days, but the slim build is about 6k gzipped bytes smaller than the regular version. These files are also available in the npm package and on the CDN:

These updates are already available as the current versions on npm and Bower. Information on all the ways to get jQuery is available at https://jquery.com/download/. Public CDNs receive their copies today, please give them a few days to post the files. If you’re anxious to get a quick start, use the files on our CDN until they have a chance to update.

jQuery UI 1.8

uncompressedminified

Themes

baseblack-tieblitzercupertinodark-hivedot-luveggplantexcite-bikeflickhot-sneakshumanityle-frogmint-chocovercastpepper-grinderredmondsmoothnesssouth-streetstartsunnyswanky-pursetrontasticui-darknessui-lightnessvader

Previous Releases

jQuery UI 1.8.23 — uncompressed, minified, theme
jQuery UI 1.8.22 — uncompressed, minified, theme
jQuery UI 1.8.21 — uncompressed, minified, theme
jQuery UI 1.8.20 — uncompressed, minified, theme
jQuery UI 1.8.19 — uncompressed, minified, theme
jQuery UI 1.8.18 — uncompressed, minified, theme
jQuery UI 1.8.17 — uncompressed, minified, theme
jQuery UI 1.8.16 — uncompressed, minified, theme
jQuery UI 1.8.15 — uncompressed, minified, theme
jQuery UI 1.8.14 — uncompressed, minified, theme
jQuery UI 1.8.13 — uncompressed, minified, theme
jQuery UI 1.8.12 — uncompressed, minified, theme
jQuery UI 1.8.11 — uncompressed, minified, theme
jQuery UI 1.8.10 — uncompressed, minified, theme
jQuery UI 1.8.9 — uncompressed, minified, theme
jQuery UI 1.8.8 — uncompressed, minified, theme
jQuery UI 1.8.7 — uncompressed, minified, theme
jQuery UI 1.8.6 — uncompressed, minified, theme
jQuery UI 1.8.5 — uncompressed, minified, theme
jQuery UI 1.8.4 — uncompressed, minified, theme
jQuery UI 1.8.3 — uncompressed, minified, theme
jQuery UI 1.8.2 — uncompressed, minified, theme
jQuery UI 1.8.1 — uncompressed, minified, theme
jQuery UI 1.8.0 — uncompressed, minified, theme

Minor vulnerability fix: Object.prototype pollution

jQuery 3.4.0 includes a fix for some unintended behavior when using . If an unsanitized source object contained an enumerable property, it could extend the native Object.prototype. This fix is included in jQuery 3.4.0, but patch diffs exist to patch previous jQuery versions.

Example

Note that while jQuery does its best to protect users from security vulnerabilities, jQuery is a DOM manipulation library that will generally do what you tell it to do. In this case, the behavior was likely unexpected, so will no longer write any properties named . But guards such as this one are not replacements for good security practices such as user input sanitization.

link Using jQuery with a CDN

CDNs can offer a performance benefit by hosting jQuery on servers spread across the globe. This also offers an advantage that
if the visitor to your webpage has already downloaded a copy of jQuery from the same CDN, it won’t have to be re-downloaded.

jQuery’s CDN provided by StackPath

The jQuery CDN supports Subresource Integrity (SRI) which allows the browser to verify that the files being delivered have not been modified. This specification is currently being implemented by browsers. Adding the new integrity attribute will ensure your application gains this security improvement as browsers support it.

To use the jQuery CDN, just reference the file in the script tag directly from the jQuery CDN domain. You can get the complete script tag, including Subresource Integrity attribute, by visiting https://code.jquery.com and clicking on the version of the file that you want to use. Copy and paste that tag into your HTML file.

Starting with jQuery 1.9, are available on the jQuery CDN. However, as of version 1.10.0/2.1.0 the compressed jQuery no longer includes the sourcemap comment in CDN copies because it requires the uncompressed file and sourcemap file to be placed at the same location as the compressed file. If you are maintaining local copies and can control the locations all three files, you can add the sourcemap comment to the compressed file for easier debugging.

To see all available files and versions, visit https://code.jquery.com

Other CDNs

The following CDNs also host compressed and uncompressed versions of jQuery releases. Starting with jQuery 1.9 they may also host ; check the site’s documentation.

Note that there may be delays between a jQuery release and its availability there. Please be patient, they receive the files at the same time the blog post is made public. Beta and release candidates are not hosted by these CDNs.

CDNJS CDN
jsDelivr CDN

Как использовать 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.noConflict();
(function($) {
  $(function() {
    /* код на jQuery */
    $('body').css('background-color', '#eee');
    // ...
  });
})(jQuery);

С помощью файла functions.php

И ещё один альтернативный способ подключения jQuery предложен Kama, который считает, что его вариант наиболее правильный. Суть заключается в том, что в WordPress уже есть программный метод добавления скриптов на страницу при помощи функций, например:

wp_register_script()
wp_enqueue_script()
wp_deregister_script()

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

Для правильного подключения jQuery надо воспользоваться функцией wp_enqueue_script(). Скрипт в данном случае подключается один раз. Файл functions.php необходимо дополнить такими строками:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method(){
	wp_enqueue_script( 'jquery' );
}

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

<script src='https://your-super-site.ru/wp-includes/js/jquery/jquery.js?ver=3.5.1'></script>

Можно ли подключить jQuery по этому способу с CDN Google? Отличная новость — да! Вот этот код от Kama совершит чудо:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
	// отменяем зарегистрированный jQuery
	// чтобы отменить jquery-migrate, вместо "jquery-core" вписать "jquery"
	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
	wp_enqueue_script( 'jquery' );
}

Его снова вписываем в файл functions.php. Результат работы кода:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src='http://example.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

Когда jquery-migrate.js не требуется, но нужен только jQuery, то следует дополнить functions.php таким кодом:

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
	// отменяем зарегистрированный jQuery
	wp_deregister_script('jquery-core');
	wp_deregister_script('jquery');

	// регистрируем
	wp_register_script( 'jquery-core', 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', false, null, true );
	wp_register_script( 'jquery', false, array('jquery-core'), null, true );

	// подключаем
	wp_enqueue_script( 'jquery' );
}

В этом случае увидим лишь такую строку в head:

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

В строке 9 «true» означает что скрипт подключится, по возможности, в футер сайта.

И ещё один вариант подключения той версии jQuery, которую использует WordPress. Вот код:

add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );
function my_scripts_method() {
	// получаем версию jQuery
	wp_enqueue_script( 'jquery' );
	// для версий WP меньше 3.6 'jquery' нужно поменять на 'jquery-core'
	$wp_jquery_ver = $GLOBALS->registered->ver;
	$jquery_ver = $wp_jquery_ver == '' ? '1.11.0' : $wp_jquery_ver;

	wp_deregister_script( 'jquery-core' );
	wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js' );
	wp_enqueue_script( 'jquery' );
}

Build a custom set of Tools.

Or download the source code

Here you can download individual tools or create a custom
combination of tools by selecting only those you want. Both
the source code and the minified
versions are available.

Include jQuery

jQuery

All tools depend on this library (except flashembed). Can alternatively be included from googleapis (see below)

UI Tools

Tabs	6761.0	The most important UI tool
Slideshow plugin	3678.0	Transforms tabs into a working slideshow
Tooltip	7832.0	The basics of UI design
Slide effect	1687.0	A sliding tooltip effect with customized sliding directions, dimensions and speeds
Dynamic plugin	3914.0	Dynamic positioning of the tooltip so that it always stays in the viewport
Overlay	6455.0	A generic HTML overlaying widget
Apple effect	3281.0	An overlay effect that you might have seen on apple.com

Form Tools

Dateinput	17850.0	HTML5 date input for humans
Rangeinput	10653.0	HTML5 range input for humans
Validator	14803.0	HTML5 input validation for humans

Flashembed	6773.0	The future of Flash embedding. Works as a standalone tool and jQuery is not required.
History	2193.0	Back button for AJAX apps
Expose	4497.0	Makes your HTML stand out from its surroundings
Mousewheel	1601.0

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

Самый распространенный способ подключения библиотеки. Для начала необходимо скачать свежую версию с сайта разработчика. На странице загрузки представлено несколько вариантов библиотеки, например сейчас предлагается скачать «Compressed, production jQuery 3.1.1» и «Uncompressed, development jQuery 3.1.1». Первый вариант — это сжатый вариант библиотеки, оттуда удалены все комментарии, в этом случае библиотека занимает намного меньше места, следовательно страница, на которую она будет подключена будет загружаться быстрее. Второй вариант — это, грубо говоря, исходный код библиотеки, он структурирован в удобном для чтения виде с комментариями, и предназначен в первую очередь для разработчиков. Поэтому рекомендую использоваться сжатую версию библиотеки.

После того, как библиотека загружена, необходимо разместить её на сервере, где находятся файлы сайта. Я обычно в корне сайта создаю папку «js» в которую копирую нужные библиотеки и там же размещаю файл со своими функциями.

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

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>Заголовок сайта</title>
     <script src="js/jquery-3.1.1.min.js"></script>
   </head>
   <body> </body>
</html>

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

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>Заголовок сайта</title>
   </head>
   <body>
   
   <script src="js/jquery-3.1.1.min.js"></script>
   </body>
</html>

Внимание! Желательно не менять название файла библиотеки jQuery (зачастую меняют на jquery.js), так как в дальнейшем сохранение официального названия файла поможет увидеть, какую версию библиотеки Вы используете (в моем примере используется версия 3.1.1)

Что это такое

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

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

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

Как подключить скрипт 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>

Подключаем 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>

Deprecating positional selectors and the sunset of Sizzle

The basic API of jQuery is to select something and then do something with what was selected. Sizzle, the selector engine in jQuery, handles the first half. It’s been a fast and efficient little engine that has paved the way for native selector APIs like and additional native JavaScript and CSS selectors. Now that many of these selectors have made their way into modern browsers, it’s almost time to say goodbye to Sizzle. But in order to remove Sizzle in jQuery 4.0, we will also need to remove what we refer to as positional selectors, which are non-standard selectors.

Specifically, jQuery 3.4.0 is deprecating , , , , , , , and . When we remove Sizzle, we’ll replace it with a small wrapper around , and it would be almost impossible to reimplement these selectors without a larger selector engine.

We think this trade-off is worth it. Keep in mind we will still support the positional methods, such as , , and . Anything you can do with positional selectors, you can do with positional methods instead. They perform better anyway.

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

Подключение jQuery на WordPress

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

<?php wp_head(); ?>

В итоге внутри тега HEAD появится строка подключения jQuery.

На момент написания статьи с WordPress поставляется jQuery v1.12.4 Но, как видите, версия библиотеки очень сильно отличается от той, которую подключали в примерах выше. Подключить свежую версию библиотеки возможно, но есть шанс возникновения конфликта.

Чтобы избежать конфликта, но при этом использовать ту версию библиотеки, которая необходима, нужно воспользоваться правильным способом подключения jQuery в файле functions.php:

<?php
function my_jquery_scripts() {
  wp_deregister_script( 'jquery' );
  wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js');
  wp_enqueue_script( 'jquery' ); 
}
add_action( 'wp_enqueue_scripts', 'my_jquery_scripts' );
?>

Тут сначала отключается стандартная библиотека, а потом через Google API подключаем версию 3.1.1

Внимание! Учтите, этот код будет работать только в том случае, если в вашей теме присутствуют wp_head() и wp_footer()

Как подключить 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 в кэш и при последующих запросах будет брать её уже оттуда.

Подключаем jQuery

Для того чтобы добавить jQuery на страницу, необходимо расположить тег с атрибутом , в котором указывается путь к скачанному файлу с jquery.min.js. Например, разместите следующий код в секции или до основного скрипта:

Подключаем jQuery и свой скрипт

JavaScript

//Очень часто это такой путь:
<script src=»js/jquery-3.5.0.min.js»></script>
<script src=»js/myscript.js»></script>

1
2
3
4
5
6

//Очень часто это такой путь:

Подключение jQuery из локальной папки имеет следующие плюсы:

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

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

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