На этом шаге мы рассмотрим общие принципы работы с библиотекой.
Наш собственный программный код находится во втором файле JavaScript, который подключается к документу HTML с помощью тега
<script src="pushkin.js" type="text/javascript"></script>
Для данного примера нам потребуется написать всего три строки программного кода:
$(document).ready(function() {
$('.poem-stanza').addClass('highlight');
});
Фундаментальной операцией в библиотеке jQuery является выборка части документа. Ее выполняет конструкция $(). Обычно она принимает строковый параметр, который может содержать любое выражение селектора CSS. В данном случае нам требуется найти все части документа, к которым применяется класс poem-staza, поэтому селектор выглядит очень просто. Однако далее мы будем рассматривать более сложные варианты.
В действительности функция $() является фабричной функцией, создающей объект jQuery, представляющий собой основной строительный блок, с которым нам предстоит работать. Объект jQuery объединяет ноль или более элементов DOM и позволяет воздействовать на них различными способами. В данном случае мы изменяем внешнее представление выбранных частей страницы, причем выполняем это за счет изменения списка классов, применяемых к тексту стихотворений.
Добавление нового класса
Метод .addClass() подобно большинству других методов jQuery имеет имя, говорящее само за себя, - он применяет класс CSS к выбранной части страницы. Метод принимает единственный параметр - имя добавляемого класса. Этот метод, как и его противоположность .removeClass(), позволяет исследовать работу библиотеки jQuery путем применения различных селекторов, доступных в библиотеке. Рассматриваемый пример просто добавляет класс highlight, который в нашей таблице стилей определен как курсивный текст с рамкой.
Обратите внимание, что для добавления класса нам не требуется выполнять обход всех стихотворных строф цикле. Как уже говорилось, в библиотеке jQuery используется прием неявной итерации в таких методах, как .addClass(), поэтому для изменения всех выбранных частей документа необходимо произвести единственный вызов функции.
Выполнение программного кода
Комбинации $() и .addClass() оказалось вполне достаточно, чтобы добиться поставленной цели, заключающейся в изменении внешнего вида текста поэмы. Однако если просто вставить эту строку программного кода в заголовок документа, она не даст никакого эффекта. Программный код JavaScript обычно запускается сразу же, как только обнаруживается браузером, то есть во время обработки заголовка, когда обрабатываемая этим кодом разметка HTML еще отсутствует. Нам необходимо отложить выполнение программного кода до момента, когда дерево DOM окажется доступным для использования.
Традиционным механизмом управления моментом запуска программного кода JavaScript являются обработчики событий. Многие обработчики служат для реализации реакции на события, инициируемые пользователем, такие как щелчок мышью или нажатие клавиши. Если бы в нашем распоряжении не было jQuery, нам пришлось бы использовать обработчик onload, который запускается после того, как отображена вся страница (вместе со всеми изображениями в ней). Чтобы запустить свой программный код по событию onload, необходимо было бы поместить его внутрь функции:
function highlightPoemStanzas()
{
$('.poem-stanza').addClass('highlight');
}
<body onload="highlightPoemStanzas(); ">
В этом случае программный код запустился бы по окончании загрузки страницы.
На следующем шаге мы закончим изучение этого вопроса.
