Приветствую вас на сайте Impuls-web!
В данной статье мы рассмотрим 2 способа как подключить jQuery к сайту, а также я расскажу о некоторых особенностях подключения jQuery, которые обязательно нужно учитывать. Не смотря на то, что данный вопрос очень простой, тем не менее, он вызывает много трудностей у начинающих веб-разработчиков.
Также данная библиотека содержит большое количество готовых решений различных задач, но об этом я как-нибудь позже расскажу.
Навигация по статье:
Способы подключения библиотеки
Подключить jQuery к сайту можно двумя основными способами:
- Динамическое подключение jQuery, то есть подключение библиотеки со стороннего ресурса.
- Локальное подключение jQuery. Это когда готовая библиотека лежит у вас на сайте, и вы ее подключаете.
Динамическое подключение
Динамическое подключение jQuery осуществить проще всего. Для этого достаточно в коде вашего сайта, перед закрытием тега </head> просто добавить вот такой код:
|
1 |
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
Данный код будет осуществлять подгрузку последней библиотеки jQuery из хранилища Google.
Если же вам нужно загрузить не последнюю версию библиотеки jQuery, а библиотеку какой-то определенной версии, то вам нужно вставить вот такой код:
|
1 2 |
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"> </script> |
Где вместо 2.2.0 вы ставите ту версию, которая нужна вам для загрузки.
Для того, что бы убедиться, что по данному адресу в хранилище Google действительно находится нужная вам библиотека, достаточно просто скопировать данный адрес и вставить его в адресную строку браузера и затем нажимать Enter.
И вот мы видим код самой библиотеки, и в самом верху написана ее версия.
Достоинствами динамического подключения:
- Простота подключения. То есть вы, просто вставляете код на ваш сайт, и получаете уже подключенную библиотеку jQuery.
- Из хранилища Google подключение скрипта происходит быстрее, чем, если скрипт находится на вашем сайте.
Недостатки подключения:
- Если IP пользователя, добавившего данную библиотеку, Google решит забанить, либо просто с самим сервисом Google что-то случится, то данная библиотека, естественно, перестанет работать на вашем сайте, и все элементы, которые были с ней связаны, так же перестанут работать.
Для того, что бы этого избежать, можно использовать следующий способ подключения – это локальное подключение.
Локальное подключение
Для локального подключения данной библиотеки делаем следующее:
- 1.Переходим на сайт jQuery.com, в раздел download. Здесь нам предлагается для скачивания сжатая версия библиотеки и обычная.
Сжатая версия библиотеки представляет собой минифицированный код, из которого удалены все лишние пробелы и enter-ы и за счет этого уменьшен размер данного файла.
Обычная версия библиотеки содержит обычный код с пробелами, отступами и т.д.
Если вы не планируете вносить какие-то правки в код самой библиотеки, то скачивайте сжатую версию и подключайте к сайту именно ее.
- 2.Если в вашем браузере закачка не начинается автоматически, и при переходе по ссылке открывается вот такой код:
То вам нужно, просто, его скопировать и вставить в какой либо текстовый редактор, в моем случае это Notepad++, и сохраняете файл с именем-названием и версией библиотеки и с расширением .js.
- 3.Затем, этот файл нужно будет загрузить на ваш сайт. Желательно, для всех скриптов создать отдельную папочку js, и в неё загружать все скрипты.
- 4.После того, как файл библиотеки загружен, открываем в любом текстовом редакторе страницу вашего сайта, или если ваш сайт сделан на CMS, то вам нужно будет открыть соответствующую часть шаблона, в которой находится код шапки сайта.
- 5.Далее, перед закрытием тега </head> нам нужно будет вставить вот такой код:
1<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
В кавычках должен быть указан путь к вашей библиотеке.
Вместо jquery-3.1.0.min.js будет название вашего файла с jQuery библиотекой
Проверка подключения библиотеки jQuery
После того, как данный код вставлен на сайт, было бы не плохо, проверить работоспособность этой библиотеки. Для этого мы можем воспользоваться специальным скриптом.
|
1 2 3 4 |
<script type="text/javascript"> if (window.jquery) alert("Библиотека jquery подключена"); else alert("Библиотека jquery не подключена"); </script> |
Данный скрипт нужно вставить в код сайта перед закрытием тега </body> .
После вставки кода сохраняем изменения и обновляем страницу нашего сайта.
Если библиотека подключена правильно, то на сайте должно будет высветиться сообщение о том, что библиотека jQuery подключена.
Если библиотека не подключилась то в данном сообщении будет написано, что jQuery не подключена.
На что нужно обязательно обратить внимание при подключении библиотеки jQuery?
- 1.Прежде всего, если вы подключаете на одном сайте несколько библиотек jQuery разных версий, то будьте готовы к тому, что у вас может произойти конфликт, и все элементы на сайте, которые работали с использованием jQuery, могут просто перестать работать.
- 2.Так же, большое значение играет сама версия jQuery. К примеру, если у вас на сайте используется слайдер, разработанный на основе библиотеки версии jQuery 2.2, а вы подключаете jQuery 2.1, либо какую-то другую версию, то данный слайдер может у вас не работать.
- 3.Так же, при подключении данной библиотеки следует обратить внимание на то, подключается у вас в шапке сайта какие-то другие скрипты или библиотеки, связанные с jQuery. Если они у вас подключаются, то выполнить подключение самой библиотеки jQuery вам нужно будет не перед закрытием тега </head>, а немножко раньше. Иначе, у вас эти библиотеки или скрипты могут не работать. Да и вообше, при подключении данной библиотеки, порядок подключения скриптов имеет большое значение.
- 4.Так же, обращаю ваше внимание на то, что если ваш сайт работает на CMS, то во многих из них подключение библиотеки jQuery осуществляется автоматически.
- 5.Может быть такое, что вы подключаете какую-то библиотеку, затем прописываете какой-то свой скрипт, и этот скрипт у вас не работает. Это так же связано с конфликтом jQuery, и для того, чтобы решить эту проблему нужно прописать этот скрипт в режиме jQuery no-conflict. Для этого, сам скрипт оборачивается вот в такой вот код:
12345<script type="text/javascript">jQuery(document).ready(function($) {// Здесь можно использовать символ $()});</script>На практике это будет выглядеть следующим образом. Вы вставляете в код вашего сайта предложенный скрипт, а затем, вместо комментария, добавляете тот код jQuery, который изначально не хотел у вас работать, и после этого, сохраняете изменения.
Пример:12345<script type="text/javascript">jquery(document).ready(function($) {$.scrollTo('#point6', 1500, {offset: {top:-75} });});</script>
Видеоинструкция
На этом у меня все. Если у вас остались какие-то вопросы, вы можете задать их в комментариях. Подписывайтесь на мой канал и рассылку! До встречи в следующих статьях и видео уроках!
С уважением Юлия Гусарь
