自定义属性 Data-*

jQuery操作：$(obj).data("属性名")

示例：

<div data-role="page" data-last-value="43" data-hidden="true" data-options= '{"name":"John"}' ></div>

$("div").data("role") === "page" ;         //

$("div").data("lastValue") === 43 ;        //多个连接符"-"，驼峰命名方式

$("div").data("hidden") === true ;　　　　　//取值后会自动转换类型

$("div").data("options").name === "John" ; //调用data中的JSON字符串

$("div").attr("data-hidden") === "true";   //不进行转换

 JS操作：

示例：

<div id="tag" data-leaves="2" data-plant-height="4.3m" data-hidden="true" data-options= '{"name":"John"}' ></div>

var tag = document.getElementById("tag");

//getAttribute()取值属性 
tag.getAttribute("data-leaves");
tag.getAttribute("data-plant-height")); 

//setAttribute()赋值属性 
tag.setAttribute("data-leaves","48"); 

//data-前缀属性可以在JS中通过dataset取值，更加方便 
tag.dataset.leaves;
tag.dataset.plantHeight; 

//赋值 
tag.dataset.plantHeight = "3m"; 
tag.dataset.leaves--; 

//新增data属性 
tag.dataset.age = "100"; 

//删除，设置成null，或者delete 
tag.dataset.leaves = null; 
delete tag.dataset.age;