JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид
Шрифт:

$("div").data("x", 1); // Записать некоторые данные

S("div.nodata”).removeData("x"); // Удалить некоторые данные

var х = $('flmydiv').data("x”); // Получить некоторые данные

Кроме того, библиотека jQuery определяет вспомогательные функции, действующие аналогично методам

data
и
removeData.
Таким образом, связать данные с отдельным элементом е можно с помощью метода или функции
data:

$(е).data(...) // Метод

$.data(e, ...) // Функция

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

<applet>, <object>
и
<embed>,
поэтому библиотека jQuery просто не дает возможности связать данные с элементами этих типов.

19.3. Изменение структуры документа

В разделе 19.2.5 мы познакомились с методами

html
и
text,
позволяющими изменять содержимое элемента. В этом разделе будут рассматриваться методы, позволяющие производить более сложные изменения в документе. В броузере HTML-документы представлены в виде дерева узлов, а не в виде линейной последовательности символов, поэтому вставку, удаление и замену фрагмента документа выполнить не так просто, как фрагмента строки или массива. В следующих подразделах описываются различные методы объекта
jQuery
, предназначенные для внесения изменений в документ.

19.3.1. Вставка и замена элементов

Начнем с самых основных методов вставки и замены. Все методы, демонстрирующиеся ниже, принимают аргумент, определяющий содержимое, которое должно быть вставлено в документ. Это может быть строка с простым текстом или с разметкой HTML, определяющая содержимое, объект

jQuery
, элемент
Element
или текстовый узел
Node
. Вставка может быть выполнена внутрь, перед, после или вместо (в зависимости от метода) каждого выбранного элемента. Если в качестве вставляемого содержимого используется элемент, уже присутствующий в документе, он перемещается из текущего местоположения. Если выполняется вставка сразу в несколько мест, элемент будет скопирован необходимое число раз. Все эти методы возвращают объект
jQuery
, относительно которого они вызываются. Обратите, однако, внимание, что после вызова метода
replaceWith
элементы, находящиеся в объекте
jQuery
, исключаются из документа:

$("#log").appendC<br/>"+message); // Добавить содержимое в конец элем. #1од

$("h1").ргерепсК // Добавить символ параграфа в начало каждого элемента <h1>

$( "hi”).before("<hr/>'); // Вставить линию перед каждым элем. <h1>

$( "hi").after("<hr/>"); // И после

$( "hr").replaceWith("<br/>”); // Заменить элементы <hr/> на <Ьг/>

$("h2").each(function { // Заменить <h2> на <h1>,

var h2 = $(this); // сохранив содержимое

h2.replaceWith("<h1>" + h2.html + "</h1>");

});

// Методы after и before могут также применяться к текстовым узлам

// Ниже демонстрируется другой способ добавления символа параграфа во все <h1>

$("h1").map(function { return this.firstChild; }).before("§");

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

this
в ней будет указывать на текущий элемент, а в первом аргументе ей будет передаваться индекс элемента в объекте
jQuery
. Методы
append, prepend
и
replaceWith
будут передавать функции во втором аргументе текущее содержимое элемента в виде строки с разметкой HTML. А методы
befоге
и
after
будут вызывать функцию без второго аргумента.

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

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