Как подключить jQuery к сайту

подключить jQuery к сайту

Приветствую вас на сайте Impuls-web!

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

jQuery – представляет собой специальную библиотеку java-скриптов, которая позволяет нам использовать возможности языка javascript в более упрощенном виде. Благодаря функциям jQuery мы можем заменить 10 строчек javascript кода одной, и при этом получить тот же самый результат.

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

Способы подключения библиотеки

Подключить jQuery к сайту можно двумя основными способами:

способы подключения jquery
  • Динамическое подключение jQuery, то есть подключение библиотеки со стороннего ресурса.
  • Локальное подключение jQuery. Это когда готовая библиотека лежит у вас на сайте, и вы ее подключаете.

Динамическое подключение

Динамическое подключение jQuery осуществить проще всего. Для этого достаточно в коде вашего сайта, перед закрытием тега </head> просто добавить вот такой код:

Данный код будет осуществлять подгрузку последней библиотеки jQuery из хранилища Google.

Если же вам нужно загрузить не последнюю версию библиотеки jQuery, а библиотеку какой-то определенной версии, то вам нужно вставить вот такой код:

Где вместо 2.2.0 вы ставите ту версию, которая нужна вам для загрузки.

Для того, что бы убедиться, что по данному адресу в хранилище Google действительно находится нужная вам библиотека, достаточно просто скопировать данный адрес и вставить его в адресную строку браузера и затем нажимать Enter.

содержимое библиотеки jquery

И вот мы видим код самой библиотеки, и в самом верху написана ее версия.

Достоинствами динамического подключения:

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

Недостатки подключения:

  • Если IP пользователя, добавившего данную библиотеку, Google решит забанить, либо просто с самим сервисом Google что-то случится, то данная библиотека, естественно, перестанет работать на вашем сайте, и все элементы, которые были с ней связаны, так же перестанут работать.

Для того, что бы этого избежать, можно использовать следующий способ подключения – это локальное подключение.

Локальное подключение

Для локального подключения данной библиотеки делаем следующее:

  1. 1.Переходим на сайт jQuery.com, в раздел download. Здесь нам предлагается для скачивания сжатая версия библиотеки и обычная.
    скачать библиотеку jquery

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

    Обычная версия библиотеки содержит обычный код с пробелами, отступами и т.д.

    Если вы не планируете вносить какие-то правки в код самой библиотеки, то скачивайте сжатую версию и подключайте к сайту именно ее.

  2. 2.Если в вашем браузере закачка не начинается автоматически, и при переходе по ссылке открывается вот такой код:
    сохранить библиотеку jquery

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

  3. 3.Затем, этот файл нужно будет загрузить на ваш сайт. Желательно, для всех скриптов создать отдельную папочку js, и в неё загружать все скрипты.
  4. 4.После того, как файл библиотеки загружен, открываем в любом текстовом редакторе страницу вашего сайта, или если ваш сайт сделан на CMS, то вам нужно будет открыть соответствующую часть шаблона, в которой находится код шапки сайта.
  5. 5.Далее, перед закрытием тега </head> нам нужно будет вставить вот такой код:

    В кавычках должен быть указан путь к вашей библиотеке.
    Вместо jquery-3.1.0.min.js будет название вашего файла с jQuery библиотекой

Проверка подключения библиотеки jQuery

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

Данный скрипт нужно вставить в код сайта перед закрытием тега </body> .

После вставки кода сохраняем изменения и обновляем страницу нашего сайта.

Если библиотека подключена правильно, то на сайте должно будет высветиться сообщение о том, что библиотека jQuery подключена.

проверить библиотеку jquery

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

После того как вы удостоверились что библиотека jQery подключена удалите или закомментируйте этот проверочный код. Ни к чему чтобы данное сообщение высвечивалось каждый раз при входе на сайт :)

На что нужно обязательно обратить внимание при подключении библиотеки jQuery?

  1. 1.Прежде всего, если вы подключаете на одном сайте несколько библиотек jQuery разных версий, то будьте готовы к тому, что у вас может произойти конфликт, и все элементы на сайте, которые работали с использованием jQuery, могут просто перестать работать.
  2. 2.Так же, большое значение играет сама версия jQuery. К примеру, если у вас на сайте используется слайдер, разработанный на основе библиотеки версии jQuery 2.2, а вы подключаете jQuery 2.1, либо какую-то другую версию, то данный слайдер может у вас не работать.
  3. 3.Так же, при подключении данной библиотеки следует обратить внимание на то, подключается у вас в шапке сайта какие-то другие скрипты или библиотеки, связанные с jQuery. Если они у вас подключаются, то выполнить подключение самой библиотеки jQuery вам нужно будет не перед закрытием тега </head>, а немножко раньше. Иначе, у вас эти библиотеки или скрипты могут не работать. Да и вообше, при подключении данной библиотеки, порядок подключения скриптов имеет большое значение.
  4. 4.Так же, обращаю ваше внимание на то, что если ваш сайт работает на CMS, то во многих из них подключение библиотеки jQuery осуществляется автоматически.
  5. 5.Может быть такое, что вы подключаете какую-то библиотеку, затем прописываете какой-то свой скрипт, и этот скрипт у вас не работает. Это так же связано с конфликтом jQuery, и для того, чтобы решить эту проблему нужно прописать этот скрипт в режиме jQuery no-conflict. Для этого, сам скрипт оборачивается вот в такой вот код:

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

Видеоинструкция

На этом у меня все. Если у вас остались какие-то вопросы, вы можете задать их в комментариях. Подписывайтесь на мой канал и рассылку! До встречи в следующих статьях и видео уроках!

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif