Создание обёрнутого набора

15. Введение в jQuery

Создание обёрнутого набора

Обёрнутые наборы (обертки) можно создавать при помощи селекторов, отбирая элементы из DOM-дерева страницы. Кроме того, можно построить обёртку, задав в качестве аргумента функции $ фрагмент HTML-кода. В последнем случае обертка не будет связана с HTML-страницей, но её можно вставить в DOM-дерево документа специальными методами обертки.

В качестве селектора jQuery можно использовать селекторы стандартов CSS1, CSS2 и даже CSS3. При этом не надо переживать, что стандартные селекторы поддерживаются браузерами не полностью — все проблемы с браузерами библиотека решает сама.

Вот несколько простых CSS-селекторов:

Пример селектора	Что войдёт в обёртку
`$("a")`	Все гиперссылки страницы
`$("div.panel")`	Все элементы `DIV` с классом `panel`
`$(".mess")`	Все элементы с классом `mess`
`$("#header")`	Элемент с идентификатором `header`. Идентификаторы на странице уникальны, поэтому в обернутом наборе будет только один элемент.
`$("em, .mark")`	Все элементы `EM` и элементы с классом `mark`
`$("p em")`	Все элементы `EM` расположенные внутри абзацев
`$(".q p.f em")`	Все элементам `EM`, которые вложены в абзацы с классом `f`, которые, в свою очередь, являются потомками элемента с классом `q`.

Более сложные CSS-селекторы:

Пример селектора	Что войдёт в обёртку
`$('p > a')`	Все ссылки, которые являются прямыми потомками абзацев
`$('table + p')`	Все абзацы, которые следуют непосредственно за таблицами (селектор сестринских элементов)
`$('img.p[alt]')`	Все картинки с классом `p`, у которых есть атрибут `alt`
`$('a[href^=http://]')`	Все внешние ссылки (те, которые начинаются с `http://`)

Кроме селекторов CSS библиотека поддерживает собственный набор интересных селекторов. Вот примеры некоторых из них:

Пример селектора	Что войдёт в обёртку
`$('ul#list li:even')`	Все четные элементы списка с идентификатором `list` (`:even` — четные элементы `:odd` — нечетные элементы)
`$('table tr:nth-child(even)')`	Четные строки всех таблиц. Конструкция `:nth-child(even\|odd)` выбирает четные (`even`) или нечетные (`odd`) дочерние элементы
`$("div#content a:visible")`	Все видимые ссылки внутри `DIV` с `id="content"` (`:visible` — видимые элементы)

Аргумент функции $ может содержать фрагмент HTML-кода. В этом случае jQuery создает обернутый фрагмент DOM-дерева, с которым можно работать как с обычным обернутым набором, полученным при помощи селектора. Вставить созданный фрагмент в DOM-дерево страницы можно, например, при помощи метода appendTo:

$("<P>Новый абзац</P>").appendTo("#last")

В этом фрагменте создается абзац который вставляется на страницу в качестве дополнения содержимого элемента с идентификатором last.

Обернутые наборы можно дополнять (команда add), фильтровать (команда filter), выделять подмножество (команда slice).

Из обернутого набора можно удалять элементы (команда not), получать выборку с учетом взаимоотношений элементов (команды children, contens, next, nextAll, parents, prev, prevAll, siblings).

В обернутом наборе можно выполнять поиск (команда find), получая новый набор из результатов поиска.