ch3
.pdf
3.2. Изменение стиля отображения элемента |
119 |
Параметры
name (строка ) Имя CSSсвойства , значение которого требуетсяуста новить .
value (строка | число | функция ) Строка , число или функция -, содер жащие значение свойства . Еслиэтомв параметре передается функция , она будет вызвана для каждого элементаобернутомв
наборе . Функции передается сам элемент через контекстthis, а также два параметра : индекс элементатекущееи значение
свойства CSS. Возвращаемое значение будет использовкано- в честве значения CSSсвойства .
Возвращаемое значение
Обернутый набор .
Как уже говорилось , функциякачестве входного параметра воспринимается точно так же , какв ислучае сметодом attr(). Это означает , что мы можем , например , увеличить ширину всех элементовоберну-в том наборе на 20пикселов , как показано ниже :
$(“div.expandable”).css(“width”,function(index, currentWidth) { return currentWidth + 20;
});
Тут хочется отметить кое -что интересное : свойствоopacity, обычно вызывающее проблемы , отлично работает во всех типах броузеров при передаче значений диапазонев от 0,0 до 1,0– не надо больше путаться
с альфа -фильтрамиIE, свойствами-moz-opacity и им подобными!
Теперь рассмотрим |
сокращенную |
форму вызова методаcss(), которая |
по своему действию |
напоминает |
сокращенную версию attr()метода. |
Синтаксис метода css
css(properties)
Устанавливает CSSсвойства , имена которых определены какпеключи- в реданном объекте ,связанные нимис значения для всех элементовсо- в ответствующем наборе .
Параметры
properties ( объект ) Объект , свойства которого копируютсяCSSсвойства всех элементов обернутомв наборе .
Возвращаемое значение
Обернутый набор .
Насколько удобной может быть эта версия метода , мы уже имеливоз можность убедиться листингев 2.1, который мы рассматривалипредыв-
120 |
Глава 3. Оживляем страницыпомощьюс |
jQuery |
||
|
|
|
|
|
дущей |
главе . Чтобы уберечь вас от необходимости |
перелистывать книгу |
||
назад , ниже приводится фрагмент этого листинга |
: |
|
|
|
$(‘<img>’,
{
src: ‘images/little.bear.png’, alt: ‘Little Bear’,
title:’I woof in your general direction’, click: function(){
alert($(this).attr(‘title’));
}
})
.css({
cursor: ‘pointer’, border: ‘1px solid black’,
padding: ‘12px 12px 20px 12px’, backgroundColor: ‘white’
})
...
Как ив сокращенной |
версии |
методаattr(), здесь |
мы можем |
использо- |
|
||||||||||
вать функции |
качестве |
значений |
для любых |
CSSсвойствобъектев |
, |
|
|||||||||
передаваемом |
через параметрproperties. Они будут вызываться |
для |
|
||||||||||||
каждого элемента обернутомв |
наборе , чтобы определить |
значения- , ко |
|||||||||||||
торые |
должны |
применяться . |
|
|
|
|
|
|
|
|
|||||
Наконец , мы можем |
передать |
|
методуcss() одно только |
имя свойства , |
|
||||||||||
чтобы |
получить |
вычисленный |
стиль , ассоциированныйэтим именемс |
. |
|
||||||||||
Говоря |
« вычисленный |
стиль », мы подразумеваем |
стиль , который- |
полу |
|||||||||||
чается |
после |
применения |
всех внешних , внутреннихвстроенныхи |
сти- |
|
||||||||||
лей CSS. Этот метод отлично |
|
работает во всех типах броузеров |
, даже со |
||||||||||||
свойством opacity, для которого |
|
возвращается |
строка , представляющая |
||||||||||||
число |
вдиапазоне от 0,0 |
до 1,0. |
|
|
|
|
|
|
|
||||||
|
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
Синтаксис метода css |
|
|
|
|
|
|
|||||
css(name) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Возвращает |
вычисленное |
значение |
CSSсвойства , заданного nameименем, |
|
|
||||||||||
для первого |
элемента обернутомв |
наборе . |
|
|
|
|
|
|
|||||||
Параметры |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
name |
(строка ) Определяет |
имя CSSсвойства |
, значение |
которого |
будет |
||||||||||
|
вычислено |
ивозвращено . |
|
|
|
|
|
|
|
||||||
Возвращаемое |
|
значение |
|
|
|
|
|
|
|
|
|
|
|
||
Вычисленное |
значениевиде строки . |
|
|
|
|
|
|
|
|||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
3.2. Изменение |
стиля отображения элемента |
121 |
|
|
Имейте |
ввиду , что этот вариант |
методаcss() всегда |
возвращает строку , |
|
поэтому , если вам требуется число или значение какого -то другого типа |
||||
вы должны проанализировать |
возвращаемое |
значение самостоятельно . |
||
Для некоторых CSSсвойств которым, обращаются наиболее часто , библиотека jQuery реализует удобные методы , упрощающие получение значений этих свойствихи преобразование наиболеев часто используемые типы .
Получение |
иустановка размеров |
|
|
|
|||
Поскольку |
речь зашластиляхо |
CSS, значения |
которых обычно |
-требу |
|
||
ется получать |
или изменять |
, можно ли назвать свойства элементов- |
, ко |
||||
торые используются |
чаще , чем ширинавысотаи |
? Вероятно нет , поэто- |
|
||||
му вбиблиотеке |
jQuery предусмотрены методы , позволяющие |
- манипу |
|||||
лировать размерами |
, используя числовые значенияестроки, а . |
|
|
||||
В частности , мы можем получать ( или изменять ) ширинувысоту элемента вчисловом виде помощьюс удобных методовwidth() и height(). Эти методы имеют следующий синтаксис :
Синтаксис методов widthheightи
width(value)
height(value)
Устанавливают |
ширину |
или высоту |
всех элементовсоответствующем |
|||||||
наборе . |
|
|
|
|
|
|
|
|
|
|
Параметры |
|
|
|
|
|
|
|
|
|
|
value |
(число |
| строка |
| функция |
) |
Устанавливаемое |
значение . -Это мо |
||||
|
жет быть число |
пикселов |
; строка , определяющая значение |
|||||||
|
в единицах |
измерения |
( таких , какpx, em или %). Если единицы |
|||||||
|
измерения |
не указаны , по умолчанию подразумеваетсяpx. |
||||||||
|
Если вэтом параметре |
передается |
функция |
, она будет вызвана |
||||||
|
для каждого элемента |
, при этом сам элемент будет |
передан ей |
|||||||
|
через контекстthis. Возвращаемое |
значение |
функции |
будетис |
||||||
|
пользовано |
качестве значения размера . |
|
|
||||||
Возвращаемое значение
Обернутый набор .
Имейте ввиду , что эти методы являются сокращенными вариантами более универсального методаcss(), поэтому инструкция
$(“div.myElements”).width(500)
эквивалентна инструкции
$(“div.myElements”).css(“width”,”500”)
122 |
Глава 3. Оживляем страницыпомощьюс |
jQuery |
|
|
|
|
|
Чтобы получить ширину или высоту :
Синтаксис методов widthheightи
width()
height()
Возвращают ширину или высоту первого элементаобернутомв наборе .
Параметры
нет
Возвращаемое значение
Вычисленное значение ширины или высотыпикселахв .
Тот факт , что значение |
ширины высотыи |
эти функции |
возвращают |
|
|||||||||||||||
в виде чисел , не единственное |
их удобство . Определяя |
ширинуили вы |
|||||||||||||||||
соту элемента |
по его свойствамstyle.width или style.height, вы могли |
|
|||||||||||||||||
столкнуться |
темс |
обстоятельством |
|
, что значения |
этих |
свойств |
устанав- |
||||||||||||
ливаются |
только при наличии |
соответствующего |
атрибутаstyle данно- |
|
|||||||||||||||
го элемента – чтобы |
иметь |
возможность |
определять |
|
размеры элемента |
||||||||||||||
через эти свойства |
, прежде необходимо |
установить |
|
их . Далекоот этало |
|||||||||||||||
на удобства |
! |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
С другой |
стороны , методыwidth() и height() вычисляют |
|
ивозвращают |
|
|||||||||||||||
размеры |
элемента . Ихотя знание точных |
размеров |
элементов |
редко |
|||||||||||||||
требуется |
впростых |
страницах |
, позволяющих |
элементам |
располагать- |
||||||||||||||
ся как придется |
, но для интерактивных |
веб -приложений |
очень |
важно |
|||||||||||||||
уметь определять |
размеры , чтобы |
можно было |
правильно |
располагать |
|||||||||||||||
активные |
элементы , такие как контекстные |
меню , всплывающие- |
под |
||||||||||||||||
сказки , дополнительные |
|
элементы управленияпрочие |
динамические |
|
|||||||||||||||
компоненты . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
Давайте |
посмотрим |
на нихработев |
. На рис3..3 показан |
пример двус - |
|
||||||||||||||
мя основными |
элементами |
: объектом исследований |
является |
первый |
|||||||||||||||
элемент <div>, содержащий |
абзац |
текста |
( с рамкойвыделяющим |
его |
|
||||||||||||||
цветом фона ),воа втором |
элементе<div> выводятся |
размеры . |
|
|
|
||||||||||||||
Размеры |
исследуемого |
элемента |
заранее неизвестны |
|
из -за отсутствия |
||||||||||||||
стилевых |
правил , задающих |
размеры . Ширина элемента |
определяется |
||||||||||||||||
шириной |
окна броузера его, а высота |
зависит от того , как много |
места |
||||||||||||||||
потребуется |
для отображения |
содержащегосянем втекста . При изме- |
|
||||||||||||||||
нении размеров |
окна броузера |
изменятсяразмерыи |
элемента . |
|
|
|
|||||||||||||
В нашей |
странице |
мы определяем |
функцию |
, котораяпомощьюс |
мето- |
|
|||||||||||||
дов width() и height() будет выяснять |
размеры |
объекта |
исследований– |
|
|||||||||||||||
элемента <div> ( с именем testSubject) и выводить |
полученные значения |
||||||||||||||||||
во втором |
элементе<div> ( с именемdisplay). |
|
|
|
|
|
|
|
|
|
|||||||||
3.2. Изменение |
стиля |
отображения |
элемента |
|
|
123 |
|
||||
function displayDimensions() { |
|
|
|
|
|
||||||
$(‘#display’).html( |
|
|
|
|
|
|
|
||||
$(‘#testSubject’).width()+’x’+$(‘#testSubject’).height() |
|
|
|
||||||||
); |
|
|
|
|
|
|
|
|
|
|
|
Функция |
вызывается |
обработчикев |
события готовности страницы , |
||||||||
в результате |
на экране |
появляются |
числа 58960, исоответствующие |
||||||||
размерам |
вокне |
броузера |
, как показано на 3рис.3. . |
|
|
|
|
||||
Мы также |
добавили вызов той же самой функцииобработчикв |
собы- |
|||||||||
тия изменения |
размераокна , который |
обновляет |
отображаемые |
-значе |
|||||||
ния по мере изменения |
размеров окна броузера |
, как показано |
|
на втором |
|||||||
снимке |
сэкрана |
на рис3..3. |
|
|
|
|
|
||||
Рис . 3.3.Ширина и высота исследуемого элемента – не фиксированные значения и зависят от ширины окна броузера
Эта способность определять вычисленные размеры |
элементалюбойв |
|
||||||
момент |
неоценимо |
важна для точного |
размещения |
динамических- |
эле |
|||
ментов |
на страницах . |
|
|
|
|
|
|
|
Полный |
исходный |
код этой страницы |
приведенлистингев |
3.1. Также |
|
|||
его можно найти загружаемомв |
пакетепримерамис |
файлев chapter3/ |
|
|||||
dimensions.html.
Листинг 3.1. Динамическое слежение за размерами элемента
<!DOCTYPE html> <html>
124 |
Глава 3. Оживляем страницыпомощьюс |
jQuery |
|
|
|
|
|
<head>
<title>Dynamic Dimensions Example</title>
<link rel=”stylesheet” type=”text/css” href=”../styles/core.css”/> <style type=”text/css”>
body {
background-color: #eeeeee;
}
#testSubject { background-color: #ffffcc; border: 2px ridge maroon; padding: 8px;
font-size: .85em;
} |
|
|
|
|
|
|
|
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
<script type=”text/javascript” |
|
|
|
|
|
|
|
|||
src=”../scripts/jquery-1.4.js”></script> |
|
|
|
|
||||||
<script type=”text/javascript”> |
|
|
Устанавливается |
обработчик |
|
|||||
$(function(){ |
|
|
|
|
события |
изменения |
размеров |
|
||
$(window).resize(displayDimensions); |
|
|
|
|
|
|||||
displayDimensions(); |
|
Вызов |
функции |
определения |
размеров |
|||||
}); |
|
|
|
|
в обработчике готовностистраницы |
|
||||
function displayDimensions() { |
|
Вывод |
ширины высотыи |
исследуемого |
элемента |
|||||
|
||||||||||
$(‘#display’).html( |
|
|
|
|
|
|
|
|||
$(‘#testSubject’).width()+’x’+$(‘#testSubject’).height() |
|
|||||||||
); |
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
|
|
|
|
|
|
<div id=”testSubject”> |
|
|
Объявление объекта исследованийтекстом |
|||||||
|
|
|||||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. |
|
|
||||||||
Aliquam eget enim id neque aliquet porttitor. Suspendisse |
|
|
||||||||
nisl enim, nonummy ac, nonummy ut, dignissim ac, justo. |
|
|
|
|||||||
Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum |
|
|
||||||||
sed neque vehicula rhoncus. Nam faucibus pharetra nisi. |
|
|
|
|||||||
Integer at metus. Suspendisse potenti. Vestibulum ante |
|
|
|
|||||||
ipsum primis in faucibus orci luctus et ultrices posuere |
|
|
||||||||
cubilia Curae; Proin quis eros at metus pretium elementum. |
|
|
||||||||
</div> |
|
|
|
|
Размеры выводятся этойв |
области |
|
|||
<div id=”display”></div> |
|
|
||||||||
|
|
|||||||||
|
|
|
|
|
|
|
||||
</body> |
|
|
|
|
|
|
|
|
|
|
</html> |
|
|
|
|
|
|
|
|
|
|
В дополнение |
методамк width() и height() в библиотеке |
jQuery |
имеются |
|||||||
похожие методы получения значений |
более |
специфических размеров , |
||||||||
перечисленные |
таблв |
. 3.2. |
|
|
|
|
|
|
|
|
При работе сокном или сдокументом рекомендуется не использовать методы определения внутреннихвнешних размеров применять, а ме-
тоды width() и height().
3.2. Изменение стиля |
отображения |
элемента |
|
|
|
|
|
125 |
|
|
||||
Таблица 3.2. Дополнительные методы определения размеров |
|
|
|
|
|
|||||||||
|
Метод |
|
Описание |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
||||||
|
innerHeight() |
|
Возвращает |
|
« внутреннюю |
высоту » первого элементана- |
в |
|||||||
|
|
|
боре . Вэту высоту не входит |
толщина |
рамки , но входит |
|||||||||
|
|
|
ширина отступа . |
|
|
|
|
|
|
|
|
|
||
|
innerWidth() |
|
Возвращает |
|
« внутреннюю |
ширину » первого элемента |
||||||||
|
|
|
в наборе . Вэту ширину не входит толщина |
рамки , но- |
вхо |
|||||||||
|
|
|
дит ширина |
отступа . |
|
|
|
|
|
|
|
|
|
|
|
outerHeight(margin) |
Возвращает |
|
« внешнюю |
высоту » первого |
элементана- |
в |
|
||||||
|
|
|
боре . Вэту высоту входят толщина рамкиширина |
от- |
|
|
|
|||||||
|
|
|
ступа . Если параметрев margin передается |
|
значениеtrue |
|
|
|
||||||
|
|
|
или он опущен , тогдавысоту |
включается |
ширина поля , |
|||||||||
|
|
|
окружающего |
элемент . |
|
|
|
|
|
|
|
|
|
|
|
outerWidth(margin) |
|
Возвращает |
|
« внешнюю |
ширину » первого |
элементана- |
|
в |
|||||
|
|
|
боре . Вэту ширину входят толщина рамкиширина |
|
|
|
|
|||||||
|
|
|
отступа . Если параметрев |
margin передается |
значениеtrue |
|
|
|
||||||
|
|
|
или он опущен , тогдаширинув |
включается |
ширина |
поля , |
||||||||
|
|
|
окружающего |
элемент . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||
Но иэто еще не все . Кроме |
всего прочего |
библиотека |
jQuery |
обеспечива- |
||||||||||
ет поддержку |
определения |
|
величины |
прокрутки |
( скроллинга |
-) докумен |
||||||||
та икоординат |
элемента . |
|
|
|
|
|
|
|
|
|
|
|
||
Координаты прокруткаи
В библиотеке jQuery имеется два метода , позволяющих определитьпо зицию элемента . Оба метода возвращают объект JavaScript, содержа-
щий два свойстваtop: и left, которые , как следует из их имен , определяют вертикальную горизонтальную координаты элемента , соответственно .
Эти два метода используют различные начала координат , относительно которых вычисляются возвращаемые ими значения . Первый из этих методов ,offset(), возвращает координаты элемента относительнонача ла документа :
Синтаксис метода offset
offset() |
|
|
Возвращает координаты |
( в пикселях ) первого элементаобернутомв |
на- |
боре относительно начала |
документа . |
|
Параметры |
|
|
нет |
|
|
126 |
|
|
|
|
|
|
Глава 3. Оживляем |
страницыпомощьюс |
jQuery |
|||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
Возвращаемое |
значение |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
Объект JavaScript |
со свойствамиleft и top, содержащими |
|
вещественные |
|
|||||||||||||
|
значения |
( обычно |
округленные |
до ближайшего |
целого ), определяющими |
|||||||||||||
|
координаты |
пикселяхв |
относительно |
начала |
документа . |
|
|
|
|
|||||||||
|
|
|
|
|
|
|||||||||||||
Другой методposition(), , возвращает |
координаты |
элемента |
относитель- |
|||||||||||||||
но ближайшего родительского |
элемента : |
|
|
|
|
|
|
|
|
|||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|||||||
|
|
|
|
Синтаксис |
метода position |
|
|
|
|
|
|
|||||||
|
position() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Возвращает |
координаты |
( в пикселях |
) первого элементаобернутомв |
на- |
|
||||||||||||
|
боре относительно |
ближайшего |
родительского |
элемента . |
|
|
|
|
||||||||||
|
Параметры |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
нет |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Возвращаемое |
значение |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
Объект JavaScript |
со свойствамиleft и top, содержащими |
целочисленные |
|
||||||||||||||
|
значения |
, определяющими |
координатыпикселяхв |
относительно |
бли- |
|
||||||||||||
|
жайшего |
родительского |
элемента . |
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
||||||||||||||||
Под смещением относительно ближайшего родительского элемента |
||||||||||||||||||
понимается |
смещение |
относительно |
ближайшего |
, вверх |
по иерархии |
|||||||||||||
вложенности |
, вмещающего |
элемента |
, для которого |
явно определено |
||||||||||||||
правило абсолютного |
или относительного |
позиционирования . |
||||||||||||||||
Оба метода offset(), |
и position(), могут |
использоваться |
|
только |
примени- |
|||||||||||||
тельно квидимым |
элементам для, а получения |
точных |
результатовре |
|||||||||||||||
комендуется |
определять |
размеры |
отступов |
, рамокполейивпикселах . |
||||||||||||||
Помимо методов определения координат элементоварсеналев jQuery имеются методы , позволяющие определятьизменять позицию прокрутки . Эти методы перечисленытаблв . 3.3.
Таблица 3.3. Методы jQuery управления позицией прокрутки
Метод |
Описание |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
scrollLeft() |
Возвращает |
значение |
прокрутки |
по горизонтали для- |
пер |
||
|
вого элемента наборев . |
|
|
|
|
|
|
scrollLeft(value) |
Изменяет значение прокрутки по горизонтали |
для всех |
|||||
|
элементов |
наборев . |
|
|
|
|
|
scrollTop() |
Возвращает |
значение |
прокрутки |
по вертикали |
дляперво |
||
|
го элемента |
наборев . |
|
|
|
|
|
|
|
|
|
|
|
|
|
3.3. Установка содержимого элемента |
127 |
|
|
|
|||
|
Метод |
|
Описание |
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
scrollTop(value) |
|
Изменяет значение прокрутки |
по вертикали для всех- |
эле |
||
|
|
|
ментов внаборе . |
|
|
|
|
|
|
|
|
|
|
|
|
Все методы , перечисленныетаблв . 3.3, действуют каквидимымис |
, так |
||||
и со скрытыми |
элементами . |
|
|
|
|
Теперь , когда |
мы рассмотрели |
возможность |
манипулирования - |
стиля |
|
ми элементов |
, давайте обсудим |
различные |
способы изменения- |
содер |
|
жимого элементов . |
|
|
|
|
|
3.3. Установка содержимогоэлемента |
|
|
||||
Когда дело доходит |
до изменения содержимого |
элементов |
, начинаются |
|||
споры отом , каким |
способом это лучше делатьприменением: с |
методов |
||||
DOM API – или за счет изменения |
HTMLразметки . |
|
||||
Методы |
DOM API |
определенно |
являются |
более |
строгими |
, но работать |
с ними |
сложнее приходится писать массу |
дополнительного |
программ- |
|||
ного кода , который |
достаточно тяжело воспринимается на глаз при |
чтении . Вбольшинстве случаев прощеэффективнее оказывается - из |
|
менять HTMLразметку элемента , поэтому jQuery предлагает -ряд мето |
|
дов , реализующих |
именно этот способ . |
3.3.1. Замена |
HTMLразметки |
или текста |
|
|
|
|
||||||
Первый метод вэтой группе – html(). При вызове |
без параметров |
|
он |
|||||||||
извлекает содержимое |
элементавиде |
HTMLразметки при, а |
вызове |
|||||||||
с параметром |
, как другие |
уже рассмотренные |
нами |
функции |
jQuery, |
|||||||
изменяет содержимое |
элемента . |
|
|
|
|
|
|
|||||
Ниже показано |
, как можно получить содержимое |
элементавиде |
||||||||||
HTMLразметки |
: |
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
Синтаксис |
метода html |
|
|
|
|
|
|||
|
html() |
|
|
|
|
|
|
|
|
|
|
|
|
Возвращает |
содержимое |
первого |
элемента соответствующем |
наборе |
|||||||
|
в виде HTMLразметки . |
|
|
|
|
|
|
|
|
|||
Параметры
нет
Возвращаемое значение
Содержимое первого элементасоответствующем наборевиде разметки HTML. Возвращаемое значение идентично значению свойстваinnerHTML этого элемента .
128 |
|
|
|
|
Глава 3. Оживляем |
страницыпомощьюс |
jQuery |
|
||||||
|
|
|
|
|
|
|||||||||
А так можно установить |
содержимоевиде |
HTMLразметки |
для всех |
|||||||||||
элементов |
внаборе : |
|
|
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
Синтаксис |
метода |
html |
|
|
|
|
|
|
|||
|
html(content) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Устанавливает |
фрагмент |
HTMLразметки |
как содержимое |
всехэлемен |
|||||||||
|
тов соответствующего |
набора . |
|
|
|
|
|
|
|
|
|
|||
|
Параметры |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
content |
(строка | функция ) Фрагмент HTMLразметки |
, который должен |
|||||||||||
|
|
быть |
установлен |
как содержимое |
элементов . Еслиэтом впара- |
|
||||||||
|
|
метре |
передается |
функция , она будет вызвана |
для каждого- |
эле |
||||||||
|
|
мента |
вобернутом |
наборе . Функции |
будет |
передан |
сам элемент |
|||||||
|
|
через |
контекст this, а также два параметра |
: индекс |
элемента |
|
||||||||
|
|
и текущее содержимое |
элемента . Возвращаемое |
значение будет |
||||||||||
|
|
использовано |
качестве |
нового содержимого . |
|
|
|
|
|
|||||
Возвращаемое значение
Обернутый набор .
Кроме того , имеется |
возможность получать или устанавливать - толь |
||
ко текстовое содержимое элементов |
. Методtext() при вызове без пара- |
||
метров возвращает |
строку– результат |
конкатенации |
всех текстовых |
узлов . Допустим ,насу имеется следующий фрагмент |
HTML: |
||
<ul id=”theList”> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li>
</ul>
Тогда инструкция
var text = $(‘#theList’).text();
запишет впеременную text строку OneTwoThreeFour.
Синтаксис метода text
text()
Объединяет путем конкатенации текстовое содержимое всех обернутых элементов ивозвращает полученный тексткачестве результата .
Параметры
нет