Jquery для javascript-программистов

Содержание:

Как использовать jQuery на странице
- Что делать при конфликте jQuery с другой библиотекой
jQuery Core — All 2.x Versions
Minor vulnerability fix: Object.prototype pollution
- - Example
Дополнительные проекты jQuery
- jQuery UI
- jQuery Mobile
Changelog
How to Use It
jQuery UI 1.10
- Themes
- Previous Releases
Плюс: простой доступ к странице
Плюс: плагины на любой случай
Download
- Slim build
link Using jQuery with a CDN
- jQuery’s CDN provided by StackPath
- Other CDNs
Thanks
Список функций
Build a custom set of Tools.
Test Suite Convenience Methods Reference (See test/data/testinit.js)
- Add random number to url to stop caching
- Run tests in an iframe
Как скачать jQuery

Как использовать 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);

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

Minor vulnerability fix: Object.prototype pollution

Jquery document ready: tips & practical examples

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.

Дополнительные проекты jQuery

Библиотека jquery 3.5.1

С момента своего создания jQuery превратился в нечто большее, чем просто библиотека JavaScript, которая предлагает нам возможность выполнять как простые, так и мощные операции в кроссплатформенном режиме.

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

jQuery UI

С домашней страницы jQuery UI:

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

Многие из виджетов включают часто используемые функциональные возможности. Например:

Datepicker
Dialogs
Progress Bars
Tooltips
Autocomplete
и другие

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

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

jQuery Mobile

С домашней страницы jQuery Mobile:

Эта библиотека является самым последним введением в семейство библиотек, выпущенных в 2010 году (последний стабильный релиз — в 2014 году).

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

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

Фреймворк включает в себя:

классы CSS
сетку
реагирующую сетку
тему по умолчанию

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

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

Наконец, количество браузеров, которые все еще доступны и используются, велико. Хотя мы наблюдали уменьшение использования более ранних версий Internet Explorer и более широкое внедрение Chrome, у нас все еще есть определенные пользователи, которые придерживаются старых браузеров по ряду причин.

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

Неважно, однако. JQuery Mobile предлагает поддержку большинства существующих браузеров и операционных систем

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

Changelog

Ajax

Golf away 21 bytes (eaa3e9f)
Preserve URL hash on requests (#1732, e077ffb)
Execute jQuery#load callback with correct context (#3035, 5d20a3c)
Ensure ajaxSettings.traditional is still honored (#3023, df2051c)
Remove unnecessary use of jQuery.trim (0bd98b1)

Attributes

Avoid infinite recursion on non-lowercase attribute getters (#3133, e06fda6)
Add a support comment & fix a link @ tabIndex hook (9cb89bf)
Strip/collapse whitespace for set values on selects (#2978, )
Remove redundant parent check (b43a368)
Fix setting selected on an option in IE<=11 (#2732, 780cac8)

CSS

Don’t workaround the IE 11 iframe-in-fullscreen sizing issues (#3041, ff1a082)
Toggle detached elements as visible unless they have display: none (#2863, 755e7cc)
Make sure elem.ownerDocument.defaultView is not null (#2866, 35c3148)
Add animation-iteration-count to cssNumber (#2792, df822ca)
Restore cascade-override behavior in .show (#2654, #2308, dba93f7)
Stop Firefox from treating disconnected elements as cascade-hidden (#2833, fe05cf3)

Core

Implement ready without Deferred (#1778, #1823, 5cbb234)
Improve isNumeric logic and test coverage (#2780, 7103d8e)
Set the base href of the context in parseHTML (#2965, 10fc590)
Simplify isPlainObject (#2986, e0d3bfa)
Add test for `jQuery.isPlainObject(localStorage)` (ce6c83f)
Do not expose second argument of the `jQuery.globalEval` (6680c1b)
Deprecate jQuery.parseJSON (#2800, 93a8fa6)

Deferred

Separate the two paths in jQuery.when (#3029, 356a3bc)
Provide explicit undefined context for jQuery.when raw casts (#3082, 7f1e593)
Remove default callback context (#3060, )
Warn on exceptions that are likely programming errors (#2736, 36a7cf9)
Propagate progress correctly from unwrapped promises (#3062, d5dae25)
Make jQuery.when synchronous when possible (#3100, de71e97)
Remove undocumented progress notifications in $.when (#2710, bdf1b8f)
Give better stack diagnostics on exceptions (07c11c0)

Docs

Fix various spelling errors (aae4411)
Update support comments related to IE (693f1b5)
Fix an incorrect comment in the attributes module (5430c54)
Updated links to https where they are supported. (b0b280c)
Update support comments to follow the new syntax (6072d15)
Use https where possible (1de8346)
Use HTTPS URLs for jsfiddle & jsbin (63a303f)
Add FAQ to reduce noise in issues (dbdc4b7)
Add a note about loading source with AMD (#2714, e0c25ab)
Add note about code organization with AMD (#2750, dbc4608)
Reference new feature guidelines and API tenets (#2320, )

Effects

Remove width/height exception for oldIE (#2488, e04e246)
Add tests for using jQuery.speed directly (#2716, cb80b42)

Event

Allow constructing a jQuery.Event without a target (#3139, 2df590e)
Add touch event properties, eliminates need for a plugin (#3104, f595808)
Add the most commonly used pointer event properties (7d21f02)
Remove fixHooks, propHooks; switch to ES5 getter with addProp (#3103, #1746, e61fccb)
Make event dispatch optimizable by JavaScript engines (9f268ca)
Evaluate delegate selectors at add time (#3071, 7fd36ea)
Cover invalid delegation selector edge cases (e8825a5)
Fix chaining .on() with null handlers (#2846, 17f0e26)
Remove pageX/pageY fill for event object (#3092, 931f45f)

Tests

Take Safari 9.1 into account (234a2d8)
Limit selection to #qunit-fixture in attributes.js (ddb2c06)
Set Edge’s expected support for clearCloneStyle to true (28f0329)
Fix Deferred tests in Android 5.0’s stock Chrome browser & Yandex.Browser (5c01cb1)
Add additional test for jQuery.isPlainObject (728ea2f)
Build: update QUnit and fix incorrect test (b97c8d3)
Fix manipulation tests in Android 4.4 (0b0d4c6)
Remove side-effects of one attributes test (f9ea869)
Account for new offset tests (f52fa81)
Make iframe tests wait after checking isReady (08d73d7)
Refactor testIframe() to make it DRYer and more consistent (e5ffcb0)
Weaken sync-assumption from jQuery.when to jQuery.ready.then (f496182)
Test element position outside view (#2909, a2f63ff)
Make the regex catching Safari 9.0/9.1 more resilient (7f2ebd2)

Traversing

.not/.filter consistency with non-elements (#2808, 0e2f8f9)
Never let .closest() match positional selectors (#2796, a268f52)
Restore jQuery push behavior in .find (#2370, 4d3050b)

How to Use It

jQuery 2.0 is intended for the modern web; we’ve got jQuery 1.x to handle older browsers and fully expect to support it for several more years. If you want, you can serve 2.0 to newer browsers and 1.9 to older ones using our conditional comment trick, but that is not required. The simplest way to support older browsers is to use jQuery 1.x on your site, since it works for all browsers.

With the release of jQuery 2.0, there are a few environments where the jQuery team will no longer support use of the 1.x line because 2.x is a far better choice. These are typically non-web-site scenarios where support for older IE isn’t relevant. They include:

Google Chrome add-ons
Mozilla XUL apps and Firefox extensions
Firefox OS apps
Chrome OS apps
Windows 8 Store (“Modern/Metro UI”) apps
BlackBerry 10 WebWorks apps
PhoneGap/Cordova apps
Apple UIWebView class
Microsoft WebBrowser control
node.js (combined with jsdom or similar)

Many of these environments are themselves a work in progress, and have unique sets of rules or restrictions that are different from the ones typically found when jQuery is used for browsers on Internet web sites. Although we aren’t able to test regularly in all of these non-browser scenarios, we’d like to hear about your experiences in using jQuery with them. Even better, we’d love for the communities supporting these environments to pool and share their knowledge about how to use jQuery 2.0 there.

jQuery UI 1.10

uncompressedminified

Themes

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

Previous Releases

jQuery UI 1.10.3 — uncompressed, minified, theme
jQuery UI 1.10.2 — uncompressed, minified, theme
jQuery UI 1.10.1 — uncompressed, minified, theme
jQuery UI 1.10.0 — uncompressed, minified, theme
jQuery UI 1.10.0-rc.1 — uncompressed, minified, theme
jQuery UI 1.10.0-beta.1 — uncompressed, minified, theme

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

В чистом 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. Формы подписки, всплывающая реклама, захват телефонного номера — всё это уже есть и доступно за пару команд.

Несколько примеров:

Scrollpane — кроссбраузерный скролбар любого элемента на странице;

jReject — проверяет, не устарел ли используемый браузер;

GridScrolling — навигация по сайту с помощью клавиш;

FlickerPlate — плагин для слайдеров с поддержкой сенсорных экранов;

Animsition — создание анимированной загрузки страниц на сайте;

SlideBars — создание адаптивного меню на сайте

и ещё тысячи готовых плагинов.

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.

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

Thanks

Thank you to everyone who helped with this release through code contributions, issue reports, and more, including but not limited to Jason Bedard, Fredrik Blomqvist, Leonardo Braga, Ralin Chimev, Jon Dufresne, Oleg Gaidarenko, Richard Gibson, Michał Gołębiowski, Scott González, Zack Hall, Alexander K, Martijn W. van der Lee, Alexander Lisianoi, Steve Mao, Dave Methvin, Jha Naman, Jae Sung Park, Todor Prikumov, William Robinet, Felipe Sateler, Damian Senn, Josh Soref, Jun Sun, Christophe Tafani-Dereeper, Vitaliy Terziev, Joe Trumbull, Bernhard M. Wiedemann, Devin Wilson, and Henry Wong.

Список функций

Название	Описание
$.contains()	Проверяет, содержится ли один элемент страницы внутри другого.
$.extend()	Объединяет два или более javascript-объекта.
$.globalEval()	Выполняет заданный скрипт в глобальной области видимости.
$.grep()	Ищет в заданном массиве элементы удовлетворяющие условиям.
$.inArray()	Ищет в заданном массиве конкретный элемент и возвращает его индекс (или -1 в случае отсутствия элемента).
$.isArray()	Проверяет, является ли заданный элемент массивом.
$.isEmptyObject()	Проверяет наличие (точнее отсутствие) содержимого в заданном объекте.
$.isFunction()	Проверяет, является ли заданный элемент функцией.
$.isNumeric()	Проверяет, является ли заданный элемент числом.
$.isPlainObject()	Проверяет, является ли заданный элемент пользовательским объектом (задан средствами «{}» или «new Object»).
$.isWindow()	Проверяет, является ли заданный элемент объектом типа window.
$.isXMLDoc()	Проверяет, находится ли DOM-объект внутри XML-документа (или сам является XML-документом).
$.makeArray()	Конвертирует массиво подобные объекты, в массивы.
$.map()	Выполняет заданную функцию для каждого элемента массива или каждого поля объекта в отдельности.
$.merge()	Объединяет содержимое нескольких массивов, записывая его в первый из них.
$.noop()	Пустая функция.
$.parseJSON()	Конвертирует строку с json-данными в javascript-объект.
$.parseXML()	Конвертирует строку xml в xml-документ.
$.proxy()	По заданной функции, создает другую, внутри которой переменная this будет равна заданному значению.
$.trim()	Удаляет пробелы из начала и конца заданной строки.
$.type()	Определяет класс заданного объекта (речь идет о внутренних классах javascript: string, boolean и т.д.).
$.unique()	Сортирует заданный массив с DOM-элементами, выстраивая их в порядке расположения в DOM, а так же удаляя повторения.

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

Test Suite Convenience Methods Reference (See test/data/testinit.js)

q( ... );

Example:

q("main", "foo", "bar");

=>  div#main, span#foo, input#bar

t( testName, selector,  "array", "of", "ids"  );

Example:

t("Check for something", "//", "foo", "bar");

fireNative( node, eventType )

Example:

fireNative( jQuery("#elem"), "click" );

Add random number to url to stop caching

url( "some/url" );

Example:

url("index.html");

=> "data/index.html?10538358428943"


url("mock.php?foo=bar");

=> "data/mock.php?foo=bar&10538358345554"

Run tests in an iframe

Some tests may require a document other than the standard test fixture, and
these can be run in a separate iframe. The actual test code and assertions
remain in jQuery’s main test files; only the minimal test fixture markup
and setup code should be placed in the iframe file.

testIframe( testName, fileName,
  function testCallback(
      assert, jQuery, window, document,
	   additional args  ) {
	...
  } );

This loads a page, constructing a url with fileName .
The iframed page determines when the callback occurs in the test by
including the «/test/data/iframeTest.js» script and calling
when appropriate. Often this
will be after either document ready or fires.

The receives the QUnit object created by
for this test, followed by the global , , and from
the iframe. If the iframe code passes any arguments to ,
they follow the argument.

Как скачать jQuery

Для загрузки нам доступны 2 версии: полная и slim. Отличается slim от полной только тем, что в ней отсутствует часть модулей, а именно ajax и effects. Если функции входящие в эти модули нужны, то тогда следует выбрать полную версию. В противном случае – slim.

Кроме этого, каждая из них доступна нам как в сжатом (с суффиксом ) так и в несжатом виде.

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

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

А это очень важно для производительности сайта

Уменьшение объема JavaScript кода библиотеки jQuery осуществляется за счёт минимизации. Минимизация – это процесс, который заключается в удалении из исходного кода всего лишнего (комментариев, незначащих пробелов, переносов строк, символов табуляции) и замене имен функций и переменных на более короткие.

Кроме этого, существуют разные ветки jQuery: 1.x, 2.x и 3.x.

jQuery 1.x следует использовать если нужна поддержка IE 6 – 8.

jQuery 2.x построено на том же API, что 1.x. Но имеет меньший размер и более высокую производительность. Это было достигнуто благодаря тому, что из неё был удалён устаревший код, необходимый для поддержки IE 6 – 8. Таким образом 2.x можно использовать только в том случае, если вам не нужна поддержка этих старых браузеров.

jQuery 3.x – последняя ветка (3.5.1 – последняя версия). В большинстве случаев рекомендуется выбирать её, если конечно вам не нужна поддержка IE 6 – 8. В отличие от предыдущих веток она имеет множество улучшений (поддержку промисов, работу с анимацией через и др.) и исправлений. Кроме этого, она доступна как в полном формате, так и .

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

Для скачивания jQuery с официального сайта нажмите правой кнопкой мыши на нужную ссылку и выберите пункт «Сохранить ссылку как…».

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