HTML5 学习笔记二（新特性）

HTML5新特性的浏览器支持情况
http://www.caniuse.com/#index

新的选择器
querySelector
querySelectorAll
getElementsByClassName

classList: 获取class列表属性
length : class的长度
add() : 添加class方法
remove() : 删除class方法
toggle() : 切换class方法

JSON的新方法
parse() : 把字符串转成json ，字符串中的属性要严格的加上引号
stringify() : 把json转化成字符串 ，会自动的把双引号加上
在其他浏览器做到兼容：http://www.json.org/ 下载json2.js

data自定义数据
JS中的引用： dataset
data-name : dataset.name
data-name-first : dataset.nameFirst
Data数据在jquery mobile中有着重要作用

延迟加载JS
JS的加载会影响后面的内容加载
很多浏览器都采用了并行加载JS，但还是会影响其他内容
Html5的defer和async
defer : 延迟加载，会按顺序执行，在onload执行前被触发
async : 异步加载，加载完就触发，有顺序问题

历史管理
onhashchange ：改变hash值来管理
history ：
服务器下运行
pushState : 三个参数 ：数据 标题(都没实现) 地址(可选)
popstate事件 : 读取数据 event.state
注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面

拖放事件
draggable ：
设置为true，元素就可以拖拽了

拖拽元素事件 : 事件对象为被拖拽元素
dragstart , 拖拽前触发
drag ,拖拽前、拖拽结束之间，连续触发
dragend , 拖拽结束触发
目标元素事件 : 事件对象为目标元素
dragenter , 进入目标元素触发，相当于mouseover
dragover ,进入目标、离开目标之间，连续触发
dragleave , 离开目标元素触发，相当于mouseout
drop , 在目标元素上释放鼠标触发

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

解决火狐下的问题
必须设置dataTransfer对象才可以拖拽除图片外的其他标签

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

effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
setDragImage()：三个参数：指定的元素，坐标X，坐标Y
files：获取外部拖拽的文件，返回一个filesList列表
filesList下有个type属性，返回文件的类型

FileReader(读取文件信息)
readAsDataURL()：参数为要读取的文件对象，将文件读取为DataUrl
onload：当读取文件成功完成的时候触发此事件
this. result , 来获取读取的文件数据，如果是图片，将返回base64格式的图片数据