详细使用看代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="无忌">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>jQuery-data使用</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
<!--<script src="http://libs.baidu.com/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>-->
</head>
<body>
<ul>
<li id="test-id" data-id="1">1</li>
<li id="test-user-name" data-user-name="张三">张三</li>
<li id="test-user-info" data-user-info='{"id":2,"userName":"李四"}'>{"id":2,"userName":"李四"}</li>
</ul>
</body>
<script>
$(function(){
/**
1.jQuery 版本 >= 1.4.3
2.后续的版本 才慢慢支持 驼峰命名取值
**/
var id = $('#test-id').data('id');
console.log('id ==> ' + id);
var userName = $('#test-user-name').data('user-name'); // 通用的取值写法
console.log('userName ==> ' + userName);
var userNameHump = $('#test-user-name').data('userName'); // 驼峰命名取值
console.log('userNameHump ==> ' + userNameHump);
var userInfo = $('#test-user-info').data('user-info'); //json对象取值
var id2 = userInfo.id;
var userName2 = userInfo.userName;
console.log('id2 ==> ' + id2 + ' userName2 == > ' + userName2);
});
</script>
</html>