jQuery Get Data-* - Javascript

有时候我们需要在HTML元素中存储非标准的数据，这时候可以使用data-*属性。但是在Javascript中如何获取这些数据呢？jQuery中提供了一个非常方便的方法：data()。

前置知识

• HTML5 data-* 属性

获取单个 data-* 属性值

当我们需要获取某个 data-* 属性的值时，可以使用如下方式：

const value = $('selector').data('name');

其中，selector是需要获取 data-* 属性值的元素的选择器，name是我们需要获取的 data-* 属性名。返回值是存储在 data-name 属性中的值。

获取所有 data-* 属性值

如果需要获取该元素上所有 data-* 属性的值，可以使用 data 函数，如下：

const allData = $('selector').data();

返回的是一个对象，包含元素上所有的 data-* 属性值，如：

{
  name1: value1,
  name2: value2,
  ...
}

code example

// 获取单个 data-* 属性值
const name = $('#example').data('name');
console.log(name); // result : 'Tom'

// 获取所有 data-* 属性值
const data = $('#example').data();
console.log(data); // result : {name: "Tom", age: 18, hometown: "Beijing"}

结论

jQuery的data()函数是一种非常方便的获取HTML元素中data-*属性的值的方法。它可以取代通常使用的$(this).attr('data-name')方法，因为data()函数返回的值是类型化的，并且可以自动检测数据类型。