一.新增標籤
- <header>用在頁面的頭部或者版塊的頭部</header>
- <footer>用在頁面的頭部或者版塊的頭部</footer>
- <section>用來劃分區域</section>
- <article>主體</article> <aside>和主體相關的附屬信息</aside>
<article> <aside>側邊欄</aside> <section>內容區域</section> </article> - <time>時間</time>
- <datalist></datalist>選項列表。與input元素配合使用，來定義input可能的值
<input type="text" list="valList" /> <datalist id="valList"> <option value="javascript">javascript</option> <option value="html">html</option> <option value="css">css</option> </datalist> - <address>定義文章或頁面作者信息</address>
- <mark>需要標記的詞或句子</mark>
- <progress max="100" value="76"></progress> 進度條
- 輸入型控件
email：電子郵箱文本框 ，當輸入的不是郵箱的時候，驗證通不過
tel：電話號碼，輸入的不是號碼，驗證通不過
url：網址，輸入的不是網址，驗證通不過
search：搜索引擎
range：特定範圍內的數值選擇器
number：只能包含數字的輸入框，並且提供數字加減選擇
color：顏色選擇器
datatime ：顯示完整日期
datatime-local：顯示完整日期，不包含時區
time：顯示時間，不含時區
date：顯示日期
week：顯示周
month：顯示月 - 表單屬性
placeholder：輸入框提示信息
autocomplete：是否保存用戶輸入值
autofocus：指定表單獲取輸入焦點
list和datalist：爲輸入框構造一個選擇列表（list值爲datalist的id）
required：強制用戶必須輸入
pattern：正則驗證；例：pattern="/d{1,5}"
formaction：在submit裏定義提交地址 - 表單驗證：
validity對象，通過下面的valid可以查看驗證是否通過，如果八字驗證都通過返回true，一種驗證失敗返回false
oTest.addEventListener("invalid",fn1,false);
valueMissing：輸入值爲空時
typeMismatch：輸入值與預期類型不匹配
patternMismatch：輸入值不滿足不滿足pattern正則
toolong：超過maxLength最大時
rangeUnderflow：驗證range最小值
rangeOverflow：驗證range最大值
stepMismatch：驗證range的當前值是否符合min、max、step的規則
customError：不符合自定義驗證
formnovalidate屬性：關閉驗證
二.新增選擇器
- 新的選擇器
querySelector 用法：var oDiv=document.querySelector('.box'); //只能選擇一組中第一個元素
querySelectorAll 用法：var oDiv=document.querySelectorAll('.box') //選擇一組中元素，數組
getElementsByClassName 用法：var oDiv=document.getElementsByClassName ('box') //獲取class爲box的元素，數組 - 獲取class列表屬性
classList：
length：class的長度
add()：添加class方法
remove()：刪除class方法
foggle()：切換class方法
用法：oDiv.classList.add('box1'); oDiv.classList.remove('box3');
oDiv.classList.foggle('box2'); 如果oDiv中有box2則刪除box2，沒有則添加
三.json的新方法
parse()：把字符串轉換成json，字符串中屬性要嚴格加上引號
stringify()：把json轉化成字符串，會自動把雙引號加上
例：var a={name:'lhf'}
var str = JSON.stringify(a);
var b = JSON.parse(str);
alert(b.name);
四.歷史管理
onhashchange：改變hash值來管理
history：
服務器下運行
pushState：三個參數：數據 標題 地址(可選)
popstate事件：讀取數據 event.state
五.元素拖放
draggable 設置爲true，元素就可以拖拽了
例：
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>拖放事件：
拖拽元素事件：事件對象爲被拖拽元素
dragstart，拖拽前觸發
drag，拖拽前，拖拽結束之間，連續觸發
dragend，拖拽結束觸發
目標元素事件：事件對象爲目標元素
dragenter：進入目標元素觸發，相當於mouseover
dragover：進入目標、離開目標之間，連續觸發
dragleave：離開目標元素觸發，相當於mouseout
drop：在目標元素上釋放鼠標觸發
火狐下需要設置dataTransfer對象的setDate方法纔可以拖拽除圖片外的其他標籤
dataTransfer有以下方法：
setData()：設置數據key和value（必須是字符串）
getData()：獲取數據，根據key值，獲取對應的value
effectAllowed：設置光標樣式（none,copy,copyLink,copyMove,link,linkMove,move,all和uninitialized)
setDragImage：三個參數：指定的元素，座標X，座標Y
files：獲取外部拖拽的文件，返回一個fileslList列表，還有一個type屬性，返回文件類型
FileReader
readAsDataUrl ：參數爲要讀取的文件對象，將文件讀取爲DataUrl
onload：當讀取文件成功時觸發此事件
this.result 來獲取讀取的文件數據，是圖片則返回base64格式的圖片數據
六. canvas：用於繪製圖形
translate：偏移，從起始位置爲基準點，移動當前座標位置
rotate：旋轉，參數爲弧度
scale：縮放
- 繪製環境：getContext('2d'); //目前支持2d的場景
- 繪製方塊
fillRect(L,T,W,H)：默認顏色是黑色 strokeRect(L,T,W,H)：帶邊框的方塊 - 設置繪圖
fileStyle：填充顏色
lineWidth：線寬度，是一個數值
strokeStyle：邊線顏色 - 邊界繪製
lineJoin：邊界連接點樣式：miter（默認）round（圓角）bevel（斜角）
lineCao：端點樣式：butt（默認）round（圓角）squre（高多出寬一半的值） - 繪製路徑
beginPath：開始繪製路徑
closePath：結束繪製路徑
moveTo：移動到繪製的新目標點
lineTo：新的目標點
stroke：畫線，默認黑色
fill：填充，默認黑色
rect：矩形區域
clearRect：刪除一個畫布的矩形區域
save：保存路徑
restore：恢復路徑 - 繪製圓：
arc(x,y,半徑,起始弧度,結束弧度,旋轉方向)
x，y：起始位置
弧度與角度的關係：弧度=角度*Math.PI/180
旋轉方向：順時針（默認false）、逆時針（true） - 繪製其他曲線
arcTo(x1,y1,x2,y2,r)：第一組座標，第二組座標，半徑
quadraticCurveTo(dx,dy,x1,y1)：貝塞爾曲線：第一組控制點，第二組結束座標
bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)：貝塞爾曲線，第一組控制點，第二組控制點，第三組結束座標 - 插入圖片：等圖片加載完，再執行canvas操作
drawImage(oimg,x,y,w,h)；oImg：當前圖片x,y：座標；w,h：寬高 - 設置背景
createPattern(oImg,平鋪方式) //平鋪方式可以是：repeat、repeat-x、repeat-y、no-repeat - 漸變
createLinearGradient(x1,y1,x2,y2); 線性漸變 第一組參數：起始點座標，第二組參數：結束點座標; addColorStop(位置，顏色)添加漸變點
createRadialGradient(x1,y1,r1,x2,y2,r2); 放射性漸變；第一個圓的座標和半徑，第二個圓的座標和半徑 - 文本
strokeText(文字,x,y)；文字邊框
fileText(文字,x,y)；文字填充
font：字體大小
textAlign：默認是start跟left一樣的效果end right center
textBaseline：文字上下的位置；默認：alphabetic - 文本、陰影
measureText()：measureText(str).width：只有寬度，沒有高度
shadowOffsetX、shaowOffsetY：x軸偏移，Y軸偏移
shadowBlur：高斯模糊值
shadowColor：陰影顏色 - 像素
getImageData(x,y,w,h)；//獲取圖像數據
putImageData(獲取圖像,x,y)；//設置新的圖像數據
屬性：width：一行的像素個數；Height：一列的像素個數；data：一個數組，包含每個像素的rgba四個值，每個值都在0~255之間 - 合成
全局阿爾法值：globalAlpha
覆蓋合成：globalCompositeOperation屬性 - 將畫布導出爲圖像
topDataUrl - 事件操作
isPointInPath：是否在點擊範圍內 jCanvaScript(canvas中的jquery)
http://jcscript.com/
七.跨文檔消息通信
XMLHttp