提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery实例属性方法html5 使用 自定义 读取
2023-06-13 09:15:24 时间

主要的方法如下：

复制代码代码如下:

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

从jQuery1.4.3起，HTML5data-属性将自动被引用到jQuery的数据对象中。
例如HTML：
复制代码代码如下:
<divdata-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()来设置或获取值要快一些。

相关文章