Главная › Вебмастеру › Как новичку подключить jquery к сайту

Как новичку подключить 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 действительно внушительны. И будет большим плюсом научиться самостоятельно создавать собственные скрипты.

Категория: