Blog o "blogger": Как подключить jquery на страницу сайта

суббота, 4 февраля 2017 г.

Как подключить jquery на страницу сайта

подключении jquery

Для работы оффлайн — скачать сам файл с библиотекой jQuery и подключить его
Для работы онлайн — быстро одной строчкой кода подключить jQuery из хранилища Google или Microsoft

У каждого варианта свои плюсы и минусы. Давайте рассмотрим их подробнее.

Подключение jquery через Google или Microsoft

Чтобы подключить последнюю версию jquery через Google нужно добавить одну строку кода внутри <head> — все предельно быстро и удобно:

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

Для подключения точной версии (в данном случае 1.11.0):

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

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

Для подключения jquery через Microsoft добавляем код:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.11.0.min.js"></script>

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

Подключение jquery скачиванием файла с библиотекой

Подключаем jQuery со страницы своего сайта — это дольше, но надежнее. Для этого нужно:
скачать библиотеку jquery с официального сайта, сохранить в файл, назовем его jquery-1.11.0.min.js, положить в папку js на нашем сайте и добавить следующий код в <head>:

<script type="text/javascript" src="/js/jquery-1.11.0.min.js"></script>

В src задается путь где лежит наш файл с jquery, который нужно подключить на страницу сайта.

И, наконец, самый надежный и бронебойный вариант — подключение с Google, если Google недоступен — подключение со своего сайта:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
  document.write(unescape("%3Cscript src='/js/jquery-1.11.0.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

Или самый современный вариант — прописываем в <head> следующий код:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.11.0");
google.setOnLoadCallback(jQueryIsLoaded);
function jQueryIsLoaded() {
   alert('jQuery от Google загружен');
}
if (typeof jQuery == 'undefined') {
  document.write(unescape("%3Cscript src='/js/jquery-1.11.0.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>