HTML5新增特性data

日期:2020-10-11 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

HTML5新增特性data-*

撰写案例

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

1. 界定:

data-* 特性用于储存网页页面或运用程序流程的独享自定数据信息。

data-* 特性授予大家在全部 HTML 元素上嵌入自定 data 特性的工作能力。

2. 留意点:

data-* 特性包含两一部分:

  • 特性名不可该包括任何大写字母,而且在前缀 "data-" 以后务必有最少1个标识符
  • 特性值能够是随意标识符串

data-*特性和jQuery互动

应用jQuery中的.data()涵数取用data-*特性值

console.log($("div").data('lastValue'));  //輸出的值为:43
console.log($("div").data('role'));  //輸出的值为:page

留意事项

data-**特性名文件格式驼峰取名改变

data-特性是在第1次应用这个数据信息特性后已不存储或更改(全部的数据信息值都在jQuery內部储存)

演试:
 

 console.log($("div").data('lastValue'));  //輸出的值为:43
    $('div').data('lastValue',44);  //设定data-last-value=44
    $('div')[2]  //假定这是文本文档中的第3个div,大家輸出这个dom
    //輸出:<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'>

别怕,你再輸出

 console.log($("div").data('lastValue'));  //輸出的值为:44

  值只是储存在jQuery內部了

应用jQuery中.attr()涵数取用data-*特性值

console.log($('div').attr('data-role')); //輸出的值为:page
console.log($('div').attr('data-last-value')); //輸出的值为:43

应用jQuery中.attr()涵数设定data-*特性值

$('div').attr('data-emp',{'name':'zhangsan','age':23}); //给div加上1个data-emp的特性,特性值为1个json目标

留意:破折号要转换成驼峰取名

总结

以上所述是网编给大伙儿详细介绍的HTML5新增特性data-*和js/jquery之间的互动,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!