2

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

63

Селектор

Описание

*

Соответствует

любому элементу

E

Соответствует

всем

элементамименемс

тегаE

E F

Соответствует

всем элементамименемс

тегаF, вложенным элев-

мент сименем тегаE

E>F

Соответствует

всем элементамименемс

тегаF, являющимся

пря-

мыми потомками

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

тегаE

E+F

Соответствует

всем элементамF, которым

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

пред-

шествует любой

элементE на том же уровне вложенности

E~F

Соответствует

всем элементамF, которым

предшествует

любой

элемент E на том же уровне вложенности

E.C

Соответствует

всем элементамE с именем

классаC. В отсутствие E

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

селектору*.C

E#I

Соответствует

элементуE с идентификатором id)(I. В отсутствие E

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

селектору*.I

E[A]

Соответствует

всем элементамE с атрибутом A, имеющим

любое

значение

E[A=V]

Соответствует

всем элементамE с атрибутом A, имеющим

значе-

ние V

E[AA=V]

Соответствует

всем

элементамE с атрибутом A, значение

которого

начинается Vс

E[A$=V]

Соответствует

всем

элементамE с атрибутом A, значение

которого

заканчивается

наV

E[A*=V]

Соответствует

всем

элементамE с атрибутом A, значение

которого

содержит V

Упражнение

Теперь , обладая

этими сведениями , вернитесьстраницек Selectors

Lab и проведите

еще несколько

экспериментовразличнымис

се-

лекторами из табл2..2. Попробуйте , например

, выбрать элементы

<span>, содержащие текстHello и Goodbye ( подсказка : для этого

вам придется сконструировать

комбинацию

из несколькихселек

торов ).

2.1.4. Выбор элементов

по позиции

Иногда требуется выбрать

элементы

по их положению на странице

или

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

относительно

других

элементовпримеру. К , нам может

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

выбрать

первую ссылку на странице

, или каждый

второй

абзац , или последний

пункт

каждого

списка . Библиотека jQuery-

под

держивает

механизмы

, позволяющие

производить

подобную выборку .

Например

:

a:first

Данному

селектору соответствует первый элеме<a> нта странице .

Таких селекторов

очень много , часть из них определяется

спецификаци-

ей CSS,

другие

относятся библиотеке

jQuery, они могут обеспечить

весьма

элегантное

решение

довольно сложных задачспецификации. В

CSS селекторы

этого типа называютпсевдоклассамия , но вбиблиотеке

jQuery

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

более

строгий терминфильтры, поскольку каж-

дый из этих селекторов

служит дополнительным

фильтром

длябазо

вого селектора

. Эти селекторы -фильтры

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

коде , так как все они начинаютсясимвола

двоеточия:). (Изапомните

,

если вы опускаете

какой -либо базовый

селектор

, по умолчанию

вместо

него будет

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

селектор*.

В табл .2.3

приведен

список

таких позиционных

селекторов

( которые

в документации

библиотеке

jQuery

называютсябазовыми и дочерни-

ми фильтрами

).

Таблица 2.3. Дополнительные селекторы поддерживаемые,

jQuery:

выбирают элементы на основе их местоположения в дереве DOM

Селектор

Описание

:first

Первое

совпадение контекстев

. Селекторli a:first вы-

берет первую ссылку , которая при этом находитсяэле-

в

менте

списка .

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

65

Селектор

Описание

:last

Последнее

совпадение контекстев

. Селекторli a:last

выберет последнюю ссылку , которая

при этом находит-

ся вэлементе списка .

:first-child

Первый дочерний элементконтекстев

. Селектор

li:first-child выберет

первый

элемент каждого списка .

:last-child

Последний дочерний элементконтекстев

. Селектор

li:last-child выберет последний

элемент каждого списка .

:only-child

Выберет все элементы , являющиеся

единственными-

до

черними

элементами .

:nth-child(n)

Выберет n-й дочерний

элементконтекстев

. Селектор

li:nth-child(2) выберет

второй

элементкаждомв

списке .

:nth-child(even|odd)

Четные even( ) или нечетные odd( ) дочерние

элементы

в контексте . Селекторli:nth-child(even) выберет

четные

дочерние

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

списке .

:even

Четные

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

. Селекторli:even выберет

все четные

элементы

списка .

:odd

Нечетные

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

. Селекторli:odd выбе-

рет все нечетные

элементы

списка .

:eq(n)

n-й элемент

:gt(n)

Выберет

элементы

, расположенныеn-мзаэлементом

( не

включая

его ).

:lt(n)

Выберет

элементы

, расположенные

передn-м элементом

(не включая

его ).

Здесь есть одна особенность

. Селектор:nth-child начинает

отсчет

эле-

ментов с1 ( для совместимости CSS),с

тогда

как остальные селекто-

ры – с 0 ( в соответствии общепринятымис

программировании

согла-

шениями ). Накопив

некоторый опыт работыселекторами , вы легко

запомните

правило

« кто есть кто », нопервое

время

это может

стать

источником

ошибок .

Попробуем

углубиться

еще дальше .

Рассмотрим

следующую

таблицу

из примера дерева

DOMлабораторв -

ной работе , содержащую

список

некоторых

языков

программирования

с некоторой

дополнительной

информациейних :о

66

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

Предположим

, нам нужно выбрать

все ячейки таблицы , содержащие

названия языков программирования

. Так как все они являютсяпервы

ми ячейками

строкахв , можно использовать селектор

Выбрать ячейки описанием

типизации , применяемойязыкев програм-

мирования , можнопомощьюс

селектора:nth-child(2), аячейки сгодами

появления

языков– с помощью селектора:nth-child(3) или :last-child.

Если потребуется выбрать

самую последнюю ячейку

таблицыкото- ( в

рой указан

год1983), можно использовать селекторtd:last. Кроме того ,

селектор td:eq(2) выберет

ячейку текстом 1995, td:nth-child(2) выберет

все ячейки

описаниями

типизации , применяемойязыкев

программи-

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

67

рования . Не забывайте , что селектор:eq начинает

отсчет элементов0, с

а селектор :nth-child – с 1.

Упражнение

Прежде чем двинуться дальше , вернитесьстраницек

Selectors Lab

и попробуйте выбратьспискев

вторую четвертуюи

строки списка

.

Затем попробуйте выбрать

ячейку таблицытекстом 1972 тремя

разными способами . Апотом

прочувствуйте разницу

междусе

лектором :nth-child и селекторами выбора элементов

по абсолют-

ной позиции .

2.1.5. CSS инестандартные

селекторыjQuery

Селекторы CSS обеспечивают

высокую гибкостьширокие

возможно-

сти при выборе

требуемых

элементов

DOM, но существует ещемноже

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

, которые

позволяют

еще более точно

фильтровать-

от

$(‘input[type=checkbox][checked]’)

Однако при выборке

по значению

атрибутабудут

учитываться

толь-

ко начальные значения

элементов

управления

, как они определены

в HTMLкоде , тогда

как нам требуется проверить

фактическое

, текущее

значение элемента управления . CSS предлагает

псевдокласс:checked,

выбирающий

только отмеченные

элементы

. Например

, селекторinput

выберет все элементы<input>, а селектор input:checked – только отмечен-

ные элементы<input>.

Помимо этого библиотека

jQuery

предоставляет

еще набор собствен-

ных удобных

фильтров

селекторов , не определяемых

спецификацией

CSS, которые

еще больше

упрощают

идентификацию

отбираемых-

эле

ментов . Например

, селектор:checkbox соответствует

всем элементам

-

флажкам . Комбинирование этимис

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

селекторами-

мо

жет значительно

повысить

гибкость

выбора ; примерами

могут

служить

комбинации

селекторов:radio:checked и :checkbox:checked.

Как уже говорилось

, jQuery поддерживает

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

-фильтры

CSS

а также привносит

множество своих

собственных

селекторов

.- Эти не

стандартные

селекторы

приведенытаблв.2.4.

Упражнение

Выполните

лабораторную

работу еще раз , чтобы

поэксперимен-

тировать

сфильтрами

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

:not.

Библиотека

jQuery

поддерживает также дополнительный

фильтр-

, позво

ляющий выбирать элементы , используя отношение родительмок -.пото

Внимание

Те , кто продолжает

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

версию

jQuery 1.2,

должен помнить , что такие

фильтры ,

как:not() и :has(),

в этой

версии

могут

принимать

только

другие

фильтры . Им нельзя

передавать

селекторы , содержащие

определенияэлемен

тов . Данное

ограничение

было

ликвидировановерсии jQuery 1.3.

Фильтр :has

Как мы уже видели

выше , спецификация

CSS определяет

множество

удобных селекторов

, позволяющих отбирать

дочерние элементы-

из оп

ределенных

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

элементов

. Например , селектор

div span

отберет все элементы<span>, находящиеся

внутри

элементов<div>.

который отбирает родительские элементы<div>, ане дочерние

элементы

<span>.

Это может оказаться

очень удобным

средством

отбора

элементов-

, пред

ставляющих

сложные конструкции

. Например

, предположим , что нам

требуется отыскать строкутаблицев

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

элемент

изображения уникальнымс

значением

атрибутаsrc. Для этого

можно

было

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

такой

селектор

:

$(‘tr:has(img[src$=”puppy.png”])’)

который вернет все строки

таблицы

, содержащие указанное изображе-

ние где -то виерархии

дочерних

элементов .

Далее вы убедитесь , что этотакже,

другие

фильтры jQuery часто-

бу

дут встречаться примерахв

на протяжении

всей книги .

2.2. Создание новых

элементов HTML

71

Как мы уже видели , jQuery

дает нам обширный

набор

инструментов

,

позволяющих

выбирать

элементы

, присутствующиестраницена

, для

выполнения

манипуляций

посредством

методов

jQuery,

которые

будут

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

главе 3. Но прежде

чем перейтирассмотрениюк

этих

методов , нам необходимо

узнать , какпомощьюс

функции$() создавать

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

HTML для включениявыбранные

наборы .

2.2. Создание

новых

элементовHTML

Иногда требуется

создать

новый фрагмент HTMLвставить

его страв-

ницу . Это может быть простой

текст , который

следует

вывести-

при опре

деленных

обстоятельствах

, или нечто более сложное , напримерлица

таб

с результатами

запросаудаленнойк

кбазе данных .

С помощью

jQuery

это делается

легкопростои , как мы уже виделиглав-

ве 1. Помимо

выбора

имеющихся

элементов

страницы

функция$() мо-

жет создавать

новые

элементы

HTML. Рассмотрим

такую

инструкцию

:

$(“<div>Hello</div>”)

Это выражение

создает

новый

элемент<div>, готовый

к добавлению

в страницу

. Мы можем

манипулировать

вновь

созданным

фрагментом

с помощью

любых

методов

jQuery,

применяемыхобернутымк

наборам

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

элементов

. На первый

взглядэтом, в

нет ничего

осо-

бенного , но , когда речь пойдет

об обработчиках

событий , применении

технологий

Ajax создании

визуальных

эффектов ( в последующих-

гла

вах ), мы убедимся , насколько

она удобна .

Обратите внимание : создать пустой

элемент<div> можно спомощью бо-

лее краткой

формы

записи :

$(“<div>”)

Она идентична

инструкциям$(“<div></div>”) и $(“<div/>”), однако

мы

рекомендуем

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

корректно

оформленную

разметку

HTML

и включать

открывающие

закрывающие

теги для определения - эле

ментов любых типов , которые

могут

содержать

другие

элементы .

Создание

простых

элементов

HTML

выглядит

очень простоблагод, а-

ря возможности

объединения

методов

jQueryцепочкив

создание более

сложных

элементов

выглядит

ненамного сложнееобернутому. К

набо-

ру , содержащему

вновь

созданные

элементы

, можно

применять

любые

методы jQuery.

Например

, можно

изменить

оформление

элементапо-

с

мощью методаcss(), добавить вэлемент атрибуты помощьюс метода

attr(). Однако

библиотека

jQuery

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

еще более

удобный-

спо

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

подобных

операций .