html5 的 data- 属性
来源:互联网 发布:sql语句教程视频 编辑:程序博客网 时间:2024/06/05 19:54
发现代码中含有data-属性。之前是没有见过的,经过查资料,涨知识了。
<a href="#" class="dropdown-toggle" data-toggle="dropdown"></a>
刚开始我以为这仅仅是标签自定义属性,为了之后的代码使用,但继续调查看到下面的代码后,我觉得没这么简单:
$(this).data('toggle')
疑问1:如果是自定义属性,用jQuery的常用该属性的值得访问方式应该是这样:$(this).attr("data-toggle")
疑问2:跟jquery的data()方法有什么关系?
jquery的data方法是用于向元素存键值对,以及取键对应的值的。例如
$("div").data("blah", "hello"); // 将blah设置为hello
$("div").data("blah"); // hello 去除blah的值
------------------------------------------------------------------------------------------------------------------------------------------------------
经过调查对以上问题进行一一回答:
回答1:摆渡上搜索了一下,大致了解到时HTML5的东西,所以继续到w3school查看。
w3school网站(http://www.w3school.com.cn)上对Html5的属性列表中有这么一项
属性值
描述data-yourvaluevalue
创作者定义的属性。
HTML 文档的创作者可以定义他们自己的属性。
必须以 "data-" 开头。
所以明白了以下内容:
①html5才有的属性,也就意味着如果在非html5场合中使用,那就完全是一个自定义属性了。
②因为本身也是自定义属性,所以用$(this).attr("data-toggle")的方式取值是完全没问题的。
③必须以data- 开头
回答2:在html5的环境下,有两种访问data的方式,
还是以最初的例子<a id="testA" href="#" class="dropdown-toggle" data-toggle="dropdown" data-role-name="arolename"></a>作为说明,我们新添加一个data-属性(data-role-name)
①:不采用html5,采用dataset的方式。
应用了data-属性的元素含有dataset的属性,可以直接访问dataset的各项,如下:
var testA = document.getElementById("testA");
alert(testA.dataset.toggle); //dropdown
细心的话会发现访问data-属性时并没有加上前缀,如上例访问的是toggle而不是data-toggle,这就是规则1。
规则1:data-属性访问时不能带前缀;
再把第二个data-属性也alert出来 :alert(testA.dataset.roleName); //arolename
会发现data-后面明明是”role-name“怎么变成了roleName,这就是规则2。
规则2:访问data-属性时,其后面的用-分割的字符要采用驼峰的写法。
②:用jquery调用data-属性的方式。
jquery的data方法能完美的支持data-属性,但同样要使用上面两个规则,如:
$("#testA").data("toggle"); //dropdown
$("#testA").data("roleName"); // arolename
------------------------------------------------------------------------------------------------------------------------------------------------------
以上问题回答完了,因为查询了资料还学习到其他东西,所以做个额外补充:
<a id="testA" href="#" class="dropdown-toggle" data-toggle="dropdown"data-role-name="arolename"></a>
data-属性的增删改
var testA = document.getElementById("testA");
①data-属性的删除 delete testA.dataset.toggle;
②data-属性的增加 testA.dataset.newAdd = "123";
③data-属性的修改 testA.dataset.roleName= "brolename";
浏览器支持情况:
- Internet Explorer 11+
- Chrome 8+
- Firefox 6.0+
- Opera 11.10+
- Safari 6+
- html5的data-*属性
- html5 的 data- 属性
- html5自定义的 data属性
- html5的自定义data-*属性
- HTML5的自定义属性data-*
- HTML5的data-*自定义属性
- html5 data属性的使用
- HTML5属性data-*的操作
- HTML5的data-* 自定义属性
- HTML5的data-*自定义属性
- 【HTML5】'data-'属性的作用是什么?
- 自动获取 HTML5 的 data-* 属性
- 【HTML5】'data-'属性的作用是什么?
- 关于HTML5 data-*属性的几个坑
- js,jQuery获取html5的data-*属性
- HTML5元素的 data-* 属性详解
- HTML5中 data-*属性的实际用途
- HTML5 data- 属性
- linux 下mysql 报 ERROR 1045 (28000): Access denied for user '-root'@'localhost' (using password: YES)
- oracle监听程序,是什么时候,选择的listener.ora?答:是在创建监听服务的时候,而不是启动监听服务的时候
- java 中关于一元运算,二元运算,三元运算的说明
- Linux id 命令
- 欢迎使用CSDN-markdown编辑器
- html5 的 data- 属性
- 文章标题:Android常用控件ImageSwitcher的使用方法
- Nginx + Tomcat + HTTPS(仅供参考)
- Hive常用的SQL命令操作
- 【Java学习20170524】SpringMVC
- 使用badboy,jmeter性能测试时遇到的问题
- 终极方案Mac版本:fetching documentation...
- SQL查询语句摘要
- oracle分页