BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

Для тех, кто создает сайты или хочет научиться их создавать придется столкнуться с таким словом, как библиотека 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 ?

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

6 Ответов на комментарий - Как подключить библиотеку jQuery в HTML

  1. Лин

    Спасибо автору! Очень полезная информация и нужная.
    Не ясна одна деталь.. Степа обьясните пожалуйста, некогда я уже вставлял в код “движка” сайта, а именно в основной файл
    index.template.php только 1 небольшой скрипт на библиотеке jQuery. Он работает, проблем нет. Но в инете попалась информация что вторично использовать скрипты на jQuery уже нельзя. Так ли это? Проясните пожалуйста ситуацию. Насколько скрипты на jQuery
    нагружают сайт и вызывают увеличение процессорной нагрузки сервера?
    (хостинг у меня платный со всеми “наворотами” )
    Спасибо. С Уважением

  2. Лин

    Здравствуте Степа! Пока коммент не одобрен, допишу..
    вообщем по поводу jQuery . Погуглил и похарабрил.. кое что узнал новое. Вопрос выше неверно сформулировал, если правильно уяснил библиотеку jQuery можно подключить 1 раз и навсегда. Затем по мере разумности выбирать разнообразные скрипты основанные на этой библиотеке и подключать. Какая jQuery на сегодняшний день актуальна или № версии?
    Или нет верно? Спасибо. С Уважением
    (сайт на “движке” smf)

  3. Avatar photo Степан => автор блога

    Здравствуйте! Подключать один раз на одной странице. Т.е., если заголовки у страниц разные (заголовки страниц формируются по разным правилам), то подключать придется не один раз.Выбирать можно не готовые скрипты, а готовые команды. По сути, jQuery – это JavaScript фреймворк, библиотека кроссбраузерных реализаций той или иной функции. Т.е., если Вам нужно обратится к элементам по имени класса, или видоизменить курсор, то реализация этого на JS в geсko браузерах и старых версиях ИЕ, разная (на много строчек), в jQ все решится одной командой в одну строку для всех браузеров. (Ну, так должно быть в идеале.) Так же в jQ в одну строку выполняются многие ф-ции, для написания которых на JS потребуется много времени. Обо всех возможностях можно найти в документации к jQ)
    Актуальность версии jQ – не совсем правильный вопрос. Они актуальны все, дело в том, есть ли в той или иной версии то, что Вам нужно. В новых функционал больше, но в них, как правило, отказываются от поддержки очень уж старых браузеров. Плюс ко всему, небольшие различия в реализации того или иного функционала в разных версиях приведет к конфликту этих версий, поэтому подключать более одной версии библиотеки крайне нежелательно. Опять же, что в какой поддерживается, и какие есть возможности, описано в документации.

  4. Лин

    Уяснил, доходчиво и ясно, спасибо.
    С Уважением..
    Удачи Вам !

  5. cupoma58

    Скачал и подключил :

    <script ENGINE="text/javascript" src="h:/disk_c/script/jquery-1.11.3.min.js"></script>

    ,вставил проверочный код – библиотека не подключена. Может – потому-что на флэшке ? (нет доступа к FTP-серверу)
    :|

  6. Avatar photo Степан => автор блога

    разместите файл “jquery-1.11.3.min.js” и “html” – файл в одну папку.
    Подключите так:

    <script ENGINE="text/javascript" src="jquery-1.11.3.min.js"></script>

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716