Как установить jquery: Три способа подключить библиотеку jQuery

3 способа как установить jQuery на сайт Joomla

На какой платформе вы бы не работали, у вас на сайте будет использован какой-либо скрипт. В том числе это касается и движка Joomla. Без скрипта сайт был бы скучным, не функциональным и ничем бы не привлекал внимание. Потому вы должны уметь работать с различными составляющими скрипта, а в особенности с фреймворком JavaScript – библиотеками jQuery. В данной статье мы рассмотрим, зачем вообще нужно загружать библиотеки jQuery, как установить их на сайт Joomla и как сделать noconflict – чтобы исчезли конфликтные ситуации с другими скриптами на странице. Кроме того, рассмотрим возможности расширения jQuery Easy для упрощенной работы с библиотеками.

Зачем на сайт Joomla устанавливать библиотеки jQuery

С “голым” JavaScript, который доступен на сайте Joomla по умолчанию, так сказать в родной комплектации движка, работать очень сложно. Нужно быть заядлым любителем жесткого кода, чтобы бы быстро решать различные задачи на сайте.

В первую очередь стоит отметить, что эти библиотеки позволяют создавать кроссбраузерный код. А это означает, что не нужно мучиться с JavaScript, пописывая для каждого браузера отдельный участок скрипта.

Написание скрипта с jQuery становится легкой отдушиной в жизни вебмастера – это уже не основная сложность в его жизни. Ведь на JavaScript приходится писать много, в частности, для визуальных эффектов. А библиотеки скриптов решают эту задачу единичными строками. При этом часто используются основные функции get() и post().

Многие жалуются, что после написания определенного сценария действий на JavaScript и внесения кода на сайт Joomla, работа площадки заметно замедляется. И это действительно так: чем больше кода на странице, тем меньше скорость ее загрузки. Но это будет звучать как заблуждение, если вы решитесь установить jQuery – данный фрейморвк считается самым быстрым среди всех остальных платформ для скриптов.

Ну, и напоследок стоит заметить, что jQuery постоянно развивается. Это не заброшенный фреймворк, а активно растущая платформа. Существует ни одно сообщество, в том числе на русском языке, в котором вы смогли бы обсудить возникшие проблемы и вопросы по поводу пользования библиотеками. Кроме того, есть специальная документация на счет особенностей использования возможностей библиотек.

Как подключить jQuery на сайт Joomla

Установка библиотек на ресурс – это плевое дело. Суть задачи в написании одной строки кода, потому вас навряд ли озадачит такая работа. Тем более, что существует несколько способов подключения библиотек на ресурс, так что вы обязательно справитесь, используя один из них.

Для начала вам необходимо скачать библиотеки jQuery. Сделать это можно на сайте официального разработчика. Как и многие гениальные вещи, эти библиотеки создали обычные веб-программисты, которым надоел громоздкий JavaScript. Они решили придумать облегченную версию кода, и таким образом создали jQ. Теперь эта библиотека быстро разошлась по миру и уже стала любимой для многих сайтостроителей.

Итак, заходите на официальный ресурс с библиотеками. Находите страницу загрузки и нажимаете кнопку Download. Вы должны сразу определиться, какую версию библиотек вы хотите установить к себе на ресурс. Существует сжатая и облегченные версии jQuery. Суть в том, что в сжатой версии будет сложнее разобраться новичку – там код написан без разбивки на строки и идет одним целом. Сжатая версия на официальном сайте будет называться compressed, а облегченная с пробелами, абзацами и т. д. – uncompressed. Учтите, что хоть облегченной версией пользоваться проще, если вы самостоятельно пишите и редактируете код, но сжатая не спроста предлагается вебмастерам. Она весит меньше из-за меньшего числа символов в файлах, потому загружается быстрее и не так тормозит работу сайта. А значит сжатая версия лучше повлияет на SEO сайта. Так что думайте, что для вас важнее: простота или скорость?

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

<script src="js/название файла библиотек, который вы загрузили на хостинг"> < /script>

Есть и другой способ подключения библиотек к сайту Joomla. Этот способ настолько отличается от предыдущего, что вам даже не придется заходить на сайт разработчика и скачивать оттуда файл фреймворка.

jQuery Easy

Еще один метод подключения – это использование плагина jQuery Easy. Он обеспечит noconflict подключение и работу библиотеки, чтобы в Joomla не возникало каких-либо противоречий при использовании двух фреймворков. Если вы никогда не решали проблемы, связанные с noconflict в коде, тогда вы буквально обязаны себя выручить, установив специальный плагин Easy jQ.

Причины возникновения конфликтных ситуаций в коде могут быть разные. К примеру, вы могли установить очередное расширение, не особо обратив внимание на совместимость его с библиотеками. После активации такого дополнения обязательно возникнет противоречие в коде – Easy jQ вам поможет. Аналогично инструмент Easy jQ выручит вас, если возникли какие-то стычки jQuery с библиотекой MooTools. В любом случае плагин Easy jQ восстановит положение noconflict – конфликты будут устранены и Joomla заработает нормально.

Установка библиотек на Joomla при помощи плагина происходит в автоматическом режиме при помощи возможностей поисковика Гугл. Но с расширением делать это лучше, так как он добавляет на сайт библиотеки с кодом noconflict. Эта функция noconflict является профилактикой для устранения возможных противоречий в работе двух библиотек. Если бы вы не использовали плагин, тогда бы вам пришлось вручную прописывать в коде тег noconflict. А теперь представьте, как бы вам это было “легко” сделать, если вы используете сжатую версию.

jQuery — Как подключить jQuery?

Подключаем jQuery со страницы своего сайта

И так, ситуация первая. Предположим, что у Вас есть сайт (не важно где, на локальном или реальном хостинге). Вы сами пишете этот сайт или его страницу, то есть не используете никаких CMS (систем управления сайтом), как WordPress. И вот, Вы хотите подключить jQuery на некую веб-страницу, и эта библиотека должна загружаться с Вашего сайта.

1. Загружаем свежую версию jQuery

Самое первое, что стоит сделать, это скачать её свежую версию с сайта разработчика. Там, сразу на главной странице, нам предложат 2 варианта jQuery (PRODUCTION и DEVELOPMENT). По функциональности эти варианты идентичны. Вариант “DEVELOPMENT” («разработка») — это, грубо говоря, исходный код этой библиотеки, он структурирован в удобном для чтения виде с кучей комментариев, и предназначен в первую очередь для разработчиков, которые захотят посмотреть, как всё устроено внутри jQuery, что-то там изменить или найти ошибки. Вариант “PRODUCTION” — это сжатый вариант библиотеки, оттуда удалены все комментарии, и этот вариант занимает намного меньше места (32Кб против 250Кб), следовательно страница, на которую будет подключена эта библиотека, будет загружаться быстрее. Так что советую Вам выбрать именно эту версию.

2. Закачиваем jQuery на сайт

Затем библиотеку необходимо «положить» в какое-то место на сайте, то есть закачать на сайт. Если Вы используете реальный хостинг, то сделать это можно, загрузив jQuery через панель управления сайта, или же через FTP. Далее будем считать, что в главной директории Вашего сайта есть поддиректория “javascript”, в которую складываются всякие библиотеки, и jQuery Вы тоже положили туда.

Если Вы используете локальный хостинг типа Денвера, тогда тоже можно создать директорию “javascript” в корневом каталоге Вашего сайта, и скопировать туда библиотеку.

3. Создаём веб-страницу и вставляем туда ссылку на jQuery

Структура веб-страницы, на которую Вы подключаете jQuery, может быть разной. Но в ней обязательно присутствуют теги HTML, HEAD и BODY. Так вот, подключить jQuery можно, если добавить тег SCRIPT со ссылкой на библиотеку внутрь тега HEAD.

<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>

После добавления, Ваша страница может иметь такой вид:

<!DOCTYPE html>
<html dir="ltr" lang="ru-RU">
<head>
<meta charset="UTF-8" />
<title>Страница, на которую я подключаю jQuery</title>
<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
</head>
<body>
Контент моей страницы
</body>
<html>

Значение атрибута SRC тега script указывает на путь к внешнему JavaScript, который необходимо подключить на страницу. Обычно так подключается любой внешний JavaScript (хотя не обязательно вставлять тег SCRIPT именно в секцию HEAD, но так принято делать). В нашем случае внешним JavaScript-ом является библиотека jQuery. На момент написания статьи последняя версия jQuery — 1.7.2, но когда Вы будете читать эту статью, ситуация может измениться, следовательно, обратите внимание на имя скачанного файла js и подставьте его в код.

Реализация Lazy Load на Jquery

Видеоурок: Lazy Load на Jquery

Что такое Lazy Load

Когда вы создали свой веб-сайт вы начинаете уделять внимание скорости загрузки станицы. Если ваша страница загружается очень долго, пользователи закроют ваш сайт до загрузки. Это особенно актуально если на вашем сайте присутствует много изображений, которые прибавляют вес вашей странице.

И здесь нам на помощь приходит Jquery плагин Lazy Load, с помощью которого изображения на вашем сайте загружаются не сразу, а по мере того, как пользователь прокручивает страницу вниз.

Подобный эффект вы видите постоянно, когда пользуетесь социальными сетями. Представьте себе, сколько бы загружалась страница социальной сети пользователя, на стене которого 8000 постов, без Lazy Load.

Lazy Load стал неотъемлемой частью сайтов веб 2.0 не только потому что он облегчает вес страницы, но и еще потому что классно смотрится.

Реализация Lazy Load загрузки страницы

Для реализации Lazy Load на Jquery создайте такую структуру проекта:

Скачайте плагин jquery.lazyload.min.js и положите его в корень или создайте для нее отдельный каталог js и положите туда.

Затем создайте каталог img и поместите туда картинки, которые вы хотите загружать Lazy Load.

Создайте файл index.php и напишите следующий код:

В блок head мы помещаем библиотеку Jquery и плагин jquery Lazy Load. В моем примере, картинки называются 1.png, 2.png и так далее.

Для удобства и написания меньшего количества кода, я использовал цикл for и в цикле вывел изображения.

Пример вы можете скачать по этой ссылке. Далее у нас идет Javascript код работы плагина lazy load. documet.ready обозначает, что мы вызываем код только после того, как все DOM элементы загрузятся.

Это делается для того, чтобы не было ошибок выполнения кода. Затем мы применяем к изображениям с классом lazy эффект lazy load.

Настроить подгрузку изображений можно с разными эффектами. Я поставил стандартный fadeIn.

Вы можете поэкспериментировать и пробовать другие Jquery эффекты.

Поместите каталог с файлами на ваш веб-сервер и запустите проект в каталоге lazyload. Затем попробуйте прокрутить страницу вниз.

Вы можете видеть, как картинки грузятся не все сразу, а по мере скроллинга.

Вывод

Как вы видите, реализовать Lazy Load или ленивую подгрузку изображений с помощью Jquery очень просто.

Скачать готовый пример вы можете по ссылке.

В следующих статьях, мы поговорим о том, как реализовать Lazy Load эффект для div элементов.

Подписывайтесь на наш канал в YouTube и группу VK. Впереди у нас много интересного материала для веб-программистов.

Читайте также

Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.

Как установить jQuery — манекены

2. Веб-дизайн и разработка
3. Javascript
4. Как установить jQuery

Автор: Стив Суеринг, Джанет Валад (Steve Suehring), Джанет Валад (Janet Valade)

Есть два способа использовать загруженный jQuery: локально или на Сеть доставки контента (CDN). Локальная копия — это просто файл, который находится в корне вашего документа на жестком диске вашего сервера. Версия, размещенная на CDN, означает, что файл jQuery находится на чужом сервере, и вы просто ссылаетесь на него в своем коде.

Используете ли вы локальную копию CDN, решать вам. Для рабочих веб-сайтов используйте локальную копию jQuery для повышения скорости и надежности. Однако в процессе разработки можно использовать версию jQuery для CDN.

Установить jQuery локально

jQuery доступен для загрузки. Оказавшись там, выберите производственную версию и нажмите Загрузить. В зависимости от настроек вашего браузера вы можете получить страницу, полную кода JavaScript. В этом случае выберите «Сохранить как» в меню «Файл».

В других случаях вам просто будет предложено загрузить файл. В конце концов, вы хотите получить файл с именем jquery-1.8.1.min.js, независимо от того, сохраняете ли вы его или загружаете.

Файл должен быть помещен в корень вашего документа. Запомните имя файла; она вам понадобится позже.

Вот и все, что нужно для установки jQuery — загрузите его и поместите файл в корень документа.

Использовать jQuery, размещенный в CDN

Вариант jQuery с размещением в CDN отлично подходит для разработки. Вам не нужно беспокоиться о загрузке файла или его размещении в нужном месте; он всегда доступен (пока работает CDN). Версии, размещенные на CDN, доступны у многих крупных игроков в Интернете, таких как Google и Microsoft.

Вам не нужно ничего загружать, чтобы использовать jQuery, размещенный на CDN, поэтому этот раздел короткий и приятный. Вы можете найти ссылки на версии, размещенные на CDN, по адресу www.jquery.com/download.

Об авторе книги

Стивен Сюринг — архитектор технологий и автор или редактор нескольких популярных книг по технологиям.Джанет Валад — технический писатель, веб-дизайнер, программист и системный аналитик. Она провела различные технические семинары и написала несколько книг, в том числе PHP и MySQL для чайников, 4-е издание .

jQuery Начало работы

Добавление jQuery на ваши веб-страницы

Есть несколько способов начать использовать jQuery на своем веб-сайте. Вы можете:

• Загрузите библиотеку jQuery с сайта jQuery.com
• Включить jQuery из CDN, например Google

Загрузка jQuery

Для загрузки доступны две версии jQuery:

• Производственная версия — это для вашего действующего веб-сайта, поскольку он был уменьшен и сжат
• Версия для разработки — это для тестирования и разработки (несжатый и читаемый код)

Обе версии можно загрузить с jQuery.com.

Библиотека jQuery — это отдельный файл JavaScript, на который вы ссылаетесь с помощью тега HTML


Совет: Поместите загруженный файл в тот же каталог, что и страницы, на которых вы хотите его использовать.


jQuery CDN

Если вы не хотите загружать и размещать jQuery самостоятельно, вы можете включить его из CDN (сети доставки контента).

Google - это пример того, кто размещает jQuery:

Google CDN: