jquery读取html5的data-属性

前端代码的工作无非就是接收后端发来的数据，展示到前端页面；又或者，给无数的按钮，图片，段落等绑定各种事件。那么我们在绑定事件是需要拿取HTML页面的元素，以及在拿取的元素给定各式各样的自定义属性。当需要布置的属性多的自己都忘了什么属性是干什么用的时候，整个人都感觉要爆发了。下面说一个规范的定义自定义属性的方式：利用data-*的方式自定义属性，再利用jQuery的.data()方法拿取该属性的一些个用法及注意事项。

　　主要的方法如下：

1 2 3 4

.data( key, value ) .data( obj ) .data( key ) .data()

　　从jQuery 1.4.3起， HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。

　　例如HTML：

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

　　

　　下面的 jQuery代码都是返回 true 的：

1 2 3 4

$ ( "div" ) . data ( "role" ) === "page" ; $ ( "div" ) . data ( "last-value" ) === 43 ; $ ( "div" ) . data ( "hidden" ) === true ; $ ( "div" ) . data ( "options" ) . name === "John" ;

　　

　　和html5的api不同的是，jQuery会尝试将字符串转换为一个JavaScript值（包括布尔值（booleans），数字（numbers），对象（objects），数组（arrays）和空（null））。如果这样做不会改变数值的表示，那么该值将转换为一个数字（number）。例如，“1E02”和“100.000”是等同于数字（数字值100），但将转换它们会改变他们的表示，所以他们被保留为字符串。字符串值“100”被转换为数字100。

　　如果数据(data)属性是一个对象（以“{”开始）或数组（以'[‘开始），可以用jQuery.parseJSON 将其解析成字符串；它必须遵循 有效的JSON的语法 ，包括带双引号的属性名称。如果该值不能解析为一个JavaScript值，它将被保留为字符串。

　　如果想将取出的属性值直接当作字符串的话，请使用 attr() 方法。
　　data-属性是在第一次使用这个数据属性后不再存取或改变（所有的数据值都在jQuery内部存储）。
　　调用 .data() 时如果不带参数，将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中，因为一旦这个新对象被提取出来，之后对元素进行的 .data(obj) 操作，将不会再影响这个对象。另外，直接操作这个对象会比每次调用 .data() 来设置或获取值要快一些。