Дополнительная выборка элементов или навигация по ним

Послание № 15

Изменение структуры документа

Мы уже познакомились с методами html() и text(), позволяющими изменять содержимое элемента. В этом разделе будут рассматриваться методы, позволяющие производить более сложные изменения в документе.

В браузере HTML документы представлены в виде дерева узлов, а не в виде линейной последовательности символов, поэтому вставку, удаление и замену фрагмента документа выполнить не так просто, как фрагмента строки или массива.

Вставка и замена элементов

Все методы, демонстрирующийся ниже, принимают аргумент, определяющий содержимое, которое должно быть вставлено в документ. Это может быть строка с простым текстом или с разметкой HTML, определяющая содержимое, объект jQuery, элемент Element или текстовый узел Node.

Вставка может быть выполнена внутрь, перед, после или вместо (в зависимости от метода) каждого выбранного элемента. Если в качестве вставляемого содержимого используется элемент, уже присутствующий в документе, он перемещается из текущего местоположения. Если выполняется вставка сразу в несколько мест, элемент будет скопирован необходимое число раз. Все эти методы возвращают объект jQuery, относительно которого они вызываются. Обратите, однако, внимание, что после вызова метода replaceWith() элементы, находящиеся в объекте jQuery, исключаются из документа:

$("#log").append("<br>" + message); // до­ба­вить со­дер­жи­мое в ко­нец элемента #log

$("h1").prepend("§"); // до­ба­вить сим­вол па­ра­гра­фа в на­ча­ло ка­ж­до­го эле­мен­та <h1>

$("h1").before("<hr>"); // вста­вить ли­нию пе­ред ка­ж­дым элементом <h1>

$("h1").after("<hr>"); // вста­вить ли­нию по­сле <h1>

$("hr").replacewith("<br>"); // за­ме­нить эле­мен­ты <hr> на <br>

Все пять методов, представленные выше, применяются к целевым элементам и принимают вставляемое содержимое в виде аргумента.

Для каждого из этих пяти методов имеется парный метод, действующий в обратном порядке: он вызывается относительно содержимого и принимает целевые элементы в виде аргументов. Пары методов перечислены в следующей таблице:

Есть несколько важных замечаний, касающихся этих методов:

· Если любому методу из второго столбца передать строку, он будет интерпретировать ее как разметку HTML. Если передать строку любому методу из третьего столбца, он будет интерпретировать ее как селектор, идентифицирующий целевые элементы.

· Методы из третьего столбца не принимают функции в аргументах, в отличие от методов из второго столбца.

· Методы из второго столбца возвращают объект jQuery, относительно которого они вызываются. Элементы в этом объекте jQuery могут иметь новое содержимое или новые братские элементы, но сами они не изменяются. Методы из третьего столбца вызываются относительно содержимого, которое должно быть вставлено, и возвращают новый объект jQuery, представляющий новое содержимое после вставки. В частности, обратите внимание, что если содержимое вставляется сразу в несколько мест, возвращаемый объект jQuery будет включать по одному элементу для каждой позиции вставки.

После перечисления различий реализуем те же операции, что и в примере выше, с помощью методов из третьего столбца. Обратите внимание, что во второй строке методу $() нельзя передать простой текст (без угловых скобок, которые позволили бы идентифицировать его как разметку HTML), потому что он будет интерпретироваться как селектор. По этой причине требуется явно создать текстовый узел, который должен быть вставлен:

$("<br>"+message").appendTo("#log"); // До­ба­вить раз­мет­ку html в #log

$(document.createTextNode("§")).prependTo("h1"); // До­ба­вить тек­сто­вый узел во все <h1>

$("<hr>").insertBefore("h1"); // Вста­вить ли­нию пе­ред ка­ж­дым

$("<hr>").insertAfter("h1"); // Вста­вить ли­нию по­сле ка­ж­до­го

$("<br>").replaceAll("hr"); // За­ме­нить эле­мен­ты <hr> на <br>

Копирование элементов

Как отмечалось выше, при вставке элементов, уже являющихся частью документа, эти элементы не копируются, а просто перемещаются в новое местоположение. Если элемент вставляется в несколько мест, библиотека jQuery скопирует элемент столько раз, сколько потребуется, но копирование не выполняется при вставке только в одно местоположение. Если потребуется не переместить, а скопировать элемент, необходимо сначала создать копию с помощью метода clone().

Метод clone() создает и возвращает копии всех выбранных элементов (и всех потомков этих элементов).

Копии элементов, находящиеся в возвращаемом объекте jQuery, не являются частью документа, но их можно вставить в документ с помощью любого из методов, представленных выше:

// До­ба­вить но­вый div с ат­ри­бу­том id="linklist" в ко­нец до­ку­мен­та

$(document.body).append("<div id='linklist' ><h1>List of Links</h1></div>");

// Ско­пи­ро­вать все ссыл­ки в до­ку­мен­те и вста­вить их в этот но­вый div $("a").clone().appendTo("#linklist");

// Вста­вить эле­мен­ты <br> по­сле ка­ж­дой ссыл­ки, что­бы они ото­бра­жа­лись в от­дель­ных стро­ках

$("#linklist > a").after("<br>");

По умолчанию метод clone() не копирует обработчики событий и другие данные, связанные с элементами. Если необходимо будет скопировать эти дополнительные данные, передайте методу clone() значение true.

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

Другой способ вставки элементов в HTML-документ связан с обертыванием новым элементом (или элементами) одного или более элементов.

Объект jQuery определяет три метода обертывания.

1. Метод wrap() обертывает каждый выбранный элемент.

2. Метод wrapInner() обертывает содержимое каждого выбранного элемента.

3. Метод wrapAll() обертывает все выбранные элементы как единое целое.

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

Строка с разметкой HTML может включать вложенные элементы, если это необходимо, но на самом верхнем уровне она должна содержать единственный элемент.

Если любому из этих методов передать функцию, она будет вызываться по одному разу в контексте каждого элемента (с индексом элемента в виде единственного аргумента) и должна возвращать строку, элемент Element или объект jQuery.

 Например:

$("h1").wrap(document.createElement("i")); // Обер­нуть ка­ж­дый эле­мент <h1> эле­мен­том <i>

$("h1").wrapInner("<i>"); // Обер­нуть со­дер­жи­мое ка­ж­до­го эле­мен­та <h1> элементом <i>

Удаление элементов

Помимо методов вставки и замены в объекте jQuery имеются также методы удаления элементов.

Метод empty() удаляет все дочерние элементы (включая текстовые узлы) из каждого выбранного элемента без изменения самого элемента.

Метод remove(), напротив, удаляет из документа все выбранные элементы (и все их содержимое). Обычно метод remove() вызывается без аргументов и удаляет все элементы, находящиеся в объекте jQuery. Однако если передать методу аргумент, этот аргумент будет интерпретироваться как селектор, и удалены будут только элементы из объекта jQuery, соответствующие селектору. Метод remove() удаляет также все обработчики событий и другие данные, которые могли быть связаны с удаляемыми элементами.

Метод detach() действует подобно методу remove(), но не удаляет обработчики событий и данные. Метод detach() может оказаться удобнее, когда элементы требуется удалить из документа на время и позднее вставить их обратно.

Наконец, метод unwrap() выполняет удаление элементов способом, противоположным тому, каким действует метод wrap() или wrapAll(): он удаляет родительский элемент каждого выбранного элемента, не оказывая влияния на выбранные элементы и их братские элементы. То есть для каждого выбранного элемента он замещает родителя этого элемента его дочерними элементами. В отличие от методов remove() и detach(), метод unwrap() не принимает необязательный аргумент с селектором.

Простые методы событий

Библиотека jQuery определяет простые методы регистрации обработчиков для всех наиболее часто используемых событий, поддерживаемых всеми броузерами. Например, чтобы зарегистрировать обработчик события «click», достаточно просто вызвать метод click():

// Щел­чок на лю­бом эле­мен­те ок­ра­ши­ва­ет его фон в се­рый цвет

$("p").click(function() { $(this).css("background-color", "gray"); });

Вызов метода объекта jQuery регистрации обработчика событий зарегистрирует указанный обработчик во всех выбранных элементах. Обычно это проще, чем регистрировать один и тот же обработчик во всех элементах по отдельности с помощью метода addEventListener() или attachEvent().

Библиотека jQuery определяет следующие простые методы регистрации обработчиков событий:

blur() focusin() mousedown() mouseup() change() focusout() mouseenter() resize() click() keydown() mouseleave() scroll() dblclick() keypress() mousemove() select() error() keyup() mouseout() submit() focus() load() mouseover() unload()

Большая часть этих методов регистрации обработчиков уже знакомы вам. Тем не менее необходимо сделать несколько замечаний.

События «focus» и «blur» не всплывают, в отличие от всплывающих событий «focusin» и «focusout», и библиотека jQuery гарантирует, что эти события будут работать во всех броузерах.

События «mouseover» и «mouseout», наоборот, всплывают, и это часто доставляет неудобства, так как сложно определить – указатель мыши покинул интересующий нас элемент или событие было доставлено от одного из потомков.

События «mouseenter» и «mouseleave» не всплывают, что решает данную проблему. Эти типы событий впервые появились в IE, но библиотека jQuery гарантирует, что они корректно будут работать во всех броузерах.

События «resize» и «unload» возбуждаются только в объекте Window, поэтому, если потребуется зарегистрировать обработчики этих типов событий, методы resi­ze() и unload() следует вызывать относительно $(window).

Метод scroll() часто вызывается относительно $(window), но его также можно вызывать относительно любых элементов, имеющих полосы прокрутки (например, относительно элементов, в которых CSS-атрибут overflow имеет значение «scroll» или «auto»).

В дополнение к этим простым методам регистрации обработчиков событий существует две специальные формы методов, которые могут иногда пригодиться. Метод hover() регистрирует обработчики событий «mouseenter» и «mouseleave». Вызов hover(f,g) по своему действию аналогичен двум последовательным вызовам методов mouseenter(f) и mouseleave(g). Если методу hover() передать единственный аргумент, он будет использоваться как обработчик обоих событий.

Другим специальным методом регистрации обработчиков событий является метод toggle(). Этот метод регистрирует функцию обработчика события «click». Вы можете указать две или более функции обработчиков, и библиотека jQuery будет вызывать их всякий раз, когда будет возникать событие «click». Если, например, вызвать этот метод как toggle(f,g,h), функция f() будет вызываться для обработки первого события «click», g() – второго, h() – третьего и снова f() – для обработки четвертого события «click».

Анимационные эффекты

Объект jQuery определяет методы воспроизведения основных визуальных эффектов, такие как fadeIn() и fadeOut(). Кроме них он определяет также метод animate(), позволяющий воспроизводить более сложные эффекты.

Для начала познакомимся с некоторыми общими особенностями механизма анимационных эффектов в библиотеке jQuery.

Каждый анимационный эффект имеет продолжительность, которая определяет, как долго должен продолжаться эффект. Продолжительность можно указать в виде числа миллисекунд или в виде строки. Строка «fast» означает 200 миллисекунд. Строка «slow» означает 600 миллисекунд. Имеется возможность определять новые названия, обозначающие продолжительность, добавляя новые отображения строк в числа в объект jQuery.fx.speeds:

jQuery.fx.speeds["medium-fast"] = 300;

jQuery.fx.speeds["medium-slow"] = 500;

Методы воспроизведения эффектов объекта jQuery обычно принимают продолжительность в первом необязательном аргументе. Если опустить этот аргумент, по умолчанию продолжительность будет составлять 400 миллисекунд. Однако некоторые методы, не получив аргумент с продолжительностью, выполняют операцию немедленно, без анимационного эффекта:

$("#message").fadeIn(); // Эф­фект про­яв­ле­ния бу­дет длить­ся 400 мсек

$("#message").fadeOut("fast"); // Эф­фект рас­тво­ре­ния бу­дет длить­ся 200 мсек

Простые эффекты

Библиотека jQuery реализует девять методов простых анимационных эффектов скрытия и отображения элементов. Их можно разделить на три группы по типам воспроизводимых ими эффектов:

· fadeIn(), fadeOut(), fadeTo()

Это самые простые эффекты: методы fadeIn() и fadeOut() просто управляют CSS-свойством opacity, чтобы скрыть элемент или сделать его видимым. Оба принимают необязательные аргументы, определяющие продолжительность и функцию обратного вызова.

Метод fadeTo() несколько отличается: он принимает аргумент, определяющий конечное значение непрозрачности и плавно изменяет текущее значение непрозрачности элемента до указанного. В первом обязательном аргументе методу fadeTo() передается продолжительность (или объект с параметрами), а во втором обязательном аргументе – конечное значение непрозрачности. Функция обратного вызова передается в третьем необязательном аргументе.

· show(), hide(), toggle()

Метод fadeOut(), описанный выше, делает элемент невидимым, но сохраняет занимаемую им область в документе. Метод hide(), напротив, удаляет элемент из потока документа, как если бы его CSS-свойство display было установлено в значение none. При вызове без аргументов методы hide() и show() просто немедленно скрывают и отображают выбранные элементы. Однако при вызове с аргументом, определяющим продолжительность (или объект с параметрами), они воспроизводят анимационный эффект скрытия или появления.

Метод hide() уменьшает ширину и высоту элемента до 0 и одновременно уменьшает до 0 непрозрачность элемента.

Метод show() выполняет обратные действия.

Метод toggle() изменяет состояние видимости элементов: для скрытых элементов он вызывает метод show(), а для видимых – метод hide(). Как и при работе с методами show() и hide(), чтобы воспроизвести анимационный эффект, методу toggle() необходимо передать продолжительность или объект с параметрами. Передача значения true методу toggle() эквивалентна вызову метода show() без аргументов, а передача значения false – вызову метода hide() без аргументов.

· slideDown(), slideUp(), slideToggle()

Метод slideUp() скрывает выбранные элементы в объекте jQuery, постепенно уменьшая их высоту до 0, и устанавливает CSS-свойство display в значение «none».

Метод slideDown() выполняет противоположные действия, чтобы сделать скрытый элемент видимым.

Метод slideToggle() переключает состояние видимости элементов, используя методы slideUp() и slideDown().

Каждый из этих трех методов принимает необязательные аргументы, определяющие продолжительность и функцию обратного вызова (или объект с параметрами).

Послание № 15

Дополнительная выборка элементов или навигация по ним

Библиотека jQuery определяет несколько методов выбора, которые используют текущее множество выбранных элементов в качестве контекста.

Для каждого выбранного элемента эти методы создают новое множество, используя выбранный элемент в качестве контекста, или отправной точки, и возвращают новый объект jQuery, содержащий объединение этих множеств.

Наиболее универсальным в этой категории методов выбора является метод find(). Он выполняет поиск потомков в каждом выбранном элементе, соответствующих указанной строке селектора, и возвращает новый объект jQuery, представляющий новое множество соответствующих потомков. Обратите внимание, что вновь выбранные элементы не объединяются с существующим множеством – они возвращаются в виде нового множества элементов. Отметьте также, что метод find() отличается от метода filter(), который просто сужает текущее множество выбранных элементов, не добавляя новых:

$("div").find("p") // Оты­скать эле­мен­ты в блоке div

Другие методы из этой категории возвращают новые объекты jQuery, представляющие дочерние, братские или родительские элементы для каждого выбранного элемента.

Чаще всего им передается необязательный строковый аргумент с селектором. При вызове без селектора они возвращают, соответственно, все дочерние, братские или родительские элементы. При вызове с селектором они фильтруют список и возвращают только элементы, соответствующие селектору.

Метод children() возвращает дочерние элементы каждого выбранного элемента, фильтруя результат с применением необязательного селектора:

// Оты­скать все эле­мен­ты, ко­то­рые яв­ля­ют­ся до­чер­ни­ми для эле­мен­тов с id="header" и id="footer".

$("#header, #footer").children("span")

Метод contents() действует так же, как метод children(), но возвращает все дочерние узлы, включая текстовые, каждого выбранного элемента. Кроме того, для элементов метод contents() возвращает объект Document с содержимым этого элемента. Обратите внимание, что метод contents() не принимает необязательный строковый аргумент с селектором – это обусловлено тем, что он возвращает объекты Document, не являющиеся элементами, а селекторы позволяют описывать только элементы.

Методы next() и prev() возвращают следующий и предыдущий братский элемент для каждого выбранного элемента, если они имеются. Если методу передать селектор, выбраны будут только братские узлы, соответствующие селектору.

Методы nextAll() и prevAll() возвращают все следующие и предыдущие братские элементы (если имеются) для каждого выбранного элемента.

А метод siblings() возвращает все братские элементы для каждого выбранного элемента (элементы не считаются братскими по отношению к самим себе). Если любому из этих методов передать селектор, выбраны будут только братские узлы, соответствующие селектору:

$("#footer").nextAll("p") // Все брат­ские эле­мен­ты, сле­дую­щие за #footer

$("#footer").prevAll() // Все брат­ские эле­мен­ты, пред­ше­ст­вую­щие #footer

В версии jQuery 1.4 и выше методы nextUntil() и prevUntil() принимают аргумент с селектором и выбирают все братские элементы, следующие за выбранным элементом или предшествующие ему, пока не будет встречен братский элемент, соответствующий селектору. При вызове без селектора они действуют точно так же, как методы nextAll() и prevAll() при вызове их без селектора.

Метод parent() возвращает родителя для каждого выбранного элемента:

$("li").parent() // Ро­ди­те­ли эле­мен­тов спи­ска, та­кие как <ul> или <ol>

Метод parents() возвращает предков для каждого выбранного элемента. Оба метода, parent() и parents(), принимают необязательный строковый аргумент с селектором:

$("a[href]").parents("p") // Эле­мен­ты <p>, со­дер­жа­щие ссыл­ки

Метод parentsUntil() выбирает предков для каждого выбранного элемента, пока не будет встречен первый предок, соответствующий указанному селектору.

Метод closest() принимает обязательный строковый аргумент с селектором и возвращает ближайшего предка (если имеется) для каждого выбранного элемента, соответствующего селектору. Этот метод рассматривает элементы как предки самим себе. В версии jQuery 1.4 методу closest() можно также передать второй необязательный аргумент, чтобы не дать библиотеке jQuery подняться по дереву предков выше указанного в этом аргументе элемента:

$("a[href]").closest("div") // Са­мые внут­рен­ние эле­мен­ты <div>, со­дер­жа­щие ссыл­ки

$("a[href]").parentsUntil(":not(div)") // Все эле­мен­ты <div>, не­по­сред­ст­вен­но обер­ты­ваю­щие эле­мен­ты