документа. Поиск не обязательно должен происходить по id—код
$("body") ищет элемент body, и точно так же мы можем вызвать
$("p") для поиска всех элементов p.
Далее мы вызываем для найденного объекта метод append—пере-
данная ему строка преобразуется в DOM-элемент, а затем добавляется
150 Часть II. Продвинутый JavaScript
внутрь элемента body, сразу перед закрывающим тегом. На рис. 9.4
показано, как будет выглядеть после этого наша страничка.
Рис. 9.4. Наш документ с добавленным элементом
Также appendможно использовать в цикле forдля добавления
нескольких элементов:
for (var i = 0; i < 3; i++) {
var hobby = prompt("Назови одно из своих хобби!");
Hobby — хобби
$("body").append("
" + hobby + "
");}
Этот цикл повторяется трижды. При каждом повторении созда-
ется диалог prompt, запрашивающий у пользователя его хобби, после
чего строка с хобби помещается между тегов
и передается методу
append, который добавляет ее в конец элемента body. Введите этот код
в наш документ dom.html и загрузите его в браузер. Результат должен
выглядеть как на рис. 9.5.
Рис. 9.5. Элементы, добавленные в цикле
9. DOM и jQuery 151
Анимация элементов средствами jQuery
На многих сайтах при показе и скрытии частей страницы используется
анимация. Например, добавляя на страницу новый параграф с текстом,
вы можете сделать так, чтобы он проявлялся постепенно, а не весь цели-
ком сразу.
С помощью jQuery анимировать элементы совсем не сложно. К при-
меру, чтобы элемент медленно исчезал, мы можем воспользоваться
Fade out —
методом fadeOut. Замените содержимое второго элемента script
исчезать
в dom.html на такой код:
$("h1").fadeOut(3000);
Чтобы найти все элементы h1, мы использовали функцию $.
Поскольку в dom.html элемент h1 всего один (это заголовок с текстом
«Привет, мир!»), именно его мы и получим в виде jQuery-объекта.
Вызывая для этого объекта метод fadeout(3000), мы запускаем зату-
хание заголовка до полного его исчезновения в течение трех секунд.
(Аргумент fadeOut передается в миллисекундах, то есть тысячных
долях секунды, поэтому значение 3000 даст анимацию в три секунды
длиной.)
Когда вы перегрузите страницу с этим кодом, вы увидите, как эле-
мент h1 постепенно исчезает.
Цепной вызов и анимация на jQuery
Если вызвать метод jQuery-объекта, этот метод, как правило, вер-
нет первоначальный объект — тот, для которого он и был вызван.
Например, $("h1") возвращает jQuery-объект со всеми элементами h1,
а $("h1").fadeOut(3000) возвращает все тот же jQuery-объект с эле-
ментами h1. Тогда изменить текст заголовка и включить его затухание
можно так:
$("h1").text("Этот текст скоро исчезнет").fadeOut(3000);
Подобный вызов нескольких методов подряд называют цепным
вызовом.
Можно запустить несколько анимаций одного и того же элемента.
Fade in —
Например, использовать цепной вызов методов fadeOut и fadeIn,
постепенно
чтобы элемент исчез и тут же снова проявился:
усиливаться
$("h1").fadeOut(3000).fadeIn(2000);
152 Часть II. Продвинутый JavaScript
Анимация fadeIn заставляет невидимый элемент
проявиться. jQuery понимает, что, когда вы делаете цеп-
ной вызов двух анимаций, вы, скорее всего, хотите, чтобы
они сработали по очереди, одна после другой. В результате
элемент h1 будет затухать в течение трех секунд, а затем
в течение двух секунд проявляться.
В jQuery есть еще два метода для анимации, похо-
жие на fadeOut и fadeIn, — это slideUp и slideDown.
При вызове slideUp элементы исчезают, уплывая вверх,
а при вызове slideDown появляются, опускаясь сверху.
Замените второй элемент script в dom.html на следую-
щий код и перегрузите страницу:
$("h1").slideUp(1000).slideDown(1000);
Slide
up —
здесь
«поднять»
Здесь мы нашли элемент h1, скрыли его с эффектом уплывания вверх
Slide down —
в течение одной секунды, а затем показали снова, опустив сверху вниз
здесь
за одну секунду.
«опустить»
ПОПР ОБУ ЙТЕ !
Мы применяли fadeIn, чтобы показывать невидимые элементы. Но что если
вызвать fadeIn для элемента, который уже видим, и что будет с элементом,
который следует за элементом, находящимся в процессе анимации?
К примеру, добавьте в dom.html новый элемент p сразу после заголовка.
Используйте slideUp и slideDown, чтобы скрыть и показать элемент h1,
и посмотрите, как поведет себя элемент p. А если использовать fadeOut
и fadeIn?
Что произойдет, если использовать fadeOut и fadeIn для одного
и того же элемента, но без цепного вызова? Например:
$("h1").fadeOut(1000);
$("h1").fadeIn(1000);
Попробуйте поместить этот код внутрь цикла for, настроенного на пять
повторов. Что получится?
Как считаете, что делают jQuery-методы show и hide? Проверьте свои
Show —
догадки на практике. Как может пригодиться hide, если нужно, чтобы уже
показать
видимый элемент постепенно проявился?
Hide — скрыть
9. DOM и jQuery 153
Что мы узнали
В этой главе мы узнали, как модифицировать HTML-страницы
из JavaScript, работая с элементами DOM. Как видите, jQuery дает
более мощные способы поиска элементов, а также их изменения
и даже анимации. Также мы узнали об HTML-атрибуте id, который
позволяет присвоить элементу уникальный идентификатор.
В следующей главе мы выясним, как управлять моментом запуска
JavaScript-кода — допустим, чтобы он выполнялся по таймеру или при
нажатии на кнопку. Также мы разберемся, как выполнять фрагмент
кода многократно, с паузой между запусками — например, чтобы раз
в секунду обновлять показания времени.
154 Часть II. Продвинутый JavaScript
УПРА ЖНЕНИЯ
Выполните эти упражнения, чтобы попрактиковаться в исполь-
зовании jQuery и DOM.
#1. Перечислите своих друзей (и сделайте их лучшими!)
Создайте массив с именами нескольких друзей. В цикле for
создайте для каждого имени по одному элементу p и добавьте
эти элементы в конец
, вызывая jQuery-метод append.С помощью jQuery измените текст элемента h1, чтобы вместо
"Привет, мир!" там было "Мои друзья". Используйте метод
hide и метод fadeIn, чтобы имена плавно возникали на экране.
Теперь измените созданные вами элементы p, добавив после
каждого имени слово "лучший!". Подсказка: если найти сразу
все элементы p с помощью $("p"), метод append можно вызвать
для них всех разом.
#2. Мигающий заголовок
Как с помощью fadeOut и fadeIn сделать так, чтобы заголовок
мигнул пять раз с интервалом в секунду? Как сделать это в цикле
for? А теперь измените цикл, чтобы заголовок появлялся
и исчезал в первый раз за секунду, потом за две, потом за три
и т. д.
#3. Отложенная анимация
Для задержки анимации можно воспользоваться методом delay.
Delay —
С помощью delay, fadeOut и fadeIn заставьте какой-нибудь
отложить
элемент плавно исчезнуть, а затем, через пять секунд, снова
проявиться.
#4. Метод fadeTo()
Поэкспериментируйте с методом fadeTo. Первый его аргу-
мент — число миллисекунд, как и у прочих методов анимации,
а второй — число от 0 до 1. Что произойдет, если запустить сле-
дующий код?
$("h1").fadeTo(2000, 0.5);
Как думаете, что делает второй аргумент? Попробуйте разные
его значения в диапазоне от 0 до 1, чтобы выяснить, зачем он
нужен.
10
И Н Т Е РА К Т И В Н О Е
П Р О Г РА М М И Р О В А Н И Е
До сих пор JavaScript начинал работу сразу же после загрузки страницы,
приостанавливаясь лишь при вызове некоторых функций, таких как
alert или confi rm. Однако порой не нужно выполнять весь код сразу —
что если мы хотим запустить фрагмент кода спустя какое-то время или
в ответ на действие пользователя?
В этой главе мы изучим разные способы управлять тем, когда именно
выполняется наш код. Это называется интерактивным программирова-
нием. Оно позволяет создавать интерактивные веб-страницы, которые
могут изменяться со временем и реагировать на действия пользователей.
Отложенное выполнение кода и setTimeout
Вместо того чтобы вызывать функцию сразу, можно попросить JavaScript
сделать это спустя определенное время. Такого рода отложенное выпол-
нение называется запуском по таймеру, и для этого в JavaScript есть
Set timeout —
функция setTimeout. Данная функция принимает два аргумента
устано-
(см. рис. 10.1): функцию, которую надо будет вызвать при срабатывании
вить время
таймера, и само время ожидания в миллисекундах.
задержки
156
Функция, которую надо выполнить
через timeout миллисекунд
setTimeout(func, timeout)
Сколько миллисекунд ждать
перед запуском функции
Рис. 10.1. Аргументы setTimeout
Следующий пример показывает, как открыть диалог alert через
setTimeout.
var timeUp = function () {
alert("Время вышло!");
};
setTimeout(timeUp, 3000);
1
В строке мы создали функцию timeUp, открывающую диа-
лог alert с сообщением "Время вышло!". В строке мы вызвали
setTimeout с двумя аргументами: функцией, которую нужно запустить
(timeUp), и числом миллисекунд (3000), которые должны пройти перед
ее запуском. По сути, мы говорим: «Подожди три секунды и вызови
timeUp». Сразу после вызова setTimeout(timeUp, 3000) ничего