2

В предыдущей

главе

мы рассматривали различные

способы примене-

ния функции $() из библиотеки

jQuery.

Возможности

этой функции

широки – от отбора элементов

DOMдо определения

функций , которые

должны выполняться

только

после того , как дерево

DOM будет-

полно

стью загружено .

В этой главе мы подробнее

исследуем

порядок

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

DOM

для выполнения операций

, рассмотрев

две наиболее

мощныечастои

используемые

возможности

функции$(): отбор элементов

DOM посред-

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

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

2.1. Отбор

элементовдля манипуляций

Первое , что необходимо

сделать

перед

использованием

практически

все

методов jQuery (

которые

часто называютметодами обертки jQuery), –

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

элементы

страницы

для выполнения

операции .

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

отобрать , описать -достаточ

но легко , например

: « все элементы -абзацы

на странице

». Но иногда-

опи

сание выглядит

более

сложно , например : « все элементы

списков-

, кото

рые имеют

класс CSSlistElement, содержат

ссылку являютсяи

первыми

элементами

спискахв ».

К счастью , jQuery обеспечивает

достаточно

мощный

синтаксисселекто-

ров. Мы можем кратко иэлегантно

определить

практически

любой-

на

бор элементов . Скорее

всего , вы уже поняли , что синтаксис селекторов ,

в основном

, следует уже известномулюбимому

нами синтаксису

CSS,

расширяя

идополняя

его некоторыми

нестандартными

методами выбора

элементов , что позволяет

нам решать

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

задачи .

Эта работа позволит

вам вводить

строки селекторов

jQueryна- и

блюдать

( в реальном

времени !), какие элементы

DOM ониотбира

ют . Вокне броузера эта страница должна выглядеть

, как показано

на рис .2.1 ( если панели

окнев не располагаются однув

линию ,

возможно

, вам следует

расширить

окно броузера

).

Совет

Если вы еще не загрузили

примеры

, сейчас

самое

время сделать–

это

вам будет

проще усвоить

информацию из этой

главы , если вы будете

экспериментировать

со страницами

лабораторных

работ . Посетите веб -

страницу

книги по адресуhttp://www.manning.com/bibeault2,

где вы най-

дете ссылку для загрузки

примеров .

Панель Selector (Селектор

), расположенная

вверху

слева , содержит

поле для ввода текста кнопкуи

. Для запуска

эксперимента

введи-

те селектор

текстовое поле щелкните

по кнопкеApply ( Приме-

нить ). Для начала введите строкуli и щелкните

по кнопкеApply

(Применить

).

Введенный

селектор

(в данном

случаеli) будет

применен HTMLк

-

странице , загруженной элементв

<iframe> в панели DOM Sample ( при-

мер дерева

DOM), расположенной

вверху справа . Программный код

56

Глава 2. Выбор элементов для дальнейшей работы

2.1.1. Управление

контекстом

До настоящего

момента

мы всё представляли

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

$() принимает

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

аргумент

, но на самом

деле мы просто-

ста

рались не усложнять

первое

знакомство библиотекойс

. Фактически

в некоторых случаях

вместе селектором

или фрагментом

разметки

HTML функция$() может принимать

второй аргумент

. Когдапервом

аргументе

передается

селектор , второй

аргумент определяетконтекст

операции .

Как вы узнаете

далее , многие методы jQuery

используют

достаточно

разумные

значения

по умолчанию

вместо опущенных аргументовже

. То

относится

ик аргументу context, определяющему

контекст

операции .

Когда в первом

аргументе передается селектор

( особенности

работы

с фрагментами

разметки

HTML мы будем рассматривать

позднее-

), ис

пользуется

контекст

по умолчанию

, который

обеспечивает

применение

селектора

ко всем элементамдереве DOM.

2.1. Отбор элементов для манипуляций

57

Чаще

всего

именно

это нам требуетсяи

, поэтому

такое

поведение

по

умолчанию

подходит

нам наилучшим

образом . Но иногда бывает-

необ

ходимо сузить

круг поискаограничиться

некоторым

подмножеством

дерева

DOM. подобныхВ

случаях мы можем

определить

подмножество ,

указав

корень

поддерева которому,

должен применяться

селектор .

Лабораторная

работаSelectors Lab позволяет

поэкспериментировать та-

с

ким сценарием

. Когда

вы пытаетесь

применить

селектор , введенный

в текстовое

поле ввода , этот селектор

применяется

толькоп дмнок -

жеству дерева

DOM– к фрагменту , загруженному панельв

DOM Sample

(Пример дерева DOM).

В качестве

контекста

можно

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

ссылку

на элемент дерева

DOM,

но точно

так же можно

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

строку , содержащуюселек

тор jQuery,

или обернутый

набор

элементов

DOM. ( Да , это означает , что

мы можем

передавать

результат

одного

вызова

функции$() в другой –

не падайте

духом , на самом

деле все не так сложно , как выглядит

на

первый взгляд .)

Когда

вкачестве контекста

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

селектор

или обернутый-

на

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

, идентифицируемые

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

играть - роль кон

текста

для операции

применения

селектора

. Так как таких элементов

может

быть несколько

, это дает отличную

возможность

определить

в качестве

контекста операции выбора сразу несколько непересекаю-

щихся

поддеревьев

DOM.

58

Глава 2. Выбор элементов для дальнейшей работы

В табл . 2.1 приводится

несколько

примеров

, которые

помогут - вам бы

стро все вспомнить . Подбираясмешивая

различные базовые

типы-

се

лекторов

, можно отбирать

группы

элементовоченьс высокой

степенью

точности .

Работая

сбиблиотекой

jQuery,

мы можем использовать

уже привыч-

ные селекторы

CSS. Чтобы выбрать

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

jQuery, нужно

обернуть

селектор функцией$(), например

:

$(“p a.specialClass”)

За некоторыми

исключениями

, библиотека

jQuery

полностью - совме

стима со спецификацией

CSS3,

поэтому операция

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

не

содержит

всебе сюрпризов – механизм

селекторов

библиотеки

jQuery

отберет те же элементы

, которые

могли быть отобраны

реализацией-

та

блиц стилей

вброузерах

, совместимых

со стандартами

. Примечатель-

но , что jQueryне зависит

от реализации

CSSброузерев

, под управлени-

ем которого

выполняется

программный

код . Даже броузерееслив

нет

корректной

реализации

селекторов

CSS, jQuery

все равно будет-

коррек

тно выбирать

элементы соответствии

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

стандартами

консорциума

World Wide Web Consortium (W3C).

Пример

Описание

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>

Предположим , нам нужно

выбрать ссылку

на удаленный сайт jQuery,

не выбирая

ссылки на различные локальные

страницыописанием спе-

цификаций

CSS. помощьюС

базовых селекторов можно было бы-скон

струировать

что -нибудь вродеul.myList li a. К сожалению , этот селектор

соберет все ссылки , потому

что все они входятсостав списка .

60

Глава 2. Выбор элементов для дальнейшей работы

нуть по кнопкеApply. Результат

должен получиться

таким , как показано

на рис .2.3.

Улучшенный

вариант заключаетсяиспользовании селектора потом-

ков, в котором

родительский

элементегоипрямой

потомок разделены

ul.myList > li > a

Этот селектор выберет только ссылки , являющиеся

прямыми - потом

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

списка , которые ,свою очередь , являются прямы-

ми потомками

элементов<ul> с классом myList. Ссылки

во вложенных

списках выбираться

не будут , потому

что элементы<ul>, выступающие

в качестве родительских для элементов подсписков<li>, не принадле-

жат классуmyList ( рис .2.4).

Селекторы атрибутов также обладают

достаточно

широкими возмож-

ностями . Представьте

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

специальное-

по

2.1. Отбор элементов для манипуляций

61

Ссылка на внешний сайт отличается

от других

ссылок

наличием-

стро

ки http:// в начале

значения

атрибутаhref. Мы могли

бы отобрать ссыл-

ки , вкоторых значение атрибутаhref начинается

последовательности

символов http://:

a[hrefA=http://]

Этому селектору

соответствуют

все ссылки , значение атрибуhref котоа-

рых начинается последовательности

символовhttp://. Символ

крышки

(A) указывает , что совпадение следует

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

значения атрибу-

та . Этот же символ большинстве

механизмов

регулярных

выражений

указывает , что совпадение

должно

находитьсяначалев строки . Это лег-

ко запомнить .

62

Глава 2. Выбор элементов для дальнейшей работы

Есть идругие

способы

применения селекторов атрибутов . Выбрать-

эле

мент сопределенным

атрибутом

независимо

от его значения

позволяет

селектор

form[method]

Этому селектору

соответствуют

любые

элементы<form>, в которых

явно

определен

атрибутmethod.

Выбрать

элементы определеннымс

значением

атрибута

позволяет-

се

лектор

input[type=text]

Этому селектору

соответствуют

все элементы

вводаtextтипа.

Мы уже рассматривали

селектор

, которому

соответствуют

элементы ,

где « совпадение

находитсяначалев

значения атрибута ». Вот еще один

такой селектор :

div[titleA=’my’]

Этот селектор

выбирает

все элементы<div> с атрибутом title, значение

которого

начинается последовательности

символовmy.

Можно ли сконструировать селектор

, где « совпадение

находитсякон-

в

це значения атрибута

»? Пожалуйста

:

Как вы наверняка

уже поняли , этому

селектору

соответствуютвсе эле

менты <a>, которые

ссылаются

на сайт jQuery.

В табл . 2.2 приводятся

селекторы

CSS, которые

можно использовать

с библиотекой jQuery.

На случай , если рассмотренных

выше

селекторов

окажется недостаточ-

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

возможность

нарезать страницу на еще более

тонкие ломтики вдольпопереки

.