Установка библиотеки jQuery

59

Прежде всего, вам понадобится библиотека jQuery, доступная для бесплатной загрузки на сайте jquery.com. В правой части главной страницы указанного сайта находится кнопка Download, щелчок на которой открывает новую страницу, на которой можно выбрать, какой из двух доступных вариантов файла библиотеки должен быть загружен: сжатый (Production) или несжатый (Development):

Сайт jquery.com
Скачивание библиотеки jquery

На веб-сайте 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:

Используя 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:

Консоль Google Chrome

Как нетрудно заметить, результат, генерируемый вызовом метода 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(), но сценарий бы разросся еще больше.

CodeChick.io - Задачи по программированию с автоматической проверкой
Пройди тесты
Лучший чат для C# программистов