HTML5（二）新特性

1、HTML5新特性的瀏覽器支持情況
http://www.caniuse.com/#index
2、新的選擇器
（1）querySelector

//$('#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>

（2）querySelectorAll

//$('#div1') $('.box') $('ul li')

window.onload = function(){

var aDiv = document.querySelectorAll('.box'); //獲取一組元素

alert( aDiv.length );
};
</script>

（3）getElementsByClassName

3、獲取class列表屬性 classList
——length：class的長度
——add()：添加class的方法
——remove()：刪除class的方法
——toggle()：切換class的方法

//alert( oDiv.classList ); //類似與數組的對象

//alert( oDiv.classList.length ); //3

//oDiv.classList.add('box4');

//oDiv.classList.remove('box2');

oDiv.classList.toggle('box2');
};
</script>

4、JOSN的新方法
——parse()：把字符串轉換爲json，字符串中的屬性嚴格的加上引號
——stringify()：把json轉化爲字符串，會自動的把雙引號加上
——新方法與eval的區別
//eval : 可以解析任何字符串變成JS
//parse : 只能解析JSON形式的字符串變成JS (安全性要高一些)
var str = '{"name":"hello"}'; //一定是嚴格的JSON形式
var json = JSON.parse(str);
alert( json.name );
——新方法的應用：深度克隆新對象
——如何與其他瀏覽器做兼容 http://www.json.org/ 去下載json2.js
5、data自定義屬性
——dataset data-name：dataset.name
data-name-first：dataset.nameFirst
——Data數據在jquery mobile中有重要的作用

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
//alert( oDiv.dataset.miaov );
alert( oDiv.dataset.miaovAll );
};
</script>
</head>
<body>
<div id="div1" data-miaov="妙味" data-miaov-all="妙味課堂">div</div>
</body>
</html>

6、延遲加載JS
——JS的加載會影響後面的內容加載，很多瀏覽器都採用了並行加載JS，但還是會影響其他內容
——Html5的defer和async
defer：延遲加載，會按順序執行，在onload執行前被觸發
async：異步加載，加載完就觸發，有順序問題

7、歷史管理
——onhashchange：改變hash值來管理
——history：服務器下運行
pushState事件：有三個參數數據標題（都沒實現）地址（可選）
popState事件：讀取數據 event.state
注意：網址是虛假的，需要在服務器指定對應頁面，不然刷新找不到頁面
隨機選彩票

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>
<body>
<input type="button" value="隨機選擇" id="input1">
<div id="div1"></div>
</body>
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;
}
};

8、拖放事件
——draggable：設置爲true時，元素就可以拖拽了
—— 拖拽元素事件：事件對象爲被拖拽元素
dragstart：拖拽前觸發；drag：拖拽前、拖拽結束之間，連續觸發；dragend：拖拽結束觸發

<!DOCTYPE html>
<html>
<head>
<meta 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>

——effectAllowed：設置光標樣式（none，copy，copyLink，copyMove，link，linkMove，move，all和uninitialized）
——setDragImage：三個參數：指定的元素，座標X，座標Y

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

——files：獲取外部拖拽的文件，返回一個fileList列表；fileList下有個type屬性，返回文件的類型
FileReader（讀取文件信息）
——readAsDataURL：參數爲要讀取的文件對象，將文件讀取爲DataUrl
——onload：當讀取文件成功完成的時候觸發此事件；this.result來獲取讀取的文件數據，如果是圖片，返回base64格式的圖片數據

案例：
（1）上傳圖片預覽

<!DOCTYPE html>
<html>
<head>
<meta 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>

（2）拖拽購物車

<!DOCTYPE>
<html>
<head>
<meta 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">

</div>
</body>
</html>

HTML5（二）新特性

JVM字節碼

移動端開發基礎（一）事件基礎

Ajax請求過程

Apache配置本地虛擬主機403問題解決

如何將一個div水平垂直居中

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結