HTML5(二)新特性
1、HTML5新特性的瀏覽器支援情況
http://www.caniuse.com/#index
2、新的選擇器
(1)querySelector
<script> //$('#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'; |
(2)querySelectorAll
<script> //$('#div1') $('.box') $('ul li') window.onload = function(){ var aDiv = document.querySelectorAll('.box'); //獲取一組元素 alert( aDiv.length ); |
(3)getElementsByClassName
<script> window.onload = function(){ var aDiv = document.getElementsByClassName('box'); alert( aDiv.length ); }; </script> |
3、獲取class列表屬性 classList
——length:class的長度
——add():新增class的方法
——remove():刪除class的方法
——toggle():切換class的方法
<script> //alert( oDiv.classList ); //類似與陣列的物件 //alert( oDiv.classList.length ); //3 //oDiv.classList.add('box4'); //oDiv.classList.remove('box2'); oDiv.classList.toggle('box2'); |
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:非同步載入,載入完就觸發,有順序問題
<!--<script src="a.js" defer="defer"></script> <script src="a.js" async ="async"></script> |
7、歷史管理
——onhashchange:改變hash值來管理
——history: 伺服器下執行
pushState事件:有三個引數 資料 標題(都沒實現) 地址(可選)
popState事件:讀取資料 event.state
注意:網址是虛假的,需要在伺服器指定對應頁面,不然重新整理找不到頁面
隨機選彩票
window.onload = function(){ oInput.onclick = function(){ oInput.onclick = function(){ window.onpopstate = function(ev){ function randomNum(iAll,iNow){ for(var i=0;i<iNow;i++){ |
8、拖放事件
——draggable:設定為true時,元素就可以拖拽了
—— 拖拽元素事件:事件物件為被拖拽元素
dragstart:拖拽前觸發;drag:拖拽前、拖拽結束之間,連續觸發;dragend:拖拽結束觸發
<!DOCTYPE html> for(var i=0;i<aLi.length;i++){ /*aLi[i].ondrag = function(){ //開始與結束連續觸發 aLi[i].ondragend = function(){ oDiv.ondragenter = function(){ oDiv.ondragover = function(ev){ oDiv.ondragleave = function(){ |
——effectAllowed:設定游標樣式(none,copy,copyLink,copyMove,link,linkMove,move,all和uninitialized)
——setDragImage:三個引數:指定的元素,座標X,座標Y
window.onload = function(){ for(var i=0;i<aLi.length;i++){ |
——files:獲取外部拖拽的檔案,返回一個fileList列表;fileList下有個type屬性,返回檔案的型別
FileReader(讀取檔案資訊)
——readAsDataURL:引數為要讀取的檔案物件,將檔案讀取為DataUrl
——onload:當讀取檔案成功完成的時候觸發此事件;this.result來獲取讀取的檔案資料,如果是圖片,返回base64格式的圖片資料
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 ); }; }; }; |
案例:
(1)上傳圖片預覽
<!DOCTYPE html> #div1{ width:200px; height:200px; background:red; margin:100px;} for(var i=0;i<fs.length;i++){ |
(2)拖拽購物車
<!DOCTYPE> for(var i=0;i<aLi.length;i++){ }; oDiv.ondragover = function(ev){ oDiv.ondrop = function(ev){ |