ch3

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

элемента

129

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

значение

Объединенная

строка .

Также спомощью

методаtext() можно

изменить

текстовое

содержимое

обернутых

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

этого

варианта

метода :

Синтаксис

метода

text

text(content)

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

содержимое

параметраcontent как текстовое

содержимое

всех обернутых

элементов

. Если

строкаcontent содержит

угловые

скобки

(< и >), они замещаются

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

HTMLэлементами .

Параметры

content

(строка

| функция

)

Новое

текстовое содержимое

всех обернутых

элементов

. Все угловые

скобки

замещаются

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

HTMLэлементами

. Если этомв

параметре

передается

функ-

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

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

на-

боре . Функции

передается

сам элемент , через

контекстthis,

а также

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

: индекс

элементекущееаи

содержимое

элемента

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

значение будет

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

стве текстового

содержимого

элемента .

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

значение

Обернутый

набор .

Обратите

внимание : эти методы

замещают

старую

HTMLразметку

или

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

содержимым

входного

параметра

, поэтому-

ис

пользовать

их следуетособой

осторожностью

. Если

вы не хотите-

уни

чтожить

прежнее

содержимое

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

используйте-

мето

ды , которые

оставляют

старое

содержимое

нетронутолькоыми добав-

ляют новое

содержимое

или изменяют

окружение

элемента

. Давайте

рассмотрим

их .

3.3.2. Перемещениеи копирование элементов

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

деревом

DOM страницы

без необходимости - пере

загружать

ее открывает

новые

перспективы

создания

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

и интерактивных

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

. Мы уже видели

мельком , -как биб

лиотека jQuery позволяет создавать элементы DOM

на летудерево. В

DOM могут

встраиваться

не только

вновь созданные

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

так же можем

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

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

элементы .

130

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

jQuery

Параметры

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

| объект | функция

) Строка , элемент , обернутый

набор или функция , определяющие

новое содержимое , которое

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

параметре

передается

функция , она будет вызвана

для каждого

элемента вобернутом наборе . Функции передается

сам элемент

через

контекст this, а также два параметра : индекс элемента

и текущее

содержимое

элемента . Возвращаемое значение будет

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

содержимого

, дополняющего

имеюще-

еся содержимое

элемента .

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

значение

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

Вот более

сложный

пример

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

методакачест: ве добавляе-

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

берутся уже имеющиеся

элементы

дерева

DOM:

$(“p.appendToMe”).append($(“a.appendMe”))

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

добавляет

все ссылкиклассом appendMe в конец

списка

дочерних

элементов

элементов<p> с классом appendToMe. Если добавле-

ние выполняется

нескольков

элементов , сначала будет создано

-необхо

димое число

копий

добавляемого

элемента

, после

чего будет

выполнено

добавление

по одной копиикаждыйв

принимающий

элементлюбом. В

случае оригинал добавляемого элемента

будет удален из своегоперво

начального

местоположения .

3.3. Установка

содержимого

элемента

131

полняется

операцияперемещения элемента

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

При добавлении

нескольков

элементов

добавляемый

элемент

копиру-

ется в конец каждого

принимающего

элементазатем,

точно так же

удаляется

из своего

прежнего

местоположения– то есть выполняется

операция копирования

-и -перемещения.

Вместо

полноценного

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

можно указать

ссылку на

определенный

элемент

DOM:

$(“p.appendToMe”).append(someElement);

Операция

добавления

нового содержимогоконецв существующего

- до

статочно

часто

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

на практике– с

е помощью

можно добав-

лять новые

элементы

конецв

списка , новые

строки конецв

таблицы

или просто

добавлять

новые элементыконецв тела документа . Точно

так же часто возникает

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

добавлять

новые или существу-

ющие элементы началов

имеющегося

содержимого .

В таких

случаях можно

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

методprepend().

Синтаксис метода

prepend

prepend(content)

Добавляет

фрагмент

HTML или элементы

из параметраcontent в начало

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

элементов .

Параметры

content

(строка

| элемент

| объект

| функция

) Строка , элемент , обернутый

набор или функция , определяющие

новое

содержимое , которое

будет

добавлено

началов

элементов

обернутомв

наборе . Если

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

функция , она будет вызвана для

каждого элемента вобернутом наборе . Функции передается

сам элемент

через контекстthis, а также два параметра : индекс

элемента итекущее

содержимое

элемента . Возвращаемое-

зна

чение

будет

использовано качестве содержимого , добавляемо-

го вначало

имеющегося

содержимого

элемента .

Иногда

бывает

желательно

поместить

элементы

не тольконачало в или

в конец

содержимого другого элемента . Библиотека

jQuery позволяет

вставлять новые или существующие

элементыдерево

DOM, указы-

вая , перед каким или после

какого элемента следует поместитьуказан

ный элемент .

Неудивительно

, что методы , соответствующие

этим операциям- , назы

ваются before() и after(). Они имеют уже знакомый

вам синтаксис .

132

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

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

jQuery

Синтаксис

метода

before

before(content)

Вставляет

указанный

фрагмент

HTML или элементы

из параметраcontent

в дерево

DOM,

качестве

соседних целевымис

элементами

, перед

ними

.

Целевые

обернутые

элементы

должны

быть частью

дерева

DOM.

Параметры

content (строка

| элемент |

объект

| функция

)

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

набор

или функция , определяющие

новое содержимое ,- встав

ляемое в дерево

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

наборе .

Если

вэтом параметре

передается

функция

, она будет

вызвана

для каждого

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

наборе этоти

элемент будет

передан ей через

контекстthis. Возвращаемое

значение

будет

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

добавляемого

содержимого .

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

значение

Обернутый

набор .

Синтаксис

метода

after

after(content)

Вставляет

указанный

фрагмент

HTML или элементы

из параметраcontent

в дерево

DOM,

качестве соседних целевымис

элементами , после них

.

Целевые

обернутые

элементы

должны

быть частью

дерева

DOM.

Параметры

content (строка

| элемент |

объект

| функция

)

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

набор

или функция , определяющие

новое содержимое ,- встав

ляемое вдерево

DOM после элементовобернутомв

наборе . Если

в этом параметре

передается

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

вызвана для

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

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

редан

ей через

контекстthis. Возвращаемое значение

будетис

пользовано

качестве

добавляемого

содержимого .

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

значение

Обернутый

набор .

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

элемента

133

с этими операциями , пока они не станут полностью понятными

для вас . Эту лабораторную страницу

вы найдетефайлевchapter3/

move.and.copy.lab.html, а ее начальное

состояние

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

рис .3.4.

Слева на странице

находятся

три изображения

, которые -могут вы

ступать вкачестве

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

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

, отметив

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

им флажки .

3.3. Установка

содержимого

элемента

135

Поэкспериментируйте

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

страницейMove and Copy Lab

Page и попробуйте

различные

комбинации

элементоперацийв ,

пока не получите

полное представлениетом ,окак они действуют

.

В некоторых

случаях

программный

код выглядел

бы более

удобочи-

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

изменить

порядок

следования

копируемых

ицелевых

элементов

инструкцияхв

. Например , прико

пировании

или перемещении

элементов

из одного

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

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

создавать

обернутые

наборы

копируемых

(а не целевых ) элементовуказыватьи

целевые элементывиде параме-

тров методов . Что ж , библиотека

jQuery

дает нам такую

возможность

,

предоставляя операции , аналогичные

четырем операциям

, которые

мы

только

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

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

обратный

порядоксле

дования

копируемых целевыхи

элементов . Эти операции

реализованы

в виде методовappendTo(), prependTo(), insertBefore() и insertAfter(), име-

ющих следующий

синтаксис:

Синтаксис

метода

appendTo

appendTo(targets)

Добавляет элементы обернутого набораконецв

содержимого

элементов ,

заданных

параметромtargets.

136

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

jQuery

Синтаксис

метода insertBefore

insertBefore(targets)

Вставляет

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

перед элемента-

ми , заданными параметромtargets.

Параметры

targets (строка | элемент ) Строка , содержащая

селектор jQuery, или

элемент DOM. Каждый элементобернутомв

наборе

будет встав-

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

перед каждым целевым элементом .

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

Обернутый

набор .

Синтаксис

метода

insertAfter

insertAfter(targets)

Вставляет

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

непосредственно

за элементами ,

заданными

параметромtargets.

Параметры

targets (строка | элемент ) Строка , содержащая

селектор jQuery, или

элемент DOM. Каждый элементобернутомв

наборе

будет встав-

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

за каждым целевым элементом .

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

Обернутый

набор .

Помните , как впредыдущей

главе мы рассматривали

порядок

-созда

ния новых фрагментов

HTMLпомощьюс

функции -обертки$()? Этот

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

полезнымсоединениив

сметодами

appendTo(), prependTo(), insertBefore() и insertAfter(). Например :

$(‘<p>Hi there!</p>’).insertAfter(‘p img’);

Эта инструкция создаст

абзацдружеским

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

его

копии после каждого элемента -изображения , находящегося

внутри

элемента -абзаца . Мы уже видели

этот приемлистингев

2.1, мыи снова

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

егонашихв

страницах .

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

элемента

137

Иногда вместо того , чтобы вставлять

одни элементыв другие

элементы ,

требуется

выполнить

противоположную

задачу . Давайте посмотрим ,

что библиотека jQuery может нам предложить

для ее решения .

3.3.3. Обертывание

элементов

Еще один тип манипулирования

деревом

DOM,которому

нам часто

придется

прибегать –,это обертывание

элементов

( или групп

элемен-

тов ) некоторой разметкой . Например

, может

потребоваться

обернуть

все ссылки определенного

класса элементом<div>. Добиться

этого

мож-

но спомощью

метода

jQuerywrap(), имеющего

следующий

синтаксис :

Синтаксис

метода wrap

wrap(wrapper)

Обертывает

все элементы

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

набора

указанными

тегами

HTML или копиями

переданного

элемента .

Параметры

wrapper

(строка |

элемент ) Строкаоткрывающимс

закрывающим

-те

гами , вкоторые будет обернут каждый элемент соответствую-

щего набора , либо элемент , копии

которого

будут играть

роль

обертки .

Обернуть

каждую ссылкуклассом surprise элементом <div> с классом

hello можно

так :

$(“a.surprise”).wrap(“<div class=’hello’></div>”)

А если требуется

обернуть

ссылку

копией первого

на странице-

элемен

та <div>, это делается

так :

$(“a.surprise”).wrap($(“div:first”)[0]);

Если вобернутом

наборе содержится

несколько элементов wrap(), метод

обернет

каждый

из них по отдельности

. Обернуть

все элементы

набора

как единое

целое

поможет

методwrapAll():

Синтаксис метода

wrapAll

wrapAll(wrapper)

Обертывает

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

набора как единое целоеука-

в

занные

теги HTML

иликопиив

переданного

элемента .

138

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

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

jQuery

Параметры

wrapper

(строка | элемент ) Строкаоткрывающимс

закрывающим

тега-

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

ющего набора , либо элемент , копия

которого будет играть роль

обертки .

Иногда

требуется

обертывать

не сами

элементы

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

набора , атолько ихсодержимое. Именно

на такой

случай есть метод

wrapInner():

Синтаксис

метода

wrapInner

wrapInner(wrapper)

Обертывает содержимое элементов соответствующего

набора , включая

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

теги HTML

или копии

переданного

-элемен

та .

Параметры

wrapper

(строка

| элемент ) Строкаоткрывающимс

закрывающим

-те

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

содержимое

каждого

элемента

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

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

играть

роль обертки .

Кроме того ,помощьюс

методаunwrap() можно выполнить

обратную - опе

рацию удаления обертывающего

элемента :

Синтаксис

метода unwrap

unwrap()

Удаляет элемент , обертывающий

соответствующий набор . Дочерние-

эле

менты , находящиеся обернутомв

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

соседними

им

элементами

замещают

родительский элементдереве DOM.

Параметры

нет

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

Обернутый

набор .