HTML5更多（一）
l理解新的选择器
l获取class列表属性
lJson的新方法
ldata自定义数据
l延迟加载JS
l历史管理
l拖放事件
新的选择器
•querySelector
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>//document.getElementById();
//document.getElementsByTagName();//$('#div1') $('.box') $('ul li')
window.onload = function(){
//var oDiv = document.querySelector('[title=hello]');
var oDiv = document.querySelector('.box'); //只能选择一组中的第一个元素
//alert( oDiv.length );
oDiv.style.background = 'red';
};</script>
</head><body>
<div id="div1" class="box" title="hello">div</div>
<div class="box">div2</div>
</body>
</html>
•querySelectorAll
//document.getElementById();
//document.getElementsByTagName();//$('#div1') $('.box') $('ul li')
window.onload = function(){
var aDiv = document.querySelectorAll('.box'); //获取一组元素
alert( aDiv.length );
};</script>
</head><body>
<div id="div1" class="box" title="hello">div</div>
<div class="box">div2</div>
</body>
</html>
•getElementsByClassName
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>window.onload = function(){
var aDiv = document.getElementsByClassName('box');
alert( aDiv.length );
};</script>
</head><body>
<div id="div1" class="box" title="hello">div</div>
<div class="box">div2</div>
</body>
</html>
获取class列表属性
•classList
–length : class的长度
–add() : 添加class方法
–remove() : 删除class方法
–toggle() : 切换class方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>window.onload = function(){
var oDiv = document.getElementById('div1');
//alert( oDiv.classList ); //类似与数组的对象
//alert( oDiv.classList.length ); //3
//oDiv.classList.add('box4');
//oDiv.classList.remove('box2');
oDiv.classList.toggle('box2');
};</script>
</head><body>
<div id="div1" class="box1 box2 box3">div</div>
</body>
</html>
JSON的新方法
•parse() : 把字符串转成json
–字符串中的属性要严格的加上引号
•stringify() : 把json转化成字符串
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="json2.js"></script>
<script>/*var a = {
name : 'hello'
};var b = a;
b.name = 'hi';
alert( a.name );*/ //hi
/*var a = {
name : 'hello'
};var b = {};
for(var attr in a){
b[attr] = a[attr];
}b.name = 'hi';
alert( a.name );*/ // hello //视频 : 对象的引用
var a = {
name : { age : 100 }
};var str = JSON.stringify(a);
var b = JSON.parse(str);
b.name.age = 200;
alert( a.name.age ); //100
</script>
</head><body>
</body>
</html>
–会自动的把双引号加上
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>//eval : 可以解析任何字符串变成JS
//parse : 只能解析JSON形式的字符串变成JS (安全性要高一些)
/*var str = 'function show(){alert(123)}';
eval(str);
show();*/
/*var str = 'function show(){alert(123)}';
JSON.parse(str);
show();*/
/*var str = '{"name":"hello"}'; //一定是严格的JSON形式var json = JSON.parse(str);
alert( json.name );*/
// var name = 'name';var json = {name : "hello"};
var str = JSON.stringify(json);
alert( str );
</script>
</head><body>
</body>
</html>
•新方法与eval的区别
•新方法的应用
–深度克隆新对象
•如何其他浏览器做到兼容
–http://www.json.org/去下载json2.js
data自定义数据
•dataset
–data-name : dataset.name
–data-name-first : dataset.nameFirst
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>window.onload = function(){
var oDiv = document.getElementById('div1');//alert( oDiv.dataset.bin );
alert( oDiv.dataset.binAll );
};</script>
</head><body>
<div id="div1" data-bin="bin" data-bin-all="binperson">div</div>
</body>
</html>
•Data数据在jquery mobile中有着重要作用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head>
<body>
<div data-role="page" id="div1">
<div data-theme="c" data-role="header">
<h3>课堂</h3>
</div>
<div data-role="context">
<a href="#div2" data-transition="slide">点击</a>
</div>
</div><div data-role="page" id="div2">
<div data-theme="b" data-role="header">
<h3>课堂-移动开发教程</h3>
</div>
<div data-role="context">
<a href="#div1" data-transition="slide" data-direction="reverse">点击</a>
</div>
</div>
</body>
</html>
延迟加载JS
•JS的加载会影响后面的内容加载
–很多浏览器都采用了并行加载JS，但还是会影响其他内容
•Html5的defer和async
–defer : 延迟加载，会按顺序执行，在onload执行前被触发
–async : 异步加载，加载完就触发，有顺序问题
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--<script src="a.js" defer="defer"></script>
<script src="b.js" defer="defer"></script>
<script src="c.js" defer="defer"></script>-->
<script src="a.js" async ="async"></script>
<script src="b.js" async ="async"></script>
<script src="c.js" async ="async"></script>
</head>
<body>
<img src="">
</body>
</html>
•Labjs库
历史管理
•onhashchange ：改变hash值来管理
•history ：
–服务器下运行
–pushState : 三个参数 ：数据 标题(都没实现) 地址(可选)
–popstate事件 : 读取数据 event.state
–注意：网址是虚假的，需在服务器指定对应页面，不然刷新找不到页面
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
//触发历史管理 : 1.通过跳转页面 2.hash 3.pushState
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>
</head><body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<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>
</head><body>
<input type="button" value="随机选择" id="input1">
<div id="div1"></div>
</body>
</html>
拖放事件
•draggable ：
–设置为true，元素就可以拖拽了
•拖拽元素事件 : 事件对象为被拖拽元素
–dragstart , 拖拽前触发
–drag ,拖拽前、拖拽结束之间，连续触发
–dragend , 拖拽结束触发
•目标元素事件 : 事件对象为目标元素
–dragenter , 进入目标元素触发，相当于mouseover
–dragover ,进入目标、离开目标之间，连续触发
–dragleave , 离开目标元素触发，相当于mouseout
–drop , 在目标元素上释放鼠标触发
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width:100px; height:100px; background:red; margin:200px;}
</style>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var oDiv = document.getElementById('div1');
var i = 0;
for(var i=0;i<aLi.length;i++){
aLi[i].ondragstart = function(){
this.style.background = 'green';
};
/*aLi[i].ondrag = function(){ //开始与结束连续触发
document.title = i++;
};*/
aLi[i].ondragend = function(){
this.style.background = 'yellow';
};
}
oDiv.ondragenter = function(){
this.style.background = 'blue';
};
oDiv.ondragover = function(ev){
//enter和leave之间连续触发
//要想触发drop事件，就 必须在dragover当中阻止默认事件
//document.title = i++;
ev.preventDefault();
};
oDiv.ondragleave = function(){
this.style.background = 'red';
};
oDiv.ondrop = function(){
alert(123);
};
};
</script>
</head><body>
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html>
拖放事件_2
•事件的执行顺序：drop不触发的时候
–dragstart > drag > dragenter > dragover > dragleave > dragend
•事件的执行顺序：drop触发的时候(dragover的时候阻止默认事件)
–dragstart > drag > dragenter > dragover > drop > dragend
•不能释放的光标和能释放的光标不一样
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width:100px; height:100px; background:red; margin:200px;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var oDiv = document.getElementById('div1');
var i = 0;
for(var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].ondragstart = function(ev){
var ev = ev || window.event;
//ev.dataTransfer.setData('name','hello');
ev.dataTransfer.setData('name',this.index);
this.style.background = 'green';
};
/*aLi[i].ondrag = function(){ //开始与结束连续触发
document.title = i++;
};*/
aLi[i].ondragend = function(){
this.style.background = 'yellow';
};
}
oDiv.ondragenter = function(){
this.style.background = 'blue';
};
oDiv.ondragover = function(ev){
//enter和leave之间连续触发
//要想触发drop事件，就 必须在dragover当中阻止默认事件
//document.title = i++;
ev.preventDefault();
};
oDiv.ondragleave = function(){
this.style.background = 'red';
};
oDiv.ondrop = function(ev){
//alert(123);
//alert( ev.dataTransfer.getData('name') );
oUl.removeChild( aLi[ev.dataTransfer.getData('name')] );
for(var i=0;i<aLi.length;i++){
aLi[i].index = i;
}
};
};
</script>
</head><body>
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html>
拖放事件_3
•解决火狐下的问题
–必须设置dataTransfer对象才可以拖拽除图片外的其他标签
–
dataTransfer对象
•setData() : 设置数据 key和value(必须是字符串)
•getData() : 获取数据，根据key值，获取对应的value
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width:100px; height:100px; background:red; margin:200px;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var oDiv = document.getElementById('div1');
var oImg = document.getElementById('img1');
var i = 0;
for(var i=0;i<aLi.length;i++){
aLi[i].ondragstart = function(ev){
var ev = ev || window.event;
ev.dataTransfer.setData('name','hello');
ev.dataTransfer.effectAllowed = 'link';
ev.dataTransfer.setDragImage(oImg,0,0);
};
aLi[i].ondragend = function(){
this.style.background = 'yellow';
};
}
oDiv.ondragenter = function(){
this.style.background = 'blue';
};
oDiv.ondragover = function(ev){
//enter和leave之间连续触发
//要想触发drop事件，就 必须在dragover当中阻止默认事件
//document.title = i++;
ev.preventDefault();
};
oDiv.ondragleave = function(){
this.style.background = 'red';
};
oDiv.ondrop = function(ev){
};
};
</script>
</head><body>
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<div id="div1"></div>
<img src="miaov.png" id="img1" style="display:none" />
</body>
</html>
dataTransfer对象_2
•effectAllowed
–effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
•setDragImage
–三个参数：指定的元素，坐标X，坐标Y
•files
–获取外部拖拽的文件，返回一个filesList列表
–filesList下有个type属性，返回文件的类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>#div1{ width:200px; height:200px; background:red; margin:100px;}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.ondragenter = function(){
this.innerHTML = '可以释放啦';
};
oDiv.ondragover = function(ev){
ev.preventDefault();
};
oDiv.ondragleave = function(){
this.innerHTML = '将文件拖拽到此区域';
};
oDiv.ondrop = function(ev){
ev.preventDefault();
var fs = ev.dataTransfer.files;
//alert(fs.length);
//alert( fs[0].type );
var fd = new FileReader();
fd.readAsDataURL( fs[0] );
fd.onload = function(){
alert( this.result );
};
};
};
</script>
</head><body>
<div id="div1">将文件拖拽到此区域</div>
</body>
</html>
FileReader(读取文件信息)
•readAsDataURL
–参数为要读取的文件对象，将文件读取为DataUrl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>#div1{ width:200px; height:200px; background:red; margin:100px;}
</style>
<script>
window.onload = function(){var oDiv = document.getElementById('div1');
var oUl = document.getElementById('ul1');
oDiv.ondragenter = function(){this.innerHTML = '可以释放啦';
};
oDiv.ondragover = function(ev){
ev.preventDefault();
};
oDiv.ondragleave = function(){
this.innerHTML = '将文件拖拽到此区域';
};
oDiv.ondrop = function(ev){
ev.preventDefault();
var fs = ev.dataTransfer.files;
//alert(fs.length);
//alert( fs[0].type );
/*if(fs[0].type.indexOf('image')!=-1){
var fd = new FileReader();fd.readAsDataURL( fs[0] );
fd.onload = function(){
var oLi = document.createElement('li');
var oImg = document.createElement('img');
oImg.src = this.result;
oLi.appendChild(oImg);
oUl.appendChild(oLi);};
}
else{
alert('亲，请上传图片类型');
}*/for(var i=0;i<fs.length;i++){
if(fs[i].type.indexOf('image')!=-1){
var fd = new FileReader();fd.readAsDataURL( fs[i] );
fd.onload = function(){
var oLi = document.createElement('li');
var oImg = document.createElement('img');
oImg.src = this.result;
oLi.appendChild(oImg);
oUl.appendChild(oLi);};
}
else{
alert('亲，请上传图片类型');
}
}
};};
</script>
</head><body>
<div id="div1">将文件拖拽到此区域</div>
<ul id="ul1">
</ul>
</body>
</html>
•onload
–当读取文件成功完成的时候触发此事件
–this. result , 来获取读取的文件数据，如果是图片，将返回base64格式的图片数据
•实例
–拖拽删除列表
–拖拽购物车
–上传图片预览功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
li{ float:left; width:200px; border:1px #000 solid; margin:10px;}
li img{ width:200px;}
p{ height:20px; border-bottom:1px #333 dashed;}
#div1{ width:600px; border:1px #000 solid; height:300px; clear:both;}
.box1{ float:left; width:200px;}
.box2{ float:left; width:200px;}
.box3{ float:left; width:200px;}
#allMoney{ float:right;}
</style>
<script>window.onload = function(){
var aLi = document.getElementsByTagName('li');
var oDiv = document.getElementById('div1');
var obj = {};
var iNum = 0;
var allMoney = null;
for(var i=0;i<aLi.length;i++){
aLi[i].ondragstart = function(ev){
var aP = this.getElementsByTagName('p');
ev.dataTransfer.setData('title',aP[0].innerHTML);
ev.dataTransfer.setData('money',aP[1].innerHTML);
ev.dataTransfer.setDragImage(this,0,0);
};
}
oDiv.ondragover = function(ev){
ev.preventDefault();
};
oDiv.ondrop = function(ev){
ev.preventDefault();
var sTitle = ev.dataTransfer.getData('title');
var sMoney = ev.dataTransfer.getData('money');
if( !obj[sTitle] ){
var oP = document.createElement('p');
var oSpan = document.createElement('span');
oSpan.className = 'box1';
oSpan.innerHTML = 1;
oP.appendChild( oSpan );
var oSpan = document.createElement('span');
oSpan.className = 'box2';
oSpan.innerHTML = sTitle;
oP.appendChild( oSpan );
var oSpan = document.createElement('span');
oSpan.className = 'box3';
oSpan.innerHTML = sMoney;
oP.appendChild( oSpan );
oDiv.appendChild( oP );
obj[sTitle] = 1;
}
else{
var box1 = document.getElementsByClassName('box1');
var box2 = document.getElementsByClassName('box2');
for(var i=0;i<box2.length;i++){
if(box2[i].innerHTML == sTitle){
box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
}
}
}
if(!allMoney){
allMoney = document.createElement('div');
allMoney.id = 'allMoney';
}
iNum += parseInt(sMoney);
allMoney.innerHTML = iNum + '￥';
oDiv.appendChild( allMoney );
};
};</script>
</head><body>
<ul>
<li draggable="true">
<img src="img1.jpg" />
<p>javascript语言精粹</p>
<p>40￥</p>
</li>
<li draggable="true">
<img src="img2.jpg" />
<p>javascript权威指南</p>
<p>120￥</p>
</li>
<li draggable="true">
<img src="img3.jpg" />
<p>精通javascript</p>
<p>35￥</p>
</li>
<li draggable="true">
<img src="img4.jpg" />
<p>DOM编程艺术</p>
<p>45￥</p>
</li>
</ul>
<div id="div1">
<!--<p>
<span class="box1">1</span>
<span class="box2">DOM编程艺术</span>
<span class="box3">45￥</span>
</p>
<p>
<span class="box1">1</span>
<span class="box2">DOM编程艺术</span>
<span class="box3">45￥</span>
</p>
<div id="allMoney">90￥</div>-->
</div>
</body>
</html>
