Установка jquery на ваш проект, или какой вариант подключения является самым оптимальным

Приветствую, гости моего обучающего блога и дорогие подписчики. В сегодняшней публикации я подробно расскажу, где можно скачать библиотеку языка JavaScript, как производится установка jQuery и его подключение на сайте html.

Вы узнаете о различных способах подключения библиотеки и к тому же научитесь проверять, загрузилась ли она с сервера. После прочтения статьи вы сможете избежать большинства ошибок начинающих разработчиков и спокойно с ней работать. Приступим к основному материалу!

Варианты библиотеки

Для начала следует понимать, что существуют не только различные версии данного дополнения JS, а еще и разные виды. Все библиотеки делятся на сжатые, т.е. compressed, и несжатые – uncompressed. Для чего же было придумано такое разделение? А прежде всего для разных режимов работы.

Во время отладки веб-приложения удобнее и целесообразнее пользоваться несжатой версией jQuery. Однако при выпуске продукта в продакшн стоит использовать сжатую версию. Она меньше весит и как следствие страницы грузятся быстрее. Многие разработчики отдают предпочтения сжатой библиотеке и качают только ее.

Существующие версии

На сегодняшний день существует два направления – это версии 1.x и 2.x. Во второй версии библиотеки была отменена поддержка старых версий браузера Internet Explorer 6-8. Такое решение уменьшило общий вес jQuery 2.x больше чем на 10%. Однако из-за этого девелоперы пользуются версиями 1.x, так как данные IE все еще на плаву.

Что касается самих версий, то как я говорил в одной из предыдущих публикаций, практически все они совместимы. Исключение составляет jQuery 1.9. Группа разработчиков данной библиотеки решила удалить некоторые, по их мнению, ненужные функции и поэтому при переходе с прошлых версий на 1.9 следует ознакомиться с официальной документацией: http://jquery.com/upgrade-guide/1.9/.

Скачивание и подключение библиотеки с официального сайта

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

Чтобы скачать файл, вам необходимо перейти на официальный сайт по этой ссылке: http://jquery.com/download/. Далее определиться с нужной ссылкой, нажать на нее правой кнопкой мыши и выбрать «Сохранить как…». После этого полученный документ загрузите на сервер, где висит сам проект и в код вставьте вот такую строку:

<script src="/js/jquery.min.js"></script>

Как видите, все очень просто.

Чтобы убедиться, что библиотека действительно была загружена и не отлавливать потом непонятные баги, вставьте в программу ниже представленный код:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Checked</title>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript">
if (window.jQuery)
       alert("Library was loaded!");
else 
       alert("Library was not loaded!");
</script>
</head>
<body>
</body>
<html>

Подключение библиотеки с внешних источников

Существуют и другие способы подключения jQuery к проектам – при помощи серверов CDN (переводится как «Сеть доставки контента»). Наиболее популярными хранилищами считаются: CDN, организованное создателями jQuery, Google и Microsoft.

Для того чтобы подключить какую-либо версию с официального сервера, нужно в атрибуте src тега <script> указать к ней полный путь. Так, загрузка последней существующей версии библиотеки будет осуществляться следующей строкой:

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

Если же вы хотите указать конкретную версию, то стоит писать вот так:

<script src="https://code.jquery.com/jquery-1.8.3.js"></script>

Очень удобно загружать описываемую библиотеку через Google, а точнее через Google Libraries API. Все потому, что скорость загрузки страницы сайта ускорится.

Причиной является даже не то, что Google быстро грузит данные, а в том, что большинство сайтов подключается именно через этот API. А значит есть большая вероятность того, что в кэше браузера нужная библиотека уже хранится. Скрипт подключения будет выглядеть следующим образом:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Ну и для полного комплекта добавлю строку с хранилищем Microsoft.

<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

Некоторые особенности подключения JS-библиотеки к CMS

Ни для кого не секрет, что сегодня многие пользуются известными движками для сайтостроения. Среди таких CMS особенно выделяются WordPress и Joomla!. Поэтому текущую главу я посвящу объяснению некоторых особенностей работы jQuery в этих системах.

Как я говорил выше, подключение библиотеки с хранилища Google обладает весомыми преимуществами. Именно поэтому можно сделать некий «финт ушами» и вписать вот такой код в скрипт для WordPress:

if(!is_admin()){
   wp_deregister_script('jquery'); /*функция движка, которая удаляет зарегистрированный ранее скрипт*/
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2'); /*производится регистрация */
   wp_enqueue_script('jquery'); /*подключение скрипта на веб-странице*/
   }

Что касается Joomla!, то в зависимости от версий ситуация с загрузкой описываемого инструмента несколько отличается. Так, в версии Joomla 2.5 необходимо или подключать соответствующий плагин (что предпочтительнее), или после строки

defined ( '_JEXEC' ) or die ( 'Restricted access')

вставлять

$this->addScript («http://code.jquery.com/jquery-latest.min.js»)

Начиная с Joomla 3 JS-библиотека используется движком по умолчанию. Поэтому вам остается только вызвать ее при необходимости.

Ну вот теперь вы знаете основные способы подключения JavaScript-библиотеки к проектам. В силу своей кроссплатформенности она позволяет практически идентично отображать веб-приложения в любой ОС, в том числе и в малоизвестных (например, Ubuntu).

Хочу отметить, что подгружать можно также и различные плагины как, например, File Upload. Он доступен как в Bootstrap-е, так и в jQuery UI.

Более подробно познакомиться с прелестями javascript и библиотеки jquery вы можете из курса Евгения Попова Javascript + jQuery для начинающих, по ссылке. Рекомендую данный курс. В нем все подробно, на пальцах рассказывается для новичков.