HTML⾃定义标签与标签⾃定义属性
⼤部分浏览器⽀持⾃定义HTML标签和为标准标签⾃定义属性，⽽且很多浏览器对这两种⾃定义⾏为的⽀持都很直接了当。
⾃定义HTML标签
在firefox、chrome这种现代浏览器⾥，⾃定义标签很简单，就像标准的标签那样写就可以了，⽽且CSS和JavaScript存取⾃定义标签和标准标签并⽆⼆致。
1 2 3 4 5 6 7 8 9<foo id="idFoo"data-bar="bar">foo tag!</foo>
<script>
(function(){
console.log($("foo").text()); //foo tag!
console.log($("foo").data("bar")); //bar
console.ElementById("idFoo").innerHTML); //foo tag!
console.ElementById("idFoo").getAttribute("data-bar")); //bar    })();
</script>
html代码属性大全firefox 21,chrome 27,IE 10表现都⼗分正常。IE9没有测试，据说。
不过据说在IE8及之前，⾃定义标签没那么简单，可以通过添加命名空间或者是ateElement(“⾃定义标签名称”)来进⾏⾃定义HTML标签，不过如果你想在⾃定义的标签上使⽤CSS选择器，则必须使⽤ateElement(“⾃定义标签名称”)，不管有没有定义过XML命名空间。参见。
还有⼈报告⼀个IE8⾃定义标签的问题，”“。
新的项⽬已经决定只⽀持Firefox,Chrome,IE9+版本，IE6,7,8之类的随它去吧。
标签⾃定义属性
⾃定义标签属性经常会⽤到，但是⼀直是没有规范来约束如何⾃定义标签属性，导致⼀些混乱和移植性问题。现在HTML5增加了⼀个的特性。
很简单，只要⾃定义属性以data-开头，后⾯⾄少跟随⼀个字符即可，但是不能包含字符U+0041到U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z)。每个元素可包含多个⾃定义属性。
这些data-属性在页⾯上是不显⽰的，不会影响页⾯布局和风格，但它却是可读可写的。
jQuery已经⽀持通过data⽅法来读取⾃定义的data-属性，⽽且⽀持json格式的属性值，很⽅便。
1
2 3 4 5 6 7 8 9 10 11<foo id="idFoo"data-bar="bar"data-obj='{"key1":"value1"}'>foo tag!</foo> <script>
(function(){
console.log($("foo").text()); //foo tag!
console.log($("foo").data("bar")); //bar
console.log($("foo").data("obj").key1); //value1
console.ElementById("idFoo").innerHTML); //foo tag!
console.ElementById("idFoo").innerText); //foo tag!注:firefox 21不⽀持        console.ElementById("idFoo").getAttribute("data-bar")); //bar
})();
</script>
上⾯的代码中，在⾃定义属性中使⽤json数据需要注意，⼀定要在外层使⽤单引号’，内层使⽤双引号”，如果反过来,firefox和chrome都会报undefined。
⾃定义标签的innerText属性，firefox 21不⽀持，输出”undefined”,chrome 27和IE 10输出正常。
也可以通过data(key,value)⽅式为⾃定义data属性赋值。
⾃定义data属性代码在friefox 21,chrome 27,IE 10测试通过。
UPDATE(05/21/2014):
The data- attributes are pulled in the first time the data property is accessed and then are no longer ac
cessed or mutated (all data values are then stored internally in jQuery).
data-特性(attributes)只在第⼀次读取时获取其值，并且将其缓存到jQuery内部，之后不再读取或改变data-特性。也就是说第⼀次读取之后，如果通过.attr()⽅法修改了特性的值，然后再通过data⽅法读取时仍然是原来的值。
References:
[1]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。