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

19.1.1. Функция jQuery()

19.1.1. Функция jQuery()

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

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

При втором способе вызова функции $() передается объект Element, Document или Window. Подобный вызов просто обертывает элемент, документ или окно объектом jQuery и возвращает его. Это дает возможность манипулировать элементом с помощью методов объекта jQuery вместо низкоуровневых методов модели DOM. Например, в программах, использующих библиотеку jQuery, часто можно встретить вызов $(document) или $(this). Объекты jQuery могут представлять множество элементов документа, а кроме того, функции $() можно передавать массив элементов. В этом случае возвращаемый объект jQuery будет представлять множество элементов, имевшихся в массиве.

Библиотека jQuery является свободно распространяемым программным обеспечением. Ее можно загрузить с сайта http:_t//jquery.com. Получив библиотеку, вы сможете подключать ее к своим веб-страницам с помощью элемента <script>, как показано ниже:

<script src= "jquery-1.4.2.min.js"></script>

Слово «min» в имени файла выше указывает, что используется минимизированная версия библиотеки, из которой были удалены комментарии и лишние пробелы, а внутренние идентификаторы были заменены более короткими именами.

Другой способ задействовать библиотеку jQuery в своих веб-приложениях заключается в использовании сети распространения библиотеки, для чего достаточно указать любой из следующих URL-адресов:

http://code.jqueгу.com/jquery-1.4.2.min.js

http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js

http://ajax.googleapis.eom/ajax/libs/jquery/1.4.2/jquery.min.js

В этой главе описывается библиотека jQuery версии 1.4. Если вы пользуетесь другой версией, замените номер версии «1.4.2» в URL-адресах выше на требуемый вам.[54]

Если вы пользуетесь сетью распространения Google CDN, вы можете указать номер версии «1.4», чтобы получить самую свежую версию в ветке 1.4.x, или просто «1», чтобы получить самую свежую версию ниже 2.0. Основное преимущество использования подобных широко известных адресов состоит в том, что благодаря огромной популярности jQuery посетители вашего веб-сайта наверняка будут иметь копию библиотеки в кэше своих броузеров, и веб-приложению не придется тратить дополнительное время на ее загрузку.

При третьем способе вызова функции $() передается строка с разметкой 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, регистрирует обработчики, которые вызываются, когда дерево DOM будет готово к выполнению операций, а также служит пространством имен библиотеки jQuery. Я обычно использую имя $(). Поскольку она служит пространством имен, функция jQuery может также называться «глобальным объектом jQuery», но очень важно не путать ее с «объектом jQuery».

«объект jQuery»

Объект jQuery - это объект, возвращаемый функцией jQuery. Объект jQuery представляет множество элементов документа и может также называться «результатом функции jQuery», «множеством jQuery» или «обернутым набором».

«выбранные элементы»

Когда функции jQuery передается CSS-селектор, она возвращает объект jQuery, представляющий множество элементов документа, соответствующих этому селектору. При описании методов объекта jQuery я часто буду употреблять фразу «выбранные элементы», ссылаясь на элементы множества. Например, при описании метода attr() я мог бы сказать: «метод attr() устанавливает HTML-атрибуты выбранных элементов». Вместо более точной, но трудно читаемой фразы: «метод attr() устанавливает HTML-атрибуты элементов в объекте jQuery, относительно которого он был вызван». Обратите внимание, что слово «выбранных» относится к CSS-селектору и не имеет никакого отношения к элементам, выбираемым пользователем.

«функция библиотеки jQuery»

Функция библиотеки jQuery - это функция, такая как jQuery.noConflict(), которая определена в пространстве имен функции jQuery. Функции библиотеки jQuery могут также упоминаться как «статические методы».

«метод jQuery»

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

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

// Вызвать функцию each() библиотеки jQuery, чтобы вызвать функцию f
// для каждого элемента массива а
$.each(a,f);
// Вызвать функцию jQuery(), чтобы получить объект jQuery, представляющий
// все элементы <а> в документе. Затем вызвать метод each() этого объекта jQuery,
// чтобы вызвать функцию f для каждого выбранного элемента.
$("a").each(f);

В официальной документации по библиотеке jQuery, которую можно найти на сайте http://jquery.comj такие имена, как $.each, используются для ссылки на функции библиотеки jQuery, а такие имена, как .each (с точкой, но без знака доллара), - для ссылки на методы объекта jQuery. Вместо них в этой книге я буду использовать термины «функция» и «метод». Что именно подразумевается, обычно будет достаточно очевидно из контекста обсуждения.

Оглавление книги