После знакомства с этим разделом документации jQuery Вы сможете с легкостью манипулировать элементами объектной модели документа. Сегодня мы научимся вставлять, обертывать, замещать, копировать и удалять элементы DOM.

Правда начнем мы с нескольких методов, которые уже изучали в статье jQuery API: Attributes – атрибуты, но памятуя о том, что повторение – мать учения, это будет далеко не лишним. Тем более, что их использование вполне укладывается в понятие манипулирования объектной моделью документа.

Изменение контента:

html()

возвращает: String
Получает в виде строки html-код (innerHTML) для первого элемента в наборе. Эта возможность недоступна для XML-документов (хотя это работает для XHTML-документов).

В этом примере клик мышкой на параграфе конвертирует его HTML-код в текст.

$("p").click(function () {
  var htmlStr = $(this).html();
  $(this).text(htmlStr);
});

Откройте пример в отдельном окне и посмотрите исходный код.

html(val)

возвращает: jQuery
Устанавливает html-код для всех элементов в наборе. Эта возможность недоступна для XML-документов (хотя это работает для XHTML-документов).

В этом примере мы добавляем некоторый html-код в каждый элемент div.

$("div").html("<span class="red">Здрасссьте <strong>еще раз!</strong></span>");

Откройте пример в отдельном окне и посмотрите исходный код.

text()

возвращает: String
Получает в виде строки текстовое содержимое всех элементов набора. Этот метод работает как с HTML, так и с XML-документами.

В этом примере мы ищем текст первого параграфа (html внутри параграфа игнорируется), а затем вставляем его как html в последний параграф, чтобы продемонстрировать, что у нас получился чистый текст. Обратите внимание, что пропало оформление жирным шрифтом красного цвета.

var str = $("p:first").text();
$("p:last").html(str);

Откройте пример в отдельном окне и посмотрите исходный код.

text(val)

возвращает: jQuery
Устанавливает текстовое содержимое для всех элементов набора. Очень похоже на html(), но экранирует HTML, заменяя например «<» и «>» их HTML сущностями.

В этом примере мы добавляем текст в параграф (обратите внимание, что тэги b экранируются).

$("p").text("<b>Some</b> new text.");

Откройте пример в отдельном окне и посмотрите исходный код.

Вставка внутрь:

append(content)

возвращает: jQuery
Добавляет контент внутрь всех выбранных элементов ПОСЛЕ существующего контента. Эта операция подобна применению appendChild.

В этом примере мы добавляем некий HTML-код в конец всех параграфов.

$("p").append("<strong>ПРЕВЕД!</strong>");

Откройте пример в отдельном окне и посмотрите исходный код.

appendTo(content)

возвращает: jQuery
Добавляет все выбранные элементы в другой набор элементов ПОСЛЕ существующего контента. Эта операция обратна использованию выражения $(A).append(B), которое добавляет B в A. Здесь же A будет добавлено в B. Просто сравните с примером append().

В этом примере все элементы span добавляются в элемент, который имеет атрибут id «foo», ПОСЛЕ существующего там контента.

$("span").appendTo("#foo");

Откройте пример в отдельном окне и посмотрите исходный код.

prepend(content)

возвращает: jQuery
Добавляет контент внутрь всех выбранных элементов ДО существующего контента. Это наилучшее решение, чтобы вставлять элементы в самое начало.

В этом примере мы добавляем некий HTML-код в начало всех параграфов.

$("p").prepend("<strong>ПРЕВЕД </strong>");

Откройте пример в отдельном окне и посмотрите исходный код.

prependTo(content)

возвращает: jQuery
Добавляет все выбранные элементы в другой набор элементов ДО существующего контента. Эта операция обратна использованию выражения $(A).prepend(B), которое добавляет B в A. Здесь же A будет добавлено в B. Просто сравните с примером prepend().

В этом примере все элементы span добавляются в элемент, который имеет атрибут id «foo», ДО существующего там контента.

$("span").prependTo("#foo");

Откройте пример в отдельном окне и посмотрите исходный код.

Вставка снаружи:

after(content)

возвращает: jQuery
Вставляет контент ПОСЛЕ каждого выбранного элемента.

В примере вставляем некоторый HTML-код ПОСЛЕ всех параграфов.

$("p").after("<strong>Hello</strong>");

Откройте пример в отдельном окне и посмотрите исходный код.

before(content)

возвращает: jQuery
Вставляет контент ПЕРЕД каждым выбранным элементом.

В примере вставляем некоторый HTML-код ПЕРЕД всеми параграфами.

$("p").before("<strong>Hello</strong>");

Откройте пример в отдельном окне и посмотрите исходный код.

insertAfter(content)

возвращает: jQuery
Вставляет все выбранные элементы ПОСЛЕ других, определенных в insertAfter. Эта операция обратна использованию выражения $(A).after(B), где B вставляется после A. Здесь же А вставляется после В. Просто сравните с примером after().

В примере мы вставляем все параграфы ПОСЛЕ элемента, который имеет атрибут id «foo». Тоже самое можно было бы сделать, написав: $(«#foo»).after(«p»)

$("p").insertAfter("#foo");

Откройте пример в отдельном окне и посмотрите исходный код.

insertBefore(content)

возвращает: jQuery
Вставляет все выбранные элементы ПЕРЕД другими, определенными в insertBefore. Эта операция обратна использованию выражения $(A).before(B), где B вставляется после A. Здесь же А вставляется после В. Просто сравните с примером before().

В этом примере мы вставляем все параграфы ПЕРЕД элементом, который имеет атрибут id «foo». Тоже самое можно было бы сделать, написав: $(«#foo»).before(«p»)

$("p").insertBefore("#foo");

Откройте пример в отдельном окне и посмотрите исходный код.

Обертывание:

wrap(html)

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

В этом примере оборачиваем новый элемент div вокруг каждого параграфа. В качестве аргумента выступает HTML-код.

$("p").wrap("<div></div>");

Откройте пример в отдельном окне и посмотрите исходный код.

wrap(elem)

возвращает: jQuery
Оборачивает каждый элемент набора в единственный элемент-обертку.

В этом примере оборачиваем новый элемент div вокруг каждого параграфа. В качестве аргумента выступает вновь созданный элемент DOM.

$("p").wrap(document.createElement("div"));

Откройте пример в отдельном окне и посмотрите исходный код.

wrapAll(html)

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

В этом примере оборачиваем новый элемент div вокруг всех параграфов. В качестве аргумента выступает HTML-код.

$("p").wrapAll("<div></div>");

Откройте пример в отдельном окне и посмотрите исходный код.

wrapAll(elem)

возвращает: jQuery
Оборачивает все элементы набора в единственный элемент-обертку.

В этом примере оборачиваем новый элемент div вокруг всех параграфов. В качестве аргумента выступает вновь созданный элемент DOM.

$("p").wrapAll(document.createElement("div"));

Откройте пример в отдельном окне и посмотрите исходный код.

wrapInner(html)

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

В этом примере мы выбираем все параграфы и оборачиваем в тэг b их внутреннее содержимое. В качестве аргумента выступает HTML-код.

$("p").wrapInner("<b></b>");

Откройте пример в отдельном окне и посмотрите исходный код.

wrapInner(elem)

возвращает: jQuery
Обертывает внутреннее содержимое каждого элемента набора (включая текстовые узлы) в элемент DOM.

В этом примере мы выбираем все параграфы и оборачиваем в тэг b их внутреннее содержимое. В качестве аргумента выступает вновь созданный элемент DOM.

$("p").wrapInner(document.createElement("b"));

Откройте пример в отдельном окне и посмотрите исходный код.

Замещение:

replaceWith(content)

возвращает: jQuery
Замещает все элементы набора HTML или DOM элементами.

В этом примере по клику на кнопке она замещается элементом div с таким же текстом, какой был на кнопке.

$("button").click(function () {
  $(this).replaceWith("<div>" + $(this).text() + "</div>");
});

Откройте пример в отдельном окне и посмотрите исходный код.

replaceAll(selector)

возвращает: jQuery
Замещает все элемента, определенные в селекторе, указанным(и) элементами. Эта функция дополняет replaceWith(), которая решает ту же задачу, только наоборот.

В этом примере мы замещаем все параграфы текстом, заключенным в тэги b.

$("<b>Параграф.</b>").replaceAll("p");

Откройте пример в отдельном окне и посмотрите исходный код.

Удаление:

empty()

возвращает: jQuery
Удаляет все узлы-потомки (включая текстовые узлы) из набора элементов. Начиная с версии 1.2.2 также удаляет все обработчики событий и внутренние кэшированные данные.

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

$("button").click(function () {
  $("p").empty();
});

Откройте пример в отдельном окне и посмотрите исходный код.

remove(expr)

возвращает: jQuery
Удаляет все выбранные элементы из DOM. Однако при этом они не будут удалены из объекта jQuery, что позволяет использовать их в будущем. Начиная с версии 1.2.2 также удаляет все обработчики событий и внутренние кэшированные данные. Таким образом

$("#foo").remove().appendTo("#bar");

должен быть записан как

$("#foo").appendTo("#bar");

чтобы избежать потери обработчика событий. Опционально может быть использовано фильтрующее выражение expr.

В этом примере по клику на кнопке мы удаляем все параграфы из DOM.

$("button").click(function () {
  $("p").remove();
});

Откройте пример в отдельном окне и посмотрите исходный код.

Клонирование:

clone()

возвращает: jQuery
Клонирует выбранные элементы DOM и выбирает клонированные. Наверное немного непонятно, но после рассмотрения примера будет намного яснее. Это полезно при перемещении копий элементов на другую позицию в объектной модели документа (DOM).

В этом примере мы клонируем все элементы b (и выбираем клонированные) и вставляем их перед параграфами.

$("b").clone().prependTo("p");

Откройте пример в отдельном окне и посмотрите исходный код.

clone(true)

возвращает: jQuery
Клонирует выбранные элементы DOM, и все их обработчики событий и выбирает клонированные. Это полезно при перемещении копий элементов и их обработчиков событий на другую позицию в объектной модели документа (DOM).

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

$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});

Откройте пример в отдельном окне и посмотрите исходный код.

Ну вот и все… На сегодня. Потому что интересного в библиотеке jQuery еще очень и очень много.

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru