Что делает функция jQuery data()

Я не нашел, что такое использование данных функции jquery data(). Кто-нибудь может дать мне пример того, как его можно использовать?

Ответ 1

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

$(document).ready(function(){
   $("a").each(function(index, el){
      if(index % 2 == 0) 
         $(this).data('coolColor', 'Orange'); // Set the data
      else 
         $(this).data('coolColor', 'Purple'); // Set the data
   }).click(function(e){
      alert($(this).data('coolColor')); // Retrieve the data
      e.preventDefault();
   });
});

Это будет выбирать каждый тэг a и установить Orange, если его нечетный или Purple, если он четный. Это не самый оптимальный способ написать этот код, если это то, что вы действительно хотели сделать, но иллюстрирует, как использовать функцию .data().

Вы также можете использовать его для хранения объектов:

$("#header").data('headerSettings',{
   color: "red",
   cost:  "$25.00",
   time:  1000
});

Теперь вы можете получить доступ к этим данным в другом месте на странице:

$("#header").data('headerSettings').color;

Ответ 2

Я думаю, что этот вопрос требует немного больше внимания. jQuery data API действительно эффективен для различных случаев использования.

Функция данных jQuery позволяет хранить и извлекать любые связанные данные с любым объектом jQuery.

В первую очередь, его также можно использовать для чтения атрибутов data-, установленных на любом node в html.

Пример 1

HTML: <div id="myNode" data-foo="bar"></div>.

Код jQuery: $("#myNode").data("foo") //bar

Пример 2

Аналогично, я могу сохранить значение w.r.t в любом node.

Код jQuery:

$("#myNode").data("foo","baz") $("#myNode").data("foo") //baz

Важно отметить, что когда вы устанавливаете данные в заметке с использованием API данных, html не обновляется в DOM. Если вы хотите обновить HTML, вы можете придерживаться метода attr("data-foo","baz").

Пока можно считывать строки, хранящиеся в атрибутах данных HTML, вы также можете назначать объект при сохранении значения с использованием API данных.

Существуют различные варианты использования, при которых разработчики связывают объект с node.

например.

var obj = {
  name : "test"
}
$("#myNode").data("foo",obj);

$("#myNode").data("foo") === obj //true

Вперед, исследовать здесь API.

Ответ 3

Он позволяет связывать любые типы данных с элементом DOM. См. этот блог для некоторых примеров.

Ответ 4

документация jQuery подводит итог:

Возвращает уникальный идентификатор элемента.

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

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