HTML、JavaScript、JQuery中怎么自定义属性?

有两种方式选择，第一种是使用【data-名称】来实现自定义属性，这种方式在浏览器查看源代码时在标签上是看不到属性的；第二种就是直接使用【名称】来实现。
方式一：直接在HTML标签中使用data-名称来进行定义即可
eg:<span data-age="22">hello</span>
<span age="22">hello</span>

Tips:!!!【data-名称】这种方式的自定义属性，在使用js取值时，一定要把名称小写，不然取不到值。

方式二：使用JavaScript进行设置自定义属性

/**
* 1. 原生JavaScript操作
*/
var obj = document.getElementById("hello");
//方式1：
obj.setAttribute("age","123456");
//方式2：
obj.attributes["age"].nodeValue = "123456";

Tips:
JavaScript设置的自定义属性，用户查看源码在标签上也是看不到的

方式三：使用JQuery进行设置自定义属性

$(function () {
     /**
      * 方法一：attr()
      */
     // 设置值
     $("#hello").attr("info","你好");
     // 设置多个值
     $("#hello").attr({ name: "Tom", age: "22" });
     /**
      * 方法二：data()
      */
     $("#hello").data("hope", "年薪100k");
 })

Tips: 两种方法在标签上都是看不到属性的。