javascript - 我发现 像很多库如bootstrap，jqueryMobile 都是用data-*来绑定事件和一些效果的？

Question

那么实际用这些插件开发中是用$('[data-xx=xx]')这种绑定好还是原来的class，id之类性能高一点的选择符好？

Answer 1

从性能角度一定是 id 最好（IE9以上及现代浏览器支持 getelementsByClassName 的话性能也很好），毕竟用 data 来取要多做取 attribute 的一步。

但是脱离应用场景谈性能及就是耍流氓，如果你的代码是为了给别人用的，用 data 来做通用性会更好，而且未来如果你更换标签，可维护性也更好。

Answer 2

这个其实真跟性能没太多关系 data-是html5中自定义属性的方式 跟选择器用什么没太大关系 就算不写成data- 一般的组件也可以用JS方式初始化 写参数
顺便说下 其实对于近代浏览器 class / tag的性能已经很优秀了

http://www.cnblogs.com/dolphinX/p/3348458.html

Answer 3

性能应该是id选择器更高，因为js本来就有getElementById.

Answer 4

题主的问题没到点子上. data-* 是用来存放微数据的, 不是用来给选择器选择的. 通常都是已经获得了这些元素的相关引用, 再获取 data-* 里存放的数据. 就像: var value = document.getElementById('my-textbox').value;, 问用 my-textbox 这个 id 性能好还是 ele.value 这个属性性能好, 显然是不合适的.

Answer 5

我就遇到过需要拿一些元素中有特定属性的例子，上面回复的都对直接用1个id去拿肯定会比去索引元素中是否有这个属性更快

Answer 6

data-*主要用来临时保存数据，你可以方便的保存数据到页面标签里，用这种绑定也没有太大问题