Ник Морган - JavaScript для детей. Самоучитель по программированию

для которого он был вызван.

Например, чтобы поместить в конец страницы новый элемент p,

добавим в наш JavaScript такой код:

$("body").append("

Это новый параграф");

Первая часть этой команды вызывает функцию $ со строкой

селектора "body", чтобы найти тело (содержимое) нашего HTML-

документа. Поиск не обязательно должен происходить по id — код

$("body") ищет элемент body, и точно так же мы можем вызвать

$("p") для поиска всех элементов p.

Далее мы вызываем для найденного объекта метод append — пере-

данная ему строка преобразуется в DOM-элемент, а затем добавляется

150 Часть II. Продвинутый JavaScript

внутрь элемента body, сразу перед закрывающим тегом. На рис. 9.4

показано, как будет выглядеть после этого наша страничка.

Рис. 9.4. Наш документ с добавленным элементом

Также append можно использовать в цикле for для добавления

нескольких элементов:

for (var i = 0; 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? Проверьте свои