ch3
.pdf
3.1. Манипулирование |
свойствамиатрибутами элементов |
|
|
|
|
109 |
|
|
|||||||
работчик |
событияsubmit и будем |
деактивизировать |
кнопку отправки |
||||||||||||
после первого нажатия .этомВ случае пользователь |
не сможет |
нажать |
|||||||||||||
кнопку повторно ки тому же получит |
визуальный |
сигнал ( предпола- |
|||||||||||||
гается , что неактивные |
кнопкив иброузере |
выглядят |
неактивными |
) |
|||||||||||
о том , что передача |
формы |
выполняется |
. Не вникая |
пока во все- |
тонко |
||||||||||
сти обработки |
события следующемв |
примере ( в главе |
4 будет |
дана вся |
|||||||||||
необходимая |
информация |
по этой теме ), сконцентрируйтесь |
на- |
приме |
|||||||||||
нении методаattr(): |
|
|
|
|
|
|
|
|
|
|
|
|
|
||
$(“form”).submit(function() { |
|
|
|
|
|
|
|
|
|
|
|
||||
$(“:submit”,this).attr(“disabled”, “disabled”); |
|
|
|
|
|
|
|
||||||||
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
В теле обработчика |
событияпомощьюс |
селектора:submit мы выбираем |
|
||||||||||||
все кнопки отправки формызаписываем атрибутв disabled значение |
|
||||||||||||||
“disabled” ( официально |
рекомендованное |
консорциумом |
W3C значение |
||||||||||||
для этого |
атрибута |
). Обратите |
внимание |
: при выборке |
соответствующе- |
||||||||||
го набора |
мы передаем |
значение |
контекстаthis ( второй |
параметр |
). Как |
||||||||||
мы узнаем главе |
4 при обсуждении |
вопросов обработки |
событий- , вну |
|
три обработчика |
события указательthis всегда ссылается |
на элемент |
||
страницы , которымс связан обработчик . |
|
|||
Когда значение enabled»« |
не означает , |
|
||
|
что элемент |
активен ? |
|
|
Не следует думать , что замена значенияdisabled значением enabled, как показано ниже :
$(whatever).attr(“disabled”,”enabled”);
активизирует элемент. .После выполнения этойинструкциии- эле- -
мент останется неактивным !
Согласно спецификациям W3C неактивным |
элемент |
делает само |
|||||
наличие атрибута disabled, а не его значение . Поэтому действи- |
|
||||||
тельности |
совершенно |
неважно , какое значение будет записано– |
, |
||||
если элемент |
имеет атрибутdisabled, он будет неактивен . |
|
|
||||
Чтобы вновь |
активизировать |
элемент , необходимо либо удалить |
|
||||
атрибут , либо воспользоваться |
удобствами |
, предоставляемыми |
|
||||
библиотекой |
jQuery. |
Есликачестве значения |
атрибута |
передать |
|
||
логическое |
значениеtrue или false ( не строки“true” или “false”), |
|
|||||
jQuery выполнит необходимую |
операцию : при значенииfalse уда- |
|
|||||
лит атрибут ,приа значенииtrue – добавит . |
|
|
|
||||
Внимание
Деактивизация |
кнопки |
отправки |
таким способом совершенно не снимает |
||
с программного |
кода на стороне |
сервера |
ответственность за проверку |
факта |
|
двойной отправки или |
какие -либо другие |
проверки . Добавление этой- |
особен |
||
110 |
Глава 3. Оживляем |
страницыпомощьюс |
jQuery |
||||
|
|
|
|
|
|
|
|
ности к клиентскому программному |
коду |
лишь |
повышает |
уровень |
удобства |
||
для пользователя предотвращаети |
двойную отправку при обычных |
обстоя- |
|||||
тельствах |
. Она не защищает от нападений |
или попыток |
взлома , поэтому- |
про |
|||
граммный |
код на стороне сервера |
по -прежнему |
должен |
обеспечиватьмакси |
|||
мальную |
защиту . |
|
|
|
|
|
|
Атрибуты исвойства элементов удобно использовать для сохранения данных , определяемых спецификациями HTMLW3C,и но нам , как авторам страниц , часто будет требоваться сохранять свои собственные данные . Давайте посмотрим , что нам для этого может предложитьбиб лиотека jQuery.
3.1.6. Сохранение |
|
собственных |
|
данныхэлементахв |
|
|
|
|
|
|||||||||||||||
Давайте скажем прямо : глобальные |
|
переменные |
не нужны . |
|
|
|
||||||||||||||||||
За исключением |
редких |
случаев , когда |
требуется |
иметь |
действительно |
|||||||||||||||||||
глобальные |
|
значения |
, трудно |
представить |
себе худшее |
место |
|
хранения |
||||||||||||||||
информации |
, необходимой |
для определения реализации |
сложно- |
|
||||||||||||||||||||
го поведения |
|
страниц . Мало того что при использовании |
глобальных |
|||||||||||||||||||||
переменных |
|
мы сталкиваемсяпроблемамис |
области |
видимости , такой |
||||||||||||||||||||
способ |
хранения |
информации |
также |
сложнее |
поддается |
масштабиро- |
||||||||||||||||||
ванию , когда |
возникает |
необходимость |
одновременно |
выполнять- |
не |
|||||||||||||||||||
сколько операций ( открыватьзакрыватьи |
меню , выполнять |
|
запросы |
|
||||||||||||||||||||
Ajax, |
воспроизводить |
анимационные |
эффектытак далееи |
). |
|
|
|
|
|
|
||||||||||||||
Функциональная |
|
природа |
JavaScript |
позволяет |
уменьшить |
тяжесть |
||||||||||||||||||
этих проблем |
спомощью |
замыканий |
, но замыкания |
могут |
использо- |
|||||||||||||||||||
ваться |
далеко |
не во всех ситуациях . |
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||
Поскольку |
любые |
поведенческие |
особенности |
на странице |
связаны |
|||||||||||||||||||
с определенными |
|
элементами |
, имеет |
смысл |
использовать |
|
самиэлемен |
|||||||||||||||||
ты вкачестве |
|
хранилищ |
информации |
. Опять этомже, внам может |
|
по- |
|
|||||||||||||||||
мочь возможность |
|
динамически |
создавать |
свойства |
объектов |
, присущая |
||||||||||||||||||
JavaScript. |
Но эту возможность |
следует |
использоваосторожностью . |
|
||||||||||||||||||||
Благодаря |
тому , что элементы |
|
DOM представлены |
соответствующими |
||||||||||||||||||||
им экземплярами |
|
объектов |
JavaScript, |
они ,любыекаки другие экзем- |
|
|||||||||||||||||||
пляры объектов , могут дополняться |
|
нестандартными |
|
свойствами |
. Но |
|||||||||||||||||||
здесь есть свои сложности ! |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||
Эти нестандартные |
свойства , или , как их еще назывраютсширения, |
, |
|
|||||||||||||||||||||
несут |
в себе определенный |
риск .частностиВ , при их использовании |
|
|||||||||||||||||||||
легко |
можно |
|
создать |
циклические |
ссылки , которые |
могут |
привести |
|||||||||||||||||
к серьезным |
|
утечкам |
памяти традиционных. В |
|
веб -приложениях |
|
, где |
|||||||||||||||||
дерево |
DOM уничтожается |
при загрузке |
новых страниц , утечки памяти |
|||||||||||||||||||||
могут |
не представлять |
больших |
проблем . Но для интерактивных |
веб - |
||||||||||||||||||||
приложений |
, использующих |
множество |
сценариеввыполняющихся |
|
||||||||||||||||||||
длительное |
|
время , утечки |
памяти |
могут представлять |
серьезную- |
проб |
||||||||||||||||||
лему . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
3.1. Манипулирование |
свойствамиатрибутами элементов |
|
|
|
|
|
|
111 |
|
|
||||||||||
Библиотека |
jQuery |
предоставляет |
|
свое решение |
этой проблемы- , позво |
|||||||||||||||
ляя ассоциировать |
данные элементамис |
DOM, не используя |
расши- |
|||||||||||||||||
рений , которые являются источниками |
|
потенциальных |
проблем . Мы |
|||||||||||||||||
можем |
ассоциировать |
любые значения |
JavaScript, |
даже массивыобъ- |
и |
|||||||||||||||
екты , сэлементами |
DOM помощьюс |
метода , имеющего |
говорящее- |
на |
||||||||||||||||
звание data(). Ниже |
приводится |
синтаксис |
этого |
метода : |
|
|
|
|
||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||
|
|
|
|
|
|
Синтаксис |
метода |
|
data |
|
|
|
|
|
|
|
|
|||
|
data(name,value) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
Сохраняет |
значениеvalue в хранилище |
, управляемом |
библиотекой |
jQuery, |
|||||||||||||||
|
для всех элементов |
набора . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
Параметры |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
name |
(строка ) Имя , под которым |
|
будут |
сохранены |
данные . |
|
|
|
|||||||||||
|
value |
(объект | функция |
) Значение |
, которое |
требуется |
сохранить |
. Если |
|||||||||||||
|
|
в этом параметре |
передается |
функция |
, она будет вызвана |
для |
||||||||||||||
|
|
каждого элемента наборев |
, сам элемент |
будет |
передан |
ей через |
|
|||||||||||||
|
|
контекст |
функции ( ссылкаthis). Значение , возвращаемое |
|
функ- |
|
||||||||||||||
|
|
цией , будет |
использовано |
как сохраняемое |
|
значение . |
|
|
|
|||||||||||
|
Возвращаемое |
значение |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
Обернутый набор .
От данных , которые только сохраняются , мало проку , поэтому должен быть механизм извлечения данных по имени . Совершенно неудиви-
тельно , что для чтения данных снова используется data()метод. Ниже приводится синтаксис методаdata(), когда он используется для чтения данных :
Синтаксис метода data
data(name)
Извлекает из первого элементаобернутомв наборе значениеименемс name, сохраненное ранее .
Параметры
name (строка ) Имя , под которым были сохранены данные .
Возвращаемое значение
Извлеченные данные или значениеundefined, если данных суказанным именем не существует .
112 |
|
|
Глава 3. Оживляем страницыпомощьюс |
jQuery |
|||
|
|
|
|
||||
Кроме того , для обеспечения |
возможности управления памятьюбиблио |
||||||
тека jQuery |
предоставляет |
методremoveData(), позволяющий удалять |
|||||
данные , надобность которыхв |
отпала : |
|
|
|
|||
|
|
|
|
|
|
|
|
|
|
|
Синтаксис |
метода removeData |
|
|
|
|
removeData(name) |
|
|
|
|
||
|
Удаляет |
ранее сохраненные |
данные именемс |
name из всех элементов |
|||
|
в обернутом |
наборе . |
|
|
|
|
|
|
Параметры |
|
|
|
|
|
|
|
name |
(строка ) Имя удаляемых данных . |
|
|
|
||
Возвращаемое значение
Обернутый набор .
Обратите |
внимание |
, что нет никакой |
необходимости |
удалять данные |
|
|||||||||
« вручную |
» при удалении |
элементов |
DOMпомощьюс |
методов |
jQuery. |
|
||||||||
В этом случае |
библиотека |
jQuery |
сама удалит |
данные . |
|
|
||||||||
Возможность прикрепления данныхэлементамк |
|
DOM часто будетис |
|
|||||||||||
пользоваться |
примерахв впоследующих |
главах те, а, кто уже сталки- |
|
|||||||||||
вался стипичными |
проблемами , которые несебеут вглобальные |
пере- |
|
|||||||||||
менные , легко заметят , насколько |
широкие |
возможности |
открывает- |
со |
||||||||||
хранение данных внутри иерархии элементов |
. Фактически |
благодаря |
|
|||||||||||
этой возможности |
дерево DOM превращаетсяполноценнуюв |
иерархию |
|
|||||||||||
« пространств |
имен–»мы больше не стеснены |
рамками |
единственной |
|
||||||||||
глобальной |
области видимости . |
|
|
|
|
|
|
|
|
|
||||
Ранее вэтой главе , обсуждая различияименахв |
|
свойств атрибутов , |
|
|||||||||||
мы упоминали |
свойствоclassName, однако истины |
ради следует отме- |
|
|||||||||||
тить , что имена классов– это еще один |
особый |
|
случай , обработкако |
|
||||||||||
торого также |
предусматривается |
библиотекой |
|
jQueryследующем. В |
|
|||||||||
разделе описаны более удобные способы работыименамис классов , чем |
|
|||||||||||||
прямой |
доступ свойствук className или применение |
|
методаattr(). |
|
|
|||||||||
3.2. Изменение |
стиля отображенияэлемента |
|
|
||||
Когда требуется изменить |
стиль визуального представления |
элемента , |
|||||
у нас есть два пути . Можно |
добавлять или удалять классы |
CSS,- |
выну |
||||
ждая механизм |
каскадных |
таблиц стилей изменять |
стиль |
элемента |
|||
в соответствии |
егос новым классом , или воздействовать |
непосредствен- |
|||||
но на элемент DOM, |
применяя стили напрямую . |
|
|
|
|||
Давайте |
посмотрим |
, как jQuery упрощает операцию |
изменения |
классов |
|||
стилей |
вэлементах . |
|
|
|
|
|
|
3.2. Изменение стиля отображения элемента |
113 |
3.2.1. Добавление |
удаление |
имен |
классов |
|
|
|
|
|
|
|||||||||||||||||||
|
Атрибут class элементов |
DOM имеет |
уникальный |
|
форматсемантику |
|
||||||||||||||||||||||
|
и играет |
важную |
рольсозданиив |
функциональных |
|
пользовательских |
||||||||||||||||||||||
|
интерфейсов . Добавление удаление имен классов |
из элементов– одно |
|
|||||||||||||||||||||||||
|
из основных |
средств , позволяющих |
динамически |
изменять |
визуальное |
|||||||||||||||||||||||
|
представление |
элементов . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||
|
Одна из особенностей |
имен |
классов , которая |
делает |
их уникальными |
|||||||||||||||||||||||
|
и осложняет |
работунимис |
,– это то , что каждому |
элементу может |
быть |
|||||||||||||||||||||||
|
присвоено |
любое |
число имен классовHTML.В список имен применяе- |
|||||||||||||||||||||||||
|
мых классов , разделенных |
пробелами |
, определяетсяпомощьюс |
атри- |
|
|||||||||||||||||||||||
|
бута class. Например |
: |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||
|
<div class=”someClass anotherClass yetAnotherClass”></div> |
|
|
|
|
|
|
|
|
|||||||||||||||||||
|
К сожалению |
, вэлементах |
|
DOM имена |
классов соответствующем |
|
||||||||||||||||||||||
|
свойстве className представлены |
не массивомстрокой, а |
, вкоторой |
име- |
|
|||||||||||||||||||||||
|
на разделены |
пробелами |
|
. Как это досаднонеудобнои |
! Это означает , что |
|||||||||||||||||||||||
|
всякий раз , когда нам захочется |
добавить |
|
или удалить |
имя класса из |
|||||||||||||||||||||||
|
элемента |
, вкотором |
уже присутствуют |
имена |
классов , нам придется |
|||||||||||||||||||||||
|
анализировать |
строку , чтобы |
вычленить |
отдельные |
имена |
при чтении |
||||||||||||||||||||||
|
и обеспечить |
корректный |
формат |
строки |
при записи . |
|
|
|
|
|
||||||||||||||||||
|
Примечание |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
классовникак |
не упорядочен, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||||
|
Список |
имен |
то есть порядок |
следования |
имен |
|
||||||||||||||||||||||
|
в списке не имеет |
никакого |
значения . |
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||||||
|
|
|
|
|
|
|
|
|
||||||||||||||||||||
|
Хотя втом , чтобы |
написать |
программный |
|
код , делающий |
всенетэто , |
||||||||||||||||||||||
|
ничего сложного |
, тем не менее |
неплохо |
было |
бы всегда |
скрывать- |
вну |
|||||||||||||||||||||
|
тренние |
механизмы |
за функциями |
прикладного |
|
интерфейсасча.-К |
||||||||||||||||||||||
|
стью , вбиблиотеке |
jQuery |
уже реализовано |
|
все необходимое . |
|
||||||||||||||||||||||
|
Добавить |
имена |
классов |
|
ко всем элементам |
соответствующего |
|
набора |
||||||||||||||||||||
|
достаточно |
просто помощьюс |
методаaddClass(): |
|
|
|
|
|
|
|
|
|
|
|||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||
|
|
|
|
|
|
|
|
|
Синтаксис |
метода |
addClass |
|
|
|
|
|
|
|
|
|||||||||
|
addClass(names) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||
|
Добавляет |
|
|
указанное |
имя класса |
( или имена |
нескольких |
классов ) |
ко всем |
|||||||||||||||||||
|
элементам |
|
|
обернутомв |
наборе . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||
|
Параметры |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
names |
(строка |
| функция ) Строка , содержащая |
имя добавляемого- |
|
клас |
||||||||||||||||||||||
|
|
са , или , вслучае добавления |
нескольких |
имен классов– строка, |
|
|
||||||||||||||||||||||
|
|
с именами |
классов , разделенными |
пробелами |
. Еслиэтом впа- |
|
|
|
||||||||||||||||||||
|
|
раметре |
передается |
функция , она будет |
вызвана для каждого |
|||||||||||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
114 |
Глава 3. Оживляем страницыпомощьюс |
jQuery |
|
|
|
|
|
элемента внаборе и ей будет передан сам элемент через контекст функции , также два параметра : индекс элементана-в боре и текущее значение атрибутаclass. Возвращаемое значение функции будет использованокачестве имени класса ( или имен нескольких классов ).
Возвращаемое значение
Обернутый набор .
Удаление |
имен классов |
выполняется |
так же просто– помощью |
метода |
|||||||||||
removeClass(): |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||
|
|
Синтаксис |
метода |
removeClass |
|
|
|
|
|||||||
removeClass(names) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Удаляет |
указанное |
имя класса |
( или имена |
классоввсех) у элементов |
|||||||||||
в обернутом наборе . |
|
|
|
|
|
|
|
|
|
|
|
|
|||
Параметры |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
names |
(строка |
| функция |
) Строка , содержащая |
имя удаляемогоклас |
|||||||||||
|
са , или , в случае удаления |
нескольких |
имен |
классов , строка |
|||||||||||
|
с именами |
классов , разделенными |
пробелами |
. Еслиэтом впа- |
|||||||||||
|
раметре |
передается |
функция |
, она будет |
вызвана |
для каждого |
|||||||||
|
элемента |
|
внаборе , ией будет |
передан |
сам элемент |
через -кон |
|||||||||
|
текст функции , также два параметра : индекс элементана-в |
||||||||||||||
|
боре и текущее |
значение |
атрибутаclass. Возвращаемое |
значе- |
|||||||||||
|
ние функции |
будет |
использованокачестве |
имени класса ( или |
|||||||||||
|
имен нескольких |
классов ), которые |
должны |
быть удалены . |
|||||||||||
Возвращаемое значение
Обернутый набор .
Часто требуется |
переключать |
наборы стилей туда -обратно , например , |
|||||||||||
чтобы |
обозначить |
переход |
между двумя |
состояниями |
или по каким -то |
||||||||
другим |
причинам |
, имеющим |
значение |
для нашего |
интерфейса |
. Такую |
|||||||
возможность |
обеспечивает |
методtoggleClass() библиотеки |
jQuery. |
|
|||||||||
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
Синтаксис |
метода |
toggleClass |
|
|
|
||||
toggleClass(names) |
|
|
|
|
|
|
|
|
|
|
|||
Добавляет |
указанное |
имя класса , если |
оно отсутствуетэлементев |
, иудаля- |
|
||||||||
ет имя утех элементов |
, где указанное имя класса уже присутствует- |
. При |
|||||||||||
мечательно |
, что каждый элемент |
проверяется отдельно |
, поэтомунекото- в |
|
|||||||||
рые элементы |
имя класса |
может |
добавлятьсяиз других, а – удаляться . |
|
|||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
3.2. Изменение |
стиля |
отображения |
элемента |
|
|
|
115 |
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Параметры |
|
|
|
|
|
|
|
|
|
|
|
|
|
names |
(строка | функция ) Строка , содержащая |
имя переключаемого |
|
|||||||||
|
|
класса или список имен классов . Еслиэтомв |
параметре |
пере- |
|
|
|||||||
|
|
дается функция |
, она будет вызвана |
для каждого элементана- |
|
в |
|||||||
|
|
боре , ией будет |
передан |
сам элемент |
через контекст функции . |
||||||||
|
|
Возвращаемое значение |
функции будет использованокачев- |
|
|
|
|||||||
|
|
стве имени класса ( или имен нескольких |
классов ). |
|
|
|
|
||||||
|
Возвращаемое |
значение |
|
|
|
|
|
|
|
|
|
||
|
Обернутый |
набор . |
|
|
|
|
|
|
|
|
|
||
|
|
|
|
|
|
||||||||
Чаще всего |
методtoggleClass() применяется |
для переключения |
визу- |
||||||||||
ального |
представления |
элементов . Рассмотримкачестве |
примера |
таб- |
|||||||||
лицу , вкоторой необходимо окрашивать смежные строки |
различным |
||||||||||||
цветом . Атеперь представьте , чтонасу появились |
достаточно |
серьез- |
|||||||||||
ные причины |
при определенных |
событиях изменять |
цвет фона- |
нечет |
|||||||||
ных строк цветом фона четных строк ( и , возможно , наоборот ). Метод
toggleClass() позволяет |
решить |
эту задачу |
элементарно : добавить имя |
||
класса ккаждой второй |
строкеудалить его из всех остальных . |
|
|||
Попробуем это сделать .файлеВ |
chapter3/zebra.stripes.html вы найдете |
||||
копию страницы информациейс |
транспортных средствах элементе. В |
||||
<script> в заголовке страницы |
определена |
функция : |
|
||
function swapThem() { |
|
|
|
|
|
$(‘tr’).toggleClass(‘striped’); |
|
|
|
||
} |
|
|
|
|
|
Эта функция использует |
методtoggleClass(), чтобы переключать |
имя |
|||
класса striped во всех элементах<tr>. Кроме |
того , мы определили |
-сле |
|||
дующий обработчик |
события |
готовности |
страницы : |
|
|
$(function(){/
$(“table tr:nth-child(even)”).addClass(“striped”); $(“table”).mouseover(swapThem).mouseout(swapThem);
});
Первая |
инструкция этомв обработчике |
применяет классstriped ко всем |
||||
четным |
строкам |
таблицы , используя |
селекторnth-child, с которым мы |
|||
познакомились |
впредыдущей |
главе . Вторая инструкция |
устанавли- |
|||
вает обработчики |
событийmouseover и mouseout, каждый из которых |
|||||
вызывает функциюswapThem. Подробно тема обработки событий будет |
||||||
рассматриваться |
следующейв |
главе ,пока вам достаточно |
знать , что |
|||
всякий |
раз при наведении указателя |
мыши |
на таблицу |
или при выходе |
||
за ее пределы будет выполняться следующая |
инструкция : |
|||||
$(‘tr’).toggleClass(‘striped’);
В результате |
всякий раз , когда указатель |
мыши пересекает грани- |
цу таблицы |
, из всех элементов<tr> с именем |
классаstriped этот класс |
116 |
Глава 3. Оживляем |
страницыпомощьюс |
jQuery |
|
|
|
|
|
|
удаляется |
, ако всем элементам<tr>, не имеющим этого имени |
класса , |
||
класс добавляется . Этот эффект ( довольно |
раздражающий |
) показан на |
||
рис .3.2. |
|
|
|
|
Рис . 3.2.Наличие или отсутствие класса striped переключается всякий раз , когда указатель мыши пересекает границу таблицы
Необходимость простого |
переключения |
классаэлементахв |
не так часто |
|
||||||
возникает |
на практике |
, чаще переключение |
класса |
производитсяза- |
в |
|||||
висимости |
от каких -либо условий . Для подобных случаевбиблиотекев |
|
||||||||
jQuery имеется другая версия методаtoggleClass(), которая позволяет |
|
|||||||||
добавлять |
или удалять класс , опираясь |
на результат |
произвольного- |
ло |
||||||
гического |
выражения |
: |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
Синтаксис метода |
toggleClass |
|
|
|
|
||||
toggleClass(names,switch) |
|
|
|
|
|
|
|
|
|
|
Добавляет указанное |
имя класса , если выражениеswitch возвращает true, |
|
|
|
||||||
и удаляет |
его , если выражениеswitch возвращает false. |
|
|
|
|
|||||
Параметры |
|
|
|
|
|
|
|
|
|
|
names |
(строка | функция ) Строка , содержащая имя переключаемого |
|
|
|||||||
|
класса или список имен классов , разделенных |
пробелом |
. |
Если |
|
|||||
|
в этом параметре |
передается |
функция |
, она будет вызвана |
|
для |
|
|||
|
|
|
|
|
|
|
|
|
|
|
3.2. Изменение стиля отображения |
элемента |
|
117 |
|
|
|||
|
|
|
|
|
||||
|
каждого |
элемента наборев |
ией будет передан сам элемент - че |
|||||
|
рез контекст |
функции также, |
два параметра : индекс элемен- |
|||||
|
та и текущее |
значение атрибутаclass. Возвращаемое значение |
||||||
|
функции |
будет использовано |
качестве имени класса ( или |
|||||
|
имен нескольких |
классов ). |
|
|
|
|||
switch (логическое значение ) Выражение , значение которого определяет , будет ли класс CSS добавлен в элементыtrue) или( удален
(false).
Возвращаемое значение
Обернутый набор .
Очень часто бывает нужно определить , имеется элементеив |
опреде- |
|
||||
ленный |
класс . Например , мы могли бы предусмотреть |
выполнение- |
не |
|||
которых |
операций зависимости |
от наличия |
или отсутствия |
некото- |
|
|
рого класса элементев или просто |
определять |
тип элемента |
по классу . |
|||
Библиотека jQuery предлагает для этого методhasClass().
$(“p:first”).hasClass(“surpriseMe”)
Он возвращает |
значениеtrue, если хотя бы один |
из элементовсоответ- |
||||||||||||
ствующем |
наборе |
имеет |
указанный |
класс . |
|
|
|
|
|
|||||
|
|
|
|
|
|
|
|
|
|
|||||
|
|
|
|
Синтаксис |
метода hasClass |
|
|
|
|
|||||
hasClass(name) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Проверяет , есть ли классуказаннымс |
|
именем |
хотя быодногоу |
элемента |
|
|||||||||
в соответствующем |
наборе . |
|
|
|
|
|
|
|
|
|
||||
Параметры |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
name |
(строка ) Проверяемое |
имя класса . |
|
|
|
|
|
|||||||
Возвращаемое |
значение |
|
|
|
|
|
|
|
|
|
|
|||
Возвращает true, если хотя бы уодного |
из элементов обернутомв |
наборе |
|
|||||||||||
имеется |
указанный |
классfalse, и – в противном |
случае . |
|
|
|
||||||||
|
|
|
|
|
|
|||||||||
Напомним |
, что тот же результат |
можно |
получитьпомощьюс |
метода |
||||||||||
is(), который |
рассматривался главе 2: |
|
|
|
|
|
|
|||||||
$(“p:first”).is(“.surpriseMe”) |
|
|
|
|
|
|
|
|
|
|||||
Но все же методhasClass() делает |
программный |
код более удобочитае- |
||||||||||||
мым , акроме того , он имеет более |
эффективную |
реализацию . |
||||||||||||
Другая часто |
востребованная |
возможность– получение списка классов |
||||||||||||
для конкретного |
элементавиде |
массива , неа в виде |
строки , которую |
|||||||||||
еще надо анализировать |
. Сделать |
это можно , как показано ниже : |
||||||||||||
118 |
|
|
|
|
|
|
|
|
Глава 3. Оживляем |
страницыпомощьюс |
jQuery |
|
|
||||||||||
|
$(“p:first”).attr(“className”).split(“ “); |
|
|
|
|
|
|
|
|
|
|
|
|||||||||||
Напомним |
, что методattr() возвращает |
значениеundefined, если запра- |
|
|
|||||||||||||||||||
шиваемый атрибут отсутствует , поэтому |
данная инструкция |
-будет вы |
|||||||||||||||||||||
зывать ошибку , еслиэлементев |
<p> нет хотя бы одного |
класса . |
|
|
|
|
|
||||||||||||||||
Мы можем |
решить |
эту проблему |
предварительной |
проверкой |
|
наличия |
|||||||||||||||||
атрибута |
, заключив |
все этоудобноев |
для многократного |
использова- |
|
||||||||||||||||||
ния расширение |
jQuery: |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
|
$.fn.getClassNames = function() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||||
|
var name = this.attr(“className”); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||||
|
if (name != null) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
return name.split(“ “); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
else { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return []; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Пусть вас не смущают |
особенности |
синтаксиса |
расширений |
|
jQuery– |
||||||||||||||||||
мы подробно |
обсудим |
эту темуглаве 7. Сейчас |
важно |
то , что мы -мо |
|
||||||||||||||||||
жем использовать |
функциюgetClassNames() в любом месте |
сценария |
, |
|
|||||||||||||||||||
получая |
массив |
имен |
классов |
или пустой массив , если элемент |
не имее |
||||||||||||||||||
ни одного |
класса . Лихо ! |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||
Манипулирование |
|
визуальным |
|
представлением |
элементов |
через |
имена |
||||||||||||||||
классов CSS– очень мощное |
средство |
, но иногда |
приходится |
иметь |
дело |
||||||||||||||||||
с базовыми |
стилями , как если бы они были |
объявлены |
непосредственно |
||||||||||||||||||||
в элементах |
. Посмотрим |
, что может |
нам предложить |
jQuery |
для- |
реше |
|||||||||||||||||
ния этой задачи . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||
3.2.2. Получение |
установкаи |
стилей |
|
|
|
|
|
|
|
|
|
|
|||||||||||
Изменяя |
класс элемента |
, мы можем выбирать |
предопределенный |
|
набор |
||||||||||||||||||
стилей , который |
должен быть применен |
, но иногда |
нам требуется- |
от |
|||||||||||||||||||
менить действие |
таблицы |
стилей . Применение |
стилей |
непосредственно |
|||||||||||||||||||
к элементу |
автоматически |
отменяет |
действие таблицы |
стилей -, что по |
|||||||||||||||||||
зволяет более |
тонко |
управлять |
отдельными |
элементамиих визуаль- |
|
|
|||||||||||||||||
ным представлением . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||||
Метод css() по действию |
|
напоминает |
методattr(), позволяя |
нам уста- |
|
|
|||||||||||||||||
навливать |
значения |
отдельных |
|
свойств |
CSS путем |
указания |
имени |
||||||||||||||||
и значения |
или нескольких |
|
значенийвиде объекта . Сначала |
посмо- |
|
||||||||||||||||||
трим на вариант , когда |
передаются |
имязначение . |
|
|
|
|
|
|
|
|
|||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|||||||
|
|
|
|
|
|
Синтаксис |
метода |
css |
|
|
|
|
|
|
|
|
|||||||
|
css(name,value) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||
|
Устанавливает |
CSSсвойствоname |
в значение value для всех элементов |
|
|
|
|
||||||||||||||||
|
в обернутом |
наборе . |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|