ch3

В этой главе :

x

Получение

иустановка атрибутов элементов

x

Сохранение собственных данныхэлементахв

x

Манипулирование именами

классов

элементов

x

Установка

содержимого

элементов DOM

x

Сохранение

извлечение

собственных

данных

из элементов

x

Получение

доступа значениямк

элементов форм

Помните

дни ( к счастью , постепенно

уходящиепрошлоев

), когда не-

опытные

авторы

страниц

пытались

разнообразить свои страницыпо-

с

мощью всякой гадостивроде рамок , мерцающего

текста , яркого

фона ,

затрудняющего

чтение текста на странице , раздражающих

анимиро-

ванных

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

и , что , пожалуй , хуже всего , фонового

звука

сопровождающего

загрузку страницы ( служащие только

для -того , что

бы проверить

, насколько

быстро пользователь

закроет броузер )?

Много

воды

утекло техс пор . Сегодняшние

веб -разработчикидизай-

неры

многому научились

направляюти

мощь динамического

HTML

(Dynamic HTML, DHTML) на улучшение условий

для пользователя

,

а не на создание

витринраздражающимис

эффектами .

100

Глава 3. Оживляем

страницыпомощьюс

jQuery

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

возможности

настраивать

страницысоответствии

со своими

предпочтениями– возможность,

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

деревом

DOM позволяет

многим

веб -разработчикам

поражать

( но не раздра-

жать ) своих

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

Практически

ежедневно мы встречаем

веб -страницы

, которые делают

нечто , заставляющее

нас воскликнуть

: « Огоине! Яподозревал , что это

возможно

!» Ибудучи

профессионалами

( а не просто « жутко

любозна-

тельными

»), мы тут же бросаемся

изучать

исходный

код , чтобы

понять

как это делается .

Однако вместо

того чтобы писать все нужные

сценарии

вручную-

, мож

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

возможности

jQuery

по управлению

деревом, соз-DOM

давая те самые

страницы « Огоминимальным!» с

объемом

программно-

го кода . Впредыдущей

главе

мы изучили множество

способов отбора

элементов

DOM обернутыев наборы ,ваэтой главе

узнаем

мощных

инструментах

jQuery,

позволяющих

выполнять

операции

над этими

наборами , делать наши страницы

более живыми , яркими

и запомина-

ющимися .

3.1. Манипулирование

свойствами

Давайте сверим уточним

используемую

нами

терминологию .

Свойства – это встроенные

элементы

объектов

JavaScript,каждоеи

из

них имеет имязначение . Динамическая

природа

JavaScript

позволяет

создавать свойства объектов JavaScript программным

способом . ( Если

вам раньше не приходилось писать

сценарии

на языке

JavaScript, более

подробное

описание

этой концепции

вы найдетеприложениив

.)

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

JavaScriptотносятсяи

кэлемен-

там DOM. Атрибуты

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

значения

, которые

определяются

разметкой

элементов

DOM.

Взгляните

на следующий

фрагмент

HTMLразметкиоп санием

эле-

мента <img>:

<img id=”myImage” src=”image.gif” alt=”An image” class=”someClass”

title=”This is an image”/>

В этой разметке

элемента

именем тега является

последовательность

символов img, аразметка id, src, alt, class и title представляет

атрибуты

элемента , каждый из которых

состоит

из именизначения

. Разметка

этого элемента

воспринимается

интерпретируется

броузером ре, в-

3.1. Манипулирование

свойствамиатрибутами элементов

101

зультате

чего создается

объект

JavaScript,

представляющий

данный

элемент вдереве DOM. Атрибуты

собираютсясписокв

, иэтот список

сохраняется

как свойствоговорящимс

именемattributes в экземпляре

элемента

DOM. дополнениеВ

катрибутам объекту

присваивается

- мно

жество свойств , включая

те , что представляют

атрибуты .

Фактически

значения

атрибутов

сохраняются

не толькосписке вattri-

butes, но ив виде свойств .

На рис .3.1 представлена

упрощенная

схема

этого

процесса .

attributes

NodeList

id:'myImage'

id='myImage'

src:'http://localhost/image.gif'

src='image.gif'

alt:'An image'

alt='An image'

className:'someClass'

class='someClass'

title:'This is an image'

title='This is an image'

Прочие свойства

Прочие неявные атрибуты

...

или атрибуты по умолчанию

...

Условные обозначения

прямая связь

соответствие значений

Рис . 3.1.HTMLразметкатранслируется в элементы DOM, включая

атрибуты тега и свойства созданные,

из них .Соответствия между

атрибутами и свойствами элементов устанавливаются броузером .

Между

атрибутами

спискев

attributes и соответствующими им свой-

ствами

существует

динамическая

связь . Изменение

атрибута приводит

к изменению соответствующего

ему свойстван обороти

. Тем не менее

значения не всегда

могут

быть идентичны . Например , установка-

атри

бута src в значение image.gif приведет

ктому , что всвойство src будет

записан

полный абсолютный адрес URL изображения .

3.1. Манипулирование

свойствамиатрибутами элементов

103

Работать

атрибутамис

немного

сложнее , чем со свойствамиJavaScript,в

поэтому

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

для этого

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

возможности

Посмотрим , какие именно .

3.1.2. Извлечение значений

атрибутов

Как имногие

другие

методы библиотеки

jQuery,

методattr() позволя-

ет выполнять

как чтение , такзапись . Способ использования

метода

jQuery,

предназначенного для таких совершенно

разных операций ,

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

количеством типами передаваемых

ему параметров .

Параметры

name ( строка ) Имя атрибута , значение которого требуется получить .

Возвращаемое

значение

Значение атрибута первого элементасоответствующем

наборе . Еслина

бор элементов

пуст илипервогоу

элемента указанный

атрибут отсутству-

ет , возвращается значениеundefined.

Хотя обычно мы предполагаем

под атрибутами элементов

тот перечень

атрибутов , который

предопределен

спецификациями

языка разметки

HTML, тем не менее

мы можем

использовать методattr() для работы

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

атрибутами , созданными

посредством

JavaScript

или

HTMLразметки

. Для иллюстрации

такой

возможности

исправим-

эле

мент <img> из предыдущего

примера , добавивнегов собственный

атри-

бут ( выделен жирным шрифтом ):

<img id=”myImage” src=”image.gif” alt=”An image” class=”someClass”

title=”This is an image” data-custom=”some value”/>

Заметим , что свой атрибут

элемента

мы , не мудрствуя

лукавона-, так и

звали – data-custom1. Мы можем получать значение

этого

атрибута , как

если бы это был один из стандартных

атрибутов

, например

:

$(“#myImage”).attr(“data-custom”)

, пользовательский– Прим.

.перев .

1

Custom – свой , собственный

Нестандартные

атрибутыHTMLи

В HTML 4

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

нестандартных

имен

атрибутов , таких

как data-custom, несмотря

на то что это вполне

безобидный

трюк ,

приведет

ктому , что ваша разметка

будет

считаться

недопусти-

мой – она не пройдет

тестирование

при проверке

допустимости .

Помните

об этом , если такое тестирование

имеет

большоезначе

ние для вас .

В HTML 5,

напротив

, допускается

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

нестандартные

атрибуты

, при условии , что их имена будут начинатьсяпоследо-

вательности символовdata-. Любые

атрибуты

, следующие

этому

соглашению , будут считаться допустимымисоответствии требос -

ваниями

HTML 5.

Атрибуты

, не удовлетворяющие

этому -соглаше

нию , по -прежнему будут считаться недопустимыми

. ( Подробности

вы найдете

вспецификации

языка

HTML 5,

выпущенной

консор-

циумом W3C:http://www.w3.org/TR/html5/dom.html#attr-data.)

С учетом

этих нововведений HTMLв

5

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

примере префиксdata-.

Имена атрибутов разметкев

HTML

нечувствительны региструк

сим-

волов . Независимо

от того , как атрибут вродеtitle объявлен

вразмет-

ке , мы сможем

получить

доступ атрибутук

( или установить

его -зна

чение , очем мы вскоре поговорим ) при любом варианте

написания

его

имени – Title, TITLE, TiTlE или в любой

другой комбинации

регистров .

Даже вXHTML, где имена атрибутов

должны

записываться

символами

в нижнем

регистре , мы сможем

получить

доступатрибутук

при любом

варианте

написания

его имени .

Вы можете

спросить

: « Зачем

вообще

иметь

делоатрибутамис

, если -до

ступ ксвойствам

так прост ( как показанопредыдущемв

разделе )?»

Ответ на этот вопрос

заключаетсятом в, что методattr() – это не просто

обертка вокруг

методов

JavaScriptgetAttribute() и setAttribute(). В до-

полнение

квозможности

получить

доступнаборук

атрибутов

элемента

библиотека

jQuery

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

доступнекоторым

наиболее

часто

используемым

свойствам

, традиционно

служившим

источником-

раз

дражения

для авторов

страниц

из -за различий

между

броузерами .

Набор нормализованных

имен

атрибутов

приведентабл .3в.1.

Нормализованное

имяИсходное имя

cellspacing

cellSpacing

class

className

colspan

colSpan

3.1. Манипулирование свойствамиатрибутами элементов

105

Нормализованное

имяИсходное имя

cssFloat

styleFloat для IE, cssFloat для остальных

броузеров

float

styleFloat для IE, cssFloat для остальных

броузеров

for

htmlFor

frameborder

frame Иorder

maxlength

maxLength

readonly

readOnly

rowspan

rowSpan

styleFloat

styleFloat для IE, cssFloat для остальных

броузеров

tabindex

tabIndex

usemap

useMap

3.1.3. Установка

значений

атрибутов

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

два способа

установки

значений

атрибутов-

эле

ментов вобернутом наборе . Начнемнаиболеес

простого

способа , позво-

ляющего

установить

значение

единственного

атрибута

во всехэлемен

тах обернутого

набора

сразу . Синтаксис

этой операции

:

Синтаксис

метода

attr

attr(name,value)

Устанавливает

значениеvalue атрибута name для всех элементов обернув -

том наборе .

Параметры

name

(строка ) Имя атрибута

, значение

которого требуется

устано-

вить .

value

(любое значение | функция

) Определяет

значение

атрибута

. Это

может

быть выражение

JavaScript,

результатом

которого-

явля

ется некоторое

значение или функция

. Функция

вызывается

для каждого

элемента

набора . Ей передается

индекс

элемента

и текущее значение

атрибута . Значение

, возвращаемое

-функци

ей , становится

значением

атрибута .

Возвращаемое

значение

Обернутый набор .

106

Глава 3. Оживляем

страницыпомощьюс

jQuery

На первый

взгляд этот вариант методаattr()

очень прост , но он доста-

точно сложен применениив .

В наиболее

типичном

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

этого метода , когдапара

метр value является

выражением

JavaScript,

результатом

которого-

яв

ляется некоторое

значение

( включая

массив ), вычисленное значение

выражения

присваивается

указанному

атрибуту .

Гораздо интереснее

случай , когда параметрvalue является

ссылкой на

функцию . Втакой

ситуации

функция

вызывается каждогодля

элемен-

та в обернутом

наборе , возвращаемоеи

ею значение

устанавливается

как значение

атрибута

. При вызове

функции

передаются

два -параме

тра : впервом передается

индекс

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

( отсчет

начинается

с нуля ), аво втором – текущее значение

атрибута . Кроме

того , через

контекст ( ссылкаthis) функции передается

сам элемент , что позволя-

ет функции

подстраиваться

под каждый

конкретный элементв этом, и

главное достоинство

такого

способа

применения

функций .

Рассмотрим

инструкцию

:

Такой прием подходит , если значение

устанавливаемого

атрибута-

за

висит от других

характеристик

этого

конкретного

элементаисходное

значение необходимо

для вычисления

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

или существуют

какие -то иные

причины

устанавливать

значения

по отдельности .

Второй вариант

методаattr() удобно использовать

, когда

требуется

установить значения

сразу нескольких

атрибутов .

Синтаксис

метода attr

attr(attributes)

Устанавливает

значения

атрибутов , передаваемые

функцвиде объв-

екта , для всех элементовобернутомв

наборе .

3.1. Манипулирование

свойствамиатрибутами элементов

107

Данный

формат вызова позволяет легкобыстрои

установить

множе-

ство атрибутов

для всех элементовобернутомв

наборе . Параметром-

мо

жет быть ссылка на любой

объект , обычно– объект -литерал , свойства

которого

определяют имена значения

устанавливаемых

атрибутов .

Например :

$(‘input’).attr(

{ value: ‘’, title: ‘Please enter a value’ }

);

Эта инструкция

запишет

пустую

строкуатрибутв value элементов <in-

put> и строку Please enter a value в атрибут title.

Заметим

, что если значением

какого -либо

свойства

объекта , передавае-

мого в параметре value, является ссылка на функцию

, она будет - дей

ствовать , как описано

выше– функция,

будет

вызвана

для каждого-

от

дельного

элемента соответствующем

наборе .

Внимание

Броузер

Internet Explorerне позволяет

изменять атрибутname или type эле-

ментов <input>. Если потребуется

изменить

значение

атрибутаname или type

элементов <input> в Internet Explorer,

вы должны

будете

заменить

имеющий-

ся элемент новым , нужнымс

именем

или требуемого

типа . То же относится

к атрибуту value элементов <input> с типом file или password.

Теперь мы знаем , как получать устанавливать

значения атрибутов .

Но что , если нам потребуется

вообще

избавиться

от них ?

3.1.4. Удалениеатрибутов

Для удаления

атрибута

элемента

DOM библиотека

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

ет методremoveAttr(), который

имеет

следующий

синтаксис

:

Синтаксис

метода

removeAttr

removeAttr(name)

Удаляет

атрибут , заданный

параметромname, у всех элементов набора .

Параметры

name

(строка ) Имя удаляемого

атрибута .

108

Глава 3. Оживляем страницыпомощьюс

jQuery

Пример

1: принудительное

открытие ссылок

в новом

окне броузера

Допустим

, что нам необходимо , чтобы каждая ссылка , указывающая

на внешний сайт , открываласьновом окне . Эта задача становитсядо

статочно

тривиальной , когда

имеется полный контроль над разметкой

и есть возможность добавить

атрибутtarget, например :

разметкой ? Мы можем иметь делосистемой управления

содержимым

(Content Management System, CMS)

или, гдеwikiконечный пользова-

тель может

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

то , что он добавит атрибут target=”_blank” во все внешние

ссылки ? Для

начала

попробуем

точно

определить

, что нам нужно . Мы хотим , чтобы

каждая

ссылка , значение

атрибутаhref которой начинается последо-

вательности

символовhttp://, открывалась новом окне ( для чего надо

установить

атрибутtarget в значение _blank).

Решить

эту задачу

позволит описанныйэтомв разделе прием :

Сначала

выбираются

все ссылкикоторых, у

значение атрибутаhref на-

чинается

со строкиhttp:// ( указание на то , что ссылка

является -внеш

ней ). Затем их атрибутtarget устанавливается значениев

_blank. Зада-

ние выполнено всего

одной инструкцией

jQuery!

Пример 2: решение

страшной

проблемы

двойной отправки

Другой яркий

пример

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

возможностей jQuery

для работы

с атрибутами – решение

наболевшего

для всех веб -приложений - вопро

са , « страшной

проблемы

двойной

отправки(Dreaded» Double Submit

Problem). Для веб -приложений типична ситуация : если отправка-

фор

мы задерживается до нескольких

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

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

щелкает

по кнопке

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

неприятности

для программного

кода на стороне сервера .

Чтобы решить

эту проблему на стороне клиента

( при этом программ-

ный код , выполняющийся

на стороне сервера , по -прежнему

должен

предпринимать

все меры

предосторожности ), мы переопределим-

об