地理定位API
navigator.geolocation 對象
- getCurrentPosition(callback, errCallback, options) 獲取當前位置
- watchPosition(callback, errCallback, options) 實時獲取位置
- clearWatch() 停止監控位置變化
position對象（獲取位置成功后，后調函數中的得到的參數）
- timestamp 獲取位置時的時間戳
- coords 包含坐標信息的對象
- latitude 緯度
- longitude 經度
- altitude 海拔
- heading 前進方向
- speed 速度
error對象 （獲取位置失敗，回調函數得到的參數）
- code
- message
選項（getCurrentPosition 和 watchPosition 第三參數）
- timeout
- maximumAge 緩存時間
- enableHighAccuracy 是否最佳
多媒體API
video/audio 的dom對象
track 標簽的用法
拖放API
拖拽屬性
- draggable （true/false）
拖拽事件
- dragstart 被拖拽元素 開始拖拽
- dragend 被拖拽元素 結束拖拽
- drag 被拖拽元素 拖拽過程不停觸發
- dragenter 目標元素 進入目標元素
- dragleave 目標元素 離開目標元素
- dragover 目標元素 在目標元素內 不停觸發
- drop 目標元素 在目標元素內結束
dragEvent
- dataTransfer 數據傳遞
- setData()
- getData()
文件API
概述
- H5允許JS有條件的讀取客戶端文件
- 允許讀取的文件：1.待上傳的文件 2,拖進瀏覽器的文件
FileList對象
- 由File對象構成的集合 （類數組對象）
File對象
- name
- size
- type
- lastModified
- lastMOdifiedDate
FileReader對象
- 方法
- readAsText()
- readAsDataURL()
- 屬性
- error
- readyState
- result
- 事件
- onload
- onloadstart
- onloadend
- oneror
- onabort
- onprogress
XHR2
概述
- XMLHttpRequest 對象， 用於發起http請求
- H5標准新增了更多的屬性和方法和事件
FormData
- 用來獲取表單數據
- http請求（post方式）， 請求體 編碼方式 application/x-www-form-urlencoded ||| multipart/form-data
- XMLHttpRequiest默認的請求體編碼方式 multipart/form-data
- 創建FormData對象可以把form元素作為參數，也可以沒有參數創建空的formdata
- FormData對象調用append() 在原來內容基礎上添加新的內容
XMLHTTPRequst對象 新增的屬性、方法、事件
- 方法
- open()
- send()
- abort()
- 屬性
- responseText
- responseXML
- readyState
- status
- 事件
- onreadystatechange
progressEvent
- loaded
- total
- lengthComputable 長度是否可計算
XMLHttpRequestUpload
- onload
- onloadstart
- onloadend
- onprogress
- onerror
- onabort
- ontimeout
HTML5新增API
canvas
- 可視化數據
- 特效 banner
- 游戲
- 模擬器(在線PS、在線編輯器)
- 地圖
SVG
定義
矢量圖工具， 繪圖
SVG在H5標准之前就有了， IE對SVG的兼容性非常好
svg與canvas區別
- canvas位圖， svg是矢量圖
- canvas使用JavaScrpt繪圖， svg使用XML來繪圖
- canvas不支持事件（借助庫） svg支持事件
svg的應用領域
- 矢量圖標
- 地圖
SVG的使用
<svg><rect><circle><line><path><ellipse><polygon>- .....
HTML中使用SVG
- 在html中直接寫 <svg>
<embed src="" type="image/svg+xml" width="" height=""><object data="" type="image/svg+xml" width="" height=""><iframe src="">
地理定位 geolocation
navigator.gentlocation
- getCurrentPosition(successCallback, errorCallback, options) 獲取當前的地理位置
- watchPosition(successCallback, errorCallback, options) 監聽地理位置變化
- clearWatch() 停止位置監聽
position對象
獲取位置成功會調用 successCallback回調函數， 自動接收position對象
-
coords
- longitude 維度
- latitude 精度
- altitude 海拔
- handing 前進方向
- speed 速度
- altitudeAccuracy 海拔經度
- accuracy 坐標經度
-
timestamp 時間戳
error對象
獲取位置失敗，調用errorCallback回調，調用 error對象
- code 錯誤代碼
- message 錯誤信息
選項 options
- timeout 超時時間
- enableHighAccuracy 是否最優
- maxmunAge 最大緩存時間
注意
- chrome瀏覽器只有在https方式下打開的網頁才能獲取地理位置
- 手上上的大部分瀏覽器，微信 也要求https 才能獲取位置
多媒體
相關標簽
-
<video>視頻 -
<audio>音頻 <source><track>
DOM(video/audio)
- 屬性
- volume 音量
- muted 是否靜音
- ....
- 方法
- play()
- pause()
- .....
- 事件
- onplay
- ....
視頻插件
- ckplayer
- jplayer
- flowplayer
- video.js
- flv.js
拖拽
屬性
- draggable 設置為true 元素就可以被拖拽
事件
- ondrag
- ondragstart
- ondragend
- ondragenter
- ondragleave
- ondragover
- ondrop
dataTransfer
- 獲取 是dragEvent的屬性
- getData()
- setData()
拖拽實例