Question

jQuery中使用data()方法读取HTML5自定义属性data-*实例

Answer 1

主要的方法如下：
复制代码
代码如下:
.data(
key,
value
)
.data(
obj
)
.data(
key
)
.data()
从jQuery
1.4.3起，
HTML
5
data-
属性
将自动被引用到jQuery的数据对象中。
例如HTML：
复制代码
代码如下:<div
data-role
=
"page"
data-last-value
=
"43"
data-hidden
=
"true"
data-options
=
'{"name":"John"}'
>
</div>
下面的
jQuery代码都是返回
true
的：
复制代码
代码如下:
$
(
"div"
)
.
data
(
"role"
)
===
"page"
;
$
(
"div"
)
.
data
(
"lastValue"
)
===
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()
来设置或获取值要快一些。