Шрифт:
Если вызвать метод
html
без аргументов, он вернет в виде разметки HTML содержимое только первого выбранного элемента. Для этой цели библиотека jQuery использует свойство inпегHTML
: x.html
– фактически то же самое, что и x[0].innerHTML
. Если методу
text
или html
передать строку, она будет использована как содержимое элемента в виде простого текста или разметки HTML и заместит текущее его содержимое. Подобно другим методам записи, с которыми мы уже познакомились, этим методам можно также передать функцию, которая будет использована для получения строки с новым содержимым:
var title = $("head title").text // Получить заголовок документа
var headline = $("h1").html // Получить разметку html первого <h1>
$("h1").text(function(n,current) { // Добавить в каждый заголовок
return "§" + (n+1) + ": " + current // порядковый номер раздела
});
19.2.6. Чтение и запись параметров геометрии элемента
В разделе 15.8 мы узнали, насколько сложно бывает определить размер и координаты элемента, особенно в броузерах, не поддерживающих метод
getBoundingClient-Rect
(раздел 15.8.2). Библиотека jQuery упрощает эти вычисления, предоставляя методы, работающие в любых броузерах. Обратите внимание, что все методы, описываемые здесь, являются методами чтения, и лишь некоторые из них могут использоваться для записи. Метод
offset
позволяет получить или изменить координаты элемента. Этот метод определяет координаты относительно начала документа и возвращает их в виде объекта со свойствами left
и top
, в которых хранятся координаты X и Y. Если передать методу объект с этими свойствами, он изменит координаты элемента в соответствии с указанными значениями. При необходимости он также установит CSS-атрибут position
, чтобы сделать элемент позиционируемым:
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; // сумма левого и правого отступов