Главная » Вебмастеру » Как подключить библиотеку jQuery в HTML

Как подключить библиотеку jQuery в HTML

2015-02-11 / Вр:22:04 / просмотров: 40555

Для тех, кто создает сайты или хочет научиться их создавать придется столкнуться с таким словом, как библиотека jQuery. Давайте выясним, что такое jQuery.
jQuery – это огромнейшая библиотека скриптов на JavaScript, которая находится в одном файле. С помощью jQuery веб-мастер может сделать красивый и функциональный сайт. В основном библиотеку jQuery используют на сайте в качестве украшения.
Что такое библиотека jQuery, я уже рассказал. Осталось рассказать, как ее подключить к сайту (HTML) и показать, где ее можно использовать.

Итак, как подключить библиотеку jQuery к сайту? Существуют два варианта подключения: подключение к файлу напрямую (через официальный сайт) или скачать файл к себе на сервер. Сейчас эти два способа и рассмотрим.

Как подключить библиотеку jQuery к сайту (HTML)

Способ 1 - подключение к файлу напрямую (через официальный сайт)

Заходи́те на официальный сайт jquery.com. Нажмите на ссылку «Download jQuery», которая находится с правой стороны:

Как подключить библиотеку jQuery к сайту (HTML)

Откроется новая страница. Нажмите правой кнопкой мышки по ссылке «Download the compressed, production jQuery» и выберите вкладку «Копировать адрес ссылки».

Как подключить библиотеку jQuery к сайту (HTML)

Теперь добавьте перед закрывающим тегом </head> вот эту строчку:

<script ENGINE="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js "></script>

где http://code.jquery.com/jquery-1.11.2.js – скопированный адрес

Готовый код:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Как подключить библиотека jQuery к сайту (HTML)</title>
<script type="text/javascript" src=" http://code.jquery.com/jquery-1.11.2.js "></script
</head>
<body>
</body>
</html>

Способ 2 - скачать файл к себе на сервер

Переходи́те на официальный сайт jquery.com и скачивайте последнюю версию jQuery.
Когда перейдете на официальный сайт, нажмите на ссылку «Download jQuery», которая находится с правой стороны:

Как подключить библиотеку jQuery к сайту (HTML)

Нахо́дите и перехо́дите по ссылке «Download the compressed, production jQuery»:

Как подключить библиотеку jQuery в HTML

Указывайте место, куда скачивать файл. Если по какой-то причине, откроется в браузере набор каких-то кодов, не пугайтесь. Нажмите в браузере «Файл» => «Сохранить как…» и указываете место, куда сохранить файл.

Теперь на сервере, где лежит ваш сайт, создайте папку «js» (если ее нет) и закиньте туда скачанный файл. Для примера я скачал файл версии 1.11.2 под названием «jquery-1.11.2.min.js». Теперь сделаем к нему подключение на сайте.
Добавьте перед закрывающим тегом </head> вот эту строчку:

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

Готовый код:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Как подключить библиотека jQuery к сайту (HTML)</title>
<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
</head>
<body>
</body>
</html>

Как проверить, правильно ли подключен файл jQuery?

Добавьте между тегами <head></head> вот этот код:

<script type="text/javascript">
$(document).ready(function(){
    $('body').append('<br/>Этот текст добавлен с помощью jQuery');
});
</script>

Если библиотека подключена правильно, вы увидите текст «Этот текст добавлен с помощью jQuery». Если неправильно, тогда этого текста не будет.

Или можете добавить между тегами <head></head> вот этот код:

<script type="text/javascript">
if (window.jQuery) alert("jQuery подключен");
else alert("jQuery не подключен");
</script>
<script type="text/javascript">
$(document).ready(function(){
alert(jQuery.fn.jquery);
});
</script>

Если библиотека подключена правильно, вы увидите текст «jQuery подключен». Если библиотека подключена неправильно, тогда вы увидите текст «jQuery не подключен».

Где я использую библиотеку jQuery ?

При создании спойлера.
При создании резинового фона.