2
.pdf
2.3. Манипулирование обернутым набором элементов |
83 |
Мы видим , чтообернутыйв набор попало пять изображений - из ше сти ( то есть все , за исключением изображениякофейникомс ). Красная рамка может быть плохо заметнакнигев , где рисунки напечатаны вчерно -белом варианте , но есливасу имеется загруженная версия этого примера ( которая должнавас бытьу ) ивы следуете по
нему (чего можно ожидать ), то вы сможете наблюдать эти рамки .
Рис . 2.7.Как и ожидалось выражению, jQuery соответствуют только изображения с атрибутом alt или title
Теперь давайте рассмотрим |
более реалистичный |
пример использова- |
||
ния метода add(). Допустим , нам требуется |
окружить жирной |
рамкой |
||
все элементы <img> с атрибутом alt, а затем сделать |
полупрозрачными |
|||
все элементы<img> с атрибутом alt или title. Здесь нам не поможет |
-опе |
|||
ратор « запятая ,») (селекторов |
CSS, потому |
что сначала нужно |
выпол- |
|
84 |
|
|
|
Глава 2. Выбор элементов |
для дальнейшей |
работы |
||||||
нить операцию |
над обернутым |
наборомтолькои |
потом добавить |
негов |
|
|
||||||
дополнительные |
элементы . Этого легко можно было бы добитьсяпо- |
с |
||||||||||
мощью |
нескольких инструкций |
, но эффективнееэлегантнееи |
исполь- |
|
||||||||
зовать мощь jQuery, |
решив ту же задачупомощьюс |
цепочки |
методов , |
|
||||||||
объединенных |
общуюв |
инструкцию |
: |
|
|
|
|
|
|
|||
$(‘img[alt]’) |
|
|
|
|
|
|
|
|
|
|
|
|
.addClass(‘thickBorder’) |
|
|
|
|
|
|
|
|
|
|||
.add(‘img[title]’) |
|
|
|
|
|
|
|
|
|
|
||
.addClass(‘seeThrough’) |
|
|
|
|
|
|
|
|
|
|||
Эта инструкция |
создает |
обернутый |
набор всех элементов<img> с атрибу- |
|
|
|||||||
том alt, применяет немук предопределенный |
класс CSS, задающий- |
жир |
||||||||||
ную рамку , добавляетнаборв элементы<img> с атрибутом title и в заклю- |
|
|
||||||||||
чение применяет расширенномук |
набору класс CSS, который определяет |
|||||||||||
степень |
полупрозрачности . |
|
|
|
|
|
|
|
|
|||
Введите |
эту инструкцию |
на страницеjQuery Operations Lab ( в которой |
уже |
|
||||||||
предопределены |
указанные классы– результат) |
должен выглядеть |
, как |
|||||||||
показано на рис2.8. |
|
|
|
|
|
|
|
|
|
|
||
Рис . 2.8.Способность jQuery объединять методы в цепочки позволяет выполнять сложные операции с помощью единственной инструкции , о чем свидетельствуют данные результаты
В полученных |
результатах |
можно заметить , что изображенияцве- с |
|
|||||||||
тами ( которые имеют атрибутalt) окружены |
жирными |
рамкамивсе, а |
|
|
||||||||
изображения |
, за исключением |
изображениякофейникомс |
( единствен- |
|
||||||||
ное изображение |
, не имеющее |
ни атрибутаalt, ни атрибутаtitle), стали |
|
|
||||||||
полупрозрачными |
результатев |
применения |
правилаopacity. |
|
|
|
||||||
Метод add()также |
позволяет |
добавлятьимеющийсяв |
обернутый набор |
|
||||||||
элементы , заданные |
ссылками |
на них . Если методуadd() передается |
|
|
||||||||
ссылка на элемент |
или массив |
ссылок на элементы |
, он добавит- |
эти эле |
||||||||
менты вобернутый набор . Предположим , чтопеременнойв |
сименем |
|
|
|||||||||
someElement хранится |
ссылка |
на элемент ; тогда его можно добавитьна- |
в |
|||||||||
бор всех изображений |
, имеющих атрибутalt с помощью |
инструкции |
: |
|
||||||||
$(‘img[alt]’).add(someElement)
Такой гибкости уже достаточно , тем не менее add()методпозволяет добавлять вобернутый набор не только имеющиеся новые, и элементы ,
2.3. Манипулирование обернутым набором элементов |
85 |
если ему качестве параметра передать фрагмент HTML- разметки- . На пример :
$(‘p’).add(‘<div>Hi there!</div>’)
Этот фрагмент |
сначала |
создаст обернутый набор |
всех элемент<p> в до-в |
||||||
кументе , затем |
создаст |
новый |
элемент<div> и добавит |
его вобернутый |
|||||
набор . Обратите внимание : новый элемент просто |
добавляетсяобер- в |
||||||||
нутый набор , никаких других действий |
, чтобы |
добавить дегорево |
|||||||
DOM, вэтой инструкции |
не выполняется |
. Добавить |
выбранные - элемен |
||||||
ты , как ивновь созданный |
элемент конец, в |
некоторого |
раздела DOM |
||||||
можно спомощью методаappendTo() из библиотеки |
jQuery ( наберитесь |
||||||||
терпения , мы поговорим |
об этих методах |
достаточно |
скоро ). |
||||||
Метод add() позволяет |
легко |
ипросто расширять |
обернутые наборы . |
||||||
А теперь рассмотрим |
методы |
библиотеки |
jQuery, |
позволяющие - исклю |
|||||
чать элементы |
из обернутого |
набора . |
|
|
|
|
|||
Уменьшение |
содержимого |
обернутого |
набора |
|
|
|
|||||||||
Мы уже видели , насколько |
простоjQueryв создаются обернутые набо- |
|
|||||||||||||
ры ,– применением |
нескольких |
селекторовпомощьюс |
цепочки методов |
|
|||||||||||
add(). Точно так же спомощью |
методаnot() можно организовать |
объе- |
|
||||||||||||
динение |
селекторов цепочкув |
дляисключения лишних элементов |
. По |
|
|||||||||||
действию |
|
этот метод напоминает |
фильтр:not, рассмотренный ранее , но |
|
|||||||||||
подобно |
методуadd() может |
использоваться |
для удаления |
элементов |
из |
||||||||||
обернутого |
набора любомв |
месте |
цепочки |
методов |
jQuery. |
|
|
|
|||||||
Предположим |
, что нам требуется |
отобрать все элементы<img> на стра- |
|
||||||||||||
нице , имеющие атрибутtitle, за исключением тех , что содержат знав - |
|
||||||||||||||
чении этого атрибута текст |
«puppy». |
Можно |
было бы сконструировать |
||||||||||||
единственный |
селектор , отвечающий |
поставленным условиям- ( а имен |
|||||||||||||
но , img[title]:not([title*=puppy]), но представим , что мы забылисущео - |
|
||||||||||||||
ствовании |
фильтра:not. С помощью |
методаnot(), который удаляет из |
|
||||||||||||
обернутого |
набора |
любые |
элементы , соответствующие |
заданному- |
выра |
||||||||||
жению селектора , мы можем выразить |
тип объединенияза исключени- |
|
|||||||||||||
ем. Реализацию |
описанного |
выше |
условия можно записать |
так : |
|
||||||||||
$(‘img[title]’).not(‘[title*=puppy]’) |
|
|
|
|
|
|
|
|
|
||||||
|
|
Упражнение |
|
|
|
Введите это выражение |
на страницеjQuery Operations Lab и выполни- |
|
|||
те его . Вы увидите , что будет отобрано |
только изображение- |
корич |
|||
невого щенка . Изображение |
черного щенка , включенноеперво-в |
|
|||
начальный |
обернутый |
набор |
из -за наличия атрибутаtitle, будет |
|
|
исключено |
из набора вызовом методаnot(), потому что значение |
|
|||
атрибута title этого элемента |
содержит |
текст «puppy». |
|
||
|
|
|
|
|
|
86 |
Глава 2. Выбор элементов для дальнейшей работы |
|
|
|
|
Синтаксис методаnot
not(expression)
Создает копию обернутого набора элементовудаляети из нее элементы , соответствующие параметруexpression.
Параметры
expression (селектор | элемент | массив | функция ) Определяет , какие элементы должны быть исключены из обернутого набора . Если параметром является селектор , из набора будутуда лены любые соответствующие ему элементы . Если параметром является ссылка на элемент или массив элементов , эти элементы будут удалены из набора .
Если параметром является функция , она будет вызвана для каждого элемента наборев ( внутри функции ссылкаthis бу-
дет указывать на текущий элемент ), при этом возвращаемое значение true будет служить признаком необходимостиуда ления элемента из набора .
Возвращаемое значение
Копия оригинального обернутого набора , из которой были удаленыэле менты , соответствующие параметру .
С помощью |
методаnot() можно исключать |
из обернутого набора |
отдель- |
||||
ные элементы , для чего нужно передать |
методу |
ссылку |
на элемент |
или |
|||
массив ссылок на элементы . Последний |
способ |
особенно |
интересен- |
, по |
|||
тому что , если помните , любой обернутый набор можно |
использовать |
||||||
как массив |
ссылок на элементы . |
|
|
|
|
|
|
Когда требуется еще более высокая |
гибкость , методуnot() можно пере- |
|
|||||
давать функцию , которая будет определять , какие элементы |
следует |
||||||
удалить , какие оставить обернутомв |
наборе . Рассмотрим |
следующий |
|
||||
пример : |
|
|
|
|
|
|
|
$(‘img’).not(function(){ return !$(this).hasClass(‘keepMe’); })
Данное |
выражение отберет |
все элементы<img> и затем удалит из полу- |
|
||||||||||
ченного |
набора |
все элементы |
, не имеющие |
классаkeepMe. |
|
|
|||||||
Данный |
метод |
позволяет |
фильтровать |
обернутые наборыситуацив - |
|
||||||||
ях , когда сложно или невозможно |
выразить |
условие |
отбора элементов |
||||||||||
в виде селектора помощьюс |
программной |
реализации |
фильтрации . |
||||||||||
В подобных |
ситуациях |
проверка |
, выполняемая |
внутри функции- |
, пере |
||||||||
даваемой методу not(), должна давать результат |
, противоположный |
|
|||||||||||
тому , что нам хотелось |
бы выразить . Однако |
существуетfilter()метод, |
|
||||||||||
являющийся |
полной противоположностью |
методуnot(), который дей- |
|
||||||||||
ствует похожим |
образом , но он удаляет |
элементы , для которых- |
указан |
||||||||||
ная функция |
возвращает |
значениеfalse. |
|
|
|
|
|
|
|||||
2.3. Манипулирование |
обернутым набором |
элементов |
|
|
87 |
|
|||
Предположим |
, что нам требуется |
создать |
обернутый |
набор |
всехэле |
||||
ментов <td>, содержащих |
числовые |
значения . Даже при всей гибкости |
|||||||
селекторов |
jQuery ихс помощью |
невозможно |
выразить |
такое |
условие . |
||||
В подобных |
ситуациях |
можно |
использовать |
filter()метод : |
|
|
|
||
$(‘td’).filter(function(){return this.innerHTML.match(/A\d+$/)})
Данная инструкция |
jQuery |
создаст обернутый набор всех элементов |
|||||||||||||
<td> и затем |
для каждого элемента |
вызовет функцию , переданную- |
мето |
||||||||||||
ду filter(), с текущим |
элементом качестве |
значенияthis. С помощью |
|
||||||||||||
регулярного |
выражения |
функция |
определяет |
, соответствует |
-ли со |
||||||||||
держимое |
элемента заданному |
шаблону |
( последовательности |
из одной |
|||||||||||
или более цифр ),возвращаети |
значениеfalse, если это не так . Каждый |
|
|||||||||||||
элемент , для которого |
функция |
вернет |
значениеfalse, будет удален |
из |
|
||||||||||
обернутого |
|
набора . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
|
|
|
Синтаксис |
методаfilter |
|
|
|
|
|
||||||
filter(expression) |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
Создает |
копию |
обернутого |
набораудаляети |
из нее элементы , которые |
не |
|
|||||||||
соответствуют |
критериям |
, определяемым |
параметромexpression. |
|
|
|
|
||||||||
Параметры |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
expression |
|
(селектор |
| элемент | |
массив |
| |
функция ) Определяет , какие |
|
||||||||
|
|
элементы |
должны |
быть исключены |
из обернутого набора . |
|
|||||||||
|
|
Если параметром |
является |
селектор |
, из набора |
будут- |
удале |
|
|||||||
|
|
ны любые |
не соответствующие |
ему элементы . |
|
|
|
|
|||||||
|
|
Если параметром |
является |
ссылка |
на элемент |
или мас- |
|
||||||||
|
|
сив элементов |
, эти элементы |
|
будут |
оставленынаборев , все |
|
|
|
||||||
|
|
остальные – удалены . |
|
|
|
|
|
|
|
|
|
||||
Если параметром является функция , она будет вызвана для каждого элемента наборев ( внутри функции ссылкаthis
будет указывать на текущий элемент ), при этом возвращаемое значениеfalse будет служить признаком необходимости удаления элемента из набора .
Возвращаемое значение
Копия оригинального обернутого набора , из которой были удаленыэле менты , не соответствующие параметру .
Упражнение
Вновь |
вернитесь |
страницек jQuery Operations Lab, введите предыду- |
щее выражение |
выполните его . Вы увидите , что будут выделены |
|
только |
ячейки |
столбцаInvented ( Год появления ). |
88 |
|
Глава 2. Выбор |
элементов для дальнейшей |
работы |
|||||
|
|
|
|
|
|
||||
Методу filter() можно |
также передать |
селектор |
. При таком |
использо- |
|||||
вании селектор имеет |
обратное |
значение по сравнениюметодомс |
not(), |
|
|||||
то есть удаляются |
все элементыне, соответствующие селектору |
. Это |
|||||||
не очень мощный |
метод , так как обычно проще воспользоваться |
более |
|||||||
ограничивающим |
селектором , но он удобен при использованиицепоч- |
в |
|||||||
ках методов jQuery. Рассмотрим |
следующий |
пример : |
|
|
|
|
|||
$(‘img’)
.addClass(‘seeThrough’)
.filter(‘[title*=dog]’)
.addClass(‘thickBorder’)
Эта цепочка методов |
отберет |
все элементы<img>, применит |
кним класс |
||||||||||
seeThrough, затем |
оставит наборев |
только те элементы |
, значение |
атрибу- |
|||||||||
та title которых |
содержит |
строкуdog, и к оставшимся |
элементам |
при- |
|||||||||
менит классthickBorder. В результате |
|
все изображения |
|
станут |
полупро- |
||||||||
зрачными , итолько изображение |
коричневой |
собаки |
будет |
окружено |
|||||||||
жирной |
рамкой . |
|
|
|
|
|
|
|
|
|
|
|
|
Методы not() и filter() предоставляют |
нам широкие |
возможностиуточ |
|||||||||||
нения набора обернутых |
элементов |
на лету , на основе произвольного |
|||||||||||
критерия |
выбора обернутых |
элементов . Мы можем |
также |
создавать |
|||||||||
подмножество |
обернутого |
набора |
на основепозиций элементов наборев . |
||||||||||
Давайте |
рассмотрим |
методы , позволяющие |
сделать |
это . |
|
|
|||||||
Получение |
подмножества |
обернутого набора |
|
|
|
||||
Иногда |
требуется |
получить |
подмножество |
обернутого |
набора |
на основе |
|||
позиций |
элементов |
этомв наборе . Для этих |
целей библиотека |
jQuery |
|||||
предоставляет |
методslice(). Этот метод создаетвозвращаети |
новый -на |
|||||||
бор из любой |
непрерывной |
части или первоначальногосрез |
обернутого |
||||||
набора . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Синтаксис |
методаslice |
|
|
|
|
|
slice(begin, end) |
|
|
|
|
|
|
|
||
Создает ивозвращает новый |
обернутый набор , содержащий |
непрерыв- |
|||||||
ную область |
первоначального |
набора . |
|
|
|
|
|||
Параметры
begin (число ) Позиция первого элемента ( отсчет начинаетсянуля с) области , которая должна быть включенавозвращаемый срез .
end (число ) Необязательный индекс первого элемента ( отсчетначи нается снуля ), который не должен быть включенвозвращаемый срез , или позиция элемента , стоящего сразу же за-послед
ним включаемым срезв элементом . Если этот параметр опущен , конец возвращаемого среза совпадаетконцомс первоначального набора .
2.3. Манипулирование |
обернутым набором |
элементов |
89 |
|
|
|
||||||
|
|
|
|
|
|
|
|
|
|
|||
|
Возвращаемое |
значение |
|
|
|
|
|
|
|
|||
|
Вновь созданный |
обернутый |
набор |
элементов . |
|
|
|
|
||||
|
|
|
|
|
|
|
||||||
С помощью |
методаslice() можно получить |
обернутый |
наборединс - |
|
||||||||
ственным |
элементом |
из первоначального |
набора по известномуиндек |
|||||||||
су , для чего методу |
следует |
передать местоположение |
требуемого- |
эле |
||||||||
мента вобернутом |
наборе . |
|
|
|
|
|
|
|
||||
Например , получить третий элемент можно так :
$(‘*’).slice(2,3);
Эта инструкция отберет все элементы на страницезатеми сгенерирует новый набор , содержащий третий элемент первоначального набора .
Обратите внимание : эта инструкция не равнозначна инструкции$(‘*’). get(2), которая вернет сам третийэлемент, а не обернутый набор , -со держащий третий элемент .
Таким образом , следующая инструкция :
$(‘*’).slice(0,4);
отберет все элементы на страницезатеми создаст набор из первыхче тырех элементов .
Выбрать элементы из конца обернутого набора можнопомощьюс такой инструкции :
$(‘*’).slice(4);
Она отберет все элементы на страницезатеми вернет набор– все элементы , за исключением четырех первых .
Подмножество элементов обернутого |
набора можно |
также получить |
|||||
с помощью |
методаhas(). Подобно |
фильтру:has этот метод |
проверяет |
-эле |
|||
менты , вложенные элементыв |
из обернутого набора , и , исходя |
из- |
ре |
||||
зультатов |
проверки , отбирает |
элементы , которые должны пвойтид- |
в |
||||
множество . |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
Синтаксис методаhas |
|
|
|
|
||
has(test) |
|
|
|
|
|
|
|
Создает |
ивозвращает новый обернутый набор , содержащий только |
те |
|||||
элементы из первоначального |
обернутого набора , которые содержат- |
|
вло |
||||
женные |
элементы , соответствующие |
выражениюtest. |
|
|
|
|
|
|
|
|
|
|
|
|
|
90 |
|
|
|
|
|
|
|
Глава |
2. Выбор |
элементов |
для дальнейшей |
работы |
|||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Параметры |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
test |
(селектор |
| элемент ) Селектор , который |
применяется |
ко всем |
||||||||||||||||||
|
|
элементам |
, вложенным элементыв |
из обернутого |
набора , или |
||||||||||||||||||
|
|
проверяемый |
элемент возвращаемый. В |
обернутый |
набор |
вклю- |
|||||||||||||||||
|
|
чаются |
только |
те элементы |
, которые |
содержат |
вложенные- |
эле |
|||||||||||||||
|
|
менты , соответствующие |
селектору |
или переданному |
элементу . |
||||||||||||||||||
|
Возвращаемое |
|
значение |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
Вновь созданный |
|
обернутый |
набор элементов . |
|
|
|
|
|
|
|
|
|||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||
Например |
, рассмотрим |
следующую |
инструкцию |
: |
|
|
|
|
|
|
|||||||||||||
|
$(‘div’).has(‘img[alt]’) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
Это выражение |
сначала |
создаст |
обернутый |
набор |
всех элементов<div>, |
||||||||||||||||||
а затем создаст |
ивернет |
другой набор , включающий |
только |
элементы |
|||||||||||||||||||
<div>, содержащие |
хотя бы один элемент<img> с атрибутом alt. |
|
|
|
|
|
|||||||||||||||||
Преобразование |
элементов |
обернутого |
набора |
|
|
|
|
|
|||||||||||||||
На практике |
часто |
возникает |
необходимость |
преобразовать |
|
элементы |
|||||||||||||||||
обернутого |
|
набора . Например |
, чтобы |
отобрать |
значения |
всех атрибутов |
|||||||||||||||||
id обернутых |
|
элементов |
|
или , возможно , отобрать |
значения |
обернутых |
|||||||||||||||||
элементов |
формы , чтобы |
на их основе |
|
сконструировать |
строку |
запроса |
|||||||||||||||||
В таких ситуациях намк |
на выручку |
придет |
методmap(). |
|
|
|
|
|
|
||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
Синтаксис |
методаmap |
|
|
|
|
|
|
|
|
|
||||||
|
map(callback) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
Вызывает |
функциюcallback для каждого |
элемента |
обернутомв |
наборе |
|
|
||||||||||||||||
|
и собирает |
возвращаемые |
значениявиде экземпляра объекта |
jQuery. |
|
|
|||||||||||||||||
|
Параметры |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
callback |
(функция |
) Функция |
обратного |
|
вызова , которая |
применяется |
|
|||||||||||||||
|
|
к каждому элементу обернутомв |
|
наборе . Этой функции |
пере- |
|
|
||||||||||||||||
|
|
даются два параметра : индекс элемента |
внутри |
набора |
( |
отсчет |
|||||||||||||||||
|
|
начинается нуляс ) исам элемент . Кроме того , элемент устанав- |
|||||||||||||||||||||
|
|
ливается качестве контекста функции ( ссылкаthis). |
|
|
|
|
|
|
|||||||||||||||
|
Возвращаемое |
|
значение |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
Обернутый |
набор |
полученных |
значений . |
|
|
|
|
|
|
|
|
|
||||||||||
|
|
|
|
|
|
||||||||||||||||||
Например |
, следующий |
фрагмент отберет значения атрибутовid всех |
|
||||||||||||||||||||
изображений |
|
на страницесохранит |
их массиве |
JavaScript: |
|
|
|
|
|||||||||||||||
var allIds = $(‘div’).map(function(){
return (this.id==undefined) ? null : this.id; }).get();
2.3. Манипулирование |
обернутым |
набором |
элементов |
|
|
|
91 |
|
||||||||
Если для какого -либо элемента |
функция обратного вызоваnullвернет, |
|||||||||||||||
результат |
преобразования |
не будет включенвозвращаемый |
|
набор . |
||||||||||||
Обход элементов |
обернутого |
набора |
|
|
|
|
|
|||||||||
Метод map() удобно использовать |
, когда |
требуется |
обойти |
все элементы |
||||||||||||
в обернутом |
наборе |
отобратьи |
значения |
или результаты |
преобразова- |
|||||||||||
ния элементов , но на практике |
часто |
бывает необходимо |
выполнить |
|||||||||||||
итерации |
по элементамобернутомв |
|
наборе |
для выполнения |
каких -либо |
|||||||||||
других операций .такихВ |
случаях можно использовать |
методeach(). |
||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
||||||
|
|
|
|
Синтаксис |
методаeach |
|
|
|
|
|
||||||
|
each(iterator) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Выполняет |
обход всех элементовобернутомв |
наборе |
вызываети |
функ- |
|||||||||||
|
цию iterator для каждого |
из них . |
|
|
|
|
|
|
|
|
|
|||||
|
Параметры |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
iterator |
(функция |
) Функция |
, которая |
вызывается |
для каждого - элемен |
||||||||||
|
|
та в обернутом |
наборе . Этой функции |
передаются |
|
два параме- |
||||||||||
|
|
тра : индекс элемента |
внутри набора |
( отсчет начинаетсянуля ) с |
||||||||||||
|
|
и сам элемент . Кроме того , элемент устанавливаетсякачестве |
||||||||||||||
|
|
контекста |
функции |
( ссылкаthis). |
|
|
|
|
|
|
|
|||||
Возвращаемое значение
Обернутый набор .
Этот метод |
может |
использоваться |
, например |
, для установки |
значения |
||||||
свойства |
всех элементовобернутомв |
наборе , как показано |
ниже : |
||||||||
$(‘img’).each(function(n){ |
|
|
|
|
|
|
|
||||
this.alt=’This is image[‘+n+’] with an id of ‘+this.id; |
|
|
|
||||||||
}); |
|
|
|
|
|
|
|
|
|
|
|
Эта инструкция |
вызовет |
указанную |
функцию |
для каждого |
элемента н |
||||||
странице |
, которая |
изменит его свойствоalt, записав |
внего строку , со- |
||||||||
держащую |
порядковый |
номер элементазначение |
его атрибутаid. |
|
|||||||
Кроме того , методeach() удобно использовать для обхода |
массивовобъ |
||||||||||
ектов JavaScript дажеи для обхода отдельных |
объектов |
( хотя напрак |
|||||||||
тике последний |
случай |
встречается |
редко ). Например |
: |
|
||||||
$([1,2,3]).each(function(){ alert(this); }); |
|
|
|
|
|
||||||
Эта инструкция |
вызовет |
функциюiterator для каждого элемента |
мас- |
||||||||
сива , переданного |
функции$(), при этом отдельные элементы массива |
||||||||||
будут передаваться |
функцииiterator в виде ссылкиthis. |
|
|
||||||||
Но и это еще не все ! jQuery также позволяет получать подмножества обернутого набора на основевзаимоотношений между элементами дев-
реве DOM. Давайте посмотрим , как это делается .
92 |
Глава 2. Выбор элементов для дальнейшей работы |
|
2.3.4. Получение |
обернутого набора |
|
с учетом взаимоотношений
Библиотека jQuery позволяет получать новые обернутые наборы из имеющихся на основе взаимоотношений между обернутыми элемента-
ми вдереве DOM.
Методы , реализующие |
эту возможность их, иописания |
приводятся |
||||||||||||||
в табл . 2.5. Каждый |
из перечисленных |
методов |
принимает |
селектор |
||||||||||||
в качестве |
необязательного |
параметрапомощью, с |
|
которого |
произво- |
|||||||||||
дится выборка |
требуемых |
элементов |
. При отсутствии |
параметрасе- с |
||||||||||||
лектором |
выбираются |
все допустимые элементы . |
|
|
|
|
|
|||||||||
Все методы таблв . 2.5, |
за исключениемcontents() и offsetParent(), при- |
|||||||||||||||
нимают параметр |
, содержащий |
|
строкуселектором , который можно |
|||||||||||||
использовать |
для фильтрации |
результата . |
|
|
|
|
|
|
|
|||||||
Таблица 2.5. Методы получения нового обернутого набора на основе |
|
|
||||||||||||||
взаимоотношений между элементами в дереве DOM |
|
|
|
|
|
|
|
|||||||||
Метод |
|
|
Описание |
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|||||||||||||
children([selector]) |
Возвращает |
обернутый набор , содержащий уникаль- |
||||||||||||||
|
|
|
ные дочерние |
|
элементы |
обернутых |
элементов . |
|||||||||
closest([selector]) |
Возвращает |
обернутый |
набор , содержащий - един |
|||||||||||||
|
|
|
ственный элемент |
ближайшего |
предка , соответству- |
|||||||||||
|
|
|
ющий |
указанному |
селектору . |
|
|
|
|
|
|
|||||
contents() |
|
|
Возвращает |
обернутый |
набор |
содержимого |
элемен- |
|||||||||
|
|
|
тов обернутого |
набора , куда могут |
входить |
текстовые |
||||||||||
|
|
|
узлы . ( Часто |
используется , чтобы получить содержи- |
||||||||||||
|
|
|
мое элементов<iframe>.) |
|
|
|
|
|
|
|
|
|||||
next([selector]) |
|
Возвращает |
обернутый |
набор , состоящий |
из уникаль- |
|||||||||||
|
|
|
ных соседних |
элементов , следующихдереве DOM за |
||||||||||||
|
|
|
элементами первоначального |
обернутого |
набора . |
|||||||||||
nextAll([selector]) |
Возвращает |
обернутый |
набор , содержащий |
всесосед |
||||||||||||
|
|
|
ние элементы |
|
, следующиедереве DOM зазаэлемента- -- |
|||||||||||
|
|
|
ми первоначального |
обернутого |
набора . |
|
|
|
||||||||
nextUntil([selector]) Возвращает обернутый набор , содержащий - все со седние элементы , следующие в дереве DOM -за эле ментами первоначального обернутого набора , вплоть до элемента ( но не включая его ), соответствующего селектору . Если совпадений с селектором не будетоб наружено или если селектор опущен , отбираются все последующие соседние элементы .
offsetParent() Возвращает обернутый набор , содержащий - роди тельский элемент абсолютным или относительным позиционированием , ближайшийпервомук элементу вобернутом наборе .