Как подключить jQuery?
Подключаем jQuery со страницы своего сайта
И так, ситуация первая. Предположим, что у Вас есть сайт (не важно где, на локальном или реальном хостинге). Вы сами пишете этот сайт или его страницу, то есть не используете никаких CMS (систем управления сайтом), как WordPress. И вот, Вы хотите подключить jQuery на некую веб-страницу, и эта библиотека должна загружаться с Вашего сайта.
1. Загружаем свежую версию jQuery
Самое первое, что стоит сделать, это скачать её свежую версию с сайта разработчика. Там, сразу на главной странице, нам предложат 2 варианта jQuery (PRODUCTION и DEVELOPMENT). По функциональности эти варианты идентичны. Вариант “DEVELOPMENT” («разработка») — это, грубо говоря, исходный код этой библиотеки, он структурирован в удобном для чтения виде с кучей комментариев, и предназначен в первую очередь для разработчиков, которые захотят посмотреть, как всё устроено внутри jQuery, что-то там изменить или найти ошибки. Вариант “PRODUCTION” — это сжатый вариант библиотеки, оттуда удалены все комментарии, и этот вариант занимает намного меньше места (32Кб против 250Кб), следовательно страница, на которую будет подключена эта библиотека, будет загружаться быстрее. Так что советую Вам выбрать именно эту версию. Затем надо будет нажать кнопку «Download». Скорее всего, перед Вами появиться jQuery в текстовом виде, и библиотеку можно будет сохранить в нужное место через меню браузера «Сохранить страницу как».
2. Закачиваем jQuery на сайт
Затем библиотеку необходимо «положить» в какое-то место на сайте, то есть закачать на сайт. Если Вы используете реальный хостинг, то сделать это можно, загрузив jQuery через панель управления сайта, или же через FTP. Далее будем считать, что в главной директории Вашего сайта есть поддиректория “javascript”, в которую складываются всякие библиотеки, и jQuery Вы тоже положили туда.
Если Вы используете локальный хостинг типа Денвера, тогда тоже можно создать директорию “javascript” в корневом каталоге Вашего сайта, и скопировать туда библиотеку.
3. Создаём веб-страницу и вставляем туда ссылку на jQuery
Структура веб-страницы, на которую Вы подключаете jQuery, может быть разной. Но в ней обязательно присутствуют теги HTML, HEAD и BODY. Так вот, подключить jQuery можно, если добавить тег SCRIPT со ссылкой на библиотеку внутрь тега HEAD.
<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
После добавления, Ваша страница может иметь такой вид:
<!DOCTYPE html> <html dir="ltr" lang="ru-RU"> <head> <meta charset="UTF-8" /> <title>Страница, на которую я подключаю jQuery</title> <script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script> </head> <body> Контент моей страницы </body> <html>
Значение атрибута SRC тега script указывает на путь к внешнему JavaScript, который необходимо подключить на страницу. Обычно так подключается любой внешний JavaScript (хотя не обязательно вставлять тег SCRIPT именно в секцию HEAD, но так принято делать). В нашем случае внешним JavaScript-ом является библиотека jQuery. На момент написания статьи последняя версия jQuery — 1.7.2, но когда Вы будете читать эту статью, ситуация может измениться, следовательно, обратите внимание на имя скачанного файла js и подставьте его в код.
Как подключить jQuery на свою страницу с сайта Google и других внешних источников
1. С сайта Google API
В Google есть дочерний проект под названием Google Libraries API, слоган которого “Make the Web Faster” («сделай веб более быстрым»). Этот проект предоставляет API для JavaScript разработчиков, позволяющее им подключать разные библиотеки не из создаваемых ими сайтов, а из сайта Google ().
Что чем же заключается преимущество того, что эта библиотека будет загружаться не с Вашего сайта, а с сайта Google? Такой вариант лучше тем, что это положительно скажется на скорости загрузки веб-страницы у пользователя. И дело здесь не в том, что скорость передачи данных с сайта Google выше, чем с Вашего собственного сайта. Дело скорее в том, что многие сайты подключают jQuery через Google API, а это значит, что с большой долей вероятности эта библиотека уже присутствует в кэше браузера пользователя, и она не будет загружаться второй раз вообще.
Чтобы подключить jQuery с сайта Google на свою страницу, необходимо всего лишь задать значение атрибута SRC тега SCRIPT на адрес библиотеки на сайте Google API. На данный момент последняя версия jQuery имеет там такой адрес:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Общий «скелет» страницы с подключенной jQuery может иметь такой вид:
<!DOCTYPE html> <html dir="ltr" lang="ru-RU"> <head> <meta charset="UTF-8" /> <title>Страница, на которую я подключаю jQuery</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> </head> <body> Контент моей страницы </body> <html>
На момент чтения Вами этой статьи jQuery мог обновиться, так что советую Вам зайти на страницу проекта и проверить это. Впрочем, если Вы подключите старую версию jQuery к себе на сайт, ничего страшного не произойдёт.
Если же Вы хотите подключить последнюю версию jQuery, тогда Вы можете заменить строчку вставки на такую:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Цифра 1 здесь означает последнюю версию линейки 1, которая уже долгое время является последней. Когда выйдет jQuery 2-й линейки, в ней могут быть некоторые существенные изменения (например, удалены или изменены некоторые функции), следовательно, если Вы делаете сайт на долгое время, то нет смысла подключать самую последнею версию jQuery. Однако, как это сделать, написано ниже.
2. Подключить последнюю версию jQuery с официального сайта
Хотя рекомендуется в первую очередь подключать jQuery именно с сайта Google API, но можно также сделать это с официального сайта. Строчка подключения последней версии этой библиотеки будет иметь вид:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
Или, если надо, подключаем конкретную версию:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
3. C сайта Microsoft
Также можно с сайта Microsoft, это делается так:
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
Также советую Вам почитать ответы на вопрос «Загружать jQuery с сайта Google, а в случае ошибки — из своего?»
Подключить jQuery на локальную веб-страницу
Чтобы подключить jQuery на веб-страницу и работать с этой библиотекой, не обязательно иметь сайт, запущенный на реальном сервере. Более того, совсем не обязательно устанавливать и запускать локальный хостинг (как Денвер). Можно просто создать веб-страницу в произвольной папке.
Откройте Блокнот, поместите туда код из предыдущего пункта (там где речь шла о подключении jQuery с сайта Google). После этого сохраните этот файл как веб-страницу (при сохранении в поле «Тип файла» выберите «Все файлы», укажите кодировку «UTF-8», а затем дайте файлу произвольное имя и расширение html). Теперь этот файл можно открыть в любом браузере, и локальная страница будет отображена, при этом библиотека jQuery загрузится с интернета.
Проверить, правильно ли подключён jQuery
Проверить, что jQuery загружен браузером и работает нормально, можно несколькими способами. Во-первых, можно написать скрипт, который будет что-то делать с помощью jQuery. Пример такого скрипта может быть:
<script type="text/javascript">
$(document).ready(function(){
$(''body'').append(''<br/>Этот текст добавлен с помощью jQuery'');
});
</script>
Этот код выполняется, когда страница будет полностью загружена (это обеспечивается методом ready). К содержимому тега BODY добавляется ещё некое содержимое с помощью функции append. Подробнее я описывать не буду, так как в этой статье я всего лишь пытаюсь рассказать о подключении jQuery.
Ещё один способ проверить, что jQuery работает, это использовать консоль, которая есть в расширении Firebug для Firefox. Выглядит она так:
Можно написать туда какую-либо команду JavaScript, в которой будет использоваться функциональность jQuery, например:
alert($(''body'').html());
Или же выполнить такой вот-код, который выводит в консоль версию jQuery:
if ($ === undefined) {
console.log(''jQuery не подключён.'');
} else {
console.log(''Версия jQuery: '' + $.fn.jquery);
}
Подобная консоль также есть в браузере Chrome по умолчанию.
Динамически подключить jQuery
На этом сайте уже есть ответ на вопрос, как динамически подключить jQuery на веб-страницу. Динамическая загрузка этой библиотеки (или другой) предполагает, что она не будет загружаться вместе со страницей, это будет происходить только после определённого действия пользователя, такого как нажатия на кнопку. Для достижения такого эффекта можно пойти следующим образом:
var script = document.createElement(''script'');
script.type = ''text/javascript'';
script.src = ''https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'';
document.getElementsByTagName(''head'')[0].appendChild(script);
script.addEventListener(''load'', function(){
$(document).ready(function() {
alert(''jQuery загружен.'');
});
}, false);