SEOK продвижение сайтов

Раскрутка сайта в Киеве и Украине

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

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

Автор статьи: Василий Лотыш (4.02.2016)

Лучший способ выразить благодарность автору - поделиться с друзьями!

Узнавайте о появлении нового материала первым! Подпишитесь на обновления по email:

Следите за обновлениями в Twitter и RSS..

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code