JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

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

на обложку

Флэнаган Дэвид

Шрифт:

var elt = $("#sprite"); // Элемент, который требуется переместить

var position = elt.offset; // Получить текущие координаты

position.top += 100; // Изменить координату У

elt.offset(position); // Переместить элемент в новую позицию

// Переместить все элементы <h1> вправо на расстояние, зависящее от их

// положения в документе

$('h1').offset(function(index,curpos) {

return {left: curpos.left + 25*index, top:curpos.top};

}):

Метод

position

похож на метод

offset,

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

offsetParent

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

offsetParent

объекта

jQuery

отображает каждый элемент на ближайший позиционируемый вмещающий элемент или на элемент

<body>

. Следует отметить не совсем удачный выбор имен этих методов:

offset

возвращает абсолютные координаты элемента относительно начала документа, а метод

position

возвращает смещение элемента относительно его ближайшего предка

offsetРаrent .

Существует также три метода чтения, позволяющие получить ширину, и три метода чтения, позволяющие получить высоту элемента. Методы

width

height

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

innerWidth

innerHeight

возвращают ширину и высоту элемента с отступами (слово «inner» (внутренний) указывает на тот факт, что эти методы возвращают ширину и высоту внутри рамки). Методы

outerWidth

outerHeight

по умолчанию возвращают размеры элемента с отступами и рамкой. Если этим методам передать значение true, они добавят размеры полей элемента. Следующий фрагмент демонстрирует, что для элемента можно получить четыре разные ширины:

var body = $("body");

var contentWidth = body.width;

var paddingWidth = body.innerWidth;

var borderWidth = body.outerWidth;

var marginWidth = body.outerWidth(true);

var padding = paddingWidth-contentWidth; // сумма левого и правого отступов

var borders = borderWidth-paddingWidth; // сумма толщины левой и правой рамки

var margins = marginWidth-borderWidth; // сумма левого и правого полей

Методы

width

height

обладают свойствами, отсутствующими у других четырех методов (методов inner и outer). Во-первых, если первый элемент в объекте

jQuery

является объектом

Window

или

Document

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

Другая особенность методов

width

height

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

jQuery

. (Обратите, однако, внимание, что они не могут изменять ширину или высоту объектов

Window

Document

.) Если аргумент имеет числовое значение, он будет интерпретироваться как число пикселов. Если передать строку, она будет использоваться как значение CSS-ат-рибута

width

или

height

, благодаря чему в ней можно указывать любые единицы измерения, предусматриваемые стандартом CSS. Наконец, как и другие методы записи, они могут принимать функцию, которая будет вызываться для вычисления значения ширины или высоты.

Между ролями чтения и записи методов

width

height

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

width

height

. По умолчанию эти атрибуты также определяют размеры по содержимому. Но если элемент имеет CSS-атрибут

box-sizing

(раздел 16.2.3.1), установленный в значение

border-box

, методы

width

height

будут устанавливать размеры, включающие ширину отступов и рамок. Для элемента е, использующего блочную модель «content-box», вызов $(е).width(x).width вернет значение х. Однако для элемента, использующего блочную модель «border-box», этот же вызов в общем случае вернет другое значение.

Последняя пара методов объекта

jQuery

, имеющих отношение к геометрии элементов, - это методы

scrollTop

scrollLeft,

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

Window

, а при вызове для объекта

Document

они возвращают или устанавливают позиции полос прокрутки объекта

Window

, хранящего документ. В отличие от других методов записи, методам

scrollTop

scrollLeft

нельзя передавать функции.

Метод

scrollTop

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

height,

чтобы на их основе определить метод, прокручивающий окно на указанное число страниц:

// Прокручивает окно на n страниц, n может быть дробным и отрицательным числом

function page(n) {

var w = $(window); // Обернуть окно объектом jQuery

var pagesize = w.height; // Получить размер страницы

var current = w.scrollTop; // Текущие позиции полос прокрутки

w.scrollTop(current + n*pagesize); // Установить новые позиции

} // полос прокрутки

19.2.7. Чтение и запись данных в элементе

Библиотека jQuery определяет метод чтения/записи с именем

data,

который возвращает или устанавливает данные, связанные с любым элементом документа или с объектами

Document

Window

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

data

может оказаться полезным в ваших сценариях.