Создание динамического наполнения страницы. JavaScript-библиотеки и технология Comet

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 кратко рассмотрены некоторые из этих методов, а также некоторые особенности работы с ними.

В следующих примерах работа происходит со следующим 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">&lt;a&gt;Привет!&lt;/a&gt;</div>

Пример 6:

$("#my-div").css(
  {
      backgroundColor: "#F00",
      color: "#00F"
  }
);

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

<div id="my-div" style="background-color: #F00; color: #00F">
  &lt;a&gt;Привет!&lt;/a&gt;
</div>

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

13.4.5.1. Последовательный вызов функций

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

// Заполняем скрытый элемент <div id="divEdit"></div> текстом и показываем его
$("#divEdit").html(response).show();

// найти <select id="my_select">...</select>
var sel = $("#my_select");

// добавляем к нему <option value="1">Пример опции</option>
$("<option></option>")  // создаем требуемый элемент
  .attr("value", 1)     // устанавливаем значение одного из его атрибутов
  .html("Пример опции") // записываем в него текст
  .appendTo(sel);       // прикрепляем к уже существующему элементу

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

13.4.6. Работа с индивидуальными элементами

Функция $() возвращает коллекцию элементов. Так, $("p") вернет массив всех элементов <p>, какие только могут присутствовать на странице (или пустой массив, если таких элементов не существует). Одним из условий работы большинства функций jQuery является непременная обработка всех элементов в возвращаемой коллекции.

Например:

1. 1. Цвет всех ссылок на странице станет зеленым:

   $("a").css("color", "green");
2. 2. Ко всем элементам div с классом test будет добавлен новый элемент:

   $("div.test").append("<span>Тестовый элемент</span>");

Но иногда необходимо обратиться к индивидуальным элементам возвращаемой коллекции.

13.4.6.1. Индексы и get([index])

Возвращаемая функцией $() коллекция является "псевдо-массивом" DOM-элементов. Поэтому можно обратиться к индивидуальным элементам по их индексу:

$("p")[0].className = "test";

Иногда, правда, необходимо обратиться непосредственно к массиву DOM-объектов, скрытых внутри "псевдо-массива", которым является объект jQuery. Для этого используется функция get():

$("p");       // Получили объект jQuery
$("p").get(); // Получили соответствующую коллекцию DOM-элементов

Более того, метод get позволяет обращаться непосредственно к индивидуальным элементам коллекции:

$("a").get(0); // Получили первую из всех ссылок на странице

13.4.6.2. each(fn)

Иногда нужно пробежаться по всем элементам коллекции и выполнить над ними какие-то действия. Для этого понадобится функция each. Эта функция принимает в качестве аргумента другую функцию. each() работает в контексте найденных элементов и поэтому каждый раз, когда выполняется переданная ей функция, в этой функции доступна переменная this, указывающая на соответствующий DOM-элемент:

$("p").each(
  function() {
      // внутри функции this указывает на текущий DOM-элемент
      alert(this.innerHTML);
  }
);

В этом примере находятся все элементы p на странице, и для каждого из этих элементов вызывается функция, которая показывает его содержимое.

Функция, передаваемая в метод each(), может принимать на вход один аргумент, который является индексом текущего элемента в коллекции.

Для иллюстрации перепишем пример с раскраской нечетных строк таблицы с помощью each(). Если есть некая таблица с id="zebra" и CSS-класс "odd" для нечетных строк, то можно написать так:

$("#zebra tr").each(colorize); // передаем в each функцию colorize
function colorize(index) {
    if (index % 2 == 1)       // index является индексом текущего элемента в коллекции
        $(this).addClass("odd");
}