JavaScript. Подробное руководство, 6-е издание
Шрифт:
Если вызвать метод
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; // сумма левого и правого отступов
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», этот же вызов в общем случае вернет другое значение.
Поделиться с друзьями: