Browser support

Получение библиотеки jQuery UI

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

Выбор темы оформления

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

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

Начните с посещения сайта jqueryui.com и щелкните на кнопке Themes. В результате откроется страница ThemeRoller, отображающая виджеты jQuery UI и расположенную слева от них панель настроек, с помощью которой можно установить параметры темы оформления, как показано на рисунке:

Если у вас уже используется определенный визуальный стиль, которого вы должны придерживаться, и вы хотите, чтобы визуальный интерфейс средств JQuery UI согласовывался с остальной частью сайта или приложения, то вкладка Roll Your Own (которая выбирается по умолчанию) — это как раз то, что нужно. Можно изменить любой аспект оформления с помощью набора стилей CSS, который используется библиотекой jQuery UI.

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

Используемая для jQuery UI стандартная тема носит название UI lightness, но эта тема недостаточно контрастна, и поэтому я буду использовать тему Sunny, которая выглядит немного лучше. Единственное, что от вас сейчас требуется — это запомнить название темы, которая вас устраивает.

Создание настраиваемого загрузочного архива библиотеки jQuery UI

Выбрав для себя определенную тему оформления, можете приступить к созданию собственного варианта загрузки библиотеки jQuery UI. Щелкните на кнопке Download в верхней части страницы для перехода на страницу Download Builder. Вы увидите список компонентов jQuery UI, разбитых на четыре функциональные группы: UI Core, Interactions, Widgets и Effects.

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

Для выполнения примеров вам понадобятся все компоненты, поэтому проследите за тем, чтобы были установлены все флажки.

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

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

У вас также есть возможность выбрать конкретную версию библиотеки jQuery UI, которая должна быть включена в загрузочный архив. Вам потребуется загрузить стабильную (Stable) версию, которая работает со всеми версиями библиотеки jQuery, начиная с версии 1.3.2.

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

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

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

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

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

Или так:

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

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

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

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

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

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

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

Или так:

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

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

Всем WEB!

jQuery Core — All 3.x Versions

• jQuery Core 3.6.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.5.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.5.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.4.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.4.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.3.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.3.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.2.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.2.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.1.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.1.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.0.0 — uncompressed, minified, slim, slim minified

Установка версии библиотеки 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. О том, для чего он предназначен и как работает, вы узнаете в следующей статье.

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

Security Fix

The main change in this release is a security fix, and it’s possible you will need to change your own code to adapt. Here’s why: jQuery used a regex in its method to ensure that all closing tags were XHTML-compliant when passed to methods. For example, this prefilter ensured that a call like is actually converted to . Recently, an issue was reported that demonstrated the regex could introduce a cross-site scripting (XSS) vulnerability.

The HTML parser in jQuery <=3.4.1 usually did the right thing, but there were edge cases where parsing would have unintended consequences. The jQuery team agreed it was necessary to fix this in a minor release, even though some code relies on the previous behavior and may break. The function does not use a regex in 3.5.0 and passes the string through unchanged.

If you absolutely need the old behavior, using the latest version of the jQuery migrate plugin provides a function to restore the old . After including the plugin you can call and jQuery will again ensure XHTML-compliant closing tags.

However, to sanitize user input properly, we also recommend using dompurify with the option to sanitize HTML from a user. If you don’t need the old behavior, but would still like to sanitize HTML from a user, dompurify should be used without the option, starting in jQuery 3.5.0. For more details, please see the 3.5 Upgrade Guide.

jQuery Core — All 1.x Versions

• jQuery Core 1.12.4 — uncompressed, minified
• jQuery Core 1.12.3 — uncompressed, minified
• jQuery Core 1.12.2 — uncompressed, minified
• jQuery Core 1.12.1 — uncompressed, minified
• jQuery Core 1.12.0 — uncompressed, minified
• jQuery Core 1.11.3 — uncompressed, minified
• jQuery Core 1.11.2 — uncompressed, minified
• jQuery Core 1.11.1 — uncompressed, minified
• jQuery Core 1.11.0 — uncompressed, minified
• jQuery Core 1.10.2 — uncompressed, minified
• jQuery Core 1.10.1 — uncompressed, minified
• jQuery Core 1.10.0 — uncompressed, minified
• jQuery Core 1.9.1 — uncompressed, minified
• jQuery Core 1.9.0 — uncompressed, minified
• jQuery Core 1.8.3 — uncompressed, minified
• jQuery Core 1.8.2 — uncompressed, minified
• jQuery Core 1.8.1 — uncompressed, minified
• jQuery Core 1.8.0 — uncompressed, minified
• jQuery Core 1.7.2 — uncompressed, minified
• jQuery Core 1.7.1 — uncompressed, minified
• jQuery Core 1.7.0 — uncompressed, minified
• jQuery Core 1.7.0 — uncompressed, minified
• jQuery Core 1.6.4 — uncompressed, minified
• jQuery Core 1.6.3 — uncompressed, minified
• jQuery Core 1.6.2 — uncompressed, minified
• jQuery Core 1.6.1 — uncompressed, minified
• jQuery Core 1.6.0 — uncompressed, minified
• jQuery Core 1.5.2 — uncompressed, minified
• jQuery Core 1.5.1 — uncompressed, minified
• jQuery Core 1.5.0 — uncompressed, minified
• jQuery Core 1.4.4 — uncompressed, minified
• jQuery Core 1.4.3 — uncompressed, minified
• jQuery Core 1.4.2 — uncompressed, minified
• jQuery Core 1.4.1 — uncompressed, minified
• jQuery Core 1.4.0 — uncompressed, minified
• jQuery Core 1.3.2 — uncompressed, minified, packed
• jQuery Core 1.3.1 — uncompressed, minified, packed
• jQuery Core 1.3.0 — uncompressed, minified, packed
• jQuery Core 1.2.6 — uncompressed, minified, packed
• jQuery Core 1.2.5 — uncompressed, minified, packed
• jQuery Core 1.2.4 — uncompressed, minified, packed
• jQuery Core 1.2.3 — uncompressed, minified, packed
• jQuery Core 1.2.2 — uncompressed, minified, packed
• jQuery Core 1.2.1 — uncompressed, minified, packed
• jQuery Core 1.2.0 — uncompressed, minified, packed
• jQuery Core 1.1.4 — uncompressed, packed
• jQuery Core 1.1.3 — uncompressed, packed
• jQuery Core 1.1.2 — uncompressed, packed
• jQuery Core 1.1.1 — uncompressed, packed
• jQuery Core 1.1.0 — uncompressed, packed
• jQuery Core 1.0.4 — uncompressed, packed
• jQuery Core 1.0.3 — uncompressed, packed
• jQuery Core 1.0.2 — uncompressed, packed
• jQuery Core 1.0.1 — uncompressed, packed
• jQuery Core 1.0.0 — uncompressed, packed

Manipulation

• #13232: In 2.0beta1, using html() function on a tbody selector yields insertion of new tbody
• #13233: Unexpected behavior when iterating over and manipulating detached nodes in jquery 1.9
• #13282: QtWebKit — TypeError: ‘’ is not a valid argument for ‘Function.prototype.apply’ (evaluating ‘elem.nodeType’)
• #13596: .replaceWith should always remove the context set
• #13721: remove(“:nth-child(1)”) works differently than filter(“:nth-child(1)”).remove()
• #13722: .replaceWith argument handling is inconsistent with other manipulation methods
• #13779: .remove() changed in beta3 – now remove nodes in reverse doc order

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

Подключаем jQuery

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

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

JavaScript

<script src=»папка_со_скриптами/jquery.min.js»></script>
<script src=»папка_со_скриптами/myscript.js»></script>

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

1 2 3 4 5 6

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

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

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

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

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

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

В чистом 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

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

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

JavaScript

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

1 2 3 4 5

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

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

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

JavaScript

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

1 2 3

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

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

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

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

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 с 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 — это быстрая, лёгкая и многофункциональная 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 Migrate — All Versions

• jQuery Migrate 3.3.2 — uncompressed, minified
• jQuery Migrate 3.3.1 — uncompressed, minified
• jQuery Migrate 3.3.0 — uncompressed, minified
• jQuery Migrate 3.2.0 — uncompressed, minified
• jQuery Migrate 3.1.0 — uncompressed, minified
• jQuery Migrate 3.0.1 — uncompressed, minified
• jQuery Migrate 3.0.0 — uncompressed, minified
• jQuery Migrate 1.4.1 — uncompressed, minified
• jQuery Migrate 1.4.0 — uncompressed, minified
• jQuery Migrate 1.3.0 — uncompressed, minified
• jQuery Migrate 1.2.1 — uncompressed, minified
• jQuery Migrate 1.2.0 — uncompressed, minified
• jQuery Migrate 1.1.1 — uncompressed, minified
• jQuery Migrate 1.1.0 — uncompressed, minified
• jQuery Migrate 1.0.0 — uncompressed, minified

Essential Git

As the source code is handled by the Git version control system, it’s useful to know some features used.

Cleaning

If you want to purge your working directory back to the status of upstream, the following commands can be used (remember everything you’ve worked on is gone after these):

git reset --hard upstream/main
git clean -fdx

Rebasing

For feature/topic branches, you should always use the flag to , or if you are usually handling many temporary «to be in a github pull request» branches, run the following to automate this:

git config branch.autosetuprebase local

(see for more information)

Handling merge conflicts

If you’re getting merge conflicts when merging, instead of editing the conflicted files manually, you can use the feature
. Even though the default tool looks awful/old, it’s rather useful.

The following are some commands that can be used there:

• — automerge as much as possible
• — jump to next merge conflict
• — change the order of the conflicted lines
• — undo a merge
• — mark a block to be the winner
• — mark a line to be the winner
• — save
• — quit