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