jquery1

1.3. Основы jQuery

45

var trimmed = $.trim(someString);

Если префикс$. кажется

вам странным , запомните

,$что– это обыч-

ный идентификатор

JavaScript,

такой

же , каклюбойи

другой . Вызов

той же функции использованием

идентификатораjQuery выглядит

бо-

лее знакомым

:

var trimmed = jQuery.trim(someString);

Становится

совершенно

очевидно

, что функцияtrim() принадлежит

пространству

именjQuery или его псевдониму$.

Примечание

вспомогательнымифункц ями, но со-

В документации

эти элементы

называются

вершенно

очевидно

,

чтодействительности

они являютсяметодами функции

$() (да , вJavaScript функции могут иметь собственные

методы ). Не углубляясь

в технические

детали , мы также

будем называть

эти вспомогательнымиметоды

функциями, чтобы терминология

соответствовала

электронной

документации .

Одну такую

вспомогательную

функцию

, позволяющую

расширять

jQuery,

мы рассмотрим разделев

1.3.5, адругую , позволяющую

jQuery

мирно

сосуществовать другимис

клиентскими

библиотеками– в раз, -

деле 1.3.6.

Но для начала рассмотрим

еще один важный

аспектфунк

ции $().

1.3.3. Обработчик

готовности

документа

Методика

ненавязчивого

JavaScript

позволяет

отделить

реализацию

поведения

элементов

от разметки

документа , поэтому

мы будем-

ма

нипулировать

элементами

страницы

за пределами

разметки

,-создаю

щей эти элементы . Для этого нам нужен механизм

, позволяющий-

до

ждаться окончания

загрузки

элементов

DOM страницы

, чтобы

затем

выполнить необходимые операциипримере. В

сгруппой

радиокнопок

мы должны

дождаться

момента , когда

будет загружена

вся страница ,

и только потом

выполнить

необходимые

операции .

Традиционно

для этих целей

используется

обработчикonload объекта

window, который выполняет инструкции

после того , как страница

будет

загружена

целиком . Обычно

он вызывается

так :

window.onload = function() {

//

выполнитьтребуемые операции

};

В результате

программный

код будет

вызван толькопосле того , как до-

кумент

будет

полностью

загруженсожалению. К

, броузер

задерживает

выполнение

обработчикаonload не только

до момента создания

полного

дерева

DOM,

но также ждет , пока будут

загружены все изображения

и другие внешние

ресурсы

страница

отобразится

окнев

броузера .

В результате

посетитель

может заметить

задержку

между

теммомен

46

Глава 1. Введение jQueryв

том , когда он впервые

увидит

страницутем, и, когда

будет выполнен

сценарий onload.

Хуже того , если изображение

или другой

ресурс

загружается - достаточ

но долго , посетитель

вынужден

ждать

окончания

его загрузки , прежде

чем дополнительные

особенности

поведения

элементов

станутдоступ

ными . Во многих

реальных

применениях

это могло

бы обречь - идею не

навязчивого

JavaScript

на неудачу .

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

запуск

сценариев

, обеспечивающих

дополнительные

особенности поведения ,

только до момента

окончания

загрузки

структуры

документа , когда

HTMLкод страницы

будет

преобразован

броузеромдерево DOM. До-

биться этого независимым

от типа броузера

способом

достаточно-

слож

но , но библиотека

jQuery

предоставляет

простой

способ

запуска-

про

граммного

кода

сразу

после загрузки

дерева

DOM ( но до загрузки-

внеш

них изображений

). Формальный

синтаксис

определения

такого

кода ( и

примера сокрытия

элементов

):

jQuery(document).ready(function() {

$(“div.notLongForThisWorld”).hide();

});

Сначала производится

обертывание

экземпляраdocument документа

в функцию jQuery(), а затем

применяется

методready(), которому

пере-

дается функция

для исполнения

после

того , как документ

станет-

до

ступным

для манипуляций .

Этот синтаксис

мы назвалиформальным потому,

что гораздо

чаще - ис

пользуется

сокращенная

форма

его записи :

jQuery(function() {

$(“div.notLongForThisWorld”).hide();

});

Вызывая

функциюjQuery() или $(), мы тем самым предписываем

броу-

зеру дождаться , пока дерево

DOM ( и только

дерево DOM) будетполно

стью загружено , прежде чем выполнить

этот код . Более

тогодном, в

и том же HTMLдокументе

мы можем применять

этот прием многократ-

но , и броузер

выполнитвсе указанные

функции порядкев

следования

объявлений

. Напротив

, методика на базе обработчикаonload

объек-

та window позволяет

указать

единственную

функцию . Это ограничение

чревато трудноуловимыми

ошибками , если какой -либо подключенный

сторонний

сценарий использует

механизмonload для собственных

нужд

(что никак нельзя признать

хорошей

практикой ).

48

Глава 1. Введение jQueryв

Полный комплект

функций

манипулирования

деревом

DOM мырассмот

рим вглаве 3, где вы увидите , что jQuery

предоставляет

много функций

манипулирования

деревом

DOM, позволяющих

придать документу

желаемую структуру .

Теперь , когда вы познакомилисьбазовымс

синтаксисом

jQuery, давай-

те взглянем на одну из самых мощных

особенностей

этой библиотеки .

Функция -оберткаjQuery обеспечивает

доступ

ко многим полезным -функ

циям , которые

мы постоянно

будем

использоватьстраницахв

. Но ни

одна библиотека

не всостоянии

удовлетворить все потребности

безис

ключения . Можно даже утверждать

, что ни одна библиотека

не должна

стремиться

удовлетворить все возможные

потребности , иначе

появится

огромная неуклюжая масса программного

кода , содержащая

редко-

ис

пользуемые

функции , которые

только мешают работе !

Для удовлетворения

своих потребностей мы могли

бы писать

-собствен

ные функции , никак

не пересекающиесябиблиотекойс

jQuery. Но -, по

чувствовав вкус jQuery, вы поймете , насколько утомительны

прежние

подходы . Кроме того , расширяя

библиотеку

, мы можем использовать е

мощные особенности

частности, в

, возможность

выбора элементов .

1.3. Основы jQuery

49

$(“form#myForm input.special”).disable();

К счастью , архитектура

jQuery

позволяет

легко

расширять

имеющийся

набор функций

, расширяя

обертку , возвращаемую

вызовом$(). Рассмот-

рим базовую

идиому , позволяющую

этого достигнуть

:

$.fn.disable = function() {

return this.each(function() {

if (this.disabled == null) this.disabled = true;

});

}

Здесь много

новых синтаксических

конструкций

, но не стоит -из -за это

го сильно

волноваться

. Все встанет

на свои места , когда вы прочитаете

следующие

несколько

главэтой. С

базовой

идиомой

вы столкнетесь

еще

много раз .

Во -первых , конструкция$.fn.disable означает , что мы расширяем

оберт-

ку $ методом

сименем disable. Внутри этой функции

коллекцию

оберну-

тых элементов

DOM,

над которыми

будет

выполняться

операция-

, пред

ставляет

идентификаторthis.

Во -вторых , методeach() этой

обертки

вызывается

для

обхода

всех-

эле

ментов коллекции . Подробнее

этотподобныеи

ему методы

рассматрива-

ются вглаве 3. Внутри функции , передаваемой

методуeach(), ключевое

слово this является

ссылкой

на

конкретный

элемент

текущейDOM в

итерации

. Пусть вас не смущает

тот факт , что внутри

вложенной-

функ

ции ссылкаthis указывает

на различные

объекты . Когда

вы напишете

несколько

функций

расширения

, это станет

привычныместествени -

ным . ( Кроме того , в приложении

вы найдете

описание

особенностей-

по

ведения идентификатораthis в JavaScript.)

Для каждого элемента

выполняется

проверка , естьтекущеголи

эле-

мента атрибутdisabled, иесли такой атрибут

имеется , ему присваивает-

ся значение true. Результат

методаeach() ( обертка ) возвращается вы-

зывающую

программу

, чтобы

обеспечить

возможность

составления-

це

почек снашим новым методомdisable(), как это делают многие методы

библиотеки

jQuery.

После

этого

можно

написать

такую

инструкцию

:

$(“form#myForm input.special”).disable().addClass(“moreSpecial”);

С точки зрения

кода нашей

страницы

все выглядит

так , как если бы

наш новый

методdisable() был встроен

непосредственно библиотекув

!

Этот прием

обладает

такой

мощью , что большинство

пользователей-

, на

чинающих

изучать

jQuery,

обнаруживаютсебе вспособность

создавать

небольшие

расширения

для

jQuery,

как только

начинают применять

Возможно , вам уже приходилось

встречать

этот распространен-

ный способ

проверки

существования

элементов

:

if (item) {

// выполнить

операции

,

если

элемент

существует

}

else {

// выполнить

операции

,

если

элемент

не

существует

}

В основе

этого

приема

лежит идея , случаечтов

отсутствия

элемен-

та условное

выражение

должно возвращатьfalse.

Несмотря

на то , что большинстве

случаев

этот прием

работает ,

тем не менее авторы библиотекиjQuery считают

его недостаточно

надежным

ирекомендуют

использовать

более явный

способпро

верки , как показано примерев

функции$.fn.disable:

if (item == null) ...

Это выражение

будет

возвращать

корректный

результатв случаеи

Прежде

чем углубиться тонкостив

использования

jQuery,

вы можете-

за

даться

вопросом , можно ли применять jQuery

совместнодругимис биб-

лиотеками , такими как Prototype,

ведьнихв, как известно

, тоже есть

сокращение $. Ответ на этот вопрос

вы найдетеследующемв

разделе .

1.3.6. Сочетание

jQueryдругимис

библиотеками

jQuery предоставляет

распоряжениев

программиста

набор мощных

инструментов

, способных

удовлетворить

насущные

потребности-

боль

шинства

авторов

страниц , но даже при этом иногдастраницев

требует-

ся задействовать

возможности нескольких библиотек JavaScript. Такие

ситуации

могут

возникать

, например

, во время

перевода

приложения

на использование

библиотеки jQuery

или когда

необходимо

использо-

вать внаших

страницах другую библиотеку совместноjQueryс.

Разработчики

jQuery

четко понимают потребности

пользователейсво-

в

ем сообществе

неи стремятся

блокировать

применение других

библио-

тек , создавая

все условия для обеспечения

мирного

сосуществования

jQuery сдругими

библиотеками ваших

страницах .

1.4. Итоги

51

В первую

очередь

по общепринятой

рекомендации

они стремятся-

из

бегать « загрязнения

» глобального

пространства

имен идентификатора-

ми , которые могут вызывать конфликты

не толькодругимис

библио-

теками , но , возможно ,с иименами

из ваших собственных

сценариев .

Идентификатор jQuery и его псевдоним $ – это единственные

имена ,

внедряемые вглобальное пространство имен. Определение вспомога-

тельных

функций которых,

говорилось разделев

1.3.2, как части про-

странства

именjQuery – это прекрасный

пример

такой

заботы .

Весьма

маловероятно

, чтобы какая -то другая библиотека

имела-

доста

точно веские причины объявить глобальный

идентификаторjQuery,

но здесь

вводится

иболее

очевидный

идентификатор– псевдоним $.

Другие

библиотеки

JavaScript,частностив

библиотека

Prototype, ис-

пользуют

имя$ для своих

собственных

целейпоскольку. А

применение

идентификатора $ в таких

библиотеках

является ключомихкфунк-

циональности , это чревато

серьезным конфликтом .

В этом кратком

введенииjQueryв

мы рассмотрели

множество

подгото-

вительных

сведений , чтобы вы могли легкобыстрои

приступить разк -

работке полнофункциональных

веб -приложений

следующего - поколе

ния сиспользованием

jQuery.

Библиотека

jQuery

будет

полезна

для любой страницы

, которая

должна

выполнять

какие -либо действия

помимо простейших

операций-

Java

Script, и позволит авторам страниц применять

методику

ненавязчи-

вого JavaScript.

При таком подходе поведение

элементов

отделяется от

структуры

документа , так же как CSS позволяет

отделить

информацию

о представлении

от структуры

, за счет чего улучшается

организация

страниц иувеличивается

гибкость

программного

кода .

52

Глава 1. Введение jQueryв

x

Отбора

иобертывания

элементов

DOM, участвующихоперациив

x

Исполнения

роли пространства

имен

для глобальных

вспомогатель-

ных функций

x

Создания

элементов

DOM из кода разметки HTML

x Определения

программного кода , выполняемого

после

того-, как де

рево DOM будет готовоманипуляциямк

Библиотека

jQuery

ведет

себя на странице

как добропорядочный-

граж

данин , не только минимизируя

свое вторжениеглобальноев

простран-

ство имен , но обеспечивая

возврат

официального

значения

идентифи-

катора $ в случаях , когда

это имя может

вызвать

конфликт

, что еще

сильнее уменьшает вторжениеглобальноев

пространство

имен– вслу, -

чаях , когда какая -нибудь другая

библиотека , например Prototype,-

за

действует

идентификатор$ для своих

нужд . Как вамтакое отношение

к пользователю

?

В следующих

главах мы рассмотрим все , что может

предложить

jQuery

нам как авторам полнофункциональных

интернет -приложений

для

страниц . Путешествие

, которые

мы начнемследующейв

главе , пока-

жет , как использовать

селекторы

jQuery

для идентификации - элемен

тов , над которыми

требуется выполнить

некоторые

операции .