Practical Training JQuery data-属性的作用

Data-属性的作用：

data-属性用于储存私有的自定义数据，data-属性可以让我们在所有html元素上增加自定义data属性，存储的data属性能被JavaScript调用。
data-属性不应该包含任何大写字母，并且在data-后必须最少拥有一个字符，属性值可以是任意字符串

取值方法:
// getAttribute
var id = document.getElementById('id');
var data = id.getAttribute(‘data-xxx’);

// dataset
var id = document.getElementById('id');
id.dataset.xxx; //取值
id.dataset.xxx = 'xxx'; //赋值
id.dataset.xxx2 = 'xxx2'; //新增
delete id.dataset.xxx; //删除

// JQuery data
var data = $('#id').data('xxx'); //取值
$('#id').data('xxx','xxx1'); //赋值 新增
$('#id').removeData('xxx'); //删除

// JQuery attr
var data = $('#id').attr('data-xxx'); //取值
$('#id').attr('data-xxx','xxx1'); //赋值 新增
$('#id').removeAttr('data-xxx'); //删除

 

课堂代码：

  // attr(属性名)  === 获取属性值

            // attr(属性名,属性值) === 设置属性

            // $("span").attr("data-id","1002");

            // console.log($("span").attr("id"));

            //

            // console.log($("span").attr("data-id"));

 

HTML 可以给他加任意属性。

所有扩展属性、自定义的、（系统没有提供的）元素+在data-后面

例如：data-src 这个就是自定义属性、

 

另：

 data-*

 

 

自行理解： data-*是html的自定义属性，可以将自定义/存储的数据拿出来在js做进一步使用，而且不会覆盖html的原有属性。

定义和用法
data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的/自定义的数据能够被页面的 JavaScript 中利用，以创建更好的用户体验
（但是不能进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串

简单来说就是存储一些简单信息，然后可以通过js拿到这些信息，
像你说的data-url和data-href估计就是存储的真正的url和href，
可以通过js的element.dataset.url或JQ的data(‘url’)拿到，然后进行相应操作

参考链接：https://blog.csdn.net/weixin_45948234/article/details/111192813