Question

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

Answer 1

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的值。

Answer 2

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.只能使用中横线 ‘ - ’ ！！