. Подобный вызов просто обертывает элемент, документ или окно объектом
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 будет готово, она будет вызвана немедленно, перед тем как
$
вернет управление.
Кроме того, библиотека jQuery использует функцию
jQuery
как собственное пространство имен и определяет в нем множество вспомогательных функций и свойств. Одной из таких вспомогательных функций является функция
jQuery.noConflict
, упоминавшаяся выше. В числе других функций общего назначения можно назвать функцию
jQuery.each
, предназначенную для выполнения итераций,
jQuery.parseJSON
– для синтаксического анализа данных в формате JSON. Перечень вспомогательных функций общего назначения приводится в разделе 19.7, а другие вспомогательные функции из библиотеки jQuery описываются на протяжении всей главы.
Терминология jQuery
Давайте остановимся, чтобы определить некоторые важные термины, которые будут встречаться на протяжении этой главы:
«функция jQuery»
Функция jQuery - это значение
jQuery
или $. Эта функция создает объекты
jQuery
, регистрирует обработчики, которые вызываются, когда дерево DOM будет готово к выполнению операций, а также служит пространством имен библиотеки jQuery. Я обычно использую имя
$
. Поскольку она служит пространством имен, функция jQuery может также называться «глобальным объектом jQuery», но очень важно не путать ее с «объектом
jQuery
».
«объект jQuery»
Объект
jQuery
– это объект, возвращаемый функцией jQuery. Объект
jQuery
представляет множество элементов документа и может также называться «результатом функции jQuery», «множеством jQuery» или «обернутым набором».
«выбранные элементы»
Когда функции jQuery передается CSS-селектор, она возвращает объект
jQuery
, представляющий множество элементов документа, соответствующих этому селектору. При описании методов объекта
jQuery
я часто буду употреблять фразу «выбранные элементы», ссылаясь на элементы множества. Например, при описании метода
attr
я мог бы сказать: «метод
attr
устанавливает HTML-атрибуты выбранных элементов». Вместо более точной, но трудно читаемой фразы: «метод
attr
устанавливает HTML-атрибуты элементов в объекте
jQuery
, относительно которого он был вызван». Обратите внимание, что слово «выбранных» относится к CSS-селектору и не имеет никакого отношения к элементам, выбираемым пользователем.