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