分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html5学习笔记（-），html5新特性介绍教程，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_489_0@

一、html5语义化

二、HTML5新特性

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

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

2、新的选择器

@H_675_18@ querySELEctor 获取单个元素如：

 
 

var obj=document.querySELEctor('.Box');

  
   obj1'#Box');

  
   obj2'[name="username"]);

querySELEctorAll 获取多个元素集合如：

querySELEctorAll);

getElementsByClassName 获取class的元素集合

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

classList

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

如：

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

4、data自定义数据

-dataset :是data-的集合

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

 div id"Box" data-name"zhangsan"usersex"nan">

  
   consolelogobjdataset)

  
  consoleuserSex)

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

5、JSON的新方法

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

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

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

会自动的把双引号加上

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

深度克隆新对象如：

//以往的方法

  
   a={"name":"zhangsan"};

  
   ba;

  
  b"lisi";

  
  alert);//lisi

  
   
  
  //html5 -json新方法
  
  };

  
   strJSONStringify//转换成字符串

  
  parsestr//转换成对象

  
  ;

  
  //zhangsan

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

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

6、延迟加载JS

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

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

Html5的defer和async

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

script src"a.js" deferscript>

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

如：labjs.com/documentation.PHP

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

  
  
>

   
    $LSB
   
   'a.js')

   
   'b.js')

   
   'c.js'wait()

   
   'd.js'();

   
   </>

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

7、历史管理

onhashchange

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

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

ul "nav"li datahash"index">首页</li>

  
  "news">新闻</>

  
  "sports">体育</>

  
  </ul>

  
  <div class="cont">
  
  
 <div data-content="index">首页内容</>

  
  div datacontent>新闻内容</>

  
  >体育内容</>

  
  /div>

  
  <script>
  
  //知识点 querySELEctor querySELEctorAll选择器

  
  //subString截取字符串
  
  //onhashchange html5的监听事件
  
  windowonload=function(){

  
    oLi'li');

  
   oCont'.cont''div');

  
  for( i  0;length i++){

  
  [i].onclick(){

  
   windowLOCATIOnthis;

  
  }

  
  function changeCont(){//根据hash改变内容

  
   hashsubString(1);

  
  for=oCont++){

  
  if==){

  
  styledisplay"block";

  
  }else"none";

  
  } 

  
  }

  
  ();

  
  onhashchange(){

  
  ();

  
  }

  
  }

history ：

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

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

案例：

window.onload=function(){
  
   var oLi=document.querySELEctorAll('li');
  
   var oCont=document.querySELEctor('.cont').querySELEctorAll('div');
  
   var iNow=0;
  
   for (var i = 0; i < oLi.length; i++) {
  
   oLI[i].onclick=function(){
  
   var hash=this.dataset.hash;
  
   history.pushState(hash,'',iNow++);//第二个参数是标题很多浏览器没实现便可不写，加上第三个参数便可以改变网址，但是是虚假的网址刷新就没有了，所以得配合后端使用

  
  );

  
  ){++){

  
  ){

  
  ;

  
  {

  
  ;

  
   

  
  }

  
  onpopstateev){

  
  );

  
  eventstate}

  
   
  
  }
  
  >

8、拖放事件

draggable ：

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

拖拽元素事件 :

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

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

案例：

#Box{height:100pxwidthborder1px solid #999;}

  
  /style>

  
  <div id="Box" draggable="true"></>

  
  (){

  
   oDrag  oDragondragstart(){

  
  "拖拽前");

  
  ondrag(){

  
  "拖拽进行中"}

  
  ondragend"结束");

  
  }

  
  >

目标元素事件 :

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

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

案例：

,#@H_165_28@mubiao"mubiao">

  
  (){

  
   index oMubiao '#mubiao' oMubiaoondragenter(){

  
  BACkground"#000"ondragleave(){

  
  "#999"ondragover evpreventDefault();

  
  index++);

  
  }

  
  ondrop"鼠标放开了">

事件的执行顺序：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的案例

img id"img" src"http://www.baidu.com/img/bd_logo1.png" alt"" oImg'#img'dataTransfersetData'name':rgb(102,'demo'effectAllowed"link"setDragImage:rgb(102,50//此处this可以是其他对象，也可以试图片对象比如换

  
  //ev.dataTransfer.setDragImage(oImg,50,50);

  
  // 扩展拖拽排序，百度音乐播放器，拖拽排列歌曲列表

  
  (){

  
  }

  
  ;

  
  ){

  
  ++);

  
  ){

  
  getData));

关于：files的案例

200px<div id="mubiao"></innerHTML  '可以释放啦'){

  
  '请在此区域释放鼠标'();

  
  files[type)

  
  >

9、FileReader(读取文件信息)

readAsDataURL

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

onload

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

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

img src"" id);

  
  ){

  
   
  
  ){

  
  ();

  
   fs//获取文件对象

  
  dirfs]);

  
   frnew FileReader();//实例化读取文件信息对象

  
  readAsDataURL]);//将文件读取为dataUrl格式

  
  (){//读取文件成功后事件

  
  //alert(this.result);

  
  srcresult//假如上传的是图片可以复制给一个图片对象

  
   
  
   
  
  >

10、可做练习：

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

一些可能感兴趣的资源：

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

http://www.caniuse.com