• Геннадий Самков
• jQuery. Сборник рецептов (+ CD-ROM)
• Издательство: БХВ-Петербург, 2011 г.
• Мягкая обложка, 416 стр.
• ISBN 978-5-9775-0732-5
• Тираж: 1500 экз.
• Формат: 70×100/16

Аннотация:
Книга является сборником решений наиболее часто встречающихся задач при веб-программировании пользовательских интерфейсов с использованием библиотеки 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, а также файлы расширений сторонних разработчиков.

От себя могу добавить, что книга написана в таком же духе, как и первое издание, т.е. примеры, примеры и еще раз примеры плюс подробные разъяснения….

Отрывок книги в PDF

Полное содержание:

Это мой уважаемый коллега, человек с большим опытом разработки сложных приложений, в прошлом один из разработчиков javascript-фреймворка Dojo Toolkit.

» Профессиональное javascript-программирование
» Сложный AJAX и COMET: тонкости Web 2.0
» Мастер-класс по клиентской оптимизации
» Секреты jQuery

Такие мастер-классы помогут узнать много нового, понять уровень своих знаний, получить новые идеи.

И еще, очень интересно! Принять участие в мастер-классе «Секреты jQuery» можно будет в режиме on-line.

Исходное объявление на javascript.ru »

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

Теперь подробнее о содержании мастер-классов.

«Профессиональное javascript-программирование»

- Javascript, browser tips & tricks.
- Фишки DOM, функции/замыкания, ООП – понятно и в деталях.
- Малоизвестные возможности javascript и браузеров.
- Javascript-фреймворки. Сравнение современных возможностей. jQuery в деталях.
- Полезный инструментарий, который сделает вашу разработку быстрее и качественнее. Гораздо больше, чем Firebug.
- Обмен информацией между окнами с разных доменов
- HTML5: что уже есть, а что нас ждет уже скоро.

Этот мастер класс – отнюдь не об основах javascript, здесь присутствует много информации для профессионалов.
Москва: суббота, 20 февраля, 11.00
Санкт-Петербург: суббота, 27 февраля, 11.00
Продолжительность – 4 часа.

«Клиентская оптимизация»

- Способы и принципы сжатия javascript, что делать, чтобы код сжимался эффективнее.
- Идеальное кеширование. Скрипты и серверная часть.
- Эффективная оптимизация javascript. Подходы, цифры, рецепты.
- Основные приемы оптимизации jQuery.
- Ускорение загрузки страницы через HTTP pipelining.
- Оптимизация с Google Gears и HTML5.
- Google Closure Compiler в деталях
- Удобные инструменты для оптимизации и профайлинга.

Про то, как ускорить страницу, почти ничего не делая, и как серьезно ускорить страницу и сайт, если что-то сделать.
Москва: воскресенье, 21 февраля, 11.00
Санкт-Петербург: воскресенье, 28 февраля, 11.00
Продолжительность – 4 часа.

«Сложный AJAX и COMET: тонкости Web 2.0″

- Асинхронная подгрузка событий с сервера (COMET) – различные варианты, сравнение и примеры реализации.
- Кнопки back-forward, закладки и история с AJAX.
- Cпособы написания чата/оповещающего демона, аспекты производительности и решения.
- Кросс-доменные ограничения, способы их преодоления.
- Асинхронный try..catch. Удобная работа с асинхронностью.
- Инструменты для разработки и отладки сложных AJAX-приложений.
- Специализированный COMET-сервер, установка, расширение, интеграция. Поднимем COMET прямо на мастер-классе.

Мастер-класс сделает современные подходы простыми и понятными для вас, позволит улучшить те приложения, которые есть сейчас, и перейти к качественно новой разработке в будущем.
Москва: суббота, 20 февраля, 16.00
Санкт-Петербург: суббота, 27 февраля, 16.00
Продолжительность – 4 часа.

«Секреты jQuery»

1. Как работает поисковой движок jQuery $(‘…’).
- Внутреннее устройство. Алгоритм поиска. No magic.
- Почему некоторые очевидные запросы тормозят, и как их ускорять.
- Расширение поискового движка, добавление своих фильтров.
2. Система событий в jQuery.
- Внутреннее устройство.
- Слабо- и недокументированные фичи, отсутствующие в обычных javascript-событиях.
- Влияние системы событий на быстродействие и DOM-манипуляции. Что тормозит и почему.
- Обход утечек памяти.
3. Фишки AJAX.
- Особенные фичи AJAX в jQuery, которых нет в других библиотеках и полезные приемы работы с ними.
4. $.изнутри.
- Внутреннее устройство функции $. Что она делает быстро, а что – нет.
- Создание плагинов. Внутренний механизм работы $.fn.plugin.
5. jQuery UI.
- Обзор и устройство jQuery UI.
- Написание собственных виджетов. Объявление, вызов методов и т.п. Примеры.
- Приемы для более удобной работы с виджетами.
6. Профайлинг jQuery-приложения
- Как из каши $(вызовов) получить читаемый профиль.
7. Дополнительно.
- Общий обзор библиотеки jQuery, ее сильных и слабых мест. Сравнение с другими фреймворками. Новое в jQuery 1.4.

Мастер-класс посвящен слабо документированным особенностям и устройству фреймворка jQuery. Это не вводный курс. Знакомство и опыт работы с фреймворком jQuery – обязательны.
Москва: воскресенье, 21 февраля, 16.00
Санкт-Петербург: воскресенье, 28 февраля, 16.00
Продолжительность – 3 часа.
On-line: суббота, 27 февраля, 20.00-21.50 и воскресенье, 28 февраля, 20.00-21.50

Дополнительная информация, запись на мастер-классы »

Итак, первое на чем мы остановим свое внимание – это определение и работа с функциями, с использованием подхода при котором они являются обычными объектами JavaScript. Но для того, чтобы к этому подойти, давайте сначала посмотрим, как создаются

Объекты в JavaScript

var card = new Object();

Весьма просто, но совсем неинтересно, поскольку наш объект не содержит никакой информации. Давайте исправим это:

var card = new Object();
card.firstname = 'Ivan';
card.lastname = 'Ivanov';
card.year = '1974';
card.employed = new Date(2004,1,12);

Это уже что-то полезное – создав новый экземпляр объекта, мы присвоили его переменной card и наполнили свойствами различных типов: строка, число, и дата.

Что же получается? Получается, что объект JavaScript – это набор свойств, каждое из которых состоит из имени и значения. При этом в качестве имени может выступать только строка, а вот значением (и это важный момент!!!) может быть и строка, и число, и массив, и конечно функция…

Вывод: основная цель экземпляра объекта – служить контейнером для именованных наборов других объектов.

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

var card = new Object();
card.firstname = 'Ivan';
card.lastname = 'Ivanov';
card.year = '1974';
card.employed = new Date(2004,1,12);
var phone = new Object();
phone.home = '(495)353-5353';
phone.mobile = '(903)261-1777';
card.phone = phone;

мы создали еще один объект, который содержит номера телефонов и сделали этот объект значением свойства нашего первого объекта.

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

var card = {
  firstname : 'Ivan',
  lastname  : 'Ivanov',
  year      : '1974',
  employed  : new Date(2004,1,12),
  phone     : {
    home   : '(495)353-5353',
    mobile : '(903)261-1777'
  }
};

Вот собственно такая форма записи и называется JSON – посмотрите, насколько проста и понятна структура:

- объект – пара фигурных скобок
- свойства перечислены внутри скобок, через запятую
- каждое свойство – это пара состоящая из имени и значения, разделенных двоеточием.

Давайте теперь отметим для себя еще один очень важный момент, воспользовавшись следующим простым примером:

var someVar = 'В лесу родилась елочка!';

Простейшая инструкция, в которой переменной присваивается экземпляр объекта String. Если мы попробуем выполнить:

alert(someVar);

увидим то, что и ожидали – сенсационное сообщение о том, что в лесу родилась елочка. Как Вы думаете, что мы увидим после выполнения следующего кода?

alert(window.someVar);

Можете попробовать, но сразу скажу, что в результате получится абсолютно тоже самое сообщение! Поскольку инструкции эквивалентны, то какой же вывод из этого можно сделать?

Правильно! Когда ключевое слово var используется за пределами какой-либо функции, на глобальном уровне, оно является всего лишь ссылкой на свойство объекта window.

Ну вот, с объектами мы более-менее разобрались. Но давайте кратко сформулируем то, о чем мы говорили. Итак:

- объект в JavaScript – это неупорядоченный набор свойств;
- свойство состоит из имени и значения;
- объекты можно объявлять с помощью литералов;
- глобальные переменные – есть свойства объекта window;

Функция как объект JavaScript

Вот теперь мы готовы к тому, чтобы вернуться к тому утверждению, что функции в JavaScript можно рассматривать как обычные объекты. Почему же в JavaScript функцию можно считать обычным объектом? Давайте возьмем для сравнения объекты других типов, например String или Number.

Если объекты String или Number определяются соответствующими конструкторами, то функции также определяются конструктором, в данном случае конструктором Function. Точно также, как и другие объекты функции могут:

- присваиваться переменным и свойствам объектов
- передаваться в виде параметров
- возвращаться как результат других функций
- создаваться с использованием литералов

Но есть на первый взгляд одно очень существенное отличие от тех же упомянутых объектов String или Number – у функции есть имя! Но это только на первый взгляд.

Посмотрим простенький пример:

function hello() {
  alert('Hello, world!');
}

такая запись очень часто используется для создания глобальных функций, но это совершенно не означает, что мы только что создали функцию с именем hello. Вспомните наши примеры с ключевым словом var. Тут практически тоже самое, только в примере с функцией ключевое слово function автоматически создает экземпляр объекта и присваивает его свойству объекта window. А имя этого свойства совпадает с именем нашей функции. Т.е. мы могли бы написать так:

hello = function () {
  alert('Hello, world!');
}

или даже так:

window.hello = function () {
  alert('Hello, world!');
}

Это есть синтаксис литерала функции – привыкайте, в jQuery-коде Вы будете использовать такую форму записи очень часто. Но самый главный вывод, который мы должны сделать – экземпляры Function являются значениями!!!, которые можно присвоить переменным, свойствам или параметрам, через которые на них можно ссылаться.

Функции обратного вызова

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

function hello() {
  alert('Hello, word!');
}
setTimeout(hello,5000);

Объявляем функцию с именем hello и устанавливаем таймер на 5 секунд. Смотрите, передача функции в качестве параметра ничем не отличается от передачи любого другого значения – в первом параметре мы передали функцию, а во втором – число. Когда время таймера истечет, будет вызвана функция hello. Поскольку метод setTimeout() делает вызов функции в нашем собственном программном коде – эту функцию называют функцией обратного вызова.

Однако есть более изящный способ записи этого кода:

setTimeout(function(){ alert('Hello, word!'); },5000);

если функцию не требуется вызывать где-то в другом месте страницы, нет никакой необходимости создавать свойство hello в объекте window. Такой подход будет очень часто встречаться в программном коде jQuery.

Реализация this в JavaScript

В объектно-ориентированных языках основанных на классах, указатель this, как правило, ссылается на экземпляр класса, в пределах которого был объявлен метод. Реализация this в JavaScript отличается едва различимым, но очень существенным образом. В JavaScript, где функции являются обычными объектами (мы говорили об этом выше), они не объявляются как часть чего-либо. Объект, на который ссылается this, называется контекстом функции и определяется не тем, как функция объявляется, а тем как она вызывается. Это значит, что функция может иметь различный контекст в зависимости от того, как она была вызвана.

Давайте вернемся к примеру и немного дополним его:

var card = {
  firstname : 'Ivan',
  lastname  : 'Ivanov',
  year      : '1974',
  employed  : new Date(2004,1,12),
  phone     : {
    home    : '(495)353-5353',
    mobile  : '(903)261-1777'
  },
  showData   : function() {
    return this.lastname+'
            '+this.firstname+'
            '+this.phone.mobile;
  }
};

К первоначальному коду мы добавили свойство с именем showData, которое ссылается на экземпляр Function. Если теперь вызвать функцию через свойство:

alert(card.showData());

то в качестве контекста функции будет установлен экземпляр объекта на который указывает card. В результате мы увидим следующее:

Ivanov Ivan (903)261-1777

Ну это все вполне естественно, гораздо более интересен следующий пример. JavaScript позволяет четко установить, что будет использоваться в качестве контекста функции. Вызывая функцию с помощью методов call() или apply() экземпляра Function, мы можем передать в качестве контекста все, что угодно.

var obj1 = { myProperty: 'object 1' };
var obj2 = { myProperty: 'object 2' };
var obj3 = { myProperty: 'object 3' };
window.myProperty = 'object window';

function showProperty() {
  return this.myProperty;
}

obj1.identifyMe = showProperty;

alert(showProperty());
alert(obj1.identifyMe());
alert(showProperty.call(obj2));
alert(showProperty.apply(obj3));

Определили три простых объекта, у каждого из которых есть свойство myProperty. Добавили свойство myProperty в экземпляр объекта window. Определили глобальную функцию, которая возвращает значение свойства myProperty для любого объекта, используемого в качестве контекста этой функции. И еще присвоили эту же самую функцию свойству с именем identifyMe объекта obj1.

Дальше самое интересное – четыре раза мы вызываем один и тот же экземпляр функции другим способом и посмотрите, что получается:
- в первом случае вызываем функцию как глобальную и контекстом функции является экземпляр объекта window о чем свидетельствует текст в окне предупреждения – «object window«.
- во втором случае вызываем функцию как свойство объекта obj1 и контекстом функции становится этот объект. Текст в окне предупреждения – «object 1«.
- в третьем случае используем метод call() объекта Function и контекстом функции становится объект, переданный методу call() в качестве первого параметра. Текст в окне предупреждения – «object 2«.
- наконец в четвертом случае используем метод apply(), передавая ему в качестве первого аргумента obj3, и получаем текст в окне предупреждения – «object 3«.

Пример можно открыть в отдельном окне.

Вывод такой: функция fn действует как метод объекта ob, когда объект ob выступает в качестве контекста при вызове функции fn.

Что такое замыкание?

Замыкание (closure) – это экземпляр Function вместе с локальными переменными из его окружения, необходимыми для выполнения.

Функция при объявлении может ссылаться на любые переменные, находящиеся в области ее видимости на момент объявления. Эти переменные будут достижимы для функции даже после того, как текущее положение в объявлении выйдет из области видимости, замыкая объявление.

Лучше всего пояснить это на простом примере (здесь уже используем библиотеку jQuery):

$(function(){
  var local = 1;
  window.setInterval(function(){
    $('#result').append(new Date()+
                ' значение local = '+local+'   ');
    local++;
  },5000);
});

После загрузки DOM объявляем переменную local и присваиваем ей числовое значение 1. С помощью метода setInterval() взводим таймер, который будет срабатывать каждые 5 секунд. В качестве функции обратного вызова для таймера, определяем функцию, которая каждые пять секунд будет добавлять текущее время и значение переменной local. Кроме того, при каждом срабатывании таймера значение переменной local должно увеличиваться на единицу.

Пример можно открыть в отдельном окне.

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

Тем не менее этот код прекрасно работает, благодаря замыканию, созданному при объявлении функции и включающему в себя переменную local. Замыкание остается в области видимости функции на протяжении всего жизненного цикла.

При работе с jQuery (особенно при использовании возможностей ajax) Вы будете довольно часто сталкиваться с замыканиями. Поэтому необходимо обратить внимание на еще одну важную особенность замыканий – контекст функции никогда не является частью замыкания. Опять же на примере будет гораздо понятнее.

Посмотрите такой код:

this.id = 'someID';
$('*').each(function(){
  alert(this.id);
});

Мы могли бы ожидать, что в окне предупреждения для каждого элемента будет раз за разом отображаться значение someID, однако это совсем не так. Мы увидим окно предупреждений столько раз, сколько элементов будет отобрано в объект jQuery и каждый раз будет отображаться значение атрибута id следующего элемента (или пустое окно предупреждения, если такого атрибута нет). Это происходит потому, что у каждого вызова функции собственный контекст, и в данном случае контекстом является элемент из объекта jQuery.

Давайте немного исправим пример:

this.id = 'someID';
var someVar = this;
$('*').each(function(){
  alert(someVar.id);
});

Переменная someVar становится частью замыкания и будет доступна внутри функции обратного вызова. Такой код будет раз за разом выдавать в окне предупреждения одно и тоже значение – someID.

Ну, вот вроде бы и все. Осталось сказать, что если твердо усвоить все эти понятия, то создавать эффектные и эффективные сценарии на JavaScript с использованием jQuery будет гораздо проще…

Итак, элемент Canvas предназначен для создания bitmap изображения при помощи JavaScript, т.е. мы получаем возможность создавать графические формы, рисовать линии, вращать изображения.

Такие возможности подстегнули производителей браузеров к включению API canvas в последние версии своих продуктов – FireFox, Opera, Chrome, Safari поддерживают тэг canvas. Как всегда неприятным исключением оказался горячо нелюбимый всеми Internet Explorer – не то что в 6 и 7 версиях, даже в 8 версии поддержка тэга canvas не планируется.

Однако не все так безнадежно как могло бы показаться – на помощь пришла компания Google, реализовав для IE полноценный API Canvas. По сути это небольшой js-файл, подключая который для браузеров IE можно заставить их «понимать» тэг canvas. Найти этот файл можно тут:
http://code.google.com/p/explorercanvas/

Но вернемся к нашему примеру. Для того, чтобы изобразить такие часики на своей страничке понадобится подключить в разделе HEAD файл excanvas.js – это для ого, чтобы заставить браузеры IE понимать canvas:

<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
< ![endif]-->

В body добавим следующую разметку:

<canvas id="canvas" height="150" width="150"></canvas>

И самое главное – JS-код, который и рисует сами часики:

// ожидаем загрузку
window.onload = function(){
  // рисуем часы
  clock();
  // через каждую секунду
  // часы перерисовываются
  setInterval(clock, 1000);
}
//
function clock() {
  // получаем текущие дату и время
  var now = new Date();
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr = now.getHours();

  // получаем контекст canvas
  var ctx = document
  .getElementById("canvas")
  .getContext("2d");

  // сохраняем состояние
  ctx.save();
  // инициализируем холст
  ctx.clearRect(0,0,150,150);
  // рисуя в точке 0,0 фактически
  // рисуем в точке 75,75
  ctx.translate(75,75);
  // при рисовании линии в 100px
  // фактически рисуем линию в 40px
  ctx.scale(0.4,0.4);
  // начинаем вращать с 12:00
  ctx.rotate(-Math.PI/2);

  // инициализируем свойства рисунка
  // контуры рисуем черным
  ctx.strokeStyle = "black";
  // заливка тоже черная
  ctx.fillStyle = "black";
  // ширина линии 8px
  ctx.lineWidth = 8;
  // будем рисовать по кругу
  ctx.lineCap = "round";

  // начинаем рисовать часовые метки
  // сохраняем предыдущее состояние
  ctx.save();
  ctx.beginPath();
  // для каждого часа
  for(var i = 0; i < 12; i++) {
  	// поворачиваем на 1/12
    ctx.rotate(Math.PI/6);
    // перемещаем курсор
    ctx.moveTo(100,0);
    // рисуем черточку 20px
    ctx.lineTo(120,0);
  }
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // ставим ширину линии 5px
  ctx.lineWidth = 5;
  ctx.beginPath();
  // рисуем минутные метки
  // для каждой минуты
  for(var i = 0; i < 60; i++) {
  	// кроме тех, что совпадут
  	// с часами
    if(i%5 != 0) {
      // перемещаем курсор
      ctx.moveTo(117,0);
      // рисуем черточку 3px
      ctx.lineTo(120,0);
    }
    // вращаем холст на 1/60
    ctx.rotate(Math.PI/30);
  }
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // начинаем рисовать часовую стрелку
  // вращаем холст на текущую позицию
  ctx.rotate((Math.PI/6)*hr +
             (Math.PI/360)*min +
             (Math.PI/21600)*sec);
  // устанавливаем ширину линии 14px
  ctx.lineWidth = 14;

  ctx.beginPath();
  // сдвигаем курсор несколько назад
  // стобы было похоже на стрелку
  ctx.moveTo(-20,0);
  // рисуем линию почти до часовых меток
  ctx.lineTo(80,0);
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // начинаем рисовать минутную стрелку
  // вращаем холст на текущую позицию
  ctx.rotate((Math.PI/30)*min +
             (Math.PI/1800)*sec);
  // ширина линии 10px
  ctx.lineWidth = 10;
  ctx.beginPath();
  // двигаем курсор
  ctx.moveTo(-28,0);
  // рисуем линию
  ctx.lineTo(112,0);
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // начинаем рисовать секундную стрелку
  // вращаем холст на текущую позицию
  ctx.rotate(sec * Math.PI/30);
  // контур и заливка красного цвета
  ctx.strokeStyle = "#D40000";
  ctx.fillStyle = "#D40000";
  // ширина линии 6px
  ctx.lineWidth = 6;
  ctx.beginPath();
  // двигаем курсор
  ctx.moveTo(-30,0);
  // рисуем линию
  ctx.lineTo(83,0);
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // рисуем внешнюю окружность
  // шириной 14px
  ctx.lineWidth = 14;
  // синим цветом
  ctx.strokeStyle = "#325FA2";
  ctx.beginPath();
  // рисуем окружность, отступающую
  // от центра на 142px
  ctx.arc(0,0,142,0,Math.PI*2,true);
  ctx.stroke();
  ctx.restore();

  ctx.restore();
}

Вы можете скачать файлы этого примера. Можно открыть пример в новом окне и посмотреть исходный код.

В заключение я приведу несколько очень полезных ссылок, для тех, кто заинтересовался.
Canvas Tutorial – туториал (на английском конечно), но там Вы найдете еще впечатляющие примеры.
The canvas element – подраздел спецификации HTML5, касающийся элемента canvas (и тоже ес-но на английском).

• Бер Бибо, Иегуда Кац
• jQuery. Подробное руководство по продвинутому JavaScript
• jQuery in Action
• Серия: High tech
• Издательство: Символ-Плюс, 2009 г.
• Мягкая обложка, 384 стр.
• ISBN 978-5-93286-135-6, 5-93286-135-5, 1-933988-35-5
• Тираж: 2000 экз.
• Формат: 70×100/16

Авторы книги – Бер Бибо (Bear Bibeault) и Иегуда Кац (Yehuda Katz). Бер Бибо – ветеран программирования, занимающийся этим уже 30 лет, Иегуда Кац – один из членов основной команды jQuery. Уже поэтому книга достойна пристального внимания.

Кроме того, книга очень хорошо организована. Начинается с введения в основы jQuery и тут же освещает основные концепции, которым следует библиотека. Рассматривается и философия jQuery, которая согласуется с принципом «ненавязчевый JavaScript». Рассказывается о принципах действия библиотеки jQuery.

Далее, как и следовало ожидать, освещается создание наборов элементов с использованием селекторов jQuery, работа со стилями, атрибутами и содержимым элементов, манипуляции элементами DOM и конечно же рассказано о событиях.

Освещено в книге и создание визуальных эффектов и конечно же механизмы взаимодействия с ajax. Есть также материалы о том, как создавать свои собственные модули и расширения.

Могу сказать, что для себя нашел в книге несколько довольно интересных «тонкостей» этой библиотеки. В общем, мое мнение – прочитать стоит, даже если Вы отлично ориентируетесь в мире jQuery.

Купить книгу можно в интернет-магазинах ozon.ru или books.ru – там она точно есть, может есть и где-нибудь еще.

С наступающим Новым 2009 Годом!

Итак, что мы можем получить подключив несколько javascript-файлов, задав соответствующее стилевое оформление и написав вот такой небольшой кусочек кода.

$("#example").dialog();

Мы получаем диалоговое окно, которое можно перемещать по экрану в любом направлении. Мы можем менять размеры этого окна. И конечно, содержимое этого окна может быть вполне функциональным. Испытайте все это на примере.

Принимайте во внимание, что пример демонстрируется во фрейме.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

В раздел HEAD понадобится подключить довольно много файлов: кроме самой библиотеки jQuery – jquery-1.2.1.js, файлы jquery.dimensions.js, ui.resizable.js, ui.draggable.js, ui.mouse.js и конечно ui.dialog.js

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/ui.dialog.js"></script>
<script type="text/javascript" src="js/ui.resizable.js"></script>
<script type="text/javascript" src="js/ui.mouse.js"></script>
<script type="text/javascript" src="js/ui.draggable.js"></script>

В исходном коде примера Вы сможете посмотреть стилевую таблицу, отвечающую за отображение диалогового окна и при необходимости отредактировать ее под свой дизайн. Обращаю Ваше внимание на, то что имена классов менять нежелательно. В противном случае Вам придется самостоятельно править код в файле ui.dialog.js.

HTML-код не представляет собой ничего интересного – элемент div, который будет служить диалоговым окном с идентификатором и именем класса.

И наконец приведу полностью тот код, который отвечает за диалоговое окно.

<script type="text/javascript">
$(document).ready(function(){
  $("#example").dialog({
    title: "Пример диалогового окна",
    width: 250,
    height: 150,
    resizable: true,
    draggable: true,
    position: "center",
    buttons: {
      "Отправить": function() {
        alert("Вы нажали кнопку Отправить");
      },
      "Закрыть": function() {
        $(this).dialog("close");
        alert("Вы нажали кнопку Закрыть");
      }
    }
  });
});
</script>

Элемент с идентификатором #example будет служить диалоговым окном. В файле ui.dialog.js большинство опций заданы по умолчанию, мы же для примера попробуем переопределить большинство из них.
title: ‘Пример диалогового окна’ – задаем название диалогового окна.
width: 250 – ширина окна в px.
height: 150 – высота окна в px.
resizable: true – диалоговое окно может (или false – не может) изменять свои размеры.
draggable: true – диалоговое окно может (или false – не может) перемещаться по экрану.
position: center – начальное положение окна на экране. Доступны значения center, left, top.
buttons – об этом несколько подробнее. Эта опция определяет кнопки, которые понадобится отображать в диалоге. Определяются они парами ключ/значение, где ключ – это текст, который необходимо отобразить на кнопке, а в качестве значения может выступать функция, которая должна быть вызвана при клике на соответствующую кнопку.

Вот собственно и все. А внутри диалогового окна можно предусмотреть то, что угодно Вам. Будь то авторизационная форма или форма для отправки e-mail с сайта, или еще что-то…

… вернее с тем, как их реализовать с помощью jQuery. Ниже я привожу перечень возможных запросов и постараюсь все пояснять на примерах.

load( url, [data], [callback] ) – загружает HTML из файла и вставляет его в объекную модель документа (DOM). По умолчанию (без [data]) выполняется как GET-запрос, однако, если будут переданы данные, выполнится как POST-запрос. Начиная с версии jQuery 1.2 в url можно определить селектор jQuery, например так:

$("#example").load("/ li.cat-item");

Результат выполнения Вы можете видеть ниже….

При выполнении этого запроса, были выбраны все элементы li с классом cat-item в запрашиваемом url и загружены в элемент #example, т.е. мы загрузили меню «Рубрики» этого сайта.
Здесь url – загружаемый url, data (опционально) – пары ключ/значение, которые могут быть переданы серверу, callback (опционально) – функция, которая может быть вызвана при окончании запроса (не требует обязательного успешного выполнения).
Еще пара примеров:

$("#feeds").load("feeds.html");

Загружает файл feeds.html в элемент с идентификатором feeds.

$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("Последние 25 записей загружены");
});

То же самое, но дополнительно передается пара ключ/значение limit: 25 и задается функция, которая вызывается по окончании запроса.

jQuery.get( url, [data], [callback] ) – загружает страницу, используя GET-запрос. Это самый простой способ передачи GET-запроса серверу. Он допускает возможность использования одной функции, которая может быть вызвана при окончании запроса. Но в отличие от load, функция будет вызвана лишь при успешном выполнении запроса. Если необходимо определить функцию при ошибке запроса, лучше обратиться к $.ajax.

Несколько примеров:

$.get("test.php");

Запрашивает test.php page, но игнорирует возвращаемый результат.

$.get("test.php", { name: "Vasya", age: "27" } );

Запрашивает test.php и передает дополнительные параметры, но также игнорирует возвращаемый результат.

$.get("test.php", function(data){
  alert("Данные загружены: " + data);
});

Передает результат запроса (без передачи параметров) к файлу test.php в alert (это может быть HTML или XML, зависит от того, что возвращает test.php).

$.get("test.php", { name: "Vasya", age: "27" }, function(data){
  alert("Данные загружены: " + data);
});

Ну и полный набор: GET-запрос к файлу test.php с передачей каких-то параметров и возвращаемый результат передается в alert.

jQuery.post( url, [data], [callback], [type] ) – загружает страницу, используя POST-запрос. Все почти точно так же, как и в предыдущем случае, поэтому даже примеров приводить не буду. Обращу Ваше внимание разве что на еще один опциональный параметр – [type]. В нем можно определить тип передаваемых данных – JSON, XML и т.п.

jQuery.getJSON( url, [data], [callback] ) – загружает данные в формате JSON используя GET-запрос. Начиная с версии jQuery 1.2 Вы можете загружать данные в формате JSON, расположенные на другом домене. Пример загрузки фотографий с тэгом cat с Flickr JSONP API.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

jQuery.getScript( url, [callback] ) – загружает и выполняет JavaScript файлы, используя GET запрос. Начиная с версии jQuery 1.2 Вы можете загружать и выполнять JavaScript файлы с любого домена.

Вот пример:

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Мы загрузили и можем выполнить файл jquery.color.js – официальный jQuery Color Animation плагин.

jQuery.ajax( options ) – загружает страницу используя HTTP запрос. $.ajax() принимает один аргумент – объект, состоящий из пар ключ/значение, которые использует, чтобы инициализировать и обработать ajax-запрос. Ниже приведен список возможных значений.

Использование именно этой вспомогательной функции считается хорошим стилем, поскольку все остальные функции ($.get, $.post и т.п.) в конечном итоге используют именно $.ajax(options).

async – по умолчанию все запросы выполняются в асинхронном режиме (значение true). Если необходимо выполнить синхронный запрос, следует установить значение false для этой опции. Помните, что синхронный запрос может временно заблокировать браузер, запретив любые действия во время выполнения запроса.

beforeSend – может содержать функцию, которая должна быть вызвана до передачи запроса. beforeSend – это Ajax Event (события рассмотрены в другой статье).

cache – опция добавлена в jQuery 1.2. По умолчанию – true. Если установить в false, запрашиваемая страница не будет кэшироваться браузером.

complete – определяет функцию, которая будет вызвана по окончанию запроса (успешного и ошибочного выполнения). Принимает два аргумента: объект XMLHttpRequest и строку, описывающую «успешность» запроса. complete – это Ajax Event (события рассмотрены в другой статье).

contentType – при передаче данных серверу сообщает content-type. По умолчанию – application/x-www-form-urlencoded.

data – данные, передаваемые на сервер. Могут быть объектом или строкой. Конвертируются в строку запроса, если уже не представляют собой строку. Добавляются в URL GET-запроса. Если используется объект, он должен представлять собой пары ключ/значение. Если значения представлены в виде массива, jQuery сериализует значения с некоторым ключом. Например: {foo:["bar1", "bar2"]} будет представлено как «&foo=bar1&foo=bar2″.

dataType – строка, описывает тип данных, которые ожидаются в качестве ответа сервера. Если не определена, то jQuery сам попытается определить тип, основываясь на MIME-типе ответа сервера. Доступные типы:
- xml: вернет XML документ, который может быть обработан через jQuery.
- html: вернет HTML как plain text.
- script: расценивает ответ как JavaScript и возвращает его как plain text.
- json: расценивает ответ как данные в формате JSON и возвращает JavaScript объект.
- jsonp: загружает данные в формате JSON используя JSONP. Необходимо дополнительно добавить «?callback=?» в конец строки запроса в URL, чтобы определить вызов. (Добавлено в jQuery 1.2).
- text: строка plain text.

error – определяет функцию, которая будет вызвана в случае неуспешного выполнения запроса.

global – true или false. Вызывать или нет глобальные обработчики событий Ajax для этого запроса. Может быть использована для контроля различных Ajax событий. По умолчанию – true.

ifModified – запрос будет успешным только в случае, если данные ответа изменились со времени последнего запроса. По умолчанию – false.

processData – по умолчанию true. В опции data данные представлены в виде объекта, который преобразуется в строку запроса, подходящую для content-type по умолчанию – «application/x-www-form-urlencoded». Если необходимо иное, установите опцию processData в false.

success – указывается функция, которая будет вызвана в случае успешного завершения запроса. Функция принимает два аргумента: данные, возвращенные с сервера и отформатированные с учетом параметра dataType и строка, описывающая статус ответа.

timeout – устанавливает локальный тайм-аут для запроса в миллисекундах. Отменяет глобальный тайм-аут для этого запроса, если тот определен через $.ajaxSetup.

type – тип запроса, POST или GET. По умолчанию установлен GET. Типы запроса PUT или DELETE тоже могут быть использованы, но они поддерживаются не всеми браузерами.

url – просто url запроса.

В общем расслабьтесь и поиграйте пока, а все пояснения потом, когда отдохнете.

Для того, чтобы сделать эту игрушку на своем сайте необходимо будет скачать библиотеку jQuery и плагин jqPuzzle.

В примере, исходный код которого Вы можете скачать на моем сайте, плагин jqPuzzle уже есть.

В раздел HEAD страницы надо файлов javascript, вот так:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jqpuzzle.js"></script>

и, если Вы используете не пример с моего сайта Вам надо будет подключить файл стилей (в моем примере стили включены в страницу).

<link rel="stylesheet" type="text/css" href="jquery.jqpuzzle.css" />

Дальнейшая настройка возможна тремя различными способами:
Способ первый, самый простой.
Просто добавляем на страницу понравившуюся картинку

<img src="image.jpg" alt="Моя картинка" class="jqPuzzle" />

и указываем имя класса class=»jqPuzzle». Это все! Пятнашки будут работать! Правда все настройки будут установлены по умолчанию и Вам придется довольствоваться надписями на кнопках на английском языке.

Способ второй, настройка с использованием CSS микроформатов.
Этот способ позволит настроить наиболее важные возможности. По сути, Вы просто добавляете второе (дополнительное) имя класса к уже существующему имени в тэге IMG, соблюдая следующий синтаксис:

jqp[-LANGUAGE]-rROWS-cCOLS[-hHOLE][-sSHUFFLE_ROUNDS][-FLAGS]

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

LANGUAGE: код языка. По умолчанию – английский (en). Доступные языки – fr, de, pt и я дописал для русского – ru (это если использовать исходный код с моего сайта).
ROWS: количество строк (от 3 до 9)
COLS: количество столбцов (от 3 до 9)
HOLE: позиция свободного места (от 1 до ROWS*COLS). По умолчанию – последняя позиция, в правом нижнем углу.
SHUFFLE ROUNDS: количество циклов перемешивания. По умолчанию установлено 3.
FLAGS: дополнительные опции с помощью которых можно настроить вид игрушки при загрузке страницы (перечислены ниже). Можно использовать любое количество флагов, в любом порядке.
S: картинка будет перемешана при загрузке страницы.
N: при загрузке цифры будут скрыты.
A: скрывает кнопку «Перемешать».
B: скрывает кнопку «Оригинал».
C: скрывает кнопку «Цифры».
D: скрывает количество перемещений.
E: скрывает количество секунд.

Несколько примеров, чтобы стало совсем понятно.

Пример 1: 3 строки, 5 колонок, «дырка» в позиции 5.

<img src="image.jpg" alt="Моя картинка" class="jqPuzzle jqp-r3-c5-h5" />

Пример 2: язык – немецкий, 5 строк, 5 колонок.

<img src="image.jpg" alt="Моя картинка" class="jqPuzzle jqp-de-r5-c5" />

Пример 3: язык – русский, 3 строки, 3 колонки, «дырка» в позиции 5, загружается со скрытыми цифрами и не отображается количество перемещений и время.

<img src="image.jpg" alt="Моя картинка" class="jqPuzzle jqp-ru-r3-c3-h5-NDE" />

думаю, что смысл здесь вполне понятен.

Способ третий, использование синтаксиса jQuery.

<script type="text/javascript">
    $(document).ready(function() {
        $("img").jqPuzzle();
    });
</script>

это простейший пример, с настройками по умолчанию, который сделает пятнашки из всех тэгов img на странице. Понятно, что это для примера, реально Вы можете использовать любой селектор. Вообще же jqPuzzle() может принимать два аргумента, первый из которых содержит настройки, а второй – надписи на кнопках. Выглядеть это может вот так:

<script type="text/javascript">
$(document).ready(function(){
  var myTexts = {
    shuffleLabel: "Перемешать",
    toggleOriginalLabel: "Оригинал",
    toggleNumbersLabel: "Цифры",
    confirmShuffleMessage: "Перемешать?",
    movesLabel: "перемещений",
    secondsLabel: "секунд"
  }
  var settings = {
    rows: 4,
    cols: 4,
    hole: 16,
    shuffle: false,
    numbers: true,
    language: en
  }
  $(".jqPuzzle").jqPuzzle(settings, myTexts);
});
</script>

Что касается стилевого оформления – можно подправить все на свой вкус и цвет, естественно не трогая названий классов.

Согласитесь, прикольная игрушка?

Для начала небольшой пример, который продемонстрирует, как такие подсказки могут выглядеть. Для примера выбраны обычная ссылка – элемент а и элемент input.

Пожалуйста, примите во внимание, что пример мне приходится демонстрировать во фрейме.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Файлы необходимые для реализации подключаем в раздел HEAD, их всего три – это сама библиотека jQuery, файл jquery.dimensions.js и файл для работы с подсказками jquery.tooltip.js

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.tooltip.js"></script>

Дальше немного посмотрим на таблицу стилей, вернее на ту ее часть, где мы можем оформить нашу всплывающую подсказку.

#tooltip {
  position: absolute;
  z-index: 3000;
  width:250px;
  border: 1px solid #269;
  background-color: #48b;
  padding: 0;
  opacity: 0.85;
  color:#fff;
}
#tooltip h3 {
  background-color: #269;
  padding-left:5px;
  font-weight:bold;
  font-size:1.4em;
}
#tooltip div {
  padding-left:5px;
  padding-right:5px;
}

#tooltip – это и есть подсказка. Мы задаем абсолютное позиционирование, изымая таким образом подсказку из общего потока, а свойству z-index задаем заведомо большое значение, чтобы расположить подсказку «выше» элементов страницы. Дальше ничего сложного нет вообще нет. #tooltip h3 – это заголовок подсказки, в элементе #tooltip div – текст подсказки. Вообще здесь важно только сохранить название идентификатора #tooltip, все остальное – на Ваш вкус.

Дальше приведу пример кода вызова наших всплывающих подсказок.

<script type="text/javascript">
$(document).ready(function(){
  $("a, input").tooltip({
    track: true,
    delay: 100,
    showBody: "::",
    opacity: 0.85
  });
});
</script>

Указываем элементы a и input в качестве элементов, для которых будут вызываться всплывающие подсказки. Но это еще не все. Необходимо, чтобы эти элементы имели атрибут title. Именно его значение используется для формирования подсказки.

Обратите внимание на опцию showBody. В ней можно указать разделитель. Часть до разделителя будет показана в заголовке подсказки, оставшаяся часть в теле подсказки.
Опция track: если установлена в true – подсказка будет «привязана» к указателю мыши.
delay – отсрочка появления подсказки в миллисекундах, по умолчанию установлено значение 250.
opacity: 0.85 – прозрачность (ну конечно не для IE).

Я как всегда привел лишь несколько из возможных опций, список их несколько шире. Найти полный перечень можно на сайте разработчиков.

Испытайте этот небольшой пример, а затем мы разберем как это сделано.

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

В раздел HEAD понадобится подключить всего два файла: библиотеку jQuery – jquery-1.2.1.js и файл ui.tablesorter.js

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/ui.tablesorter.js"></script>

В исходном коде примера Вы сможете посмотреть стилевую таблицу, отвечающую за отображение календаря и при необходимости отредактировать ее под свой дизайн. Эта часть кода выделена комментариями /* Стили для таблицы */.

HTML-код не представляет собой ничего интересного – это обычная таблица. Обращу внимание разве что на необходимость использования тэгов thead и tbody.

И наконец приведу очень простой код, который будет вызывать UI Tablesorter:

<script type="text/javascript">
$(document).ready(function(){
  $("#example").tablesorter({
	widgets: ["zebra"],
	sortList:[[1,0]]
  });
});
</script>

Таблица с идентификатором #example будет сортируемой. Большинство опций сортировки задано по умолчанию в самом файле ui.tablesorter.js, но мы легко можем их переопределить.
widgets: ["zebra"] – используем «фирменный» виджет, чтобы чередовать цвет строк в таблице.
sortList:[[1,0]] – задаем сортировку по умолчанию (при загрузке). В этом примере – сортировка второго столбца по возрастанию (первая цифра – порядковый номер столбца, вторая порядок сортировки, где 0 – по возрастанию, 1 – по убыванию). Здесь можно задавать сортировку и по нескольким столбцам сразу. Например: sortList:[[1,0], [0,1]] – сначала второй столбец сортируется по возрастанию, а затем первый – по убыванию…

Приведу еще пару полезных опций.
sortMultisortKey – по умолчанию задано значение shiftKey, т.е. щелкая мышью по заголовку столбца при нажатой клавише Shift можно выполнять сортировку по нескольким столбцам. Естественно клавишу можно переопределить. Например так: sortMultiSortKey: «ctrlKey». Теперь можно работать через клавишу Ctrl.
headers – с помощью этой опции можно запретить сортировку по отдельным столбцам. Например: headers: { 4: { sorter: false} } запретит сортировку пятого столбца.

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