, и возвращает этот же объект, благодаря чему метод
show
может быть вызван в этой же компактной «цепочке вызовов методов». Этот прием составления цепочек является весьма характерным при использовании библиотеки jQuery. В качестве другого примера ниже демонстрируется инструкция, выполняющая поиск всех элементов, имеющих CSS-класс «clicktohide», и регистрирующая обработчик события в каждом из них. Этот обработчик вызывается, когда пользователь щелкает на элементе и заставляет элемент медленно «выезжать» за границы окна вверх и скрываться:
) является наиболее важной в библиотеке jQuery. Однако она существенно перегружена и может быть вызвана четырьмя разными способами.
Первый и наиболее типичный способ вызова
$
предусматривает передачу ей CSS-селектора (строки). При вызове таким способом она возвращает множество элементов из текущего документа, соответствующих селектору. Библиотека в значительной степени поддерживает синтаксис селекторов CSS3 плюс некоторые собственные расширения. Более подробное описание синтаксиса селекторов jQuery приводится в разделе 19.8.1. Если во втором аргументе передать функции
$
элемент или объект
jQuery
, она вернет только элементы-потомки указанного элемента или элементов, соответствующие селектору. Этот необязательный второй аргумент определяет начальную точку (или точки) выполнения запроса и часто называется контекстом.
При втором способе вызова функции
$
передается объект
Element, Document
или
Window
. Подобный вызов просто обертывает элемент, документ или окно объектом
jQuery
и возвращает его. Это дает возможность манипулировать элементом с помощью методов объекта
jQuery
вместо низкоуровневых методов модели DOM. Например, в программах, использующих библиотеку jQuery, часто можно встретить вызов
$(document)
или
$(this).
Объекты
jQuery
могут представлять множество элементов документа, а кроме того, функции
$
можно передавать массив элементов. В этом случае возвращаемый объект
jQuery
будет представлять множество элементов, имевшихся в массиве.
Получение библиотеки jQuery
Библиотека jQuery является свободно распространяемым программным обеспечением. Ее можно загрузить с сайта http:t//jquery.com. Получив библиотеку, вы сможете подключать ее к своим веб-страницам с помощью элемента <script>, как показано ниже:
<script src= "jquery-1.4.2.min.js"></script>
Слово «min» в имени файла выше указывает, что используется минимизированная версия библиотеки, из которой были удалены комментарии и лишние пробелы, а внутренние идентификаторы были заменены более короткими именами.
Другой способ задействовать библиотеку jQuery в своих веб-приложениях заключается в использовании сети распространения библиотеки, для чего достаточно указать любой из следующих URL-адресов:
В этой главе описывается библиотека jQuery версии 1.4. Если вы пользуетесь другой версией, замените номер версии «1.4.2» в URL-адресах выше на требуемый вам. [54]
Если вы пользуетесь сетью распространения Google CDN, вы можете указать номер версии «1.4», чтобы получить самую свежую версию в ветке 1.4.x, или просто «1», чтобы получить самую свежую версию ниже 2.0. Основное преимущество использования подобных широко известных адресов состоит в том, что благодаря огромной популярности jQuery посетители вашего веб-сайта наверняка будут иметь копию библиотеки в кэше своих броузеров, и веб-приложению не придется тратить дополнительное время на ее загрузку.
54
На момент написания этой главы текущей версией библиотеки jQuery была 1.4.2. Когда книга готовилась к печати, была выпущена версия jQuery 1.5. Изменения в jQuery 1.5 в основном касаются механизма поддержки архитектуры Ajax и будут упоминаться в разделе 19.6.
передается строка с разметкой HTML. В этом случае библиотека jQuery
создаст HTML-элемент или элементы, определяемые этой разметкой, и вернет представляющий их объект
jQuery
. Библиотека jQuery не вставляет вновь созданные элементы в документ, но методы объекта
jQuery
, описываемые в разделе 19.3, позволяют легко вставить их в любое место. Обратите внимание, что таким образом функции
$
нельзя передать простой текст, так как в этом случае jQuery решит, что вы передали CSS-селектор. При таком способе вызова строка, передаваемая функции
$
, должна включать хотя бы один HTML-тег в угловых скобках.
При вызове третьим способом функция
$
может принимать необязательный второй аргумент. В нем можно передать объект
Document
, чтобы указать документ, которым должны быть связаны элементы. (Если, к примеру, предполагается, что создаваемые элементы будут вставлены в элемент
<iframe>,
необходимо явно указать объект документа этого фрейма.) Или передать объект во втором аргументе. В этом случае предполагается, что свойства объекта определяют имена и значения HTML-атрибутов, которые должны быть установлены во вновь созданном элементе. Но если объект будет содержать свойства с такими именами, как «css», «html», «text», «width», «height», «offset», «val» или «data», или свойства с именами, совпадающими с именами методов регистрации обработчиков событий в библиотеке jQuery, она будет вызывать методы с этими именами для вновь созданного элемента и передавать им значения соответствующих свойств. (Методы, такие как
css, html
и
text
рассматриваются в разделе 19.2, а методы регистрации обработчиков событий - в разделе 19.4). Например:
var img = $("<img/>", // Создать новый элемент <img>
{ src:url, //с этим HTML-атрибутом,
css: {borderWidth:5}, // этим CSS-стилем
click: handleClick // и этим обработчиком события.
}):
Наконец, при четвертом способе вызова функции
$
передается функция. В этом случае указанная вами функция будет вызвана, когда документ будет полностью загружен и дерево DOM документа будет готово к выполнению операций. Это версия функции
onLoad
, представленной в примере 13.5, реализованная в библиотеке jQuery. Очень часто можно встретить jQuery-программы, реализованные в виде анонимных функций, объявляемых в вызове функции
jQuery
:
jQuery(function { // Будет вызвана по окончании загрузки документа
// Здесь находится весь программный код, использующий jQuery
}):
Иногда можно увидеть вызов $(f), оформленный в старом и более явном стиле:
$(document).ready(f).
Функция, передаваемая
jQuery
, будет вызвана со ссылкой
this
, указывающей на объект
document
, и функцией jQuery в качестве единственного аргумента. Это означает, что вы можете удалить глобальное определение функции $ и по-прежнему использовать этот удобный псевдоним локально, как показано ниже:
jQuery.noConflict; // Восстановить оригинальное значение $
jQuery(function($) { // Использовать $ как локальный псевдоним функции jQuery
// Здесь находится весь программный код, использующий jQuery
});
Функции, зарегистрированные с помощью
$
, будут вызваны библиотекой jQuery, когда будет возбуждено событие «DOMContentLoaded» (раздел 13.3.4) или, если это событие не поддерживается, когда будет возбуждено событие «load». То есть когда документ будет загружен и полностью разобран, но внешние ресурсы, такие как изображения, еще могут быть не загружены. Если функцию передать в вызов
$
после того, как дерево DOM будет готово, она будет вызвана немедленно, перед тем как