html5学习笔记（-），html5新特性介绍教程

一、html5语义化

二、HTML5新特性

 1、HTML5新特性的浏览器支持情况

 http://www.caniuse.com/#index

 2、新的选择器

 querySelector 获取单个元素 如： 

1. var obj=document.querySelector('.box');
2. var obj1=document.querySelector('#box');
3. var obj2=document.querySelector('[name="username"]);

 querySelectorAll 获取多个元素集合 如：

1. var obj=document.querySelectorAll('.box');

 getElementsByClassName 获取class的元素集合

3、获取class列表属性 : 获取对象的className的集合

classList   

• length :  class的长度
• add()  :  添加class方法
• remove()  :  删除class方法
• toggle() :  切换class方法 

 如：

1. <div class="a b"></div> alert(document.querySelector('#div').classList) //输出a b

 4、data自定义数据

 -dataset :是data-的集合

 data-name :  dataset.name
 data-name-first  :  dataset.nameFirst 
如：                 

1. <div id="box" data-name="zhangsan" data-user-sex="nan"></div>
2. var obj=document.querySelector('#box');
3. console.log(obj.dataset.name)
4. console.log(obj.dataset.userSex)

 -Data数据在jquery mobile中有着重要作用

5、JSON的新方法

• -parse() : 把字符串转成json, 类似eval()方法

字符串中的属性要严格的加上引号

• -stringify() : 把json转化成字符串

           会自动的把双引号加上

•  -新方法与eval的区别：eval都能转换，是JSON.parse()只能转换json
•  -新方法的应用

          深度克隆新对象 如：                

1. //以往的方法
2. var a={"name":"zhangsan"};
3. var b=a;
4. b.name="lisi";
5. alert(a.name); //lisi
6.  
7. //html5 -json新方法
8. var a={"name":"zhangsan"};
9. var str=JSON.stringify(a); //转换成字符串
10. var b=JSON.parse(str); //转换成对象
11. b.name="lisi";
12. alert(a.name); //zhangsan

• -如何其他浏览器做到兼容

                http://www.json.org/去下载json2.js

 6、延迟加载JS 

•  JS的加载会影响后面的内容加载（js是单线程）

 很多浏览器都采用了并行加载JS，但还是会影响其他内容

•  Html5的defer和async

           defer : 延迟加载，会按顺序执行，在onload执行前被触发（或者简单理解为是在页面加载完时执行,会按顺序）
           async : 异步加载，加载完就触发，有顺序问题（并行加载，而且不会按照顺序加载）
           如： 

1. <script src="a.js" defer></script>

•  Labjs库:(第三方插件：最大化提高性能，即能异步，也能延迟)

如：labjs.com/documentation.php

labjs中wait()等待前面的加载完才执行

1. <script>
2. $LSB
3. .script('a.js')
4. .script('b.js')
5. .script('c.js').wait()
6. .script('d.js').wait();
7. </script>                  

 seaJs,requireJs框架集成了延迟和异步加载

7、历史管理

onhashchange  

        ：改变hash值来管理    如：改变hash方法   window.location.hash=”cont”;

         监听hash根据hash改变现实内容： html5事件  onhashchange 案例：                  

1. <ul class="nav">
2. <li data-hash="index">首页</li>
3. <li data-hash="news">新闻</li>
4. <li data-hash="sports">体育</li>
5. </ul>
6. <div class="cont">
7. <div data-content="index">首页内容</div>
8. <div data-content="news">新闻内容</div>
9. <div data-content="sports">体育内容</div>
10. </div>
11. <script>
12. //知识点 querySelector querySelectorAll选择器
13. //substring截取字符串
14. //onhashchange html5的监听事件
15. window.onload=function(){
16. var oLi=document.querySelectorAll('li');
17. var oCont=document.querySelector('.cont').querySelectorAll('div');
18. for (var i = 0; i < oLi.length; i++) {
19. oLi[i].onclick=function(){
20. window.location.hash=this.dataset.hash;
21. }
22. };
23. function changeCont(){//根据hash改变内容
24. var hash=window.location.hash.substring(1);
25. for(var i=0;i<oCont.length;i++){
26. if(hash==oCont[i].dataset.content){
27. oCont[i].style.display="block";
28. }else{
29. oCont[i].style.display="none";
30. }
31. }
32. }
33. changeCont();
34. window.onhashchange=function(){
35. changeCont();
36. }
37. }

 history  ：

• 服务器下运行
• pushState :  三个参数 ：数据  标题(都没实现)  地址(可选)
• popstate事件 :  读取数据   event.state

注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面

          案例：
                 

1. <ul class="nav">
2. <li data-hash="index">首页</li>
3. <li data-hash="news">新闻</li>
4. <li data-hash="sports">体育</li>
5. </ul>
6. <div class="cont">
7. <div data-content="index">首页内容</div>
8. <div data-content="news">新闻内容</div>
9. <div data-content="sports">体育内容</div>
10. </div>
11. <script>
12. window.onload=function(){
13. var oLi=document.querySelectorAll('li');
14. var oCont=document.querySelector('.cont').querySelectorAll('div');
15. var iNow=0;
16. for (var i = 0; i < oLi.length; i++) {
17. oLi[i].onclick=function(){
18. var hash=this.dataset.hash;
19. history.pushState(hash,'',iNow++);//第二个参数是标题很多浏览器没实现便可不写，加上第三个参数便可以改变网址，但是是虚假的网址刷新就没有了，所以得配合后端使用
20. changeCont(hash);
21. }
22. };
23. function changeCont(hash){//根据hash改变内容
24. for(var i=0;i<oCont.length;i++){
25. if(hash==oCont[i].dataset.content){
26. oCont[i].style.display="block";
27. }else{
28. oCont[i].style.display="none";
29. }
30. }
31. }
32. window.onpopstate=function(ev){
33. console.log(1);
34. changeCont(event.state);
35. }
37. }
38. </script>

8、拖放事件 

draggable ：

                设置为true，元素就可以拖拽了 (如单独设置draggable为true，前台拖拽的时候只是有拖拽的拖影，而不是整个元素都能拖动)

拖拽元素事件 :  

事件对象为被拖拽元素(在给元素绑定拖拽事件时，必须得给元素设置draggable=”true”属性)

• dragstart ,  拖拽前触发 
• drag ,拖拽前、拖拽结束之间，连续触发
• dragend , 拖拽结束触发

案例：           

1. <style>
2. #box{height:100px;width:100px;border:1px solid #999;}
3. </style>
4. <div id="box" draggable="true"></div>
5. <script>
6. window.onload=function(){
7. var oDrag =document.querySelector('#box');
8. oDrag.ondragstart=function(){
9. console.log("拖拽前");
10. }
11. oDrag.ondrag=function(){
12. console.log("拖拽进行中");
13. }
14. oDrag.ondragend=function(){
15. console.log("结束");
16. }
17. }
18. </script>

目标元素事件 :  

事件对象为目标元素(目标元素通常是被拖拽元素，碰撞到最终的元素，如拖拽上传，上传框就是目标元素)

• dragenter ,  进入目标元素触发，相当于mouseover (元素进入不会触发，一定是鼠标进入才触发)
• dragover  ,进入目标、离开目标之间，连续触发
• dragleave ,  离开目标元素触发，相当于mouseout
• drop  ,  在目标元素上释放鼠标触发 （需要在dragover事件中设置阻止默认事件，不然拖动的时候鼠标移至都是禁止的状态，就无法释放，也就不能触发drop事件）

案例：

1. <style>
2. #box,#mubiao{height:100px;width:100px;border:1px solid #999;}
3. </style>
4. <div id="box" draggable="true"></div>
5. <div id="mubiao"></div>
6. <script>
7. window.onload=function(){
8. var index=0;
9. var oMubiao =document.querySelector('#mubiao');
10. oMubiao.ondragenter=function(){
11. this.style.background="#000";
12. }
13. oMubiao.ondragleave=function(){
14. this.style.background="#999";
15. }
16. oMubiao.ondragover=function(ev){
17. ev.preventDefault();
18. console.log(index++);
19. }
20. oMubiao.ondrop=function(){
21. alert("鼠标放开了");
22. }
23. }
24. </script>

事件的执行顺序 ：drop不触发的时候
                dragstart  >  drag >  dragenter >  dragover >  dragleave > dragend 
事件的执行顺序 ：drop触发的时候(dragover的时候阻止默认事件)
                dragstart  >  drag >  dragenter >  dragover >  drop > dragend
不能释放的光标和能释放的光标不一样,需要触发drop释放事件，在上例中

解决火狐下的问题

（火狐不设置的话只支持dragstart事件其他都不支持）

          必须设置dataTransfer对象才可以拖拽除图片外的其他标签
          案例：如在dragstart的event对象中设置dataTransfer.setData 设置一个参数
                
dataTransfer对象（属于event事件对象）

• setData() : 设置数据 key和value(必须是字符串)
• getData() : 获取数据，根据key值，获取对应的value
• effectAllowed 

          effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

• etDragImage  (设置鼠标的位置)

           三个参数：指定的元素，坐标X，坐标Y

• files 

          获取外部拖拽的文件，返回一个filesList列表
          filesList下有个type属性，返回文件的类型

关于：setDate，getDate，effectAllowed，setDragImage的案例 

1. <style>
2. #box,#mubiao{height:100px;width:100px;border:1px solid #999;}
3. </style>
4. <div id="box" draggable="true"></div>
5. <div id="mubiao"></div>
6. <img id="img" src="http://www.baidu.com/img/bd_logo1.png" alt="">
7. <script>
8. window.onload=function(){
9. var index=0;
10. var oDrag =document.querySelector('#box');
11. var oMubiao =document.querySelector('#mubiao');
12. oDrag.ondragstart=function(ev){
13. var oImg=document.querySelector('#img');
14. console.log("拖拽前");
15. ev.dataTransfer.setData('name','demo');
16. ev.dataTransfer.effectAllowed="link";
17. ev.dataTransfer.setDragImage(this,50,50);
18. //此处this可以是其他对象，也可以试图片对象比如换
19. //ev.dataTransfer.setDragImage(oImg,50,50);
20. // 扩展拖拽排序，百度音乐播放器，拖拽排列歌曲列表
21. }
22. oDrag.ondrag=function(){
23. console.log("拖拽进行中");
24. }
25. oDrag.ondragend=function(){
26. console.log("结束");
27. }
28. oMubiao.ondragenter=function(){
29. this.style.background="#000";
30. }
31. oMubiao.ondragleave=function(){
32. this.style.background="#999";
33. }
34. oMubiao.ondragover=function(ev){
35. ev.preventDefault();
36. console.log(index++);
37. }
38. oMubiao.ondrop=function(ev){
39. alert(ev.dataTransfer.getData('name'));
40. }
41. }
42. </script>              

 关于：files的案例              

1. <style>
2. #mubiao{height:200px;width:200px;border:1px solid #999;}
3. </style>
4. <div id="mubiao"></div>
5. <script>
6. window.onload=function(){
7. var oMubiao =document.querySelector('#mubiao');
8. oMubiao.ondragenter=function(){
9. this.innerHTML = '可以释放啦';
10. }
11. oMubiao.ondragleave=function(ev){
12. this.innerHTML = '请在此区域释放鼠标';
13. }
14. oMubiao.ondragover=function(ev){
15. ev.preventDefault();
17. }
18. oMubiao.ondrop=function(ev){
19. ev.preventDefault();
20. console.log(ev.dataTransfer.files[0].type)
21. }
22. }
23. </script>

9、FileReader(读取文件信息)

readAsDataURL

 参数为要读取的文件对象，将文件读取为DataUrl 

onload

当读取文件成功完成的时候触发此事件
this. result , 来获取读取的文件数据，如果是图片，将返回base64格式的图片数据

实例
                拖拽删除列表
                拖拽购物车
                上传图片预览功能
 简单案例：
            

1. <style>
2. #mubiao{height:200px;width:200px;border:1px solid #999;}
3. </style>
4. <div id="mubiao"></div>
5. <img src="" id="img" alt="">
6. <script>
7. window.onload=function(){
8. var oImg=document.querySelector('#img');
9. var oMubiao =document.querySelector('#mubiao');
10. oMubiao.ondragenter=function(){
11. this.innerHTML = '可以释放啦';
12. }
13. oMubiao.ondragleave=function(ev){
14. this.innerHTML = '请在此区域释放鼠标';
15. }
16. oMubiao.ondragover=function(ev){
17. ev.preventDefault();
19. }
20. oMubiao.ondrop=function(ev){
21. ev.preventDefault();
22. var fs=ev.dataTransfer.files; //获取文件对象
23. console.dir(fs[0]);
24. var fr=new FileReader(); //实例化读取文件信息对象
25. fr.readAsDataURL(fs[0]); //将文件读取为dataUrl格式
26. fr.onload=function(){ //读取文件成功后事件
27. //alert(this.result);
28. oImg.src=this.result; //假如上传的是图片可以复制给一个图片对象
29. }
30.  
32. }
33. }
34. </script>

10、可做练习：

• 理解新的选择器
• 获取class列表属性
• Json的新方法
• data自定义数据
• 延迟加载JS
• 历史管理
• 拖放事件

一些可能感兴趣的资源：

http://ued.baidu.com/?p=894

http://www.caniuse.com