• Как новичку подключить jquery к сайту
    Владислав SEO-Специалист, Founder

Как новичку подключить jquery к сайту

  • 04.02.2016
  • 4 минут
  • 189
Содержание:

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

jQuery – это современная библиотека скриптов, основанных на базе прогрессивного языка программирования JavaScript, для реализации самых разнообразных задач в процессе создания сайтов. Библиотека помогает оформлять внешний вид сайта, скрывает блоки контента, фиксирует баннеры, завораживает эффектами анимации, участвует в проверке форм, взаимодействует с AJAX. Способов применения великое множество.

Недавно пришлось делать для изображений flip эффект. Картинка переворачивается плавно в горизонтальной, или вертикальной плоскости. При минимальном соприкосновением мыши, начинается показываться ее обратная сторона. В реальности эффект осуществляется при помощи двух картинок. Хотя возникает ощущение, что картинка одна. Такой вариант легко реализовать применяя css3. Но там эффект слишком ограничен. В jquery мы все чеканим до идеальности. В результате получается все реалистично и красиво.

Чтобы использовать скрипты jquery на блоге, следует подключить данную библиотеку. Способов подключения существует несколько. Рассмотрим наиболее актуальные.

Подключение джейквери через Google. Часто используемый вариант новичками. Требует минимум знаний в программировании. Вводим между тегами следующий вид кода:

[code lang="js"]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
[/code]

Теперь через Google библиотека будет подгружаться автоматически. Для экономии времени копируете строку и подставляете цифры свежей версии. Последнюю версию узнаем здесь JQuery.

Дополнительные DNS для соединения. Ниже приведены еще два варианта онлайн подключения. Лично я подключаюсь через Гугл и вам советую.

[code lang="js"]
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js
[/code]
[code lang="js"]
http://code.jquery.com/jquery-1.12.0.js
[/code]

Все представленные ссылки работают когда сайт непосредственно взаимодействует с интернетом. В большинстве случаев сайты разрабатываются на локальном сервере localhost. По сути хостингом является наш компьютер. И если соединение с интернетом отсутствует, то следовательно скрипты перестанут работать.

Проблема решается предварительным скачивание библиотеки jquery и размещением ее файлов в специальной папке под название js (называем папку сами). Обычно папка ява скриптов находится в шаблоне движка cms. В простых html сайтах в корне.

Подключение для html сайта:

[php]
<script src="jquery.min.js"></script>
[/php]

Подключение для Joomla:

[php]
/* Используем конструктор объектов для получения методов других
классов. Получаем объект класса JDocumentHTML.
Другими словами мы создали оъект */
$doc = JFactory::getDocument();

$doc->addScript(JUri::base().'templates/'.$doc->template.'/js/jquery.min.js');

/* Назначаем путь к файлу */
[/php]

Как узнать подключилась ли библиотека

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

[js]
<!DOCTYPE html>
<html lang="ru">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
/* Ниже инициализируем скрипт,
который выведет сообщение на экран
в случаи удачного подключения */
<script>
$(function()
{
alert('Поздравляем! Вы удачно подключили jQuery');
});
</script>
</head>
<body>
</body>
</html>
[/js]

Возможности jQuery действительно внушительны. И будет большим плюсом научиться самостоятельно создавать собственные скрипты.

Оценить
Ваш email адрес не будет опубликован
Спасибо
за заявку!
Данные успешно отправлены!
Отзыв отправлен Ваш комментарий обрабатывается модератором.