> For the complete documentation index, see [llms.txt](https://antonshevchuk.gitbook.io/jquery-for-beginners/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://antonshevchuk.gitbook.io/jquery-for-beginners/20_attributes_and_properties/data-attributes.md). # Data Attributes HTML5 gives us the ability to use custom data attributes on elements: ```markup
``` For working with data attributes, jQuery has several methods:
methoddescription
data()
get all values as key-value pairs:
{ key: value }
data(key)
get a value by key
data(key, value)
set a value
data({
  key1: value,
  key2: value
})
set multiple values
removeData(key)
remove a value by key or keys
removeData([key])
remove multiple values
{% hint style="danger" %} Here comes a tricky and important moment!\\ The `jQuery.data()` method does not manipulate HTML attributes — it works with its own internal registry, and only when data is missing there does it try to fetch information from the corresponding `data-*` attribute.\\ Don't get caught! ```html
``` ```javascript $("#my").data("foo"); // >>> bar $("#my").attr("data-foo"); // >>> bar $("#my").data("foo", "xyz"); $("#my").data("foo"); // >>> xyz $("#my").attr("data-foo"); // >>> bar !!! $("#my").attr("data-foo", "def"); $("#my").data("foo"); // >>> xyz !!! $("#my").attr("data-foo"); // >>> def ``` {% endhint %} An interactive example: {% embed url="" %}