ch3

3.3. Установка содержимого

элемента

139

Узнав , как создавать

, обертывать , копироватьперемещатьи

элементы

,

можно заняться

вопросом

их удаления .

3.3.4. Удаление

элементов

Возможность

добавлять , перемещать или копировать

элементы

DOM

имеет очень

большое

значение

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

удалять

элементы

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

не нужны .

Очистить

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

можнопомощьюс

методаre-

move(). Его синтаксис

:

Синтаксис

метода

remove

remove(selector)

Удаляет

все элементы обернутого набора

из дерева

DOM страницы .

Параметры

selector

(строка ) Необязательный дополнительный

селектор , уточняю-

щий , какие

элементы

обернутого

набора должны

быть удалены .

Возвращаемое значение

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

Обратите внимание : как многие другие

методы

библиотеки

jQuery,

этот метод

также

возвращает

обернутый

набор . Элементы

, удаленные

из дерева DOM, по -прежнему

доступны

через этот обернутый набор ( по

этой причине

они не могут быть удалены

из памяти « сборщиком-

мусо

ра ») имогут

дальше участвоватьоперацияхв

, выполняемыхпомощьюс

методов jQuery, включаяappendTo(), prependTo(), insertBefore(), insert-

After() и других

сходных

методов .

Однако важно

отметить , что при удалении

элементовпомощьюс

метода

remove() одновременно

удаляются

все данныесобытия , ассоциирован-

ные сними . Существует

похожий

методdetach(), который также

удаля-

ет элементы

из дерева

DOM, но оставляет

нетронутыми

даннсобы-е

и

тия , ассоциированные нимис .

Синтаксис

метода

detach

detach(selector)

Удаляет все элементы

обернутого

набора

из дерева DOM страницы-

, остав

ляя нетронутыми

данныесобытия , ассоциированные нимис .

Параметры

selector (строка ) Необязательный дополнительный

селектор

, уточняю-

щий , какие элементыобернутомв

наборе

должны быть удалены .

140				Глава 3. Оживляем страницыпомощьюс			jQuery
	Возвращаемое		значение
	Обернутый набор .
Метод detach() обычно				используется	для исключения	из дерева DOM
элементов		, которые предполагается			позднее опять	вставитьдерево
DOM вместе даннымис				событиями , ассоциированныминимис .
Очистить		содержимое		элементов DOM можнопомощьюс		методаempty().
Его синтаксис			:
			Синтаксис метода empty
	empty()
	Удаляет	содержимое		всех элементов	DOMсоответствующем	наборе .

Параметры

нет

Возвращаемое значение

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

Иногда требуется не переместить элементыпросто, а скопировать их .

3.3.5. Копирование			элементов
Один из множества			способов		манипулирования			деревом –DOMкопи-
рование элементов ихс последующим							присоединениемдругимк			участ-
кам дерева DOM. Для выполнения							этой операции		библиотека		jQuery
предоставляет		удобный		методclone().
			Синтаксис метода clone
	clone(copyHandlers)
	Создает копии элементовобернутомв						наборе возвращаети		новый	оберну-
	тый набор копий . Копируются				как сами элементы			,всетаквложенныеи
	в них элементы . зависимостиВ				от значения параметраcopyHandlers также
	могут копироваться		обработчики			событий .
	Параметры
	copyHandlers	(логическое		значение		) Если параметр		имеет значениеtrue,
		вместе	сэлементами			будут скопированы			обработчики-		со
		бытий . Если параметр					имеет значениеfalse, обработчики
		событий копироваться					не будут .

3.3. Установка

содержимого

элемента

141

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

значение

Новый обернутый

набор .

Сама по себе операция

копирования

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

элементовпомо-

с

щью методаclone() не имеет практической

ценности , если после

этого

ничего сэтими копиями

не делать . Обычно

вслед

за получением-

оберну

того набора

копиямис

элементов

вызывается

другой

метод

библиотеки

jQuery,

который

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

этот наборкакоев

-нибудь

другое место

дерева DOM. Например

:

$(‘img’).clone().appendTo(‘fieldset.photo’);

Данная

инструкция

создает

копии

всех элементов -изображенийдо- и

бавляет

их ко всем элементам<fieldset> с классом photo.

Вот чуть более

сложный пример :

$(‘ul’).clone().insertBefore(‘#here’);

Эта цепочка

методов

выполняет

похожую

операцию

, только здесь-

созда

ются копии

всех элементов<ul>, включая вложенные

элементы

( скорее

всего , каждый

элемент<ul> содержит несколько

вложенных

элементов

<li>).

И последний

пример :

$(‘ul’).clone().insertBefore(‘#here’).end().hide();

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

выполняет

ту же операцию

, вчтопредыдущеми

при-

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

копий

вызывается

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

осу-

ществляет

возврат

кпервоначальному

обернутому

набору

( исходные

элементы

), изатем

элементы

первоначального

набора

делаются -

неви

димыми спомощью методаhide(). Это наглядно показывает , чтоходев

выполнения

операции

копирования

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

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

в новой

обертке .

Упражнение

Чтобы увидеть , как действует

операция

копирования

, вернитесь

к лабораторной

страницеMove and Copy Lab Page. Непосредственно

над

кнопкой Execute ( Выполнить

) имеется

пара радиокнопок

, позволя-

ющих

указывать

необходимость

выполнения

операции

копирова-

ния впроцессе

выполнения

основных

операций

над деревом

DOM.

Когда

выбрана радиокнопкаyes ( да ), перед выполнением

основных

операций

будут

создаваться

копии перемещаемых

элементов .

142		Глава 3. Оживляем страницыпомощьюс	jQuery
	Попробуйте выполнить	те же операции , которые вы уже выполня-
	ли ранее , свключенной	операцией копирования обратите,	вни-
	мание , что вэтом случае	копируемые элементы остаются	нетрону-
	тыми .

Мы научились вставлять , удалятькопировать элементы . Комбинируя эти методы , легко можно придуматьреализовать такие высокоуровневые операции , какзамена. Но знаете что ? Нам не придется это делать !

3.3.6. Замена

элементов

В случаях , когда

бывает

необходимо

заменить существующие - элемен

ты новыми

или переместить

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

элементы

, чтобы-

за

менить ими другие , можно

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

методомreplaceWith().

Синтаксис

метода

replaceWith

replaceWith(content)

Замещает каждый элементобернутомв

наборе

указанным

содержимым

.

Параметры

content (строка | элемент

| функция

) Строка , содержащая фрагмент-

раз

метки HTML, который будет использоватьсякачестве заме-

ны , или ссылка

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

будет

перемещен

на

место

существующего

элемента . Еслиэтомв

параметре

передается

функция

, она будет

вызвана для каждого элементаобернутомв

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

будет

передан

ей через контекстthis. Воз-

вращаемое

значение

будет

использованокачестве

нового

со-

держимого .

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

значение

Обернутый набор , содержащий замещенные

элементы .

Представим

, что по какой -либо причине

нам потребовалось

заменить

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

на странице , имеющие атрибутalt, элементами<span>,

содержащими

значения

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

-изображений . Мы-

мог

ли бы реализовать

эту операциюпомощьюс

методовeach() и replace-

With(), как показано

ниже :

$(‘img[alt]’).each(function(){

$(this).replaceWith(‘<span>’+ $(this).attr(‘alt’) +’</span>’) });

3.3. Установка содержимого элемента	143
Метод each() позволяет организовать	обход всех элементов , обернутом
наборе , аметод replaceWith() – замену	изображений вновь созданными
элементами <span>.

Упражнение

Метод replaceWith() возвращает

обернутый

набор , содержащий

элементы , которые были удалены

из дерева

DOM,

на тот случай ,

если они еще понадобятся качестве. В

самостоятельного

упражне-

ния подумайте

, как можно

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

программный код

примера , добавив негов операцию

вставки

удаленных

элементов

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

DOM.

Когда

методуreplaceWith() передается

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

элемент , онуда

ляется

из дерева

DOM вновьи

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

немук

вместо указан-

ного целевого элемента . Если

целевых

элементов

несколько

, создается

несколько

копий

оригинального

элемента

, выступающегокачестве

замены .

Иногда бывает удобно иметь возможность

изменить

порядок

следова-

ния замещающих

замещаемыхи

элементов

на обратный

, чтобы - заме

щающий элемент можно было определитьпомощьюс

селектора

. Мы

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

подобнымис

взаимодополняющими

парами

методов ,

такими какappend() и appendTo(), позволяющими

нам выбирать

порядок

следования

элементов , наилучшим

образом

подходящий

для нашей

реализации .

Точно

так же для методаreplaceWith() существует его зеркальное

отра-

жение – метод replaceAll(), позволяющий

выполнять

похожую

опера-

цию замены , но при этом указывать

параметры

операцииобратномв

порядке .

Синтаксис

метода

replaceAll

replaceAll(selector)

Замещает каждый элемент , соответствующий

селекторуselector, содер-

жимым обернутого наборакоторому,

применяется

этот метод .

Параметры

selector (селектор ) Строка селектора , определяющего , какие элементы должны быть замещены .

Возвращаемое значение

Обернутый набор , содержащий вставленные элементы .

144		Глава 3. Оживляем		страницыпомощьюс		jQuery
Подобно методуreplaceWith() метод replaceAll() возвращает					обернутый
набор	элементов	. Но на этот разнаборв входят		не замещенные		элемен-
ты , азаместившие		их элементы	. Замещенные элементы		удаляютсяне			и
могут	участвовать последующихв		операциях	. Имейте видуэтов, когда
будете	решать , какой метод использовать .

Обсудив способы манипулирования элементами DOM, рассмотримвоз можности манипулирования особой группой элементов– элементами форм .

3.4. Обработка значений элементов форм

Элементы форм обладают особыми свойствами , поэтому библиотека jQuery содержит ряд удобных функций для выполнения такихопера ций над ними , как :

x Получение изменение их значений

xC ериализация

xВыбор элементов на основе свойств формы

Эти функции вполне можно		использоватьпростыхв			случаях , однако не
будем забывать подключаемом		модуле Form Plugin– он официально
одобрен иразрабатывается членами			группы	jQuery Core Team,– кото-
рый предоставляет	намного более		широкие	возможности . Болеепод
робную информацию	об этом расширении			вы найдете по http:/адресу/
jquery.malsup.com/form/.

Что такое « элементы

форм »?

Элементами формы мы называем

элементы

, которые

могут-

по

являться внутри

форм имеют атрибутыname и value, значения

которых

передаются

серверувиде параметров

запроса приот

правке

формы . Обрабатывать

такие элементысценарияхв

не всег-

да просто , ине только

потому , что элементы

могут

быть

неактив-

ными , но ипотому

что они могут оказатьсясостояниив

неуспеха

(unsuccessful), определенном консорциумом

W3C для элементов

управления . Это состояние

определяет

элементы

, которые-

долж

ны игнорироваться

при передаче , что осложняет

их обработку .

Теперь рассмотрим

одну из наиболее типичных

операций

, применяе-

мых кэлементам форм : получение

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

. Методval()

учитывает большинство возможных ситуацийвозвращаети

атрибут

value элемента формы для первого

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

наборе . Его

синтаксис

:

3.4. Обработка		значений элементов форм					145
			Синтаксис		метода val
	val()
	Возвращает		атрибутvalue первого		элемента	соответствующем	наборе .
	Если	элемент предоставляет		возможность		множественного	выбора- , воз
	вращаемое		значение является	массивом		всех выбранных	вариантов .
	Параметры
	нет

Возвращаемое значение

Извлеченное значение или значения .

У этого

метода , весьма полезного , есть ряд ограничений

, из -за чего его

следует

применять

особенно

осторожно . Если

первый элементобер- в

нутом

наборе

не является

элементом

формы , метод

вернет

пустую

строку , которую легко спутатьвполнес

допустимым

значением

( полу-

чить возвращаемое

значениеundefined в таком

случае , вероятно

, было

бы предпочтительнее

). Кроме того , этот метод

не различает

отмечен-

ные и не отмеченные

состояния

флажков

(checkboxes)радиокнопок

(radiobuttons);

он возвратит

значение

атрибутаvalue этих

элементов

-не

зависимо от того , были они отмечены

или нет .

При работе

срадиокнопками

сэкономить

время

на отладке

поможет

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

val(). Рассмотрим

форму

сгруппой

радиокнопок

( объединенных

общим названием ) под

именем radioGroup и следующее

выражение

:

$(‘[name=”radioGroup”]:checked’).val()

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

вернет значение

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

отмеченной

радиокноп-

ки ( или значениеundefined, если ни одна из них не отмечена

). Этона

много проще , чем обходить

все радиокнопкициклев

, чтобы

отыскать

отмеченный

элемент , правда ?

Поскольку

методval() работает

только первымс

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

наборе , этот прием

не очень

полезен

при работегруппойс

флажков

, где

отмеченными

могут

оказаться

сразу

несколько

элементов

управления .

Взгляните

на следующий

фрагмент :

var checkboxValues = $(‘[name=”checkboxGroup”]:checked’).map( function(){ return $(this).val(); }

).toArray();

Метод val() отлично подходит для получения значения единственного элемента формы , но если требуется получить значениякоторыми, с элементы управления будут отправлены на сервер вместеформойс , то гораздо лучше подойдет методserialize() или serializeArray() (рассматриваются вглаве 8), или официальный модуль расширения Form.Plugin

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

Упражнение

Несмотря

на то , что мы формально

еще не рассматривали

создание

расширений

для jQuery (

эта тема будет

обсуждаться

через

четыре

главы ), тем не менее вы , вероятно , уже видели

достаточно

примеров

этого . Посмотрите

, возможно

ли преобразовать

предыдущий-

фраг

мент программного

кода методв

обертки

jQuery,

возвращающий

массив

отмеченных

флажков , находящихсяобернутомв

наборе .

Еще одна типичная

операция

, которую

нам придется

выполнять– ,

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

элемента

формы . Это также

делаетсяпомощьюс

метода val(), но при этом ему передается

требуемое

значение

. Синтак-

сис метода :

Синтаксис

метода

val

val(value)

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

значение параметраvalue как значение

всех соответству-

ющих элементов

формы .

Параметры

value

(строка

| функция ) Строка , которая

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

как-

значе

ние свойства value каждого

элемента

формыобернутомв

набо-

ре . Если вэтом параметре

передается

функция , она будет-

вы

звана

для каждого

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

, ией будет передан

сам

элемент

через

контекст функции также,

два параметра

: -ин

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

значение

атрибутаvalue. Воз-

вращаемое

значение функции будет использованокачестве

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

значения .

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

значение

Обернутый

набор .

Вот еще один вариант

методаval(), позволяющий

отмечать

флажки

и радиокнопки

или выбирать

вариантыэлементев

<select>. Этот вари-

ант методаval() имеет

следующий

синтаксис :

Синтаксис

метода

val

val(values)

Отмечает

все флажки , радиокнопки или варианты

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

<select>, входящих

вобернутый

набор , если их значения соответствуют

одному

из значений

, переданныхвиде массива

параметрев values.

3.5. Итоги

147

Параметры

values (массив ) Массив значений помощью, с которых определяются отмечаемые элементы .

Возвращаемое значение

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

Рассмотрим		следующую		инструкцию		:
$(‘input,select’).val([‘one’,’two’,’three’]);
Эта инструкция			отыщет	на странице		все элементы<input> и <select> со
значениями		, совпадающими любойс			из строкone, two или three, и от-
метит	все найденные флажки или радиокнопки , либо выберетвсе най
денные	варианты .
Благодаря		этому	методval() применим не толькопростымк				текстовым
элементам .

3.5. Итоги

В этой главе мы возвысились						над искусством				выбора элементовначали и
манипулировать			ими . Приемы , которые мы здесь обсудили , позволяют
отбирать		элементы помощьюс				мощных		критериевзатеми , путем хирур-
гического		вмешательства			, перемещать любоеих в					место страницы .
Мы можем копировать				элементы			, перемещать дажеих и создавать				на
пустом	месте совершенно				новые		элементы . Мы можем добавлять их
в конец , вначало , атакже					обертывать			любой		элемент или наборыэле
ментов	на странице . Мы узнали , что одните жеи приемы можно										при-
менять	как кединственному					элементу			, так инабору элементов		, что
позволяет		писать краткие , но мощные							инструкции .
Обладая		всеми	этими	знаниями			, мы готовы			приступитьизучениюк бо-
лее сложных концепций					, начавтакойс			грязной		работы , как обработка
событий .