jQuery: сборник рецептов

Геннадий Самков

2-е издание

Санкт-Петербург

«БХВ-Петербург»

2011

УДК 681.3.068+800.92 jQuery
ББК
32.973.26-018.1
С17

Самков Г. А.

С17
jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: 

БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM —
(Профессиональное программирование)

ISBN 978-5-9775-0732-5

Книга является сборником решений наиболее часто встречающихся задач при 

веб-программировании пользовательских интерфейсов с использованием библиотеки jQuery. Рассмотрены практически все методы и вспомогательные функции 
jQuery, в том числе обеспечивающие взаимодействие jQuery и AJAX. Подробно 
рассказано о надстройке UI jQuery. Приведено большое количество примеров использования плагинов для jQuery — создание графиков и диаграмм, фотогалерей, 
меню, работа с таймерами и cookies, обработка табличных данных и др. Во втором 
издании в примерах используется библиотека jQuery версий 1.4.4 и 1.5.2, а также 
надстройка UI jQuery 1.8.9. Компакт-диск содержит примеры из книги, файлы 
библиотеки jQuery 1.4.4 и 1.5.2, файлы надстройки UI jQuery 1.8.9, а также файлы 
расширений сторонних разработчиков.

Для веб-программистов

УДК 681.3.068+800.92 jQuery

ББК 32.973.26-018.1

Группа подготовки издания:

Главный редактор
Екатерина Кондукова

Зам. главного редактора
Игорь Шишигин

Зав. редакцией
Григорий Добин

Редактор
Леонид Кочин

Компьютерная верстка
Ольги Сергиенко

Корректор
Зинаида Дмитриева

Дизайн серии
Инны Тачиной

Оформление обложки
Елены Беляевой

Зав. производством
Николай Тверских 

Лицензия ИД № 02429 от 24.07.00. Подписано в печать 30.06.11.

Формат 70 1001/16. Печать офсетная. Усл. печ. л. 33,54.

Тираж 1500 экз. Заказ №

"БХВ-Петербург", 190005, Санкт-Петербург, Измайловский пр., 29.

Санитарно-эпидемиологическое заключение на продукцию 

№ 77.99.60.953.Д.005770.05.09 от 26.05.2009 г. выдано Федеральной службой 

по надзору в сфере защиты прав потребителей и благополучия человека.

Отпечатано с готовых диапозитивов 

в ГУП "Типография "Наука"

199034, Санкт-Петербург, 9 линия, 12

ISBN 978-5-9775-0732-5
© Самков Г. А., 2011
© Оформление, издательство "БХВ-Петербург", 2011

Оглавление

Введение............................................................................................................................ 7
Структура книги.............................................................................................................................. 7
Как работать с книгой..................................................................................................................... 8
Источники информации ................................................................................................................. 9
Благодарности............................................................................................................................... 10

ЧАСТЬ I. МЕТОДЫ БИБЛИОТЕКИ JQUERY...................................................... 11

Глава 1. Выбор элементов........................................................................................... 13
1.1. Базовые правила..................................................................................................................... 13
1.2. Выбор элементов  с учетом иерархии.................................................................................. 20
1.3. Основные фильтры ................................................................................................................ 24
1.4. Фильтрация по содержимому ............................................................................................... 30
1.5. Фильтры видимых и невидимых элементов....................................................................... 34
1.6. Селекторы атрибутов............................................................................................................. 36
1.7. Фильтры элементов форм ..................................................................................................... 40
1.8. Фильтры состояния элементов форм ................................................................................... 43
1.9. Фильтры элементов-потомков.............................................................................................. 47

Глава 2. Атрибуты элементов .................................................................................... 53
2.1. Управление атрибутами элементов...................................................................................... 53
2.2. Работа с атрибутом class ....................................................................................................... 57
2.3. Работа с HTML и текстом ..................................................................................................... 59
2.4. Работа с атрибутом value....................................................................................................... 61

Глава 3. Визуальные эффекты ................................................................................... 67
3.1. Как показывать и скрывать элементы.................................................................................. 67
3.2. Эффекты "скольжения" и "затухания"................................................................................. 70
3.3. Создание анимации................................................................................................................ 74
3.4. Эффекты UI jQuery ................................................................................................................ 79

Глава 4. Работа с CSS-свойствами ............................................................................ 84
4.1. Как получать и устанавливать  значения CSS-свойств элементов..................................... 84
4.2. Ширина и высота элементов................................................................................................. 88
4.3. Позиционирование элементов .............................................................................................. 90

Оглавление

Глава 5. Работа с данными в jQuery......................................................................... 94
5.1. Сохранение и извлечение данных ........................................................................................ 94

Глава 6. Манипуляции над элементами................................................................... 98
6.1. Изменение содержимого элементов..................................................................................... 98
6.2. Как вставлять элементы в DOM ......................................................................................... 101
6.3. Замена, удаление  и копирование элементов..................................................................... 111

Глава 7. Перемещение по элементам...................................................................... 118
7.1. Поиск нужных элементов в DOM....................................................................................... 118
7.2. Фильтрация элементов набора............................................................................................ 128
7.3. Прочие методы..................................................................................................................... 138

Глава 8. События и их обработка............................................................................ 144
8.1. События документа.............................................................................................................. 144
8.2. Назначение, удаление и вызов событий............................................................................. 146
8.3. События мыши, клавиатуры,  браузера и форм ................................................................ 156

Глава 9. Взаимодействие jQuery и AJAX............................................................... 165
9.1. Сокращенные методы.......................................................................................................... 165
9.2. Вспомогательные функции  $.ajax() и $.ajaxSetup() ......................................................... 178
9.3. События AJAX ..................................................................................................................... 187
9.4. Полезные вспомогательные функции ................................................................................ 192

Глава 10. Полезные вспомогательные функции и методы jQuery................... 195
10.1. Некоторые операции с массивами и объектами в jQuery............................................... 195
10.2. Некоторые операции  с наборами элементов jQuery ...................................................... 208
10.3. Другие полезные  вспомогательные функции................................................................. 214

ЧАСТЬ II. РАСШИРЕНИЯ ДЛЯ БИБЛИОТЕКИ JQUERY.............................. 219

Глава 11. Меню для веб-сайта.................................................................................. 221
11.1. Плагин jQuery Superfish..................................................................................................... 221

Глава 12. Работа с таблицами .................................................................................. 230
12.1. Плагин jqGrid ..................................................................................................................... 230

Глава 13. Графики и диаграммы............................................................................. 250
13.1. Плагин jqPlot ...................................................................................................................... 250

Глава 14. AJAX-формы.............................................................................................. 262
14.1. Плагин jQuery Form ........................................................................................................... 262
14.2. Плагин jQuery Validate ...................................................................................................... 267
14.3. Плагин jQuery Uploadify.................................................................................................... 273

Глава 15. Фотогалерея для сайта............................................................................. 282
15.1. Фотогалерея FancyBox ...................................................................................................... 282

Глава 16. Несколько полезных плагинов .............................................................. 297
16.1. jQuery Cookie...................................................................................................................... 297

Оглавление
5

16.2. jQuery Timers...................................................................................................................... 299
16.3. jQuery Cluetip...................................................................................................................... 302

Глава 17. UI jQuery — виджеты............................................................................... 308
17.1. Виджет Accordion .............................................................................................................. 308
17.2. Виджет Datepicker.............................................................................................................. 318
17.3. Виджет Dialog .................................................................................................................... 329
17.4. Виджет Progressbar ............................................................................................................ 337
17.5. Виджет Slider...................................................................................................................... 340
17.6. Виджет Tabs ....................................................................................................................... 346
17.7. Виджет Button .................................................................................................................... 356
17.8. Виджет Autocomplete......................................................................................................... 361

Глава 18. UI jQuery — взаимодействие с элементами страницы...................... 370
18.1. Draggable — перемещение элементов............................................................................. 370
18.2. Droppable — "сброс" элементов ....................................................................................... 379
18.3. Resizable — изменение  размеров элементов .................................................................. 386
18.4. Selectable — выбор элементов.......................................................................................... 392
18.5. Sortable — сортировка элементов .................................................................................... 399

Приложение. Описание компакт-диска ................................................................. 409

Литература ................................................................................................................... 411

Предметный указатель .............................................................................................. 412

Оглавление

Введение

Предлагаемая книга представляет собой сборник примеров, поясняющих возможности большинства методов, предоставляемых API популярной JavaScriptбиблиотеки jQuery. Много внимания уделено UI jQuery — надстройке над библиотекой, применяемой при проектировании пользовательских интерфейсов. Также в 
книгу включены подробные описания и рекомендации по использованию наиболее 
востребованных плагинов, которые пригодятся при решении задач, часто встречающихся в программировании.

Предполагается, что читатель знаком с CSS, HTML и основами JavaScript. Кроме 
того, потребуются некоторые начальные знания PHP — языка программирования 
серверных сценариев, который необходим в некоторых примерах, посвященных 
организации взаимодействия "клиент — сервер" с применением технологии AJAX.

Книга может служить не только учебником, но и справочником по библиотеке 
jQuery и надстройке UI jQuery.

Структура книги

Книга содержит две части и приложение.

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

 выбор элементов — базовые правила, иерархия, фильтры, селекторы атрибутов, 

фильтры элементов форм;

 работа с атрибутами и содержимым элементов, работа с данными в элементах 

форм;

 создание визуальных эффектов, в том числе с помощью надстройки UI jQuery;

 работа с CSS-свойствами элементов;

 работа с данными в jQuery, в том числе с использованием HTML 5;

Введение

 манипуляции элементами — изменение содержимого, вставка, замена, удаление 

и копирование элементов DOM;

 перемещение по элементам DOM — поиск и фильтрация элементов, управление 

цепочками вызовов функций;

 работа с событиями — назначение, удаление и вызов событий для мыши, кла
виатуры, браузера и форм;

 взаимодействие jQuery и AJAX;

 некоторые полезные вспомогательные функции и методы jQuery.

В части II приведены решения на основе наиболее популярных расширений для 
библиотеки jQuery, в том числе рассмотрен официальный пакет расширений UI 
jQuery. Подробно рассматриваются:

 вертикальное и горизонтальное многоуровневое меню на основе плагина jQuery 

Superfish;

 организация работы с данными, представленными в табличной форме, рассмат
ривается на примере плагина jqGrid;

 возможности реализации графиков и диаграмм на страницах веб-сайта 

демонстрируются на примере плагина jqPlot;

 работа с AJAX-формами — плагины jQuery Form (построение AJAX-формы), 

jQuery Validate (проверка данных в AJAX-форме) и FileUpload (загрузка файлов 
на сервер);

 фотогалереи для веб-сайтов рассматриваются на примере плагина FancyBox;

 некоторые полезные плагины — плагин jQuery Cookie (установка и считывание 

cookie), плагин jQuery ClueTip (всплывающие подсказки), плагин jQuery Timers 
(управление таймерами);

 виджеты надстройки UI jQuery — Accordion (раскрывающееся меню), Datepicker 

(выбор даты), Dialog — (диалоговое окно), ProgressBar (шкала загрузки), Slider 
(шкала с бегунком), Tabs (организация переключения вкладок), Button (стилизация и управление поведением кнопок и некоторых элементов форм), 
Autocomplete (список подсказок);

 надстройка UI jQuery — взаимодействие с элементами страницы: Draggable (пе
ремещение элементов), Droppable ("сброс" элементов), Resizable (изменение 
размеров элементов), Selectable (выбор элементов), Sortable (сортировка элементов).

В приложении описан компакт-диск, прилагаемый к книге.

Как работать с книгой

Книга в основном ориентирована на разработчика, работающего с операционной 
системой Windows, но пользователь UNIX также сможет выполнить на своем компьютере все примеры.

Введение
9

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

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

Источники информации

В книге невозможно охватить все вопросы, и читателю наверняка потребуются дополнительные сведения, например, из Интернета. Кроме того, могут изменяться 
версии программного обеспечения, рассматриваемого в книге. Вот адреса, которыми вы можете воспользоваться:

 http://jquery.com/ — официальный сайт библиотеки jQuery (англ.);

 http://api.jquery.com/ — оригинальная документация по библиотеке jQuery 

(англ.);

 http://jqueryui.com/ — официальный сайт UI jQuery (англ.);

 http://www.linkexchanger.su — блог автора книги, содержит много статей с 

примерами использования библиотеки jQuery (рус.);

 http://www.linkexchanger.su/forum/ — форум, посвященный вопросам разра
ботки с применением библиотеки jQuery, UI jQuery и плагинов для библиотеки 
(рус.);

 http://slyweb.ru/jquerymain/ — перевод документации jQuery (рус.);

 http://plugins.jquery.com/ — на сайте представлено большое количество разно
образных плагинов для библиотеки jQuery (англ.);

 http://users.tpg.com.au/j_birch/plugins/superfish/ — страница плагина jQuеry 

Superfish (англ.);

 http://trirand.com/blog/jqgrid/jqgrid.html —
демо-галерея 
плагина 
jqGrid 

(англ.);

 http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs —
официаль
ная документация на плагин jqGrid (англ.);

 http://www.jqplot.com — сайт плагина jqPlot (англ.);

 http://malsup.com/jquery/form/ — страница плагина jQuery Form (англ.);

 http://bassistance.de/jquery-plugins/jquery-plugin-validation/ — страница пла
гина jQuеry Validation (англ);

 http://www.uploadify.com — сайт плагина jQuery Uploadify (англ.);

 http://fancybox.net — сайт плагина jQuery FancyBox (англ.);

 http://plugins.learningjquery.com/cluetip/ — страница плагина jQuery ClueTip 

(англ.);

Введение

 http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jquery/ — страница плаги
на jQuery Cookie (англ.);

 http://jquery.offput.ca/timers/ — страница плагина jQuery Timers (англ.);

 http://firebug.ru — сайт, посвященный Firebug, замечательному средству отлад
ки JavaScript-кода (рус.).

Благодарности

Автор приносит искренние благодарности Владимиру Кондратьеву за его готовность поделиться своим богатым практическим опытом работы с плагинами, Игорю Пирогову и Андрею Зайцеву — за их поддержку и квалифицированные технические консультации, Эдуарду Аметову — за консультации по вопросам работы 
с изображениями.

ЧАСТЬ I

Методы библиотеки jQuery

Глава 1.
Выбор элементов

Глава 2.
Атрибуты элементов

Глава 3.
Визуальные эффекты

Глава 4.
Работа с CSS-свойствами

Глава 5.
Работа с данными в jQuery

Глава 6.
Манипуляции над элементами

Глава 7.
Перемещение по элементам

Глава 8.
События и их обработка

Глава 9.
Взаимодействие jQuery и AJAX

Глава 10.
Полезные вспомогательные функции 
и методы jQuery

ГЛАВА 1

Выбор элементов

А для чего вообще нужно выбирать элементы? Ответ простой — для того, чтобы 
как-то на них воздействовать. Например, можно изменить атрибуты или CSSсвойства элементов, меняя, таким образом, их визуальное представление, изменять 
содержимое этих элементов, связывать с ними определенные события и т. д.

Можно выбрать как один элемент, так и множество элементов. Независимо от того, 
сколько именно элементов выбрано, мы будем рассматривать это как набор элементов, называя его объектом jQuery.

1.1. Базовые правила

ЗАДАЧА

Необходимо отыскать абсолютно все элементы веб-страницы.

Решение

Используем селектор * для решения этой задачи (листинг 1.1.1).

Листинг 1.1.1. Использование селектора *

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-1-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){

alert($("*").length);

});