• Главная
>
• JQuery

Атрибуты data-* - это особые типы атрибутов, которые можно использовать для хранения дополнительной информации в HTML-элементе.

"data-* " служит общим префиксом для этих атрибутов, где "*" может быть любым именем, которое вы выберете.

Имя атрибуиа data должно содержать только строчные буквы и должно начинаться с буквы.

data атрибуты используются для хранения пользовательских данных на стороне клиента без использования дополнительных cookies. В данном примере data-author и data-topic - это data-* атрибуты.

  article

Какие данные можно хранить в атрибутах data-*?

Атрибуты data-* могут хранить любую информацию, которая может быть представлена в виде строк. Это могут быть числа, строки, даты, JSON-объекты. Помимо этого, данные полностью контролируются разработчиком и их можно использовать в приложениях JavaScript и jQuery.

Можно ли хранить массивы в атрибутах data-*?

Массивы и даже объекты можно хранить в атрибутах data-* посредством их сериализации в формате JSON.

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

Вот пример, как вы можете хранить массив в элементе data-*:

Hello, World!

Теперь, когда нам нужно получить наш массив обратно в Javascript, мы можем сделать следующее:

let dataValue = document.querySelector('#myDiv').dataset.array;
let array = JSON.parse(dataValue);
console.log(array); // ["item1", "item2", "item3"]

Потребность в сериализации и десериализации делает использование сложных структур данных в атрибутах data-* несколько менее удобным, чем хранение базовых типов данных. Но это всё равно остается повсеместно применяемым подходом во многих ситуациях.

Как изменить, удалить, установить data в jQuery

Метод .data() jQuery позволяет нам не только извлекать data-* значения, но также устанавливать их.

//Установить data-* значение
$("#myElement").data("my-key", "my value");

//Получить data-* значение
$("#myElement").data("my-key");

//Удалить data-* атрибут
$("#myElement").removeData("my-key");

Функции .attr() и .removeAttr() 

В jQuery attr() и .removeAttr()  используются для работы с атрибутами элементов, включая data-атрибуты.

Для получения значения атрибута:

var value = $('#myelement').attr('data-key');

В этом коде мы получаем значение атрибута 'data-key' у элемента с id 'myelement'.

Что бы установить значение атрибута:

$('#myelement').attr('data-key','value');

Этот код устанавливает значение атрибута 'data-key' в 'value' у элемента с id 'myelement'.

Метод .removeAttr() используется для удаления атрибута из элемента.

$('#myelement').removeAttr('data-key');

Этот код удаляет атрибут 'data-key' у элемента с id 'myelement'.

Какие отличия .attr()/removeAttr() от .data()/removeData()

Одним из важных отличий работы методов .attr()/removeAttr() от .data()/removeData() в jQuery является то, что .attr() и .removeAttr() меняют фактический DOM и внесенные изменения видны при просмотре HTML-кода, в то время как изменения, выполненные через .data()/removeData(), видны только через JavaScript и не отражаются в HTML.

Как изменить, удалить, установить data в JavaScript

В JavaScript вы можете использовать свойство dataset для доступа к data-* атрибутам.

//Установка значения
document.querySelector('#myElement').dataset.myKey = "my value";

//Получение значения
document.querySelector('#myElement').dataset.myKey;

//Удаление значения
delete document.querySelector('#myElement').dataset.myKey;

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