JavaScript. Подробное руководство, 6-е издание

   response.end;
   }):

   // Запомнить объект response, чтобы в дальнейшем посылать сообщения с его помощью
   clients.push(response);
   }
  });
  // Запустить сервер на порту 8000. Чтобы подключиться к нему, используйте
  // адрес  http://localhost:8000/
  server.listen(8000);

19 Библиотека jQuery

В языке JavaScript чрезвычайно простой базовый и весьма сложный клиентский API, который к тому же отягощен многочисленными несовместимостями между броузерами. С выходом IE9 исчезли самые неприятные несовместимости, но многие программисты считают, что веб-приложения удобнее писать с использованием фреймворков или вспомогательных библиотек на языке JavaScript, упрощающих решение типичных задач и скрывающих различия между броузерами. На момент написания этих строк одной из наиболее популярных и широко используемых была библиотека jQuery. [52]

52

В число широко используемых входят также не описываемые в этой книге библиотеки Prototype, YUI и dojo. Еще большее количество библиотек можно отыскать в Интернете, выполнив поиск по фразе «JavaScript libraries».

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

Библиотека jQuery упрощает поиск элементов документа и облегчает манипулирование ими: добавление содержимого, изменение HTML-атрибутов и CSS-свойств, определение обработчиков событий и воспроизведение анимационных эффектов. Она также имеет вспомогательные функции поддержки архитектуры Ajax, позволяющие выполнять динамические HTTP-запросы, и функции общего назначения для работы с объектами и массивами.

Как следует из ее имени, основу библиотеки jQuery составляет реализация механизма запросов. Типичный запрос использует CSS-селектор, идентифицирующий множество элементов документа, и возвращает объект, представляющий эти элементы. Данный возвращаемый объект имеет множество удобных методов

для выполнения операций над всей группой выбранных элементов. Всякий раз, когда это возможно, эти методы возвращают объект, относительно которого они вызывались, что позволяет использовать прием составления цепочек из вызовов методов. Ниже перечислены особенности, которые обеспечивают широту возможностей и удобство использования библиотеки jQuery:

• Выразительный синтаксис (CSS-селекторов) для ссылок на элементы в документе

• Эффективная реализация механизма запросов, выполняющего поиск множества элементов документа, соответствующих указанному CSS-селектору

• Множество удобных методов для манипулирования множествами выбранных элементов

• Мощные приемы функционального программирования для выполнения операций сразу над всей группой элементов

• Выразительная идиома представления последовательностей операций (составление цепочек из вызовов методов)

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

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

• Как изменять структуру документа, вставляя, замещая, обертывая и удаляя элементы

• Как использовать модель событий библиотеки jQuery, совместимую со всеми броузерами

• Как с помощью jQuery воспроизводить анимационные визуальные эффекты

• Как выполнять HTTP-запросы с помощью механизма поддержки архитектуры Ajax, реализованном в библиотеке jQuery

• Вспомогательные функции jQuery

• Полный синтаксис селекторов jQuery, и как использовать расширенные методы поиска из библиотеки jQuery

• Как расширять библиотеку jQuery, создавая и используя расширения

• Библиотека jQuery UI

19.1. Основы jQuery

Библиотека jQuery определяет единственную глобальную функцию с именем jQuery. Эта функция используется настолько часто, что библиотека определяет также глобальное имя $, как сокращенный псевдоним этой функции. Эти два имени - все, что библиотека jQuery добавляет в глобальное пространство имен. [53]

53

Если Вы определяете собственное имя $ в своих сценариях или используете другую библиотеку, такую как Prototype, тоже использующую имя $, Вы можете вызвать метод JQuery.noConflict, чтобы восстановить оригинальное имя $)

Эта глобальная функция с двумя именами является центральной функцией механизма запросов в библиотеке jQuery. Например, ниже показано, как можно запросить множество всех элементов <div> в документе:

  var divs = $("div");

Эта функция возвращает множество из нуля или более элементов DOM, которое называется объектом jQuery. Обратите внимание, что jQuery является фабричной функцией, а не конструктором: она возвращает вновь созданный объект, но она используется без ключевого слова new. Объект jQuery определяет множество методов для выполнения операций над множеством элементов, которое он представляет, и большая часть главы будет посвящена описанию этих методов. Ниже приводится пример инструкции, которая отыскивает, выделяет цветом и быстро отображает все скрытые элементы <р>, имеющие класс «details»:

  $("р.details").css( "background-color", "yellow").show("fast");

Метод css оперирует объектом jQuery, возвращаемым функцией $, и возвращает этот же объект, благодаря чему метод show может быть вызван в этой же компактной «цепочке вызовов методов». Этот прием составления цепочек является весьма характерным при использовании библиотеки jQuery. В качестве другого примера ниже демонстрируется инструкция, выполняющая поиск всех элементов, имеющих CSS-класс «clicktohide», и регистрирующая обработчик события в каждом из них. Этот обработчик вызывается, когда пользователь щелкает на элементе и заставляет элемент медленно «выезжать» за границы окна вверх и скрываться:

  $(".clicktohide").click(function { $(this).slideUp("slow"); });

19.1.1. Функция jQuery

Функция jQuery (она же $) является наиболее важной в библиотеке jQuery. Однако она существенно перегружена и может быть вызвана четырьмя разными способами.

Первый и наиболее типичный способ вызова $ предусматривает передачу ей CSS-селектора (строки). При вызове таким способом она возвращает множество элементов из текущего документа, соответствующих селектору. Библиотека в значительной степени поддерживает синтаксис селекторов CSS3 плюс некоторые собственные расширения. Более подробное описание синтаксиса селекторов jQuery приводится в разделе 19.8.1. Если во втором аргументе передать функции $ элемент или объект jQuery, она вернет только элементы-потомки указанного элемента или элементов, соответствующие селектору. Этот необязательный второй аргумент определяет начальную точку (или точки) выполнения запроса и часто называется контекстом.