wenhuadream 2015-03-26
我们先来看下HTML5增加的一项新功能是自定义数据属性--data-*自定义属性
http://www.css88.com/archives/4715
<div id="user" data-uid="123456" data-uname="html5" data-date-of-birth>码头</div>
一)使用attribute方法能够存取data-*自定义属性的值:
所有的现代浏览器中都能正常工作,但它不是HTML5的自定义data-*属性被使用目的。
// 使用getAttribute获取 data- 属性 var user = document . getElementById ( 'user' ) ; var userName = plant . getAttribute ( 'data-uname' ) ; // 'html5' var userId = plant . getAttribute ( 'data-uid' ) ; // '123456' // 使用setAttribute设置 data- 属性 user . setAttribute ( 'data-site' , 'http://www.css88.com' ) ;
二)dataset属性存取data-*自定义属性的值:
通过访问一个元素的dataset属性来存取data-*自定义属性的值,dataset属性是HTML5JavaScriptAPI的一部分,用来返回一个所有选择元素data-属性的DOMStringMap对象。
兼容性:Chrome8+Firefox(Gecko)6.0+InternetExplorer11+Opera11.10+Safari6+浏览器
1)不是使用完整的属性名,要去掉data-前缀
2)属性名如果包含了连字符,连字符将被去掉,并转换为驼峰式的命名,例如:data-date-of-birth---》dateOfBirth
var el = document.querySelector('#user'); console.log(el.uid); // 'user' console.log(el.dataset);//一个DOMStringMap console.log(el.dataset.uid); // '123456' console.log(el.dataset.uname); // 'html5' console.log(el.dataset.dateOfBirth); // '' el.dataset.dateOfBirth = '2015-03-26'; // 设置data-date-of-birth的值. console.log('someDataAttr' in el.dataset);//false el.dataset.someDataAttr = 'mydata'; console.log('someDataAttr' in el.dataset);//true
接下来我们看看jQuery中的data()
作用:在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
语法:.data(key,value)
value为新的数据值,可以是任意的Javascript数据类型,除了undefined。
语法:.data(obj)
一个用于更新数据的键/值对。
<div> The values stored were <span></span> and <span></span> </div> //输出:The values stored were 16 and pizza! <script> $("div").data("test", { first: 16, last: "pizza!" }); $("span:first").text($("div").data("test").first); $("span:last").text($("div").data("test").last); </script>
分析的很详细:http://zhangyaochun.iteye.com/blog/1746676
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用。html5方法二:<videocontrols=""autoplay=""name="media&q