Как новичку подключить jquery к сайту
Время движется вперед и в сфере разработки сайтов появляются новые технологии. В частности, большую шумиху делает популярный css3 со своими возможностями анимации. Все же друзья согласитесь, jQuery по прежнему рулит в плане разнообразия анимации и захватывающих спецэффектов .
jQuery - это современная библиотека скриптов, основанных на базе прогрессивного языка программирования JavaScript, для реализации самых разнообразных задач в процессе создания сайтов. Библиотека помогает оформлять внешний вид сайта, скрывает блоки контента, фиксирует баннеры, завораживает эффектами анимации, участвует в проверке форм, взаимодействует с AJAX. Способов применения великое множество.
Недавно пришлось делать для изображений flip эффект. Картинка переворачивается плавно в горизонтальной, или вертикальной плоскости. При минимальном соприкосновением мыши, начинается показываться ее обратная сторона. В реальности эффект осуществляется при помощи двух картинок. Хотя возникает ощущение, что картинка одна. Такой вариант легко реализовать применяя css3. Но там эффект слишком ограничен. В jquery мы все чеканим до идеальности. В результате получается все реалистично и красиво.
Чтобы использовать скрипты jquery на блоге, следует подключить данную библиотеку. Способов подключения существует несколько. Рассмотрим наиболее актуальные.
Подключение джейквери через Google. Часто используемый вариант новичками. Требует минимум знаний в программировании. Вводим между тегами следующий вид кода:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Теперь через Google библиотека будет подгружаться автоматически. Для экономии времени копируете строку и подставляете цифры свежей версии. Последнюю версию узнаем здесь JQuery.
Дополнительные DNS для соединения. Ниже приведены еще два варианта онлайн подключения. Лично я подключаюсь через Гугл и вам советую.
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js
http://code.jquery.com/jquery-1.12.0.js
Все представленные ссылки работают когда сайт непосредственно взаимодействует с интернетом. В большинстве случаев сайты разрабатываются на локальном сервере localhost. По сути хостингом является наш компьютер. И если соединение с интернетом отсутствует, то следовательно скрипты перестанут работать.
Проблема решается предварительным скачивание библиотеки jquery и размещением ее файлов в специальной папке под название js (называем папку сами). Обычно папка ява скриптов находится в шаблоне движка cms. В простых html сайтах в корне.
Подключение для html сайта:
<script src="jquery.min.js"></script>
Подключение для Joomla:
/* Используем конструктор объектов для получения методов других классов. Получаем объект класса JDocumentHTML. Другими словами мы создали оъект */ $doc = JFactory::getDocument(); $doc->addScript(JUri::base().'templates/'.$doc->template.'/js/jquery.min.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>
Возможности jQuery действительно внушительны. И будет большим плюсом научиться самостоятельно создавать собственные скрипты.
Напишите свой комментарий (отзывы клиентов)