2
.pdfГлава 2.
Выбор элементов для дальнейшей работы
В этой главе :
x Отбор элементов , которые будут обернуты jQuery, сприменением селекторов
x Создание иразмещение новых элементов
HTML вдереве DOM
x Манипуляции обернутымс набором элементов
В предыдущей |
главе |
мы рассматривали различные |
способы примене- |
|||||
ния функции $() из библиотеки |
jQuery. |
Возможности |
этой функции |
|||||
широки – от отбора элементов |
DOMдо определения |
функций , которые |
||||||
должны выполняться |
только |
после того , как дерево |
DOM будет- |
полно |
||||
стью загружено . |
|
|
|
|
|
|
|
|
В этой главе мы подробнее |
исследуем |
порядок |
отбора элементов |
DOM |
||||
для выполнения операций |
, рассмотрев |
две наиболее |
мощныечастои |
|
||||
используемые |
возможности |
функции$(): отбор элементов |
DOM посред- |
|||||
ством селекторов и создание |
новых элементов DOM. |
|
|
Множество возможностей , необходимых для реализации полнофункциональных веб -приложений , достигается за счет манипулирования элементами DOM, из которых состоят страницы . Но прежде чем ими манипулировать , необходимо их идентифицироватьотобратьи . Давай-
те приступим кподробному изучению тех способов , которыми jQuery позволяет нам определять , какие элементы должны быть отобраны для выполнения манипуляций .
54 Глава 2. Выбор элементов для дальнейшей работы
2.1. Отбор |
элементовдля манипуляций |
|
|
|
|
|
|
||||||||
Первое , что необходимо |
сделать |
перед |
использованием |
практически |
все |
||||||||||
методов jQuery ( |
которые |
часто называютметодами обертки jQuery), – |
|
|
|||||||||||
это выбрать некоторые |
элементы |
страницы |
для выполнения |
операции . |
|||||||||||
Иногда набор элементов , которые требуется |
отобрать , описать -достаточ |
||||||||||||||
но легко , например |
: « все элементы -абзацы |
на странице |
». Но иногда- |
опи |
|||||||||||
сание выглядит |
более |
сложно , например : « все элементы |
списков- |
, кото |
|||||||||||
рые имеют |
класс CSSlistElement, содержат |
ссылку являютсяи |
|
первыми |
|
|
|||||||||
элементами |
спискахв ». |
|
|
|
|
|
|
|
|
|
|
|
|
||
К счастью , jQuery обеспечивает |
достаточно |
мощный |
синтаксисселекто- |
|
|
||||||||||
ров. Мы можем кратко иэлегантно |
определить |
практически |
любой- |
на |
|
||||||||||
бор элементов . Скорее |
всего , вы уже поняли , что синтаксис селекторов , |
||||||||||||||
в основном |
, следует уже известномулюбимому |
нами синтаксису |
CSS, |
|
|
||||||||||
расширяя |
идополняя |
его некоторыми |
нестандартными |
методами выбора |
|||||||||||
элементов , что позволяет |
нам решать |
как простыесложные, так и |
задачи . |
|
Лабораторная работа : селекторы
Чтобы помочь вам изучить принципы выбора элементов ,-мы вклю чили всостав загружаемого пакетапримерамис для этой книги лабораторную работуSelectors Lab ( она находится файлев chapter2/ lab.selectors.html).
Эта работа позволит |
вам вводить |
строки селекторов |
jQueryна- и |
|||
блюдать |
( в реальном |
времени !), какие элементы |
DOM ониотбира |
|||
ют . Вокне броузера эта страница должна выглядеть |
, как показано |
|||||
на рис .2.1 ( если панели |
окнев не располагаются однув |
линию , |
||||
возможно |
, вам следует |
расширить |
окно броузера |
). |
|
Совет |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Если вы еще не загрузили |
примеры |
, сейчас |
самое |
время сделать– |
это |
||||||||||
вам будет |
проще усвоить |
информацию из этой |
главы , если вы будете |
||||||||||||
экспериментировать |
со страницами |
лабораторных |
работ . Посетите веб - |
||||||||||||
страницу |
книги по адресуhttp://www.manning.com/bibeault2, |
где вы най- |
|
|
|
||||||||||
дете ссылку для загрузки |
примеров . |
|
|
|
|
|
|
|
|||||||
|
|
|
|
|
|||||||||||
Панель Selector (Селектор |
), расположенная |
вверху |
слева , содержит |
||||||||||||
поле для ввода текста кнопкуи |
. Для запуска |
эксперимента |
введи- |
||||||||||||
те селектор |
текстовое поле щелкните |
по кнопкеApply ( Приме- |
|||||||||||||
нить ). Для начала введите строкуli и щелкните |
по кнопкеApply |
||||||||||||||
(Применить |
). |
|
|
|
|
|
|
|
|
|
|
|
|
||
Введенный |
селектор |
(в данном |
случаеli) будет |
применен HTMLк |
- |
|
|||||||||
странице , загруженной элементв |
<iframe> в панели DOM Sample ( при- |
||||||||||||||
мер дерева |
DOM), расположенной |
вверху справа . Программный код |
2.1. Отбор элементов для манипуляций |
55 |
jQuery встранице примера выделит выбранные элементы красной рамкой . После щелчка по кнопкеApply ( Применить ) вы должны увидеть вокне броузера изображение , как показано на2.2,рисгде. выделены все элементы<li> на странице .
Обратите |
внимание : элементы<li> на странице заключены рамв - |
|
||||
ку , аниже текстового |
поля ввода отображается |
выполняемая- |
ин |
|||
струкция jQuery вместеименамис |
тегов выбранных элементов . |
|
||||
HTMLкод страницы , отображаемойпанелив DOM Sample ( Пример |
|
|||||
дерева DOM), |
выводится панелив |
DOM Sample Code (Исходный код |
|
|||
примера |
дерева DOM), |
чтобы вам было проще |
писать селекторы , |
|||
отбирающие |
элементы |
из этого |
примера . |
|
|
Рис . 2.1.Страница Selectors Lab позволяет исследовать поведение любых селекторов в реальном времени
Мы еще будем возвращатьсяэтойк лабораторной работеэтойв главе . Но сначала авторы должны признать , что до этого они намеренно упрощали одно очень важное понятие сейчаси собираются это исправить .
56 |
Глава 2. Выбор элементов для дальнейшей работы |
|
|
|
|
Выбранные
элементы
выделяются Выполняемая рамкой ифоном инструкция
jQuery
Элементы , соответствующие селектору
Рис . 2.2.Селектору со значением li соответствуют все элементы <li>, как это видно по результату применения этого селектора
2.1.1. Управление |
контекстом |
|
|
|
|
|
|
|
|
|||||
До настоящего |
момента |
мы всё представляли |
так , как будто функция |
|||||||||||
$() принимает |
единственный |
аргумент |
, но на самом |
деле мы просто- |
ста |
|||||||||
рались не усложнять |
первое |
знакомство библиотекойс |
. Фактически |
|
|
|||||||||
в некоторых случаях |
вместе селектором |
или фрагментом |
разметки |
|
||||||||||
HTML функция$() может принимать |
второй аргумент |
. Когдапервом |
|
|
||||||||||
аргументе |
передается |
селектор , второй |
аргумент определяетконтекст |
|
|
|||||||||
операции . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Как вы узнаете |
далее , многие методы jQuery |
используют |
достаточно |
|
||||||||||
разумные |
значения |
по умолчанию |
вместо опущенных аргументовже |
. То |
||||||||||
относится |
ик аргументу context, определяющему |
контекст |
операции . |
|
||||||||||
Когда в первом |
аргументе передается селектор |
( особенности |
работы |
|
||||||||||
с фрагментами |
разметки |
HTML мы будем рассматривать |
позднее- |
), ис |
|
|||||||||
пользуется |
контекст |
по умолчанию |
, который |
обеспечивает |
применение |
|||||||||
селектора |
ко всем элементамдереве DOM. |
|
|
|
|
|
|
|
2.1. Отбор элементов для манипуляций |
|
|
|
|
|
|
|
|
57 |
|
|
|
||||||
Чаще |
всего |
именно |
это нам требуетсяи |
, поэтому |
такое |
поведение |
по |
|
||||||||||
умолчанию |
подходит |
нам наилучшим |
образом . Но иногда бывает- |
необ |
||||||||||||||
ходимо сузить |
круг поискаограничиться |
некоторым |
подмножеством |
|
||||||||||||||
дерева |
DOM. подобныхВ |
случаях мы можем |
определить |
|
подмножество , |
|||||||||||||
указав |
корень |
поддерева которому, |
должен применяться |
селектор . |
|
|||||||||||||
Лабораторная |
работаSelectors Lab позволяет |
поэкспериментировать та- |
с |
|
||||||||||||||
ким сценарием |
. Когда |
вы пытаетесь |
применить |
селектор , введенный |
||||||||||||||
в текстовое |
поле ввода , этот селектор |
применяется |
толькоп дмнок - |
|
|
|||||||||||||
жеству дерева |
DOM– к фрагменту , загруженному панельв |
DOM Sample |
|
|
||||||||||||||
(Пример дерева DOM). |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
В качестве |
контекста |
можно |
использовать |
ссылку |
на элемент дерева |
|||||||||||||
DOM, |
но точно |
так же можно |
использовать |
строку , содержащуюселек |
||||||||||||||
тор jQuery, |
или обернутый |
набор |
элементов |
DOM. ( Да , это означает , что |
||||||||||||||
мы можем |
передавать |
результат |
одного |
вызова |
функции$() в другой – |
|
|
|||||||||||
не падайте |
духом , на самом |
деле все не так сложно , как выглядит |
на |
|||||||||||||||
первый взгляд .) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
Когда |
вкачестве контекста |
используется |
селектор |
или обернутый- |
на |
|||||||||||||
бор элементов |
, идентифицируемые |
им элементы будут |
играть - роль кон |
|||||||||||||||
текста |
для операции |
применения |
селектора |
. Так как таких элементов |
||||||||||||||
может |
быть несколько |
, это дает отличную |
возможность |
определить |
||||||||||||||
в качестве |
контекста операции выбора сразу несколько непересекаю- |
|||||||||||||||||
щихся |
поддеревьев |
DOM. |
|
|
|
|
|
|
|
|
|
|
|
|
|
Вернемся кнашей лабораторной работе . Предположим , что строкасе лектора хранится переменнойв именемс selector. Селектор , введенный пользователем , требуется применить толькопримерук дерева DOM, - ко торый находится внутри элемента<div> с атрибутом id, имеющим зна-
чение sampleDOM.
Если бы мы вызвали функцию jQuery так :
$(selector)
селектор был бы применен ко всему дереву DOM, включая фкорму- , в торой селектор был определен . Это не совсем то , что нам требуется . На самом деле нам необходимо ограничить процедуру отбора поддеревом DOM с корнем вэлементе <div>, в котором атрибутid имеет значение sampleDOM, поэтому мы должны использовать инструкцию
$(selector,’div#sampleDOM’)
которая ограничивает область применения селектора определенным фрагментом дерева DOM.
Теперь , когда мы знаем , как управлять областью применения - селекто ров , мы можем поближе познакомитьсясинтаксисом селекторов ,- на
чав суже знакомых селекторов CSS.
58 |
Глава 2. Выбор элементов для дальнейшей работы |
|
|
|
|
2.1.2. Базовые селекторыCSS
Для применения стилей элементамк страницы веб -разработчики- ис пользуют несколько мощныхудобныхи методов выбора , работающих во всех типах броузеров . Это методы выбора элементов по идентификатору ( по атрибутуid), имени класса CSS, имени тегапои положению элементов виерархии дерева DOM.
В табл . 2.1 приводится |
несколько |
примеров |
, которые |
помогут - вам бы |
|||||||||||||
стро все вспомнить . Подбираясмешивая |
различные базовые |
типы- |
се |
|
|||||||||||||
лекторов |
, можно отбирать |
группы |
элементовоченьс высокой |
степенью |
|
|
|||||||||||
точности . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Работая |
сбиблиотекой |
jQuery, |
мы можем использовать |
|
уже привыч- |
|
|||||||||||
ные селекторы |
CSS. Чтобы выбрать |
элементыпомощьюс |
jQuery, нужно |
|
|||||||||||||
обернуть |
селектор функцией$(), например |
: |
|
|
|
|
|
|
|
|
|||||||
$(“p a.specialClass”) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
За некоторыми |
исключениями |
, библиотека |
jQuery |
полностью - совме |
|
||||||||||||
стима со спецификацией |
CSS3, |
поэтому операция |
выбора элементов |
не |
|||||||||||||
содержит |
всебе сюрпризов – механизм |
селекторов |
библиотеки |
jQuery |
|
||||||||||||
отберет те же элементы |
, которые |
могли быть отобраны |
реализацией- |
та |
|||||||||||||
блиц стилей |
вброузерах |
, совместимых |
со стандартами |
. Примечатель- |
|
||||||||||||
но , что jQueryне зависит |
от реализации |
CSSброузерев |
, под управлени- |
|
|
||||||||||||
ем которого |
выполняется |
программный |
код . Даже броузерееслив |
нет |
|
|
|||||||||||
корректной |
реализации |
селекторов |
CSS, jQuery |
все равно будет- |
коррек |
||||||||||||
тно выбирать |
элементы соответствии |
правиламис , установленными |
|
|
|||||||||||||
стандартами |
консорциума |
World Wide Web Consortium (W3C). |
|
|
|
Кроме того , библиотека jQuery позволяет объединять несколькоселек торов водно выражение помощьюс оператора запятой . Например- , ото брать все элементы<div> и все элементы <span> можно было бы такой инструкцией :
$(‘div,span’)
Таблица 2.1. Несколько примеров простых селекторов
Пример |
Описание |
|
|
|
|
|
|
a |
Соответствует |
всем элементам -ссылкам<a>) ( |
|
specialID |
Соответствует |
элементам со значениемspecialID |
|
|
в атрибуте id |
|
|
.specialClass |
Соответствует |
элементамклассом CSS specialClass |
|
a#specialID.specialClass |
Соответствует |
ссылкамидентификаторомс |
specialID |
|
и с классом specialClass |
|
|
p a.specialClass |
Соответствует |
ссылкамклассом specialClass, |
|
|
объявленным |
внутри элементов<p> |
|
|
|
|
|
2.1. Отбор элементов для манипуляций |
59 |
|
|
|
|
|
|
Упражнение |
|
|
|
|
|
|
|
|
|||
|
Для тренировки |
поэкспериментируйте |
различнымис |
базовыми |
|
|
|
||||||||||
|
селекторами |
CSS |
на страницеSelectors Lab, чтобы |
набить |
руку . |
|
|
|
|
||||||||
|
|
|
|
|
|
||||||||||||
Эти базовые селекторы |
обладают широкими |
возможностями |
, но иногда |
||||||||||||||
бывает необходима |
еще более |
высокая |
точность |
выбора элементов- |
. Биб |
||||||||||||
лиотека |
jQuery |
соответствии |
|
этимис |
ожиданиями |
расширяет |
стан- |
|
|||||||||
дартный |
набор |
улучшенными |
селекторами . |
|
|
|
|
|
|
|
|||||||
2.1.3. Селекторы |
выбора |
потомков, контейнеров |
|
|
|
|
|
||||||||||
и атрибутов |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
В качестве |
улучшенных |
селекторов |
jQuery использует следующее- |
по |
|||||||||||||
коление |
каскадных |
таблиц |
стилей |
(CSS), поддерживаемых |
Mozilla- |
Fire |
|||||||||||
fox, Internet Explorer 7 |
8,иSafari, Chrome |
другими современными |
|
|
|||||||||||||
броузерами . Эти селекторы |
позволяют |
выбирать |
прямых потомков- |
не |
|||||||||||||
которых |
элементов , элементы , следующиедереве |
DOM за заданными , |
|
||||||||||||||
а также |
элементы , значения |
|
атрибутов |
которых |
соответствуют - |
опреде |
|||||||||||
ленным |
условиям . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
Иногда |
требуется выбрать только прямых потомков определенного- |
эле |
|||||||||||||||
мента . Например , возможно , мы хотим выбрать |
из некоторого |
списка |
|||||||||||||||
элементы |
, но не элементы вложенных |
списков . Рассмотрим |
фрагмент |
||||||||||||||
разметки |
HTML из примераSelectors Lab: |
|
|
|
|
|
|
|
|
|
<ul class=”myList”>
<li><a href=”http://jquery.com”>jQuery supports</a> <ul>
<li><a href=”css1”>CSS1</a></li> <li><a href=”css2”>CSS2</a></li> <li><a href=”css3”>CSS3</a></li> <li>Basic XPath</li>
</ul>
</li>
<li>jQuery also supports <ul>
<li>Custom selectors</li> <li>Form selectors</li>
</ul>
</li>
</ul> |
|
|
|
Предположим , нам нужно |
выбрать ссылку |
на удаленный сайт jQuery, |
|
не выбирая |
ссылки на различные локальные |
страницыописанием спе- |
|
цификаций |
CSS. помощьюС |
базовых селекторов можно было бы-скон |
|
струировать |
что -нибудь вродеul.myList li a. К сожалению , этот селектор |
||
соберет все ссылки , потому |
что все они входятсостав списка . |
60 |
Глава 2. Выбор элементов для дальнейшей работы |
|
|
|
|
Рис . 2.3.Селектор ul.myList li a выбирает все якорные теги в элементах <li> независимо от глубины вложенности
Попробуйте ввести на страницеSelectors Lab селектор ul.myList li a и щелк-
нуть по кнопкеApply. Результат |
должен получиться |
таким , как показано |
|
на рис .2.3. |
|
|
|
Улучшенный |
вариант заключаетсяиспользовании селектора потом- |
||
ков, в котором |
родительский |
элементегоипрямой |
потомок разделены |
правой угловой скобкой>): (
p > a
Этому селектору соответствуют только те ссылки , которые являются прямыми потомками элемента<p>. Если ссылка вложена глубже ,- на пример , находится внутри элемента<span>, вложенного вэлемент <p>,
она не будет выбрана .
Возвращаясь примерук , рассмотрим следующий селектор :
ul.myList > li > a |
|
|
|
|
|
|
Этот селектор выберет только ссылки , являющиеся |
прямыми - потом |
|||||
ками элементов |
списка , которые ,свою очередь , являются прямы- |
|
||||
ми потомками |
элементов<ul> с классом myList. Ссылки |
во вложенных |
|
|||
списках выбираться |
не будут , потому |
что элементы<ul>, выступающие |
|
|||
в качестве родительских для элементов подсписков<li>, не принадле- |
|
|||||
жат классуmyList ( рис .2.4). |
|
|
|
|
||
Селекторы атрибутов также обладают |
достаточно |
широкими возмож- |
||||
ностями . Представьте |
, что нам требуется определить |
специальное- |
по |
2.1. Отбор элементов для манипуляций |
61 |
Рис . 2.4.Селектор ul.myList > li > a выбирает только прямых потомков родительских узлов
ведение только для ссылок , указывающих на внешние сайты . Давайте снова посмотрим на фрагмент страницыSelectors Lab, который мы уже рассмотрели ранее :
<li><a href=”http://jquery.com”>jQuery supports</a> <ul>
<li><a href=”css1”>CSS1</a></li> <li><a href=”css2”>CSS2</a></li> <li><a href=”css3”>CSS3</a></li> <li>Basic XPath</li>
</ul>
</li>
Ссылка на внешний сайт отличается |
от других |
ссылок |
наличием- |
стро |
|||||
ки http:// в начале |
значения |
атрибутаhref. Мы могли |
бы отобрать ссыл- |
|
|||||
ки , вкоторых значение атрибутаhref начинается |
последовательности |
|
|||||||
символов http://: |
|
|
|
|
|
|
|
|
|
a[hrefA=http://] |
|
|
|
|
|
|
|
|
|
Этому селектору |
соответствуют |
все ссылки , значение атрибуhref котоа- |
|
||||||
рых начинается последовательности |
символовhttp://. Символ |
крышки |
|
||||||
(A) указывает , что совпадение следует |
искатьначалев |
значения атрибу- |
|
||||||
та . Этот же символ большинстве |
механизмов |
регулярных |
выражений |
||||||
указывает , что совпадение |
должно |
находитьсяначалев строки . Это лег- |
|
||||||
ко запомнить . |
|
|
|
|
|
|
|
|
|
62 |
Глава 2. Выбор элементов для дальнейшей работы |
|
|
|
|
Откройте страницуSelectors Lab, откуда был взят фрагмент HTML-- раз метки , введите текстовое поле селекторa[hrefA=’http://’] и щелкните
по кнопкеApply. Обратите внимание : выделилась только ссылка на сайт jQuery.
Есть идругие |
способы |
применения селекторов атрибутов . Выбрать- |
эле |
||||||||||
мент сопределенным |
атрибутом |
независимо |
от его значения |
позволяет |
|||||||||
селектор |
|
|
|
|
|
|
|
|
|
|
|
|
|
form[method] |
|
|
|
|
|
|
|
|
|
|
|
|
|
Этому селектору |
соответствуют |
любые |
элементы<form>, в которых |
явно |
|
|
|||||||
определен |
атрибутmethod. |
|
|
|
|
|
|
|
|
|
|||
Выбрать |
элементы определеннымс |
значением |
атрибута |
позволяет- |
се |
||||||||
лектор |
|
|
|
|
|
|
|
|
|
|
|
|
|
input[type=text] |
|
|
|
|
|
|
|
|
|
|
|
||
Этому селектору |
соответствуют |
все элементы |
вводаtextтипа. |
|
|
|
|||||||
Мы уже рассматривали |
селектор |
, которому |
соответствуют |
элементы , |
|||||||||
где « совпадение |
находитсяначалев |
значения атрибута ». Вот еще один |
|||||||||||
такой селектор : |
|
|
|
|
|
|
|
|
|
|
|
||
div[titleA=’my’] |
|
|
|
|
|
|
|
|
|
|
|
||
Этот селектор |
выбирает |
все элементы<div> с атрибутом title, значение |
|
|
|||||||||
которого |
начинается последовательности |
символовmy. |
|
|
|
|
|||||||
Можно ли сконструировать селектор |
, где « совпадение |
находитсякон- |
|
в |
|||||||||
це значения атрибута |
»? Пожалуйста |
: |
|
|
|
|
|
|
a[href$=’.pdf’]
Этот удобный селектор позволяет выбрать все ссылки , указывающие н файлы PDF.
Вот пример селектора , выбирающего ссылки , которые содержатопре деленную последовательность символовлюбомв месте значения атрибута :
a[href*=’jquery.com’]
Как вы наверняка |
уже поняли , этому |
селектору |
соответствуютвсе эле |
|||
менты <a>, которые |
ссылаются |
на сайт jQuery. |
|
|||
В табл . 2.2 приводятся |
селекторы |
CSS, которые |
можно использовать |
|||
с библиотекой jQuery. |
|
|
|
|
|
|
На случай , если рассмотренных |
выше |
селекторов |
окажется недостаточ- |
|||
но , есть дополнительная |
возможность |
нарезать страницу на еще более |
||||
тонкие ломтики вдольпопереки |
. |
|
|
|