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>
  7. <div data-content="news">新闻内容div>
  8. <div data-content="sports">体育内容div>
  9. </div>

你可能感兴趣的:(html5)