13.4.4. Инициализация

Большинство библиотек JavaScript часто использует событие window.onload. Это событие вызывается после того, как документ полностью загрузился в окно браузера. Это значит, что вызываемый в обработчике этого события код не сработает, пока не загрузятся все изображения, баннеры и видеоролики на странице.

jQuery предлагает решение этой проблемы. У разработчика есть возможность выполнить свой код в тот момент, когда доступна объектная модель документа, то есть когда браузер уже получил исходный код страницы полностью, но, возможно, еще не подгрузил различное мультимедийное содержимое (рисунки, видео, Flash).

Возможность выполнить такой код предлагается методом .ready():

$(document).ready(

function() { /* ... */ }

);

или его сокращенным вариантом, $(fn):

$(

function() { /* ... */ }

);

В качестве аргумента в .ready() передается функция, которая будет выполнять все необходимые действия.

$(document).ready(

function() {

// добавим ко всем ссылкам на странице некий текст

$("a").append("<span>(открыть в новом окне)</span>");

}

);

$(document).ready(init);

function init() {

// находим все элементы Р с классом highlight и задаем им другой фон

$("p.highlight").css("background-color", "#000");

// выполняем любые действия

alert('Функция init()');

// вызывать другие функции

anotherFunc();

// манипулируем объектами в документе

document.getElementById("some_id");

}

// Используем кратую форму записи

$(

function() {

alert('Документ готов!');

}

)

13.4.5. Управление элементами документов и их свойствами

jQuery предлагает разработчику большое количество методов для манипуляции элементами документа и их свойствами. В табл. 13.1 кратко рассмотрены некоторые из этих методов, а также некоторые особенности работы с ними.

Таблица 13.1. Методы для манипуляции элементами документа в jQuery
Метод	Описание
append(content)/prepend(content)	Добавить переданный элемент или выражение в конец/в начало выбранного элемента.
appendTo(expr)/prependTo(expr)	Добавить выбранный элемент в конец/в начало переданного элемента.
attr(name)	Получить значение атрибута.
attr(params)	Установить значение атрибутов. Атрибуты передаются в виде {ключ1:значение1[, ключ2:значение2[, …]]}
attr(name, value)	Установить значение одного атрибута.
css(name)/css(params)/css(name, value)	Получить/установить значение отдельных параметров CSS. Аналогично функции attr().
text()/text(val)	Получить/задать текст элемента. В случае ввода текста специальные символы HTML заменяются символьными примитивами (entities, например, знак ">" будет заменен >).
empty()	Удалить все подэлементы текущего элемента.

В следующих примерах работа происходит со следующим HTML-кодом:

<div id="my-div">

<a href="http://example.com/" id="my-link">Ссылка</a>

</div>

Пример 1:

$("#my-div").html(); //Вернет <a href="#" id="my-link">Ссылка</a>

Пример 2:

$("#my-link").attr("href"); // Вернет http://example.com/

Пример 3:

$("#my-div").append("<strong>Полужирный текст</strong>");

// или

$("<strong>Полужирный текст</strong>").appendTo($("#my-div"));

HTML станет таким:

<div id="my-div">

<a href="http://example.com/" id="my-link">Ссылка</a>

<strong>Полужирный текст</strong>

</div>

Пример 4:

$("#my-div").empty();

HTML станет таким:

<div id="#my-div"></div>

Пример 5:

$("#my-div").text("<a>Привет!</a>");

HTML станет таким:

<div id="#my-div"><a>Привет!</a></div>

Пример 6:

$("#my-div").css(

{

backgroundColor: "#F00",

color: "#00F"

}

);

HTML станет таким:

<div id="my-div" style="background-color: #F00; color: #00F">

<a>Привет!</a>

</div>

В последнем примере стоит обратить внимание на то, что для сложносоставных свойств CSS вроде background-color, font-weight и прочих используются их эквиваленты из Javascript (backgroundColor, fontWeight и т.п.).