第二课：html5基础

一、json的新方法

1、parse()：把字符串转换成json

parse()：只能解析JSON形式的字符串变成js，而且字符串中的属性要严格加上引号

eval()：可以解析任何字符串变成js

var str = 'function show(){alert(123)}';
eval(str);
show();

var str = '{"name":"hello"}';   //一定是严格的JSON形式
var json = JSON.parse(str);
alert( json.name )

2、stringify()：把json转换成字符串

3、新方法的应用

---深度克隆新对象

var a ={
    name : {age :100}
}
var str = JSON.stringify(a);
var b = JSON.parse(str);
b.name.age = 200;
alert(b.name.age);

二、自定义数据与JS加载

1、data自定义数据

dataset

–data-name :  dataset.name

–data-name-first  :  dataset.nameFirst

如下：

alert(oDiv.dataset.txt)

alert(oDiv.dataset.txtAll);

<div id="div1" data-txt='文字' data-txt-all='所有文字'>divdivdiv</div>

2、延迟加载js

•Html5的defer和async

–defer : 延迟加载，会按顺序执行，在onload执行前被触发

–async : 异步加载，加载完就触发，有顺序问题

•Labjs库

 

三、历史管理

触发历史管理 : 1.通过跳转页面  2.改变hash  3.pushState

onhashchange:改变hash值管理

例：

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;      
    }

四、拖放

把拖拽元素设置为true，元素渚可以拖拽   dragable="true"

拖拽元素事件

ondragstart  拖拽前触发

ondrag     拖拽前和拖拽结束之间，连续触发

ondragend 拖拽结束触发

 

目标元素事件

ondragenter   进入目标元素触发

ondragover  进入目标和离开目标之间，连续触发

ondragleave  离开目标元素触发

ondrop   在目标元素上释放触发

 

注：要想触发drop事件，就 必须在dragover当中阻止默认事件

 

dataTransfer对象

•effectAllowed属性

–effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

•setDragImage()

设置在拖动过程中显示的图片

–三个参数：指定的元素，坐标X，坐标Y

•files

–获取外部拖拽的文件，返回一个filesList列表

–filesList下有个type属性，返回文件的类型