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

Чтобы связать данные с элементами в объекте

jQuery

, нужно вызвать

data()

как метод записи, передав ему в виде двух аргументов имя и значение. Методу

data()

как методу записи можно также передать единственный объект, каждое свойство которого будет использоваться как пара имя/значение, связываемая с элементом или элементами в объекте

jQuery

. Однако обратите внимание, что, когда методу

data()

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

data()

не вызывает функцию, переданную ему. Если во втором аргументе передать методу

data()

функцию, она будет сохранена, как любое другое значение.

Конечно, метод

data()

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

jQuery

. При вызове метода

data()

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

Для удаления данных из элемента или элементов можно использовать метод

removeData().

(Вызов метода data() с именованным значением null или undefined фактически не удаляет данные.) Если методу

removeData()

передать строку, он удалит значение, связанное с этой строкой в элементе или элементах. Если вызвать метод

removeData()

без аргументов, он удалит все данные:

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

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

, исключаются из документа:

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

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

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

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

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

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

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

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

});

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

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

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