2
.pdf
2.3. Манипулирование |
обернутым набором элементов |
93 |
|
||||
|
Метод |
Описание |
|
|
|
|
|
|
|
|
|
|
|
||
|
parent([selector]) |
Возвращает |
обернутый |
набор , куда включаютсяуни |
|||
|
|
кальные прямые предки всех элементобернутомвв |
|||||
|
|
наборе . |
|
|
|
|
|
|
parents([selector]) |
Возвращает обернутый набор , содержащий уникаль- |
|||||
|
|
ные родительские |
элементы всех обернутых элемен- |
||||
|
|
тов . Вих число входят прямые предкитакже, |
все |
||||
|
|
остальные |
родительские |
элементы , за исключением |
|||
|
|
корневого |
элемента |
документа . |
|
|
|
parentsUntil([selector]) Возвращает обернутый набор , содержащий -все ро дительские элементы всех обернутых элементов , вплоть до элемента ( но не включая его ), соответствующего селектору . Если совпаденийселектором не будет обнаружено или если селектор опущен , -отбира ются все родительские элементы .
prev([selector]) |
Возвращает |
обернутый |
набор , состоящий изуни |
|||||
|
кальных |
соседних |
элементов , предшествующих |
|||||
|
в дереве |
DOM элементам |
первоначального |
обернутого |
||||
|
набора . |
|
|
|
|
|
|
|
prevAll([selector]) |
Возвращает |
обернутый |
набор , содержащий - все со |
|||||
|
седние элементы , предшествующиедереве DOM |
|||||||
|
элементам |
первоначального |
обернутого |
набора . |
||||
prevUntil([selector]) |
Возвращает |
обернутый |
набор , содержащий всесосед |
|||||
|
ние элементы , предшествующиедереве DOM эле- |
|||||||
|
ментам |
первоначального |
обернутого |
набора , вплоть |
||||
|
до элемента |
( но не включая |
его ), соответствующего |
|||||
|
селектору . Если совпаденийселектором |
не будет -об |
||||||
|
наружено или если селектор |
опущен , отбираются все |
||||||
|
предшествующие |
соседние |
элементы . |
|
||||
siblings([selector]) Возвращает обернутый набор , содержащийуни кальные соседние элементы , находящиеся на одном уровне вложенности элементамис первоначального обернутого набора .
Рассмотрим ситуацию , когдарезультатев |
щелчка мышью по кнопке |
|
||||
вызывается |
обработчик |
этого |
события |
( подробнее |
об обработчиках- |
со |
бытий рассказывается главе 4), |
которому передается элемент<button> |
|
||||
в виде ссылкиthis. Далее |
предположим |
, что внутри |
обработчика нам |
|
||
требуется |
отыскать блок<div>, в котором |
определена |
эта кнопка .-Сде |
|
||
лать это можно помощьюс |
методаclosest(): |
|
|
|
||
$(this).closest(‘div’)
Но эта инструкция отыщет только самый ближайший родительский элемент <div>; а как быть , если искомый элемент<div> находится выше
в дереве DOM? Это не проблема . Мы можем усовершенствовать - селек
94 |
Глава 2. Выбор элементов для дальнейшей работы |
|
|
|
|
тор , который передается методуclosest(), чтобы точнее обозначить - ис комый элемент :
$(this).closest(‘div.myButtonContainer’)
Теперь будет отобран родительский |
элемент<div> с классом myButtonCon- |
|
|
||||
tainer. |
|
|
|
|
|
|
|
Остальные |
методы , перечисленныетаблв . 2.5, действуют |
похожим- |
об |
|
|||
разом . Возьмем , например , ситуацию , когда |
необходимо отыскать- |
со |
|||||
седнюю кнопку определеннымс |
значение атрибутаtitle: |
|
|
|
|||
$(this).siblings(‘button[title=”Close”]’) |
|
|
|
|
|
||
Эти методы |
обеспечивают большую |
широту |
выбора |
элементов |
из дерева |
||
DOM на основе их взаимоотношений другимис |
элементами . Ноэтои |
|
|
||||
еще не все . Давайте посмотрим |
, что еще jQuery может делатьоберну-с |
|
|
||||
тыми наборами . |
|
|
|
|
|
|
|
2.3.5. Дополнительные |
способы |
использования |
|
|
|
|
||||||||||||
обернутого набора |
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||
Всего вышесказанного , пожалуй |
, достаточно |
, тем не менеерукаве |
|
|||||||||||||||
у jQuery |
есть еще несколько |
приемов , позволяющих |
определять- |
кол |
||||||||||||||
лекции |
обернутых |
объектов . |
|
|
|
|
|
|
|
|
|
|
|
|||||
Метод find() служит |
для поиска |
средипотомков элементов |
, входящих |
|
||||||||||||||
в обернутый |
набор , возвращая |
новый |
набор , который |
содержит- |
все эле |
|||||||||||||
менты , соответствующие |
заданному |
селектору |
. Допустим |
, обернутый |
||||||||||||||
набор хранится переменнойв wrappedSet, тогда |
спомощью |
следующей |
|
|||||||||||||||
инструкции |
мы сможем |
получить |
другой |
обернутый |
набор |
всех цитат |
||||||||||||
(элемент <cite>) из абзацев , которые |
являются |
дочерними элементами |
||||||||||||||||
по отношению элементамк |
обернутого |
набора : |
|
|
|
|
|
|
|
|||||||||
|
wrappedSet.find(‘p cite’) |
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
Как имногие другие методы jQuery для работыобернутымис |
набора- |
|
||||||||||||||||
ми , метод find() обретает |
дополнительную |
мощь |
при использовании |
|||||||||||||||
внутри |
цепочки |
операций . |
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
|
Синтаксис |
метода find |
|
|
|
|
|
|
|
|||||
|
find(selector) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Возвращает |
новый |
обернутый |
набор , содержащий |
все элементы- |
, дочер |
||||||||||||
|
ние по отношению элементамк |
из первоначального |
|
набора , соответству- |
|
|||||||||||||
|
ющие |
заданному |
селектору . |
|
|
|
|
|
|
|
|
|
|
|
|
|||
Параметры
selector (строка ) Селектор jQuery, которому должны соответствовать элементы возвращаемом наборе .
2.3. Манипулирование |
обернутым |
набором |
элементов |
95 |
|
|
|
||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
Возвращаемое |
значение |
|
|
|
|
|
|
|
|
|
|
|||
|
Вновь |
созданный обернутый |
набор |
элементов . |
|
|
|
|
|||||||
|
|
|
|
|
|
||||||||||
Этот метод |
чрезвычайно |
удобно использовать , серединекогдав цепочки |
|
||||||||||||
методов |
jQuery |
необходимо |
выполнить |
поиск |
дочерних элементов |
, где |
|||||||||
невозможно |
изменить контекст |
или как -то иначе ограничить выборку . |
|||||||||||||
Последним |
этомв разделе |
мы исследуем |
один из методов , позволяющих |
||||||||||||
проверять |
обернутый |
набор |
на наличие , по крайней мере , одного- |
эле |
|||||||||||
мента , соответствующего |
заданному |
селектору . Методis() возвраща- |
|
||||||||||||
ет значение true, если |
селектору |
соответствует |
хотя бы один элемент , |
||||||||||||
и false – в противном |
случае . Например |
: |
|
|
|
|
|||||||||
|
var hasImage = $(‘*’).is(‘img’); |
|
|
|
|
|
|
|
|
|
|||||
Эта инструкция |
установит |
значение |
переменнойhasImage равным true, |
|
|||||||||||
если втекущей |
странице |
присутствует |
|
хотя бы один элемент<img>. |
|
||||||||||
Синтаксис метода is
is(selector)
Определяет , имеются лиобернутомв наборе элементы , соответствующие заданному селектору .
Параметры |
|
|
selector (строка ) Селектор , проверяющий наличие искомых |
элементов |
|
в обернутом |
наборе . |
|
Возвращаемое значение |
|
|
true – если заданному |
селектору соответствует хотя бы один |
элемент , |
и false – в противном |
случае . |
|
Это чрезвычайно оптимизированная быстраяи операция , благодаря чему она может использоваться ситуацияхв , когда требуется высокая производительность .
2.3.6. Управление |
цепочкамиметодов |
jQuery |
|
|
|
||||||
Мы проделали |
грандиозную |
работу по изучению |
возможности |
методов |
|||||||
jQuery |
для работы |
собернутыми |
наборами |
объединятьсяцепочкив |
, |
||||||
чтобы |
выполнить |
больше операцийоднойв инструкции |
( и продолжим |
||||||||
двигаться |
втом же направлении |
, потому чтодействительноэто |
гран- |
|
|||||||
диозная работа ). Способность |
|
формировать |
цепочки |
не только - позволя |
|||||||
ет кратко |
записывать мощные |
операции ,повышаетно и |
их эффектив- |
||||||||
ность , потому |
что благодаря |
такой возможности |
ликвидируется- |
необ |
|||||||
96 |
|
|
|
|
|
|
Глава |
2. Выбор элементов |
для дальнейшей |
работы |
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
||||||||||||||||
ходимость |
снова сноваи |
извлекать |
один тоти |
же набор |
элементов |
для |
|
|
|||||||||||||||||
применения |
немук |
нескольких |
методов . |
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||
Внутри |
цепочки , зависимости |
от методов , из которых |
она сконстру- |
|
|||||||||||||||||||||
ирована , может быть сгенерировано |
несколько |
обернутых |
наборов . |
||||||||||||||||||||||
Например |
, при использовании |
методаclone() ( который |
мы подробнее |
|
|
||||||||||||||||||||
рассмотрим |
главе 3) генерируется |
новый |
обернутый |
набор , представ- |
|
||||||||||||||||||||
ляющий |
собой |
точную |
копию |
первого |
набора . Но еслинасбыне убыло |
|
|
||||||||||||||||||
никакой |
возможности |
|
сослаться |
на первоначальный |
|
набор после- |
соз |
||||||||||||||||||
дания копии , наши возможности |
по конструированию |
гибких |
цепочек |
||||||||||||||||||||||
методов |
jQuery |
были |
бы весьма |
ограничены . |
|
|
|
|
|
|
|
|
|
|
|||||||||||
Рассмотрим |
следующую |
инструкцию : |
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||
$(‘img’).filter(‘[title]’).hide(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||
Внутри |
этой инструкции |
создается |
два обернутых |
набора : первона- |
|
||||||||||||||||||||
чальный |
набор |
всех элементов<img> на странице |
ивторой , состоящий |
|
|
||||||||||||||||||||
только |
из элементов |
оригинального |
обернутого набора , имеющих- |
атри |
|||||||||||||||||||||
бут title. ( Конечно , то же самое можно |
было бы сделатьпомощьюс |
се- |
|
|
|||||||||||||||||||||
лектора , но мы привели этот пример |
для демонстрации имеющейся- |
воз |
|||||||||||||||||||||||
можности |
. Представьте |
, чтоцепочкев |
нам потребуется |
|
сделать |
нечто |
|
||||||||||||||||||
очень важное , прежде |
чем вызвать методfilter().) |
|
|
|
|
|
|
|
|
|
|
|
|||||||||||||
Но как быть , если впоследствии |
нам потребуется |
применить |
метод- |
, на |
|||||||||||||||||||||
пример , добавляющий |
имя классапервоначальномук |
|
обернутому - |
на |
|
|
|||||||||||||||||||
бору ужепосле того , как он был отфильтрован |
? Мы не можем |
добавить |
|||||||||||||||||||||||
новый метод конецв цепочки , потому |
что он будет |
воздействовать- |
толь |
||||||||||||||||||||||
ко на элементы |
-изображения |
|
, имеющие |
атрибутtitle, а не на первона- |
|
|
|
||||||||||||||||||
чальный |
набор |
изображений . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||
Для решения |
этой проблемы |
|
jQuery |
предоставляет |
методend(). При |
|
|
|
|||||||||||||||||
использовании |
внутри |
цепочки |
методов |
jQuery |
он выполняет |
откат |
|||||||||||||||||||
к предыдущему |
обернутому |
наборувозвращаети |
|
его , благодаря |
чему |
|
|
||||||||||||||||||
все последующие |
операции |
будут применятьсяпредыдущемук |
набору . |
|
|
||||||||||||||||||||
Например |
: |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$(‘img’).filter(‘[title]’).hide().end().addClass(‘anImage’); |
|
|
|
|
|
|
|
|
|
||||||||||||||||
Метод filter() возвращает |
отфильтрованный |
набор элементов |
-изобра- |
|
|||||||||||||||||||||
жений , но после вызова |
методаend() мы получаем |
предыдущий |
оберну- |
|
|
||||||||||||||||||||
тый набор ( оригинальных |
изображений |
), на который |
затем |
воздейству- |
|||||||||||||||||||||
ет метод addClass(). Без методаend() метод addClass() воздействовал |
бы |
|
|
||||||||||||||||||||||
на отфильтрованный |
набор . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||
Проще |
всего |
представлять |
себе этот механизм |
как стеккоторый, в |
по- |
|
|
||||||||||||||||||
падают обернутые наборы , производимые |
методами |
jQueryцепочкев . |
|
|
|||||||||||||||||||||
При вызове методаend() самый |
верхний |
( то есть самый |
последний- |
) обер |
|||||||||||||||||||||
нутый |
набор |
выталкивается |
|
из стека , открывая |
последующим |
методам |
|||||||||||||||||||
доступ |
кпредыдущему |
|
набору . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||
2.3. Манипулирование |
обернутым |
набором |
элементов |
97 |
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
Синтаксис |
метода |
end |
|
|
|
|
|
|
end() |
|
|
|
|
|
|
|
|
|
Используется |
вцепочках |
методов |
jQuery |
для отката предыдущемук |
|
|
||
|
обернутому |
набору элементов . |
|
|
|
|
|
|
|
|
Параметры |
|
|
|
|
|
|
|
|
|
нет |
|
|
|
|
|
|
|
|
|
Возвращаемое |
значение |
|
|
|
|
|
|
|
|
Предыдущий |
обернутый |
набор . |
|
|
|
|
|
|
|
|
|
|
|
|||||
Другой удобный метод jQuery, который изменяет |
« стек » обернутых- |
на |
|||||||
боров , называетсяandSelf(). Этот метод объединяет |
два самых верхних |
|
|||||||
в стеке набора единыйв обернутый |
набор . |
|
|
|
|
||||
Синтаксис методаandSelf
andSelf()
Объединяет два предыдущих обернутых наборацепочкахв методов.
Параметры
нет
Возвращаемое значение
Объединенный обернутый набор .
Например , инструкция :
$(‘div’)
.addClass(‘a’)
.find(‘img’)
.addClass(‘b’)
.andSelf()
.addClass(‘c’);
отберет |
все элементы<div>, применит нимк классa, создаст |
новый |
обер- |
||
нутый |
набор , содержащий |
все элементы<img>, вложенные |
вотобран- |
||
ные ранее элементы<div>, добавит |
кним классb, создаст третий |
обер- |
|||
нутый |
набор , объединяющий себев |
элементы<div> и вложенные |
нихв |
||
элементы <img>, и применит |
кним классc. |
|
|
||
Уф -ф ! Вконечном итоге все элементы<div> получат классыa и c, а вложенные вних элементы<img> – классы b и c.
98 |
Глава 2. Выбор элементов для дальнейшей работы |
|
|
|
|
Как видите , библиотека jQuery предоставляет широкий набор средств управления обернутыми наборами , позволяющий выполнять - практи чески любые операции над ними .
2.4. Итоги
В этой главе |
все внимание |
было |
сконцентрировано |
|
на созданииуточ- |
и |
||||||||||||
нении наборов элементов этой( в иследующих |
главах |
называемыхобер- |
|
|||||||||||||||
нутыми наборами) с помощью |
множества |
методов , которые библиоте- |
||||||||||||||||
ка jQuery |
предоставляет |
для идентификации |
элементов |
на странице |
||||||||||||||
HTML. |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Библиотека |
jQuery |
обеспечивает |
|
множество |
гибкихмощныхи селекто- |
|
||||||||||||
ров с кратким игибким синтаксисом , напоминающим |
селекторы |
CSS, |
||||||||||||||||
для идентификации |
элементов |
внутри |
страницы |
документаих число. В |
|
|||||||||||||
входят синтаксические |
конструкции |
CSS3,настоящеев |
время |
поддер- |
|
|||||||||||||
живаемые |
большинством |
|
современных |
броузеров . |
|
|
|
|
||||||||||
Библиотека |
jQuery |
также |
позволяет |
создаватьрасширять |
оберну- |
|
||||||||||||
тые наборы , создавая на лету новые |
элементыпомощьюс |
фрагментов |
|
|||||||||||||||
HTMLразметки . Этими |
ничемук не привязанными |
элементами |
-мож |
|||||||||||||||
но манипулировать |
, как любыми |
другими |
элементамиобернутомв |
на- |
|
|||||||||||||
боре , вконечном |
счете присоединяя |
ихтемк или иным |
частям доку- |
|
||||||||||||||
мента страницы . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
Библиотека |
jQuery |
предоставляет |
ряд надежных |
методов |
для усечения |
|||||||||||||
обернутого |
набора , как сразу после |
его создания в, такходеивыполне- |
|
|||||||||||||||
ния цепочки |
методов . Применение |
фильтрующих |
критериевуже имек- |
|
||||||||||||||
ющемуся |
набору |
позволяет |
|
легко |
создавать |
новые |
обернутые |
наборы . |
||||||||||
В общем ицелом |
jQuery |
предоставляет |
множество |
инструментов- |
, по |
|||||||||||||
зволяющих |
нам легко точнои |
идентифицировать элементы |
страницы |
|||||||||||||||
для выполнения |
манипуляций |
над ними . |
|
|
|
|
|
|
|
|||||||||
В этой главе |
мы исследовали |
значительную |
|
часть |
фундамента - , факти |
|||||||||||||
чески не выполняя никаких |
операций |
над элементами |
DOM страницы . |
|||||||||||||||
Зато сейчас |
мы знаем , как выбрать |
элементы |
, на которые |
нужно- |
воз |
|||||||||||||
действовать |
, мыи готовы |
вдохнуть |
жизньнашив |
страницы помощьюс |
|
|||||||||||||
методов jQuery.