jquery怎样获取html页面中的data？

js获取data-*的方式：

通过dataset属性访问

//HTML代码 <div id="myDiv" data-appid="123" data-myname="lsxj"></div>

//js代码

var div = document.getElementById("myDiv")

var appId = div.dataset.appid//获取data-appid的值

var myName = div.dataset.myname//获取data-myname的值

//设置值

div.dataset.appid = 456

div.dataset.myname = "newname"

最终HTML结果 <div id="myDiv" data-appid="456" data-myname="newname"></div>

dataset属性的值是DOMStringMap的一个实例，名值对的映射。每个data-name形式的属性都有一个对应的属性，只不过该属性名没有data-前缀。

【兼容性】

需要注意的是，dataset中大小写的问题。带连字符连接的名称在使用的时候需要命名驼峰化。例如data-my-name对应的是dataset.myName的值。

某些非text元素，如a、button等用于触发时间的标签可已将要传的数据放在一个属性中，如data，这个属性必须是不影响样式的，可以使用任意非html定义的名字命名属性，然后将数据传到属性中，

<button data="123" id="but" onclick="fun()">按钮</button>

然后通过attr这个方法获取属性内容$('#but').attr('data')

其实完全可以直接写在onclick里作为参数

<button onclick="fun(123)">按钮</button>

如果使用id触发方法，还可以直接用this选择

<button data="123" id="but" >按钮</button>

$('#but').on('click', function(){

var val = $(this).attr('data')

})

To get the contents of the attribute data-id (like in <a data-id="123">link</a>) you have to use

$(this).attr("data-id") // will return the string "123"

or .data() (if you use newer jQuery >= 1.4.3)

$(this).data("id") // will return the number 123

注：

1.两种方法 ①使用attr方法获得data-*的值 $(this).attr('data-id')② $(this).data("id")

2. data-* 都可以使用 $(this).data(' * ')获取，比如 data-cat ，使用$(this).data(cat)获取。

3.只能使用中横线 ‘ - ’ ！！

---