JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид
Шрифт:

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

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

// обертывающие элементы <а>

19.8.2.2. Возврат к предыдущему выбору

Чтобы обеспечить возможность составления цепочек вызовов методов, большинство методов объекта

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

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

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

// Отыскать все элементы <div>, затем внутри множества выбранных элементов отыскать

// элементы <р>. Выделить элементы <р> цветом и затем окружить рамками элементы <div>.

// Сначала рассмотрим, как это сделать без цепочек вызовов методов

var divs = $("div");

var paras = divs.find("p");

paras.addClass("highlight");

divs.css( "border", " solid black 1px");

// А теперь то же самое, составив цепочку вызовов методов

$("div"). find("p").addClass("highlight").end.css("border", "solid black 1px");

// To же самое можно реализовать без вызова метода end, просто переупорядочив операции

$("div").css("border"', "solid black 1рх”).find("р").addClass("highlight”);

Если вам когда-нибудь потребуется вручную определить множество выбранных элементов и обеспечить его совместимость с методом

end
, передайте новое множество элементов в виде массива или в виде объекта, подобного массиву, методу
pushStack.
Указанные элементы будут преобразованы в новое множество выбранных элементов, а предыдущее множество будет помещено в стек, откуда его можно будет извлечь вызовом метода
end:

var sel = $("div”); // Выбрать все <div>

sel.pushStack(document.getElementsByTagName("p")); // Заменить его множеством

// всех элементов <р>

sel.end; // Восстановить множество элементов <div>

Теперь, когда мы познакомились с методом

end
и со стеком, хранящим множества выбранных элементов, нам осталось познакомиться с еще одним методом. Метод
andSelf
возвращает новый объект
jQuery
, включающий все элементы из текущего множества выбранных элементов плюс все элементы (за исключением дубликатов) из предыдущего множества. Метод
andSelf
действует подобно методу
add
и для него больше подошло бы имя «addPrev». В качестве примера рассмотрим следующий вариант реализации предыдущего примера: он выделяет цветом элементы
<р>
и вмещающие их элементы
<div>
и затем добавляет рамки к элементам
<div>:

$("div").find("р").andSelf. // Отыскать в <div> и объединить их

addClass("highlight"). // Выделить их все цветом

end.end. // Вытолкнуть со стека дважды до $("div")

css("border", "solid black 1px"); // Добавить рамки к элементам <div>

19.9. Расширение библиотеки jQuery с помощью модулей расширений

Библиотека jQuery написана так, что позволяет легко добавлять в нее новые функциональные возможности. Модули, добавляющие новые функциональные возможности, называются расширениями (plug-in), большое количество которых можно отыскать на сайтеРасширения для библиотеки jQuery являются обычными файлами с программным кодом на языке JavaScript, и, чтобы задействовать их в своих веб-страницах, достаточно просто подключить их с помощью элемента

<script>,
как любую другую библиотеку на языке JavaScript (разумеется, расширения должны подключаться после подключения самой библиотеки jQuery).