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格式的图片数据