HTML5新扩张属性data,的自定义属性_jquery_脚本之家

jQuery.fn.dataset = function { // 获取数据集 if (arguments.length == 0) { var dataset = {}; jQuery.each { var attrs = this.attributes; for (var i = 0, l = attrs.length; i < l; i++) { var attr = attrs[i]; if (/^data-/i.test { dataset[decode(encode(attr.name.substring] = autobox; if (decode(encode(attr.name.substring { dataset[decode(encode(attr.name.substring] = attr.value != null ? String : null; } if (decode(encode(attr.name.substring { dataset[decode(encode(attr.name.substring] = attr.value != null ? String : null; } } } }); return dataset; } // 返回指定数据 if (arguments.length == 1 && typeof attr != 'object') { if == "data-path"){ return this.attr; } return autobox(this.attr; } // 设置数据集 var dataset = attr; if (typeof attr != 'object') { dataset = {}; dataset[attr] = String; } var tmp = {}; jQuery.each(dataset, function] = autobox; return this.attr; };

HTML5新增添属性data-*HTML5新扩张属性data,的自定义属性_jquery_脚本之家。和js/jquery之间的并行及注意事项,data-jquery

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-”
    之后必得有最少三个字符
  • 属性值可以是任性字符串

data-*属性和jQuery交互

动用jQuery中的.data(卡塔尔国函数取用data-*属性值

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

注意事项

data-**质量名格式驼峰命名改写

data-属性是在第贰次利用这些数目属性后不再存取或改换(全数的数据值都在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添加一个data-emp的属性,属性值为一个json对象

在乎:破折号要转正成驼峰命名

总结

以上所述是笔者给大家介绍的HTML5新添属性data-*和js/jquery之间的相互,希望对大家持有利于,假使我们有任何疑问请给本身留言,作者会及时恢复生机大家的。在那也特别多谢我们对帮客之家网址的支撑!

HTML5新添属性data-* 书写实例 div data-role=page data-last-value=43
data-hidden=true data-opt…

经过jQuery制作零器件,可以轻巧收获到大家data-的自定义属性,也能够给data-属性来赋值。

$.dataset //获取data-name的值

$.dataset //给data-name这个属性赋值为Tezml

发表评论

电子邮件地址不会被公开。 必填项已用*标注