как поменять заголовок, вызывая встроенные методы DOM. В этом же

разделе мы доработаем код страницы, чтобы менять заголовок через

jQuery. Откройте файл dom.html и внесите в него следующие правки:

Изучаем DOM

Привет, мир!

 9. DOM и jQuery 149

var newHeadingText = prompt("Введите новый заголовок:");

 $("#main-heading").text(newHeadingText);

В строке  мы добавили новый тег , подгружающий jQuery.

Когда библиотека загружена, можно использовать jQuery-функцию $ для

поиска HTML-элементов.

Функция $ принимает один аргумент, который называется строка

селектора. Эта строка указывает, какой элемент или элементы нужно

найти в дереве DOM. В нашем случае это "#main-heading". Символ #

означает id, то есть селектор "#main-heading" ссылается на элемент,

id которого равен main-heading.

Функция $ возвращает объект jQuery, соответствующий найденным

элементам. Например, вызов $("#main-heading") вернет jQuery-

объект для элемента h1 (id которого равен "main-heading").

Теперь, когда у нас есть объект jQuery для элемента h1, мы можем

изменить его текст, вызвав в строке  метод jQuery-объекта text с новым

заголовком в качестве аргумента. Заголовок поменяется на введенную

пользователем строку, которая хранится в переменной headingText.

Как и прежде, при открытии нашей страницы должен появиться диалог

с запросом нового текста для элемента h1.

Создание новых элементов через jQuery

Помимо изменения существующих элементов, с помощью jQuery можно

создавать новые элементы и добавлять их в дерево DOM. Для этого мы

Append —

будем использовать метод jQuery-объекта append, передавая ему нуж-

добавление

ный HTML-код. Аppend преобразует HTML в DOM-элемент (соответству-

записи

ющий заданным в коде тегам) и добавит его к содержимому элемента,

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

Например, чтобы поместить в конец страницы новый элемент 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 анимировать элементы совсем не сложно. К при-

меру, чтобы элемент медленно исчезал, мы можем воспользоваться