data-* 是一个好东西，有时候我们可以将后台获取的值绑定在某个自定义 data 属性上，这样可以防止再次使用 ajax 去后台获取数据，非常方便。
这里记录一下 data-* 的使用方法，写一个小栗子，作备忘。
关于 data-* 属性的了解可以参考
菜鸟教程
W3school
栗子：
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>data-options测试</title> | |
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script> | |
</head> | |
<body> | |
<form action="" method="get"> | |
<input id="name" type="text" name="name" οnchange="pop();" data-age="26" data-height="" data-weight=""> | |
<br> | |
<textarea id="areaA" style="display: none;"> | |
</textarea> | |
</form> | |
<script type="text/javascript"> | |
function setHeightByJavascript() { | |
var node = document.getElementById('name'); | |
node.dataset.height = '180cm'; | |
} | |
function setWeightByJquery() { | |
$("#name").attr("data-weight","160kg"); | |
} | |
function pop() { | |
var node = $("#name"); | |
var name = node.val(); //name 是捕获的输入值 | |
var age = node.attr("data-age"); //age 事先已赋好值 | |
// 举例说明向 data-* 赋值 | |
setHeightByJavascript(); // 使用原生的 JavaScript 向 data-height 赋值 | |
setWeightByJquery(); // 使用 jquery 向 data-weight 赋值 | |
// 举例说明 js、jQuery 取 data-* 的值 | |
//var height = node.attr ("data-height"); // 使用 jQuery 取 data-height 的值 | |
var height = node.data("height"); | |
//var weight = document.getElementById ('name').dataset.weight; // 使用原生 JavaScript 取 data-weight 的值 | |
var weight = document.getElementById('name').getAttribute("data-weight"); | |
// 显示隐藏的 text area | |
var area = $("#areaA"); | |
area.show(); | |
area.val( name + "今年" + age + ";身高" + height + ";体重" + weight ); | |
} | |
</script> | |
</body> | |
</html> |
（说明：包含 jquery 和原生 js 两种操作，使用时注意区分）
程序主要是一个输入框，输入框中默认已绑定一个属性 age 为 26，剩下的 height 属性和 weight 属性初始为空，这两个属性的赋值操作是分别通过 JavaScript、jQuery 两种方式赋值，textarea 是一个隐藏区域，当输入完名字时会自动显示出 age，height，weight 的值，效果如下：
