Вначале познакомимся с тем, что же такое jQuery?
Итак, jQuery— это JavaScript-библиотека, обеспечивающая
кроссбраузерную поддержку приложений (работает в Internet Explorer 6.0+,
Mozilla Firefox 2+, Safari 3.0+, Opera 9.0+ и Chrome).
Автор библиотеки Джон Резиг (John Resig) впервые представил свое
творение в январе 2006 года на компьютерной конференции в Нью-Йорке, а в
августе того же года была выпущена первая стабильная версия библиотеки.
За прошедшие годы библиотека претерпела множество изменений и на
текущий день содержит функционал, полезный для максимально широкого
круга задач. Она имеет небольшой размер (например, размер
минимизированной версии— 55,9 Кбайт, а сжатой версии— 19 Кбайт) и не
засоряет глобальное пространство имен тривиальными идентификаторами.
Потрясающие возможности механизма селекторов, позволяющие легко
получить доступ к любому элементу объектной модели документа, сделали
библиотеку jQuery очень популярной.
Судите сами. Чтобы получить
ссылку на DOM-элемент с помощью Javascript, обычно используется метод
getElementByld (). Например, изменим HTML-код элемента с идентификатором
divl.
Document.getElementByld ("divl”).innerHTML = "Новый текст";
Код на jQuery, выполняющий то же самое действие, будет в два раза короче.
$("#divl").html("Новый текст");
Конечно, ради одной этой строки не имеет смысла подключать целую
библиотеку. Но все дело в том, что функционал селекторов далеко не
ограничивается одним идентификатором. Возможности селекторов можно
сравнить разве что с регулярными выражениями языка Perl. В качестве
примера изменим цвет текста во всех элементах А, в параметре href
которых содержится ссылка на HTML-документ, причем элемент А должен быть
расположен внутри элемента DIV, имеющего стилевой класс clsl.
$("div.clsl a[href$=`.html`]").css("color", "red");
Попробуйте выполнить аналогичную операцию с помощью JavaScript. Для этого понадобится далеко не одна строка кода.
Еще одной отличительной особенностью библиотеки jQuery является
возможность составлять цепочки из вызовов методов, так как большинство
методов jQuery возвращает объект, с которым можно производить дальнейшие
манипуляции.
$("#message") // Получили ссылку на элемент с id=message
.html("Сообщение") // Изменили текст внутри элемента
.parent() // Получили ссылку на родительский элемент
.ess("background-color", "#fff4dd") // Задали цвет фона
.width(300) // Ширина
.height(200) // Высота
// Плавно отобразили элемент за счет изменения прозрачности
.fadeln(3000);
Библиотека jQuery не оставила без внимания и технологию AJAX,
позволяющую обмениваться данными с сервером без перезагрузки
веб-страницы. В главе 10 мы изучим базовые свойства и методы объекта
XMLHttpRequest, а в главе 11 рассмотрим очень удобный интерфейс доступа к
AJAX, предоставляемый библиотекой jQuery.
Благодаря своей универсальности библиотека jQuery будет полезна
практически любому разработчику. Она подходит новичку, так как позволяет
забыть о проблеме с кроссбраузерностью приложения (вышел новый
веб-браузер— сменил версию библиотеки и все опять работает). Библиотека
идеальна для профессионалов, так как позволяет сократить код минимум в
три раза. А это в свою очередь позволит написать очень сложный код с
минимальными усилиями и потерей времени.
Желаю приятного прочтения и надеюсь, что эта книга станет верным
спутником в вашей повседневной деятельности и в лучшую сторону изменит
ваш стиль программирования на JavaScript.
Основы jQuery
В этой книге предполагается, что все обсуждаемые файлы сохраняются в
кодировке UTF-8. Поэтому, прежде чем изучать возможности библиотеки
jQuery, рассмотрим, чем отличается UTF-8 от других кодировок и как
правильно сохранить файл в этой кодировке.
Все символы, которые мы видим на экране монитора, внутри компьютера
хранятся в виде чисел. Каждому символу соответствует определенное число
(код символа). Для ответа на вопрос, как должен выглядеть символ,
представленный определенным кодом, предназначены таблицы соответствий,
которые называются кодировками. Кодировки могут быть одно- и
многобайтовыми.
В однобайтовых кодировках символ кодируется одним байтом. Первые 7
бит позволяют закодировать 128 символов, соответствующих кодировке
ASCII. В число этих символов входят цифры, буквы латинского алфавита,
знаки препинания и некоторые служебные символы (например, перенос
строки, табуляция и т.д.).
Коды этих символов одинаковы практически
во всех однобайтовых кодировках. Восьмой бит предназначен для
кодирования символов национальных алфавитов. Таким образом, однобайтовые
кодировки позволяют закодировать всего 256 символов. Для кодирования
букв русского языка разработано пять кодировок — windows-1251 (ср1251),
ср866, iso8859-5, koi8-r и mac-cyrillic. Сложность заключается в том,
что код одной и той же русской буквы в этих кодировках может быть
разным. Из-за этого возникает множество проблем.
В кодировке UTF-8 один символ может кодироваться несколькими байтами.
Первые 128 символов соответствуют кодировке ASCII и кодируются всего
одним байтом. Остальные символы кодируются переменным количеством байтов
— от двух до шести (на практике— до четырех).
Буквы русского алфавита и некоторых других европейских языков
кодируются двумя байтами. Иными словами кодировка UTF-8 позволяет
закодировать символы всех существующих алфавитов и способна заменить все
кодировки сразу. Сайт может быть на русском или на любом другом языке, а
кодировка будет одна и та же. Этой кодировкой мы и будем пользоваться.
При сохранении файлов в кодировке UTF-8 следует учитывать, что
использовать приложение Блокнот для этого нельзя, так как при сохранении
в начало файла будут вставлены служебные символы, называемые сокращенно
ВОМ (Byte Order Mark, метка порядка байтов). Для кодировки UTF-8 эти
символы являются необязательными и не позволят нам в дальнейшем,
например, установить заголовки ответа сервера. Для работы с кодировкой
UTF-8 необходимо установить на компьютер программу Notepad++.
Скачать программу можно абсолютно бесплатно с веб-страницы http:
//notepad-plus. sourceforge.net/ru/site.htm. Из двух вариантов
(zip-архив и инсталлятор) сове-тую выбрать именно инсталлятор, так как в
этом случае при установке можно будет вы-брать язык интерфейса
программы. Процедура установки Notepad++ предельно проста и в
комментариях не нуждается. При создании нового документа в меню
Кодировки следует установить флажок «Кодировать в UTF-8 (без ВОМ)».
Тот факт, что мы будем использовать кодировку UTF-8, отнюдь не
означает, что библиотека jQuery может работать только с этой кодировкой.
В своих проектах вы можете использовать любую другую кодировку. Однако
следует учитывать, что запросы AJAX по умолчанию выполняются в кодировке
UTF-8. При использовании других кодировок придется выполнять
перекодирование.
Подключение библиотеки jQuery
Прежде чем использовать библиотеку jQuery, ее необходимо вначале
скачать с сайта http://jquery.com/, разместить на своем сервере, а затем
подключить к HTML-документу. Подключение производится с помощью тега
script, в параметре src которого указывается абсолютный или
относительный путь к библиотеке.
<script type="text/javascript" згс="Путь к библиотеке jQuery"> </script>
Сам тег script должен быть размещен в разделе HEAD HTML-документа.
Библиотеку jQuery можно загрузить и с сайта http://ajax.googleapis.com/. В этом случае подключение будет выглядеть так.
<script type="text/javascript" src="http://ajax.googleapis.com/ajах/libs/jquery/1.3.2/jquery.min.js"> </script>
Если посетитель ранее заходил на другой сайт, на котором библиотека
jQuery также подгружалась с сайта http://ajax.googleapis.com/, то
веб-браузер не будет повторно загружать библиотеку и использует данные,
сохраненные в кеше. Таким образом, скорость работы вашего сайта может
увеличиться. В этом и заключается преимущество данного метода. Однако
если сайт http://ajах.googleapis.сот/ будет не доступен, то возможны
проблемы.
Определение готовности документа
Обычно большинство действий производится над элементами
HTML-документа. По этой причине выполнять скрипты необходимо только
после полной загрузки документа. Без библиотеки jQuery для этой цели
обычно используется событие onload объекта window.
window.onload = function() {
alert("Документ полностью загружен");
}
Однако это событие возникает только после полной загрузки самого
HTML-документа, а также всех других элементов, например изображений.
Загрузка изображений (или баннеров с другого домена) может занимать
определенное время, в течение которого выполнение скриптов как бы
подвисает.
Библиотека jQuery избавляет нас от потери времени и предоставляет
возможность выполнения скриптов сразу после формирования структуры
документа, не дожидаясь загрузки других элементов. Обработать это
событие можно с помощью метода ready () .
jQuery(document).ready(function() {
alert("Документ доступен для выполнения скриптов");
});
Функция jQuery () имеет псевдоним $ (). Используя этот псевдоним, можно обработать событие следующим образом.
$(document).ready(function() {
alert("Документ доступен для выполнения скриптов");
});
Если в качестве параметра функции j Query () указать ссылку на
функцию, то она также будет выполнена сразу после формирования структуры
документа.
jQuery(function() {
alert("Документ доступен для выполнения скриптов");
});
Этот код можно еще сократить.
$(function() {
alert("Документ доступен для выполнения скриптов");
});
Необходимо также заметить, что в программе может быть несколько
вызовов методов ready (). В этом случае выполнение методов происходит в
порядке их объявления внутри программы.
Рассмотрим последовательность событий на примере. Для этого создадим
HTML-документ и объявим несколько методов ready (), а также обработаем
событие onload (листинг 1.1).
Листинг 1.1.
Последовательность обработки событий
<html>
<head>
<title>Последовательность обработки событий</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
alert("Событие onload");
}
$(document).ready(function() {
alert("Метод ready(). Вызов 1");
});
$(document).ready(function() {
alert("Метод ready(). Вызов 2");
});
$(function() {
alert("Вызов функции $()");
});
</script>
</head>
<body>
Пример последовательности обработки событий
</body>
</html>
При выполнении этого примера будет иметь место следующая последовательность событий.
Метод ready(). Вызов 1
Метод ready(). Вызов 2
Вызов функции $()
Событие onload
Как видно из примера, событие onload возникает самым последним, а
методы ready () и функция $ () выполняются в порядке их объявления в
программе.
Обработка конфликтных ситуаций
Как вы уже знаете, функция jQuery () имеет псевдоним $ (). В
некоторых других библиотеках (например, в Prototype) также объявлена
функция $ (). Если использовать такие библиотеки одновременно, то
возникнет конфликт имен. Библиотека jQuery позволяет избежать этого
конфликта. Для этого необходимо вначале подключить конфликтную
библиотеку, а затем библиотеку jQuery. Сразу после подключения следует
вызвать функцию noConflict().jQuery.noConflict();
В этом случае библиотека jQuery освободит функцию $ () для использования другой библиотекой.
Если результат выполнения функции noConflict() присвоить какой-либо
переменной, то ее имя можно использовать вместо функции $ () (листинг
1.2).
Листинг 1.2.
Обработка ситуации конфликта имен
<html>
<head>
<title>Обработка конфликтных ситуаций</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script type="text/javascript">
function $() {
alert("Функция $() из другой библиотеки");
}
</script>
<script src="/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var jq = jQuery.noConflict();
</script>
</head>
<body>
<div id="div1"></div>
<script type= "text/javascript">
$(); // Вызов функции из другой библиотеки
jq("#div1").html("Пример использования библиотеки jQuery");
</script>
</body>
</html>
В этом примере мы присвоили результат выполнения функции noConflict () переменной jq.
Теперь можно использовать это имя в качестве названия функции,
jq("#divl").html("Пример использования библиотеки jQuery");
Если результат нигде не сохранять, то обращение выглядит следующим образом.
jQuery("#divl" ) .html("Пример использования библиотеки jQuery");
Использовать функцию $ () в данном случае уже нельзя/так как будет
вызвана функция из другой библиотеки. Если же необходимо использовать
функцию $ () применительно к библиотеке jQuery, то можно поступить
следующим образом.
(function($) {
$("#divl").html("Пример использования библиотеки jQuery");
})(jQuery);
Этим способом обычно пользуются при создании расширений (плагинов). Можно также воспользоваться следующим кодом.
jQuery(function($) {
$("#divl").html("Пример использования библиотеки jQuery");
});
Форматы функции $()
Основную функциональность библиотеки jQuery выполняет функция jQuery
(), которая имеет псевдоним $ (). Это единственные идентификаторы,
которые доступны в глобальной области видимости. Все остальные функции
находятся в области имен библиотеки jQuery. Функция $ () поддерживает
несколько форматов:
$(<Функция>);
$(<Элемент объектной модели документа>);
$(<НТМЬ-текст>);
$(<Селектор>[, <Контекст>] ).
Если в качестве параметра указать функцию, то она будет выполнена сразу после формирования структуры документа.
$(function() {
alert(" Документ доступен для выполнения скриптов”);
});
Второй формат функции позволяет указать элемент объектной модели
документа. В качестве примера зададим цвет фона для всего документа
после загрузки:
$(document).ready(function() {
$(document.body).ess("background-color", "silver");
});
Третий формат функции позволяет создавать новые элементы, которые
затем можно будет вставить в определенное место в HTML-документе.
Рассмотрим это на примере (листинг 1.3).
Листинг 1.3.
HTML-текст в качестве параметра функции $()
<html>
<head>
<title>HTML-текст в качестве параметра функции $()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("<div>Вставленный текст</div>").appendTo("#div1");
});
</script>
</head>
<body>
<div id="div1">Строка 1</div>
<div id="div2">Строка 2</div>
</body>
</html>
Обратите внимание на следующую строку.
$ ("<div>>Вставленный Teкст</div>") . appendTo ("#divl") ;
Здесь мы в функции $ () формируем HTML-текст, а затем с помощью
метода appendTo () вставляем его после элемента, имеющего идентификатор
divl (id="divl").
При выполнении получим в окне веб-браузера следующий результат.
Строка 1
Вставленный текст
Строка 2
Четвертый формат функции $ () является наиболее часто используемым.
Он позволяет получить ссылку на элемент или коллекцию элементов по
указанному селектору. В качестве этого параметра указываются селекторы,
которые являются частью стандарта CSS, а также некоторые специальные
селекторы. Вторым параметром функции $ () может быть указан контекст.
Например, ссылка на XML-документ, полученный с сервера в результате
AJAX-запроса. Если параметр не указан, то контекстом является текущий
документ.
В следующей главе мы познакомимся с селекторами.
|