Подключить последнюю версию jquery: Как подключить последнюю версию jQuery? — Хабр Q&A
Содержание
http code jquery com jquery latest js
Автор admin На чтение 6 мин.
В большинстве CMS (системы управления контентом) эта библиотека подключается автоматически. Но если, вы пишите сами свой сайт, то вам необходимо вручную подключать эту библиотеку.
Подключение jQuery со своего сайта
Итак, для начала нужно непосредственно скачать свежую версию. Ее скачать вы можете с сайта разработчика, а именно jquery.com.
Есть два вида вариантов этой библиотеки – Production и Development. Разницы по функционалу в этих библиотеках нет, только разница в размере загружаемых файлов.
- Development – это исходный код библиотеки со всеми комментариями для разработчиков, и код четко структурирован. И поэтому размер ее составляет порядка 260 кбайт.
- Production – сжатый вид библиотеки, там удалены все комментарии, ненужные пробелы и так далее. Ну и размер соответственно 70 – 100 кбайт, в зависимости от версии библиотеки.
Немного о версиях
Если обобщить, то существует две версии этой библиотеки. Разница между ними в основном в совместимости браузеров.
jQuery 1.x – одна из первых версий библиотек, и обеспечивает совместимость с максимальным количеством браузеров. На данный момент последняя версия – 1.11.2.
jQuery 2.x – это последняя выпущенная версия библиотеки, включает в себя API jQuery 1.x, но проблема в том, что нету поддержки нашего «любимого» Internet Explorer версий 6, 7, 8. Последняя версия — 2.1.3.
Подключаем jQuery к странице сайта
Итак, давайте подключим jQuery к нашей странице. Скачаем файл jquery-1.11.2.min.js с сайта jquery.com и перенесем в папку js, в директории нашего сайта.
Для того чтобы подключить библиотеку, нужно прописать путь к файлу в теге SCRIPT, внутри тега HEAD.
Прежде всего создадим простейший html документ:
Предполагается, что читатель знаком с основами html и css, поэтому разъяснять, как строится структура html документа я не буду. Теперь пришла очередь обзавестись библиотекой.
Получить последнюю версию можно многими способами. Опишу наиболее распространенные из них, а заодно и обсудим их достоинства и недостатки.
Локальное подключение библиотеки
Первый способ — сохранить файл ядра библиотеки в проекте. Для этого потребуется скачать его на свой компьютер и подключить к документу. Заходим на официальный сайт jQuery (http://jquery.com/). На главной странице справа видим блок с большой кнопкой Dounload (jQuery), кликнув по которой можно закачать последнюю версию (на момент написания статьи последней является версия 1.8.2).
Радио переключатели, расположенные сверху кнопки, позволяют выбрать для закачки сжатый (Production), или полный (не сжатый — Development) вариант библиотеки. Второй вариант понадобится, если очень хочется покопаться в недрах кода фреймворка, но при этом размер его сильно отличается в большую сторону (247 kb). По умолчанию выбрана сжатая версия — ее и следует загружать.
Жмем по ссылке и. вместо ожидаемого диалога для закачки файла открывается окно с кучей непонятных строк.
Если это окно вызвало недоумение, не пугайтесь — все в порядке. Что бы сохранить этот код в файл, в меню браузера выбираем файл — сохранить как.
и в появившемся окне указываем папку, куда хотим залить библиотеку.
При желании можно переименовать сохраняемый документ, но лучше оставить имя по умолчанию — не придется в дальнейшем гадать, что это за файл и за что он отвечает. Для завершения процедуры жмем кнопку сохранить и нужный файл появится в указанной папке.
Теперь нужно прописать путь к этому файлу в разделе head html документа. Для удобства я обычно создаю папку js в корне сайта в которую складываю все необходимые для работы сайта js файлы. Если Вы поступили так же, то скопируйте файл библиотеки в эту папку (по умолчанию он будет иметь название jquery-1.8.2.min.js, где 1.8.2 — это версия библиотеки) и в разделе head html страницы, с которой работаете пропишите следующую строку .
В итоге раздел head html документа должен выглядеть так:
Все, библиотека подключена. Убедимся, что все сделано правильно. Все в том же html документе, в разделе body пропишем следующий код:
Откроем страницу в браузере. Если все сделано правильно, то должно появиться модальное окно с сообщением jQuery подключен и отлично работает!. Если сообщение не появилось, проверьте, правильно ли указан путь к библиотеке и нет ли ошибок в коде вызова модального окна. Код документа на данном этапе должен выглядеть так:
Теперь, когда библиотека подключена и все работает как надо, пару слов о достоинствах и недостатках этого способа подключения.
Плюсом является то, что можно работать с js кодом не имея доступа в интернет (библиотека находится на локальном компьютере). Однако, использовать локальную версию не очень удобно на рабочем сайте, особенно, если проект постоянно совершенствуется и в коде используются возможности новых версий библиотеки. В этом случае все время приходится повторять описанную выше процедуру. Благо, есть способы облегчить себе жизнь.
Удаленное подключение библиотеки
На стадии разработки сайта, особенно если не всегда есть доступ к интернету, подключить библиотеку описанным выше способом является достаточно удобно. Но для рабочего проекта лучше избрать другой метод. Сегодня большое количество крупных интернет сервисов размещает файлы библиотеки у себя на серверах и предоставляет возможность использовать ее удаленно. Преимущества очевидны. Во первых, на сайт можно загружать самую последнюю версию библиотеки. Во вторых, если посетитель до визита на Ваш сайт уже побывал на ресурсах, где jQuery был подключен таким же способом, то его браузер подгрузит файл из кеша. Наиболее надежными источниками для меня являются официальный сайт jQuery и Google (самый популярный на сегодня источник, а значит и самый предпочтительный).
Следующая строка позволяет загрузить самую последнюю версию библиотеки с официального сайта jQuery.
Этой строкой подключается последняя версия библиотеки с Google (я рекомендую использовать именно этот способ в рабочих проектах).
Еще одной полезной плюшкой у Google является то, что можно загрузить при необходимости какую то конкретную версию. Например, эта строка загрузит библиотеку версии 1.7.2
Вот в общем то и все о подключении фреймворка jQuery. В следующей статье поговорим о пользовательском коде и о том, как избежать конфликтов с другими библиотеками.
Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.
Как подключить jQuery
5 комментариев:
Благодарна за столь подробный ликбез.
Доброго времени суток! Спасибо за Ваши материалы — всё доступно и доходчиво.
У меня вопрос. Вы пишите «На некоторых платформах изначально подключена jQuery-библиотека». Это речь про хостинг? Ели да, то как узнать подключена библиотека или нет?
Спасибо
Это видно по коду(в исходнике) или написано в описании.
Где взять jQuery? jQuery для начинающих
jQuery
jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript (набор функций JavaScript).
По своей сути jQuery фокусируется на извлечении элементов со страниц HTML и выполнении операций с ними.
Последнюю (свежую) версию jQuery можно бесплатно скачать с официальной страницы проекта, а затем подключить скаченный файл (библиотеку jQuery) к своему сайту.
Есть 2 варианта подключения jQuery к сайту.
Вариант 1
Скачать jQuery па свой ПК
1) Заходим на сайт jQuery и жмем кнопку «Скачать»
2) Выбираем файл для скачивания
3) Сохраняем выбранный файл (у нас это: jquery-3.5.1.min.js) на свой ПК
3) Подключаем jQuery
jQuery подключается к веб-странице, как один внешний JavaScript-файл, который, как и сам ваш сайт,
загружается на сервер.
<head>
<script src=»http://Путь к файлу/jquery-3.5.1.min.js»></script>
</head>
Путь к файлу — это папка вашего сайта, где находится jquery-3.5.1.min.js
Вариант 2
Без скачивания на свой ПК
Можно подкличить jQuery без скачивания его на свой ПК
1) Заходим на сайт jQuery CDN и жмем кнопку «Скачать»
2) Копируем код из всплывающего окна
3) Вставляем скопированный код на свой сайт
<head>
<script
src=»https://code.jquery.com/jquery-3.5.1.min.js»
integrity=»sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=»
crossorigin=»anonymous»></script>
</head>
CDN (Content Delivery Networks) — сеть доставки контента.
Разница между двумя Вариантами
- В первом Варианте библиотека jQuery находится на вашем сервере и, понятно, занимает на нем место. Размер jQuery.min около 80 кБайт (зависит от версии).
- Во втором Варианте библиотека jQuery находится на стороннем сервере и НЕ занимает место на вашем
сервере.
http code jquery com jquery latest js
На чтение 6 мин. Просмотров 97 Опубликовано
В большинстве CMS (системы управления контентом) эта библиотека подключается автоматически. Но если, вы пишите сами свой сайт, то вам необходимо вручную подключать эту библиотеку.
Подключение jQuery со своего сайта
Итак, для начала нужно непосредственно скачать свежую версию. Ее скачать вы можете с сайта разработчика, а именно jquery.com.
Есть два вида вариантов этой библиотеки – Production и Development. Разницы по функционалу в этих библиотеках нет, только разница в размере загружаемых файлов.
- Development – это исходный код библиотеки со всеми комментариями для разработчиков, и код четко структурирован. И поэтому размер ее составляет порядка 260 кбайт.
- Production – сжатый вид библиотеки, там удалены все комментарии, ненужные пробелы и так далее. Ну и размер соответственно 70 – 100 кбайт, в зависимости от версии библиотеки.
Немного о версиях
Если обобщить, то существует две версии этой библиотеки. Разница между ними в основном в совместимости браузеров.
jQuery 1.x – одна из первых версий библиотек, и обеспечивает совместимость с максимальным количеством браузеров. На данный момент последняя версия – 1.11.2.
jQuery 2.x – это последняя выпущенная версия библиотеки, включает в себя API jQuery 1.x, но проблема в том, что нету поддержки нашего «любимого» Internet Explorer версий 6, 7, 8. Последняя версия — 2.1.3.
Подключаем jQuery к странице сайта
Итак, давайте подключим jQuery к нашей странице. Скачаем файл jquery-1.11.2.min.js с сайта jquery.com и перенесем в папку js, в директории нашего сайта.
Для того чтобы подключить библиотеку, нужно прописать путь к файлу в теге SCRIPT, внутри тега HEAD.
Прежде всего создадим простейший html документ:
Предполагается, что читатель знаком с основами html и css, поэтому разъяснять, как строится структура html документа я не буду. Теперь пришла очередь обзавестись библиотекой.
Получить последнюю версию можно многими способами. Опишу наиболее распространенные из них, а заодно и обсудим их достоинства и недостатки.
Локальное подключение библиотеки
Первый способ — сохранить файл ядра библиотеки в проекте. Для этого потребуется скачать его на свой компьютер и подключить к документу. Заходим на официальный сайт jQuery (http://jquery.com/). На главной странице справа видим блок с большой кнопкой Dounload (jQuery), кликнув по которой можно закачать последнюю версию (на момент написания статьи последней является версия 1.8.2).
Радио переключатели, расположенные сверху кнопки, позволяют выбрать для закачки сжатый (Production), или полный (не сжатый — Development) вариант библиотеки. Второй вариант понадобится, если очень хочется покопаться в недрах кода фреймворка, но при этом размер его сильно отличается в большую сторону (247 kb). По умолчанию выбрана сжатая версия — ее и следует загружать.
Жмем по ссылке и. вместо ожидаемого диалога для закачки файла открывается окно с кучей непонятных строк.
Если это окно вызвало недоумение, не пугайтесь — все в порядке. Что бы сохранить этот код в файл, в меню браузера выбираем файл — сохранить как.
и в появившемся окне указываем папку, куда хотим залить библиотеку.
При желании можно переименовать сохраняемый документ, но лучше оставить имя по умолчанию — не придется в дальнейшем гадать, что это за файл и за что он отвечает. Для завершения процедуры жмем кнопку сохранить и нужный файл появится в указанной папке.
Теперь нужно прописать путь к этому файлу в разделе head html документа. Для удобства я обычно создаю папку js в корне сайта в которую складываю все необходимые для работы сайта js файлы. Если Вы поступили так же, то скопируйте файл библиотеки в эту папку (по умолчанию он будет иметь название jquery-1.8.2.min.js, где 1.8.2 — это версия библиотеки) и в разделе head html страницы, с которой работаете пропишите следующую строку .
В итоге раздел head html документа должен выглядеть так:
Все, библиотека подключена. Убедимся, что все сделано правильно. Все в том же html документе, в разделе body пропишем следующий код:
Откроем страницу в браузере. Если все сделано правильно, то должно появиться модальное окно с сообщением jQuery подключен и отлично работает!. Если сообщение не появилось, проверьте, правильно ли указан путь к библиотеке и нет ли ошибок в коде вызова модального окна. Код документа на данном этапе должен выглядеть так:
Теперь, когда библиотека подключена и все работает как надо, пару слов о достоинствах и недостатках этого способа подключения.
Плюсом является то, что можно работать с js кодом не имея доступа в интернет (библиотека находится на локальном компьютере). Однако, использовать локальную версию не очень удобно на рабочем сайте, особенно, если проект постоянно совершенствуется и в коде используются возможности новых версий библиотеки. В этом случае все время приходится повторять описанную выше процедуру. Благо, есть способы облегчить себе жизнь.
Удаленное подключение библиотеки
На стадии разработки сайта, особенно если не всегда есть доступ к интернету, подключить библиотеку описанным выше способом является достаточно удобно. Но для рабочего проекта лучше избрать другой метод. Сегодня большое количество крупных интернет сервисов размещает файлы библиотеки у себя на серверах и предоставляет возможность использовать ее удаленно. Преимущества очевидны. Во первых, на сайт можно загружать самую последнюю версию библиотеки. Во вторых, если посетитель до визита на Ваш сайт уже побывал на ресурсах, где jQuery был подключен таким же способом, то его браузер подгрузит файл из кеша. Наиболее надежными источниками для меня являются официальный сайт jQuery и Google (самый популярный на сегодня источник, а значит и самый предпочтительный).
Следующая строка позволяет загрузить самую последнюю версию библиотеки с официального сайта jQuery.
Этой строкой подключается последняя версия библиотеки с Google (я рекомендую использовать именно этот способ в рабочих проектах).
Еще одной полезной плюшкой у Google является то, что можно загрузить при необходимости какую то конкретную версию. Например, эта строка загрузит библиотеку версии 1.7.2
Вот в общем то и все о подключении фреймворка jQuery. В следующей статье поговорим о пользовательском коде и о том, как избежать конфликтов с другими библиотеками.
Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.
Как подключить jQuery
5 комментариев:
Благодарна за столь подробный ликбез.
Доброго времени суток! Спасибо за Ваши материалы — всё доступно и доходчиво.
У меня вопрос. Вы пишите «На некоторых платформах изначально подключена jQuery-библиотека». Это речь про хостинг? Ели да, то как узнать подключена библиотека или нет?
Спасибо
Это видно по коду(в исходнике) или написано в описании.
Почему стоит использовать библиотеку jQuery
27.06.18 JavaScript 1104
Библиотека jQuery – уникальный инструмент, который решает множество проблем при веб-разработке. Сегодня она используется в большинстве веб-проектов и активно развивается. Она призвана сделать разработку простой и легкой, однозначно стоит попробовать решить какую-нибудь задачу на ней, и возможно Вы уже не станете больше писать на чистом JS.
В отличии от нативного JavaScript, эта библиотека универсальна, это значит, что она сама решает, как реализовать поддержку функциональности в разных браузерах. Если на чистом JS нужно писать обработчики для каждого браузера, а также проверять ее поддержку браузером, то здесь библиотека сделает это сама.
Для использования функционала библиотеки, достаточно подключить ее на страницу один раз, и можно беспроблемно применять функции из нее. Можно использовать сторонние хранилища CDN, а можно скачать последнюю версию, загрузить ее на свой хостинг и подключить на всем сайте. Скачивать лучше сжатую версию, так будет быстрей происходить загрузка библиотеки, а значит и больше будет скорость всего сайта. Лучше конечно использовать CDN, так будет быстрее и удобнее, использовать лучше официальные ресурсы.
Библиотека крайне проста в использовании, это значит, что нет необходимости долго учиться, можно практически сразу приступать к разработкам. Обычно код начинается с символа $ или слова jQuery. Далее можно указать в скобках имя селектора, ид или класс элемента – так будет найден элемент на странице, затем можно применять любые операции к нему.
Существует много сторонников использования библиотеки, но есть и те, кто предпочитает разрабатывать на чистом JavaScript. Решать использовать библиотеку или нет, решать Вам, но попробовать ее действительно стоит. Эта библиотека по сути могла быть стать стандартом разработки на JS. Многие так и предлагали сделать, но пока этого не случилось.
Использовать библиотеку можно не только на сайтах, но и на прочих проектах, где используется JavaScript. Например, при разработке расширений очень удобно подключить библиотеку и писать код уже при помощи библиотеки, так гораздо удобней и продуктивней. Нет нужды реализовывать различные обработчики, которые уже давно реализованы правильным образом в этой библиотеке.
Таким образом, библиотека jQuery однозначно полезна при разработке различных веб-проектов, попробовать ее стоит каждому разработчику. Она решает множество стандартных проблем и делает написание кода более продуктивным.
Могу ли я использовать Twitter Bootstrap и jQuery UI одновременно?
Хотя в этом вопросе конкретно упоминается функция автозаполнения jQuery-UI, заголовок вопроса более общий: работает ли bootstrap 3 с jQuery UI? У меня возникли проблемы с функцией jQUI datepicker (всплывающий календарь). Я решил проблему с datepicker и надеюсь, что решение поможет с другими проблемами jQUI / BS.
Сегодня мне было трудно получить последнюю версию jQueryUI (версия 1.12.1) datepicker для работы с bootstrap 3.3.7. Произошло то, что календарь отображался, но не закрывался.
Оказалось проблема версии с jQUI и BS. Я использовал последнюю версию Bootstrap и обнаружил, что мне пришлось перейти на следующие версии jQUI и jQuery:
jQueryUI — 1.9.2 (проверено — работает)
jQuery — 1.9.1 или 2.1.4 (проверено — оба работают. Другие версии могут работать, но эти работают.)
Bootstrap 3.3.7 (проверено — работает)
Поскольку я хотел использовать настраиваемую тему, я также создал настраиваемую загрузку jQUI (удалил некоторые вещи, такие как все взаимодействия, диалог, индикатор выполнения и несколько эффектов, которые я не использую) — и обязательно выбрал «Купертино» внизу как моя тема.
Я их установил так:
<head>
...etc...
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/cupertino/jquery-ui-1.9.2.custom.min.css">
<link rel="stylesheet" href="css/bootstrap-3.3.7.min.css">
<!-- <script src="js/jquery-1.9.1.min.js"></script> -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/bootstrap-3.3.7.min.js"></script>
...etc...
</head>
Для желающих папка CSS выглядит так:
[css]
- bootstrap-3.3.7.min.css
- font-awesome.min.css
- style.css
- [cupertino]
- jquery-ui-1.9.2.custom.min.css
[images]
- ui-bg_diagonals-thick_90_eeeeee_40x40.png
- ui-bg_glass_100_e4f1fb_1x400.png
- ui-bg_glass_50_3baae3_1x400.png
- ui-bg_glass_80_d7ebf9_1x400.png
- ui-bg_highlight-hard_100_f2f5f7_1x100.png
- etc (8 more files that were in the downloaded jQUI zip file)
Версия |
---|
3.6.0 |
3.5.1 |
3.5.0 |
3.4.1 |
3.4.0 |
3.3.1 |
3.3.0 |
3.2.1-1 |
3.2.1 |
3.2.0 |
3.1.1 |
3.1.0 |
3.0.0 |
3.0.0-rc1 |
3.0.0-beta1 |
3.0.0-alpha1 |
2.2.4 |
2.2.3 |
2.2.2 |
2.2.1 |
2.2.0 |
2.1.4 |
2.1.3 |
2.1.1 |
2.1.0 |
2.0.3 |
2.0.0 |
2.0.0-beta3 |
1.12.4 |
1.12.3 |
1.12.2 |
1.12.1 |
1.12.0 |
1.11.3 |
1.11.2 |
1.11.1 |
1.11.0 |
1.10.2 |
1.10.1 |
1.10.0 |
1.9.1 |
1.9.0 |
1.8.3 |
1.8.2 |
1.8.1 |
1.8.0 |
1.7.2 |
1.7.1 |
1.7.0 |
1.4.4 |
1.4.0 |
1.2.2 |
1.0.4 |
jQuery Core — все версии
Питаться от
jQuery Core и миграция — Git Builds
НЕСТАБИЛЬНО, НЕ ДЛЯ ПРОИЗВОДСТВА
jQuery Core — все версии 3.x
- jQuery Core 3.6.0 — несжатый, минимизированный, тонкий, тонкий, минимизированный
- jQuery Core 3.5.1 — несжатый, минимизированный, тонкий, тонкий, минимизированный
- jQuery Core 3.5.0 — несжатый, минимизированный, тонкий, тонкий, минимизированный
- jQuery Core 3.4.1 — несжатый, минимизированный, тонкий, тонкий, минимизированный
- jQuery Core 3.4.0 — несжатый, уменьшенный, тонкий, тонкий, минифицированный
- jQuery Core 3.3.1 — несжатый, минимизированный, тонкий, тонкий, минимизированный
- jQuery Core 3.3.0 — несжатый, минимизированный, тонкий, тонкий, минимизированный
- jQuery Core 3.2.1 — несжатый, минимизированный, тонкий, тонкий, минимизированный
- jQuery Core 3.2.0 — несжатый, минимизированный, тонкий, тонкий, минимизированный
- jQuery Core 3.1.1 — несжатый, минимизированный, тонкий, тонкий, минимизированный
- jQuery Core 3.1.0 — несжатый, минимизированный, тонкий, тонкий, минимизированный
- jQuery Core 3.0,0 — несжатый, уменьшенный, тонкий, тонкий, минифицированный
Ядро jQuery — все версии 2.x
- jQuery Core 2.2.4 — несжатый, минифицированный
- jQuery Core 2.2.3 — несжатый, минифицированный
- jQuery Core 2.2.2 — несжатый, минифицированный
- jQuery Core 2.2.1 — несжатый, минифицированный
- jQuery Core 2.2.0 — несжатый, минифицированный
- jQuery Core 2.1.4 — несжатый, минифицированный
- jQuery Core 2.1.3 — несжатый, минифицированный
- jQuery Core 2.1.2 — несжатый, минифицированный
- jQuery Core 2.1.1 — несжатый, минифицированный
- jQuery Core 2.1.0 — несжатый, минифицированный
- jQuery Core 2.0.3 — несжатый, минифицированный
- jQuery Core 2.0.2 — несжатый, минифицированный
- jQuery Core 2.0.1 — несжатый, минифицированный
- jQuery Core 2.0.0 — несжатый, минифицированный
Ядро jQuery — все версии 1.x
- jQuery Core 1.12.4 — несжатый, минифицированный
- jQuery Core 1.12.3 — несжатый, минифицированный
- jQuery Core 1.12.2 — несжатый, минифицированный
- jQuery Core 1.12.1 — несжатый, минифицированный
- jQuery Core 1.12.0 — несжатый, минифицированный
- jQuery Core 1.11.3 — несжатый, минифицированный
- jQuery Core 1.11.2 — несжатый, минифицированный
- jQuery Core 1.11.1 — несжатый, минифицированный
- jQuery Core 1.11.0 — несжатый, минифицированный
- jQuery Core 1.10.2 — несжатый, минифицированный
- jQuery Core 1.10.1 — несжатый, минифицированный
- jQuery Core 1.10.0 — несжатый, минифицированный
- jQuery Core 1.9.1 — несжатый, минифицированный
- jQuery Core 1.9.0 — несжатый, минифицированный
- jQuery Core 1.8.3 — несжатый, минифицированный
- jQuery Core 1.8.2 — несжатый, минифицированный
- jQuery Core 1.8.1 — несжатый, минифицированный
- jQuery Core 1.8.0 — несжатый, минифицированный
- jQuery Core 1.7.2 — несжатый, минифицированный
- jQuery Core 1.7.1 — несжатый, минифицированный
- jQuery Core 1.7.0 — несжатый, минифицированный
- jQuery Core 1.7.0 — несжатый, минифицированный
- jQuery Core 1.6.4 — несжатый, минифицированный
- jQuery Core 1.6.3 — несжатый, минифицированный
- jQuery Core 1.6.2 — несжатый, минифицированный
- jQuery Core 1.6.1 — несжатый, минифицированный
- jQuery Core 1.6.0 — несжатый, минифицированный
- jQuery Core 1.5.2 — несжатый, минифицированный
- jQuery Core 1.5.1 — несжатый, минифицированный
- jQuery Core 1.5.0 — несжатый, минифицированный
- jQuery Core 1.4.4 — несжатый, минифицированный
- jQuery Core 1.4.3 — несжатый, минифицированный
- jQuery Core 1.4.2 — несжатый, минифицированный
- jQuery Core 1.4.1 — несжатый, минифицированный
- jQuery Core 1.4.0 — несжатый, минифицированный
- jQuery Core 1.3.2 — несжатый, минифицированный, упакованный
- jQuery Core 1.3.1 — несжатый, минифицированный, упакованный
- jQuery Core 1.3.0 — несжатый, минифицированный, упакованный
- jQuery Core 1.2.6 — несжатый, минифицированный, упакованный
- jQuery Core 1.2.5 — несжатый, минифицированный, упакованный
- jQuery Core 1.2.4 — несжатый, минифицированный, упакованный
- jQuery Core 1.2.3 — несжатый, минифицированный, упакованный
- jQuery Core 1.2.2 — несжатый, минифицированный, упакованный
- jQuery Core 1.2.1 — несжатый, минифицированный, упакованный
- jQuery Core 1.2.0 — несжатый, минифицированный, упакованный
- jQuery Core 1.1.4 — несжатый, упакованный
- jQuery Core 1.1.3 — несжатый, упакованный
- jQuery Core 1.1.2 — несжатый, упакованный
- jQuery Core 1.1.1 — несжатый, упакованный
- jQuery Core 1.1.0 — несжатый, упакованный
- jQuery Core 1.0.4 — несжатый, упакованный
- jQuery Core 1.0.3 — несжатый, упакованный
- jQuery Core 1.0.2 — несжатый, упакованный
- jQuery Core 1.0.1 — несжатый, упакованный
- jQuery Core 1.0,0 — несжатый, упакованный
Перенос jQuery — все версии
- jQuery Migrate 3.3.2 — несжатый, минифицированный
- jQuery Migrate 3.3.1 — несжатый, минифицированный
- jQuery Migrate 3.3.0 — несжатый, минифицированный
- jQuery Migrate 3.2.0 — несжатый, минифицированный
- jQuery Migrate 3.1.0 — несжатый, минифицированный
- jQuery Migrate 3.0.1 — несжатый, минифицированный
- jQuery Migrate 3.0.0 — несжатый, минифицированный
- jQuery Migrate 1.4.1 — несжатый, минифицированный
- jQuery Migrate 1.4.0 — несжатый, минифицированный
- jQuery Migrate 1.3.0 — несжатый, минифицированный
- jQuery Migrate 1.2.1 — несжатый, минифицированный
- jQuery Migrate 1.2.0 — несжатый, минифицированный
- jQuery Migrate 1.1.1 — несжатый, минифицированный
- jQuery Migrate 1.1.0 — несжатый, минифицированный
- jQuery Migrate 1.0.0 — несжатый, минифицированный
jQuery UI — все версии
<скрипт
src = "{{ссылка}}"
целостность = "{{хэш}}"
crossorigin = "анонимный">
Атрибуты целостности
и перекрестного происхождения
используются для
Проверка целостности подресурсов (SRI).Это позволяет браузерам гарантировать, что ресурсы, размещенные на сторонних серверах, имеют
не были подделаны. Использование SRI рекомендуется как лучшая практика всякий раз, когда
библиотеки загружаются из стороннего источника. Подробнее на srihash.org
Питаться от
Пользовательский интерфейс jQuery — сборки Git
НЕСТАБИЛЬНО, НЕ ДЛЯ ПРОИЗВОДСТВА
Пользовательский интерфейс jQuery 1.13
Предварительные версии
Пользовательский интерфейс jQuery 1.12
jQuery UI 1.12.1 — несжатый, минифицированный
шаблоны
база
черный галстук
блицер
Купертино
темный улей
точка-любовь
баклажан
возбудить велосипед
щелкнуть
горячие подхалимы
человечность
ле-лягушка
мятный шоколад
пасмурная погода
мельница для перца
Редмонд
гладкость
южная улица
Начните
солнечно
шикарный кошелек
тронтастический
ui-тьма
легкость интерфейса
вейдер
Предыдущие версии
Пользовательский интерфейс jQuery 1.11
jQuery UI 1.11.4 — несжатый, минифицированный
шаблоны
черный галстук
блицер
Купертино
темный улей
точка-любовь
баклажан
возбудить велосипед
щелкнуть
горячие подхалимы
человечность
ле-лягушка
мятный шоколад
пасмурная погода
мельница для перца
Редмонд
гладкость
южная улица
Начните
солнечно
шикарный кошелек
тронтастический
ui-тьма
легкость интерфейса
вейдер
Предыдущие версии
- jQuery UI 1.11.3 — несжатый, минифицированный, тема
- Пользовательский интерфейс jQuery 1.11.2 — несжатый, минифицированный, тема
- jQuery UI 1.11.1 — несжатый, минифицированный, тема
- jQuery UI 1.11.0 — несжатый, минифицированный, тема
- jQuery UI 1.11.0-beta.2 — несжатый, минифицированный, тема
- jQuery UI 1.11.0-beta.1 — несжатый, минифицированный, тема
Пользовательский интерфейс jQuery 1.10
jQuery UI 1.10.4 — несжатый, минифицированный
шаблоны
черный галстук
блицер
Купертино
темный улей
точка-любовь
баклажан
возбудить велосипед
щелкнуть
горячие подхалимы
человечность
ле-лягушка
мятный шоколад
пасмурная погода
мельница для перца
Редмонд
гладкость
южная улица
Начните
солнечно
шикарный кошелек
тронтастический
ui-тьма
легкость интерфейса
вейдер
Предыдущие версии
- Пользовательский интерфейс jQuery 1.10.3 — несжатый, минифицированный, тема
- jQuery UI 1.10.2 — несжатый, минифицированный, тема
- jQuery UI 1.10.1 — несжатый, минифицированный, тема
- jQuery UI 1.10.0 — несжатый, минифицированный, тема
- jQuery UI 1.10.0-rc.1 — несжатый, минифицированный, тема
- jQuery UI 1.10.0-beta.1 — несжатый, минифицированный, тема
Пользовательский интерфейс jQuery 1.9
jQuery UI 1.9.2 — несжатый, уменьшенный
шаблоны
база
черный галстук
блицер
Купертино
темный улей
точка-любовь
баклажан
возбудить велосипед
щелкнуть
горячие подхалимы
человечность
ле-лягушка
мятный шоколад
пасмурная погода
мельница для перца
Редмонд
гладкость
южная улица
Начните
солнечно
шикарный кошелек
тронтастический
ui-тьма
легкость интерфейса
вейдер
Предыдущие версии
Пользовательский интерфейс jQuery 1.8
jQuery UI 1.8.24 — несжатый, уменьшенный
шаблоны
база
черный галстук
блицер
Купертино
темный улей
точка-любовь
баклажан
возбудить велосипед
щелкнуть
горячие подхалимы
человечность
ле-лягушка
мятный шоколад
пасмурная погода
мельница для перца
Редмонд
гладкость
южная улица
Начните
солнечно
шикарный кошелек
тронтастический
ui-тьма
легкость интерфейса
вейдер
Предыдущие версии
- jQuery UI 1.8.23 — несжатый, минифицированный, тема
- Пользовательский интерфейс jQuery 1.8.22 — несжатый, минифицированный, тема
- jQuery UI 1.8.21 — несжатый, минифицированный, тема
- jQuery UI 1.8.20 — несжатый, минифицированный, тема
- jQuery UI 1.8.19 — несжатый, минифицированный, тема
- jQuery UI 1.8.18 — несжатый, минифицированный, тема
- jQuery UI 1.8.17 — несжатый, минифицированный, тема
- jQuery UI 1.8.16 — несжатый, минифицированный, тема
- Пользовательский интерфейс jQuery 1.8.15 — несжатый, минифицированный, тема
- jQuery UI 1.8.14 — несжатый, минифицированный, тема
- jQuery UI 1.8.13 — несжатый, минифицированный, тема
- jQuery UI 1.8.12 — несжатый, минифицированный, тема
- jQuery UI 1.8.11 — несжатый, минифицированный, тема
- jQuery UI 1.8.10 — несжатый, минифицированный, тема
- jQuery UI 1.8.9 — несжатый, минифицированный, тема
- Пользовательский интерфейс jQuery 1.8.8 — несжатый, минифицированный, тема
- jQuery UI 1.8.7 — несжатый, минифицированный, тема
- jQuery UI 1.8.6 — несжатый, минифицированный, тема
- jQuery UI 1.8.5 — несжатый, минифицированный, тема
- jQuery UI 1.8.4 — несжатый, минифицированный, тема
- jQuery UI 1.8.3 — несжатый, минифицированный, тема
- jQuery UI 1.8.2 — несжатый, минифицированный, тема
- Пользовательский интерфейс jQuery 1.8.1 — несжатый, минифицированный, тема
- jQuery UI 1.8.0 — несжатый, минимизированный, тема
Пользовательский интерфейс jQuery 1.7
jQuery UI 1.7.3 — несжатый, уменьшенный
шаблоны
база
черный галстук
блицер
Купертино
темный улей
точка-любовь
баклажан
возбудить велосипед
щелкнуть
горячие подхалимы
человечность
ле-лягушка
мятный шоколад
пасмурная погода
мельница для перца
Редмонд
гладкость
южная улица
Начните
солнечно
шикарный кошелек
тронтастический
ui-тьма
легкость интерфейса
вейдер
Предыдущие версии
jQuery Mobile — все версии
Питаться от
jQuery Mobile — сборки Git
НЕСТАБИЛЬНО, НЕ ДЛЯ ПРОИЗВОДСТВА
jQuery Mobile — все версии
- jQuery Mobile 1.5.0-RC1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.5.0-alpha.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.4.5 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.4.4 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.4.3 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.4.2 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.4.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.4.0 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.4.0-rc.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.4.0-beta.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.4.0-alpha.2 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.4.0-alpha.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.3,2 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.3.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.3.0 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.3.0-rc.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.3.0-beta.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.2.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.2,0 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.2.0-rc.2 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.2.0-rc.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.2.0-beta.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.2.0-alpha.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.1.2 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.1.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.1.1-rc.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.1.0 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.1.0-rc.2 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.1.0-rc.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.0.1 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.0,0 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.0.0-rc3 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.0.0-rc2 —
несжатый,
минифицированный,
тема
(только структура) - jQuery Mobile 1.0.0-rc1 —
несжатый,
минифицированный,
тема - jQuery Mobile 1.0.0-b3 —
несжатый,
минифицированный,
тема - jQuery Mobile 1.0.0-b2 —
несжатый,
минифицированный,
тема - jQuery Mobile 1.0,0-b1 —
несжатый,
минифицированный,
тема - jQuery Mobile 1.0.0-a4.1 —
несжатый,
минифицированный,
тема - jQuery Mobile 1.0.0-a4 —
несжатый,
минифицированный,
тема - jQuery Mobile 1.0.0-a3 —
несжатый,
минифицированный,
тема - jQuery Mobile 1.0.0-a2 —
несжатый,
минифицированный,
тема - jQuery Mobile 1.0.0-a1 —
несжатый,
минифицированный,
тема
jQuery не определен: общие причины и простое решение
Одна из наиболее распространенных ошибок JavaScript, влияющих на наших клиентов, — это [CODE] jQuery is not defined [/ CODE].Это может быть довольно серьезной проблемой, если ваше веб-приложение полагается на jQuery (73% всех сайтов!), Поскольку, если jQuery не загружается, это может сделать ваш код JavaScript непригодным для использования.
Каковы общие причины того, что jQuery не определен?
Наиболее очевидной причиной этой ошибки является то, что вы забыли включить jQuery перед его использованием, но есть и более тонкие причины, которые вы не увидите, пока не развернете свой сайт в производственной среде.
1. Ваш jQuery, размещенный в CDN, может быть заблокирован
Если вы используете версию jQuery, размещенную в CDN, такую как размещенные библиотеки Google, эти CDN могут быть заблокированы фильтром или прокси-службой в соединении ваших клиентов.Обычно мы сталкиваемся с этой проблемой с запросами, исходящими с китайских или индонезийских IP-адресов.
2. Ваш jQuery, размещенный в CDN, не работает или истекает время ожидания
Другой распространенный пример этой ошибки — когда CDN, на котором размещен ваш сценарий jQuery, ненадежен или медленно загружается. Браузеры обычно имеют тайм-аут около 20-30 секунд для каждого тега скрипта.
Как исправить ошибку «jQuery is not defined»?
К счастью, для большинства из этих проблем существует простое решение. Вы можете легко предоставить локальную резервную версию jQuery следующим образом:
— CODE language-html —
// Сначала попробуйте загрузить jQuery из Google CDN// Возвращаемся к локальной копии jQuery, если CDN не работает
Если у вас есть приложение Rails, вы в качестве альтернативы можно использовать гем jquery-rails, который автоматизирует для вас этот резервный процесс.
Этот метод используется на многих популярных сайтах, включая jquery.com, и решает большинство ошибок [CODE] jQuery is not defined [/ CODE]. Если CDN jQuery не загружается, он почти наверняка нормально загрузится из вашего собственного домена, но вы также увидите преимущества использования jQuery, размещенного в CDN, для большинства пользователей.
Другой вариант - установить jQuery с помощью npm или другого диспетчера пакетов и связать его с остальной частью вашего JavaScript. Для этого сначала запустите [CODE] npm install jquery --save [/ CODE], а затем [CODE] import $ из 'jquery' [/ CODE].
Является ли jQuery проблемой на моем сайте?
Практически невозможно защитить от всех проблем с JavaScript при разработке приложения, поскольку такие переменные, как браузер, операционная система, страна и интернет-провайдер, могут сильно различаться в производственной среде.
Проверить, есть ли проблема на вашем сайте, можно с помощью службы мониторинга ошибок JavaScript, например Bugsnag. Bugsnag предоставляет подробные отчеты об ошибках JavaScript, которые обнаруживают эту и все другие ошибки JavaScript.
———
Приступить к работе невероятно просто, и вы сразу же начнете получать отчеты об ошибках, которые содержат сведения об ошибках пользователя и браузера. Узнайте, как некоторые из наших клиентов используют Bugsnag для отслеживания ошибок JavaScript, например Eventbrite и StubHub. Или начните прямо сейчас и попробуйте бесплатно в течение 14 дней.
Примечание редактора: этот блог был первоначально опубликован в феврале 2014 года и был обновлен для обеспечения точности.
Bugsnag помогает определить приоритеты и исправить ошибки программного обеспечения, одновременно повышая стабильность приложения
Запросить демонстрацию
JQuery-соединение - IAMCP-US
jQuery - это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. Это, безусловно, самая популярная библиотека JavaScript.
JQuery упрощает жизнь веб-разработчика.Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять различные задачи с меньшим количеством кода.
Важные особенности jQuery
Выбор DOM: jQuery предоставляет селекторы для извлечения элемента DOM на основе различных критериев, таких как имя тега, идентификатор, имя класса css, имя атрибута, значение, n-й дочерний элемент в иерархии и т. Д.
Манипуляции с DOM: Вы можете манипулировать элементами DOM, используя различные встроенные функции jQuery.Например, добавление или удаление элементов, изменение содержимого HTML, класса CSS и т. Д.
Специальные эффекты: К элементам DOM можно применять специальные эффекты, такие как отображение или скрытие элементов, постепенное появление или исчезновение, эффект скольжения, анимация и многое другое.
События: Библиотека jQuery включает функции, эквивалентные событиям DOM, такие как нажатие, dblclick, mouseenter, отпускание мыши, размытие, нажатие, нажатие и т. Д. Эти функции автоматически решают проблемы браузера.
Ajax: jQuery также включает простые в использовании функции AJAX для загрузки данных с серверов без перезагрузки всей страницы.
Кроссбраузерная поддержка: Библиотека jQuery автоматически решает кроссбраузерность, поэтому пользователю не нужно об этом беспокоиться. jQuery поддерживает IE 6.0+, FF 2.0+, Safari 3.0+, Chrome и Opera 9.0+.
Преимущества JQuery
Легко изучить: jQuery легко изучить, поскольку он поддерживает тот же стиль кодирования JavaScript.
Пишите меньше, делайте больше: jQuery предоставляет богатый набор функций, которые повышают продуктивность разработчика за счет написания менее читаемого кода.
Отличная документация по API: jQuery предоставляет отличную интерактивную документацию по API.
Кроссбраузерная поддержка: jQuery обеспечивает отличную кроссбраузерную поддержку без написания дополнительного кода.
Ненавязчивый: jQuery ненавязчив, что позволяет разделить проблемы путем разделения кода HTML и jQuery.
Версии JQuery
В настоящее время существует три версии jQuery: 1.x, 2.x и 3.x. Единственное отличие второй версии состоит в том, что она больше не поддерживает старые браузеры, такие как Internet Explorer ниже версии 8. Это позволило уменьшить размер файла библиотеки и ускорить его работу. Третья версия получила еще большее ускорение, новые методы и исправления.
JQuery также используется в сжатой (.min) и несжатой версиях. Вы можете использовать несжатую версию библиотеки во время разработки.В сжатой версии код минимизирован и вносить в него какие-либо изменения практически невозможно. Поэтому сжатая версия используется уже в рабочем проекте для более оптимальной работы, поскольку библиотека в этой версии занимает гораздо меньше места и обрабатывается быстрее.
Соединение JQuery
Есть два способа подключить jQuery к вашему проекту: локальный и с помощью CDN. При использовании локального метода библиотека подключается как обычный файл .js, который находится на вашем сервере.При подключении из CDN библиотека подключается с удаленного сервера, например, из Google CDN. Давайте подробнее рассмотрим каждый метод.
Подключение jQuery локально
- Скачайте js-файл библиотеки jQuery с официальной страницы. Просто щелкните правой кнопкой мыши ссылку для загрузки и выберите «Сохранить ссылку как» во всплывающем меню.
- Затем сохраните файл загрузки в каталоге своего сайта. Например, я просто сохраняю его в папке js своего проекта вместе с остальными скриптами js.
- Теперь вам нужно включить ранее загруженный файл библиотеки на вашу страницу. Поместите следующий код между тегами и:
< script type = "text / javascript" src = "jquery-3.5.0.min.js"> script >
У вас должно получиться что-то вроде этого:
< html >
< головка >
< название > jQuery название >
< скрипт src = "jquery-3.5.0.min.js "> скрипт >
голова >
< корпус >
< h2 > Conaction jQuery h2 >
кузов >
html >
Подключение jQuery к CDN
Подключение jQuery, размещенного в CDN, аналогично локальному, за исключением того, что файл библиотеки будет не на вашем сервере, а на удаленном. Помимо этой детали, вы просто добавляете jQuery на свою страницу, как любой другой внешний файл JavaScript.
Одно большое преимущество использования jQuery, размещенного в Google: многие пользователи уже загрузили jQuery из Google CDN при посещении другого веб-сайта. В результате он будет загружен из кеша при посещении вашего сайта, что приведет к более быстрой загрузке. Кроме того, Google CDN гарантирует, что после того, как пользователь запросит у него файл, он будет отправлен с ближайшего к нему сервера, что также приведет к более быстрой загрузке.
Самыми популярными CDN являются Google CDN и jQuery CDN. Мы рассмотрим подключение из Google CDN, но подключение с других серверов будет таким же, и вы можете выбрать любой вариант, который вам нравится.
Включите jQuery на свои страницы HubSpot
В настройках вашего веб-сайта вы можете указать, что jQuery будет загружаться на ваших страницах HubSpot. Вы также можете указать, какая версия jQuery будет работать с вашим контентом, размещенным на HubSpot, и где она должна быть включена на страницу.
- В своей учетной записи HubSpot щелкните значок настроек Настройки на главной панели навигации.
- В меню левой боковой панели перейдите на Веб-сайт > Страницы .
- Вверху страницы используйте Выберите домен, чтобы изменить его настройки, раскрывающееся меню , чтобы выбрать, какие домены вы хотите редактировать. Чтобы изменить этот параметр для всех доменов, выберите Значение по умолчанию для всех доменов . Чтобы изменить этот параметр для определенного поддомена, выберите в раскрывающемся меню домен .
Обратите внимание: настройки для отдельных поддоменов имеют приоритет над настройками по умолчанию для всех доменов.
- Прокрутите вниз до раздела jQuery и установите флажок Включить jQuery , чтобы загрузить jQuery на свои страницы HubSpot.
Обратите внимание: , если страница использует модуль галереи изображений, отключение флажка jQuery не приведет к удалению jQuery со страницы. Для работы модуля галереи изображений требуется jQuery.
- Чтобы выбрать версию jQuery, которую вы хотите включить, используйте раскрывающееся меню jQuery version . Вы можете применить jQuery версии 1.11.x или 1.7.1 ко всему содержимому, размещенному на HubSpot.
- 1.7.1: выберите эту версию, если вы уже построили свою логику, используя зависимости от более старой версии jQuery.
- 1.11.x: при выборе этой версии рекомендуется также установить флажок Включить сценарий миграции jQuery . Это добавит сценарий к вашим шаблонам для улучшения совместимости со старыми браузерами.
- Нажмите Сохранить , чтобы применить изменения.
Если jQuery включен, библиотека jQuery будет загружена в заголовок HTML ваших страниц по умолчанию. Если вместо этого вы хотите включить его в нижний колонтитул страницы, установите флажок Load HubSpot, включенный в библиотеку jQuery, в нижнем колонтитуле .
Перед внесением этого изменения убедитесь, что все зависимости jQuery также перемещены в нижний колонтитул. Чтобы проверить, как ваши страницы загружаются с помощью jQuery в нижнем колонтитуле, добавьте эту строку запроса в конец URL-адреса своей страницы:
? HsMoveJQueryToFooter = True
Обратите внимание: рекомендуется проконсультироваться с вашим веб-разработчиком перед перемещением jQuery в нижний колонтитул ваших страниц. Если у вас есть дополнительные вопросы, свяжитесь с дизайнерами HubSpot в Сообществе.
Настройки аккаунта
Страницы веб-сайта
Использование jQuery и Bootstrap из CDN с резервными сценариями в ASP.NET Core 3.0
В этом посте я покажу, как использовать помощник тега ссылки и помощник тега сценария в Razor с атрибутом asp-fallback
для обслуживания файлов из сети доставки контента (CDN), возвращаясь к локальным сценариям, если CDN недоступен. .
Использование CDN с резервным вариантом было подходом по умолчанию в шаблонах ASP.NET Core для .NET Core 2.x, но в 3.x шаблоны были значительно упрощены и теперь обслуживаются только из локальных файлов.
Использование CDN для общих библиотек
Первое, что нужно обсудить, - это , почему, , вы можете захотеть использовать CDN для обслуживания клиентских зависимостей вашего приложения.
CDN - это просто еще один сервер, на котором размещаются общие файлы, часто используемые для клиентских ресурсов, таких как таблицы стилей CSS, библиотеки JavaScript или изображения. Использование CDN может ускорить работу ваших приложений по нескольким причинам:
- CDN обычно распределены по всему миру, поэтому могут обеспечивать очень низкие задержки для загрузки файлов, где бы в мире ни находились ваши пользователи. Это может иметь большое значение, если ваше приложение размещено только в одном регионе, а пользователи отправляют запросы с другой стороны мира!
- Он разгружает сетевой трафик с ваших серверов, уменьшая нагрузку на ваш сервер.
- Отправляя запросы на ресурсы на стороне клиента в CDN, вы можете увидеть более высокую общую пропускную способность сети для вашего приложения. Браузеры ограничивают количество одновременных подключений к серверу (обычно 6). Если вы размещаете свои файлы в CDN, подключения к CDN не засчитываются в счет вашего лимита сервера , оставляя больше подключений для параллельной загрузки из вашего приложения.
- Другие приложения, возможно, уже загрузили общие библиотеки из CDN. Если файл уже кэширован браузером, ему может вообще не понадобиться делать запрос, что значительно ускоряет работу вашего приложения.
Если вам нужно включить общие библиотеки, такие как Bootstrap или jQuery, тогда имеет смысл обслуживать их из CDN. Эти библиотеки публично размещены на многих различных CDN, поэтому использование любой из распространенных может быть большим выигрышем для производительности вашего приложения.
Есть несколько недостатков или соображений при использовании CDN
- Используя CDN, вы доверяете им доставлять код в браузер вашего пользователя. Вы должны быть осторожны: если CDN будет взломан с помощью вредоносного JavaScript, ваш веб-сайт не запустит его на вашей странице.Это может подвергнуть риску и вас, и ваших пользователей.
- Если CDN недоступен, вам следует вернуться к обслуживанию скриптов с вашего собственного веб-сайта, поскольку в противном случае выход из строя CDN может привести к поломке вашего приложения, как показано ниже.
Я собираюсь описать, как решить этот второй вопрос в этом посте, но решения также охватят и первый пункт. Дополнительные сведения о безопасности см. В этом сообщении Скотта Хельма о добавлении политики безопасности контента (CSP) в ваше приложение и использовании проверок целостности субресурсов (SRI).
Считаете ли вы, что добавление запасного варианта стоит того, будет во многом зависеть от приложения, которое вы создаете. Использование запасного варианта усложняет ваш сайт, который может вам не понадобиться. Подход Tag Helper, который я показываю здесь, также требует внедрения встроенного JavaScript, что может противоречить вашему CSP.
Текущие шаблоны ASP.NET Core - нет CDN для вас
В рамках обновлений ASP.NET Core 3.x шаблоны по умолчанию были обновлены для использования Bootstrap 4 (вместо версии 3).Они также были значительно упрощены, и как часть этого была удалена поддержка CDN. Если вы посмотрите на _Layout.cshtml по умолчанию для приложения Razor Pages или MVC в ASP.NET Core 3.0, вы увидите что-то вроде следующего (я сохранил только соответствующие
и @RenderSection ("Скрипты", обязательно: false)