H5学习笔记

1.新的选择器
querySelector：只能选择一个
querySelectorAll

2.JSON新方法
parse() : 把字符串转成json，字符串中的属性要严格的加上引号
stringify() : 把json转化成字符串，会自动的把双引号加上
新方法与eval的区别
parse：只能将JSON格式的字符串转换成JS（安全些）
eval：可以解析任何字符串变成JS
新方法的应用：深度克隆新对象
如何其他浏览器做到兼容：http://www.json.org/去下载json2.js

3.data自定义数据
dataset

data-name :  dataset.name //自定义属性时必须加data-
data-name-first  :  dataset.nameFirst //三级调用.nameFirst

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

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

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

通过hash来进行历史管理
<script>
window.onload = function(){
    var oInput = document.getElementById('input1');
    var oDiv = document.getElementById('div1');

    var json = {};

    oInput.onclick = function(){

        var num = Math.random();

        var arr = randomNum(35,7);

        json[num] = arr;

        oDiv.innerHTML = arr;

        window.location.hash = num;

    };

    window.onhashchange = function(){

        oDiv.innerHTML = json[window.location.hash.substring(1)];

    };

    function randomNum(iAll,iNow){

        var arr = [];
        var newArr = [];
        for(var i=1;i<=iAll;i++){
            arr.push(i);
        }

        for(var i=0;i<iNow;i++){
            newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
        }

        return newArr;

    }

};
</script>

通过H5的history来管理历史
<script>
window.onload = function(){
    var oInput = document.getElementById('input1');
    var oDiv = document.getElementById('div1');

    oInput.onclick = function(){

        var arr = randomNum(35,7);

        history.pushState(arr,'',arr);

        oDiv.innerHTML = arr;

    };

    window.onpopstate = function(ev){

        oDiv.innerHTML = ev.state;

    };


    function randomNum(iAll,iNow){

        var arr = [];
        var newArr = [];
        for(var i=1;i<=iAll;i++){
            arr.push(i);
        }

        for(var i=0;i<iNow;i++){
            newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) );
        }

        return newArr;

    }

};
</script>

6.拖放事件
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属性，返回文件的类型

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