Опубликован: 04.05.2010 | Уровень: для всех | Доступ: платный
Лекция 10:

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

< Лекция 9 || Лекция 10: 12345 || Лекция 11 >

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, например, знак ">" будет заменен &gt; ).
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">&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");
}
< Лекция 9 || Лекция 10: 12345 || Лекция 11 >
Зарина Каримова
Зарина Каримова
Казахстан, Алматы, Гимназия им. Ахмета Байтурсынова №139, 2008
Akiyev Begench
Akiyev Begench
Беларусь, Полоцк, полоцкий государственный университет