Установка библиотеки jQuery
59Веб-программирование --- jQuery --- Установка библиотеки jQuery
Прежде всего, вам понадобится библиотека jQuery, доступная для бесплатной загрузки на сайте jquery.com. В правой части главной страницы указанного сайта находится кнопка Download, щелчок на которой открывает новую страницу, на которой можно выбрать, какой из двух доступных вариантов файла библиотеки должен быть загружен: сжатый (Production) или несжатый (Development):
На веб-сайте jquery.com для загрузки предлагаются две версии (во 2й версии отключена поддержка устаревших браузеров IE 6,7,8), каждая из которых имеет два файла. Первый из них, jQuery-1.10.2.js, содержит версию библиотеки, которую обычно используют при разработке веб-сайтов или приложений. В этом файле находится несжатый JavaScript-код, объем которого составляет примерно 265 Кбайт. Можете свободно открыть этот файл и изучить его содержимое, чтобы посмотреть, как jQuery реализует свои возможности, что позволит вам без труда развернуть стек вызовов в случае возникновения проблем с кодом.
Второй файл, jquery-1.10.2.min.js, используется при развертывании сайта или веб-приложения для пользователей. Он содержит тот же JavaScript-код, что и первый файл, однако сделан более компактным за счет удаления из него всех пробелов и использования односимвольных имен переменных вместо содержательных имен большей длины для экономии места.
Минимизированный сценарий библиотеки почти непригоден для чтения кода в целях отладки, но его размер намного меньше и составляет всего лишь 90 Кбайт. Если обслуживается множество вебстраниц, зависящих от библиотеки jQuery, то эта разница может обеспечить значительное снижение трафика, необходимого для загрузки jQuery (а значит, и соответствующих накладных расходов).
После скачивания библиотеки, первое, что нужно сделать, приступая к работе с jQuery, — это добавить библиотеку в документ, с которым вы хотите работать. В листинге ниже воспроизведен пример документа сайта цветочного магазина и добавлена ссылка на библиотеку jQuery:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Библиотека jQuery</title>
<script src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<h1>Цветочный магазин</h1>
<form method="post">
<div id="oblock">
<div class="dtable">
<div id="row1" class="drow">
<div class="dcell">
<img src="http://professorweb.ru/downloads/jquery/astor.png"/>
<label for="astor">Астра:</label>
<input name="astor" value="0" required>
</div>
<div class="dcell">
<img src="http://professorweb.ru/downloads/jquery/daffodil.png"/>
<label for="daffodil">Нарцисс:</label>
<input name="daffodil" value="0" required >
</div>
<div class="dcell">
<img src="http://professorweb.ru/downloads/jquery/rose.png"/>
<label for="rose">Роза:</label>
<input name="rose" value="0" required>
</div>
</div>
<div id="row2" class="drow">
<div class="dcell">
<img src="http://professorweb.ru/downloads/jquery/peony.png"/>
<label for="peony">Пион:</label>
<input name="peony" value="0" required>
</div>
<div class="dcell">
<img src="http://professorweb.ru/downloads/jquery/primula.png"/>
<label for="primula">Примула:</label>
<input name="primula" value="0" required>
</div>
<div class="dcell">
<img src="http://professorweb.ru/downloads/jquery/snowdrop.png"/>
<label for="snowdrop">Подснежник:</label>
<input name="snowdrop" value="0" required>
</div>
</div>
</div>
</div>
<div id="buttonDiv"><button type="submit">Заказать</button></div>
</form>
</body>
</html>
В этом примере библиотека jQuery добавляется в документ с помощью следующего кода:
<script src="jquery.min.js"></script>Чтобы ваше внимание было постоянно сосредоточено на основном содержимом документа, стили CSS вынесены во внешнюю таблицу стилей, сохраненную в файле styles.css:
h1 {
min-width: 70px; border: thick double black; margin-left: auto;
margin-right: auto; text-align: center; font-size: x-large; padding: .5em;
color: darkgreen; background-image: url("http://professorweb.ru/downloads/jquery/border.png");
background-size: contain; margin-top: 0;
}
.dtable {display: table;}
.drow {display: table-row;}
.dcell {display: table-cell; padding: 10px;}
.dcell > * {vertical-align: middle}
input {width: 2em; text-align: right; border: thin solid black; padding: 2px;}
label {width: 6em; padding-left: .5em; display: inline-block;}
#buttonDiv {text-align: center;}
button {padding: 12px;}
#oblock {display: block; margin-left: auto; margin-right: auto; min-width: 700px; }В результате у вас должна получиться страница наподобие следующей:
Загрузка jQuery с использованием CDN
Вместо того чтобы хранить библиотеку jQuery на своем сервере, можете воспользоваться одной из публично доступных сетей дистрибуции контента (Content Distribution Network — CDN), в которых хранится jQuery. CDN — это географически распределенная серверная сеть, обеспечивающая доставку файлов конечному пользователю с ближайшего сервера.
Существуют две причины, по которым имеет смысл использовать CDN:
Во-первых, это ускоряет доставку файла библиотеки jQuery конечному пользователю, поскольку файл загружается с сервера, который расположен ближе всего по отношению к нему, а не с ваших серверов. Во многих случаях сам файл может вообще не потребоваться. Библиотека jQuery настолько популярна, что существует большая вероятность того, что браузер пользователя ранее уже кэшировал ее файл из другого приложения, которое также использует jQuery.
Во-вторых, при таком способе доставки библиотеки jQuery пользователю затраты на это вашего ценнейшего ресурса — полосы пропускания — полностью исключаются. Для сайтов с интенсивным трафиком это может дать значительную экономию средств.
Используя CDN, вы должны быть твердо уверены в надежности ее оператора. Вы должны быть уверены в том, что пользователь получит именно те файлы, на которые рассчитывает, и что служба будет оставаться всегда доступной. Google и Microsoft также предоставляют бесплатные услуги CDN по доставке библиотеки jQuery (равно как и других популярных библиотек JavaScript). Обе компании имеют богатейший опыт бесперебойного предоставления услуг, и от них вряд ли можно ожидать самовольного внесения каких-либо изменений в библиотеку jQuery.
Подробнее о службе Microsoft можно узнать по такому адресу: asp.net/ajaxlibrary/cdn.ashx. Ниже приведен пример подключения библиотеки jQuery через службу Google:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>Подход, основанный на использовании CDN, невыгоден в случае приложений, доставляемых пользователям по локальной сети, поскольку он приведет к тому, что все серверы будут вынуждены обращаться в Интернет для получения библиотеки jQuery, а не к локальному серверу, который, как правило, находится ближе и в состоянии обеспечить более быструю доставку файлов при одновременной экономии полосы пропускания.
Отладка JavaScript-кода
В примере ниже показан очень простой JavaScript-сценарий, добавленный в новый тег <script> на предыдущей странице:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Библиотека jQuery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script>
// Обработчик события загрузки страницы
window.onload = function() {
// Найти все нечетные элементы img в документе,
// добавить обработчики событий наведения курсора мыши
// и добавить отладочную информацию на консоль
var oddImages = document.getElementsByTagName('img');
for (var i = 0; i < oddImages.length; i++)
{
if (i % 2 != 0)
{
// Для современных браузеров
if (document.addEventListener)
{
oddImages[i].addEventListener('mouseover',mouseOverHandler,false);
oddImages[i].addEventListener('mouseout',mouseOutHandler,false);
}
}
}
// Обработчики событий
function mouseOverHandler(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
target.style.cssText = "opacity:0.5";
console.log('Вы навели мышь на элемент <img src="' + target.src + '">');
}
function mouseOutHandler(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
target.style.cssText = "opacity:1";
console.log('Вы убрали мышь с элемента <img src="' + target.src + '">');
}
};
</script>
</head>В этом коде мы не использовали возможностей библиотеки jQuery, а написали скрипты на чистом JavaScript (сравните объем этого кода с примером чуть ниже, где реализуется тот же функционал, но используется библиотека jQuery).
Обратите внимание, что этот простой сценарий содержит вывод вспомогательного сообщения на консоль (console.log). Консоль — это простое (но весьма полезное) средство, предоставляемое браузером и предназначенное для отображения отладочной информации, генерируемой сценарием в процессе выполнения. Вызов консоли осуществляется в разных браузерах по-разному. В Google Chrome для этого следует нажать комбинацию клавиш Ctrl + Shift + I и выбрать вкладку Console:
Как нетрудно заметить, результат, генерируемый вызовом метода console.log(), отображается в окне консоли вместе с дополнительной информацией о местонахождении источника сообщения (в данном случае это строки 34 и 42 файла test.html).
Первый сценарий jQuery
Добавив библиотеку jQuery в документ, можно приступать к созданию сценариев, использующих функциональность jQuery. Давайте модифицируем предыдущий пример, используя функциональность jQuery:
$(document).ready(function(e) {
$("img:odd").mouseenter(function(e) {
$(this).css("opacity", 0.5);
console.log('Вы навели мышь на элемент <img src="' + $(this).attr('src') + '">');
}).mouseout(function(e) {
$(this).css("opacity", 1.0);
console.log('Вы убрали мышь с элемента <img src="' + $(this).attr('src') + '">');
});
});Этот сценарий совсем небольшой, однако позволяет познакомиться с некоторыми из наиболее важных возможностей и особенностей jQuery. Сценарий изменяет прозрачность изображений нарцисса, пиона и подснежника (нечетных элементов <img> в разметке) при наведении на них указателя мыши. Следствием этого является незначительное увеличение яркости изображения и его потускнение. При выходе указателя за пределы изображения восстанавливается прежнее значение непрозрачности. На изображения астры, розы и примулы манипуляции мышью никак не влияют.
Согласитесь, данный сценарий гораздо меньше и проще в понимании, нежели предыдущий пример с использованием стандартных функций JavaScript. Плюс этот сценарий является кроссбраузерным, т.е. его можно запустить, например, в старых браузерах (IE < 9) и он будет работать (только не будут работать отладочные сообщения console.log). Пример, с использованием стандартных JavaScript-функций не заработает в этих браузерах, т.к. в них отсутствует поддержка метода addEventListener(). Его можно было бы заменить на attachEvent(), но сценарий бы разросся еще больше.
