摘要:用來獲取上下文對象,傳入?yún)?shù)會獲得對象,傳入可以獲得圖形的上下文。表示二進制大對象字節(jié)大小類型讀取利用對象文件系統(tǒng)有效期大小為該文件系統(tǒng)對象客戶端數(shù)據(jù)庫棄用對象數(shù)據(jù)庫套接字或者協(xié)議
web瀏覽器中的javascript 在html中嵌入javascript
在script標簽里面如果有<、&,會被當成xml標記,需要使用如下寫法:
window對象 瀏覽器定位與導(dǎo)航 載入新的文檔location.assign()
location.replace()
location.reload() 刷新
瀏覽歷史history.back()
history.forward()
history.go()
瀏覽器和屏幕信息navigator:{ appName:, appVersion:, userAgent:, platform:, *onLine:, *geolocation:, *javaEnabled:, *cookieEnable:, } // 星號為未標準化錯誤處理
window.onerror
打開和關(guān)閉窗口window.open()
window.open().opener
window.close()
窗體之間的關(guān)系外部獲取iframe內(nèi)容,iframe.contentWindow
iframe內(nèi)部獲取iframe,window.frameElement
window.frames引用自身包含的窗口或窗體的子窗體
腳本化文檔 選取文檔元素getElementById
getElementByName
getElementByTagName
getElementByClassName
querySelectorAll 接受css選擇器
querySelector 返回第一個匹配的元素
文檔結(jié)構(gòu)和遍歷 作為節(jié)點樹的文檔parentNode
childNodes
firstChild,lastChild
nextSibling,previoursSibling
nodeType
nodeValue
nodeName
作為元素樹的文檔firstElementChild,lastElementChild
nextElementChild,previoursElementChild
childElementCount
獲取和設(shè)置非標準HTML屬性getAttribute()
setAttribute()
hasAttribute()
removeAttribute()
操作來自其他命名空間中屬性的xml文檔,可以使用如下方法,第一參數(shù)為標識命名空間的uri,第二個為屬性的本地名字
getAttributeNS()
setAttributeNS()
hasAttributeNS()
removeAttributeNS()
作為html的元素內(nèi)容insertAdjacentHTML() 在指定元素相鄰位置插入標記,第一個參數(shù)為位置(beforebegin、afterbegin、beforeend,afterend),第二個參數(shù)為插入的標記
作為純文本的元素內(nèi)容node.textContent 讀取或者獲取文本內(nèi)容,ie使用innerText
創(chuàng)建、插入和刪除節(jié)點 創(chuàng)建節(jié)點createElement 創(chuàng)建Element節(jié)點
createTextNode 創(chuàng)建文本節(jié)點
cloneNode 復(fù)制節(jié)點
importNode
插入節(jié)點Node.appendChild
Node.insertBefore
刪除和替換節(jié)點removeChild
replaceChild
文檔和元素的幾何形狀和滾動????????
html表單 表單和元素的屬性type
form
name
value
方法:
reset()
submit()
表單和元素的事件處理程序不會被reset()和submit()觸發(fā),僅被按鈕觸發(fā)
onsubmit
onreset
可以通過在事件中返回false來阻止默認事件執(zhí)行
其他文檔屬性cookie
domain
lastModified
location
referrer
title
URL
document.writr()方法
查詢選取的文本window.getSelection()
可編輯內(nèi)容元素屬性contenteditable
Document的designMode屬性為on,整個文檔可以編輯
執(zhí)行元素編輯命令,execCommand()
腳本化CSS CSS概覽 層疊CSS中的C代表層疊,有低到高順序為:
web瀏覽器的默認樣式
文檔的樣式表
每個html元素的style屬性
事件處理異步事件驅(qū)動編程模型
18.腳本化HTTPAjax:Asynchronous JavaScript and XML
實現(xiàn)Ajax和Comet方式:
img標簽的src
iframe的src(跨域)
scritp(即JSONP,不跨域)
XMLHttpRequest對象
使用XMLHttpRequestvar request= new XMLHttpRequest();
http請求組成:
http請求方法或動作
正在請求的url
一個可選的請求頭集合
一個可選的請求主體
服務(wù)器返回的http響應(yīng)組成:
一個由數(shù)字和文字組成的狀態(tài)碼,標識請求成功或者失敗
一個響應(yīng)頭集合
響應(yīng)主體
指定請求調(diào)用open方法
第一個參數(shù)指定HTTP方法或者動作,第二個參數(shù)指定請求的URL
var request= new XMLHttpRequest(); var request.open("GET","data.csv");
添加頭部
var request.setRequestHeader("Conten-Type","text/plain") //設(shè)置頭部
以下頭部不能自己設(shè)置:
發(fā)送請求
request.send(null); // send參數(shù)為請求主體取得響應(yīng)
status和statusText以數(shù)字和文本形式返回HTTP狀態(tài)碼
getResponseHeader()和getAllResponseHeaders()查詢響應(yīng)頭
responseText中獲取文本形式的響應(yīng)主體,responseXML中獲取Document形式的響應(yīng)主體
readyState屬性標識響應(yīng)狀態(tài):
readystatechange綁定事件處理程序,readyState改變均會觸發(fā)此事件,也可以使用addEventListener
open的第三個參數(shù)傳false,將使用同步響應(yīng),此時不需要事件處理程序
響應(yīng)編碼request.overrideMimeType("text/plain;charset=utf-8")
HTTP進度事件調(diào)用send時觸發(fā)loadstart()
加載服務(wù)器響應(yīng)時,觸發(fā)progress
超時觸發(fā)timeout()
中止觸發(fā)abort()
錯誤觸發(fā)error()
progress常用屬性:
loaded:目前傳輸?shù)淖止?jié)數(shù)
total:整體字節(jié)長度
中止請求和超時abort()
跨域HTTP請求CORS:跨域資源共享
借助發(fā)送HTTP請求:JSONP// 指定回調(diào)函數(shù)名稱 url?jsonp=xxx url?callback=xxx客戶端存儲
形式:
web存儲:localStrorage、sessionStrorage
cookie:針對服務(wù)端腳本設(shè)計,每一次HTTP請求都會傳輸?shù)椒?wù)端
離線Web應(yīng)用
web數(shù)據(jù)庫
文件系統(tǒng)API
localStrorage和sessionStrorage區(qū)別:
localStrorage永久性,作用域限定在文檔源級別
sessionStrorage有效期僅在在本次會話中,作用域限定在文檔源級別,且僅限在本標簽頁
設(shè)置localStrorage.key=value
localStrorage.setItem(key,value)
獲取localStrorage.key
localStrorage.getItem(key)
刪除delete localStrorage.key (IE8不支持)
localStrorage.removeItem(key)
localStrorage.clear()
監(jiān)聽改變使用addEventListener
事件對象:
key clear()時為null
newValue removeItem()時為null
oldValue 新增時為null
storageArea localStorage或sessionStrorage對象
url 觸發(fā)所在文檔的url
cookienavigator.cookieEnabled檢測cookie是否可用(啟用)
有效期為本次會話期間,默認有效期為直到瀏覽器關(guān)閉,如果要延長可以設(shè)置max-age,單位秒
作用域默認對本頁面、本頁面同目錄和子目錄可見,不過可以設(shè)置其domain和path
設(shè)置cookiedocument.cookie="key=encodeURIComponent(value);max-age=seconds"
獲取cookiedocument.cookie,可以使用decodeURIComponent解析
限制瀏覽器最大300
每個web服務(wù)器20
保存數(shù)據(jù)最大4k
應(yīng)用程序存儲和離線web應(yīng)用??? 21.多媒體和圖形編程 腳本化圖片new Image() // 可以使用此方式提前強制緩存圖片腳本化音頻和視頻
new Audio("src/demo.wav") // 音頻構(gòu)造函數(shù),和選取標簽得到的對象一樣類型選擇和加載
使用canPlayType(MIME類型)測試一個媒體元素是否能播放指定類型的媒體文件
let a=new Audio(); a.canPlayType("audio/wav")
使用lode()方法加載source標簽指定的媒體源
控制媒體播放play()
pause()
設(shè)置currentTime定點播放
volumn表示音量,介于0~1
muted靜音模式
playbackRate:播放速度,默認1.0,負值表示回放
controls播放控件
loop循環(huán)播放
preload預(yù)加載,none不預(yù)加載,metadata預(yù)加載元數(shù)據(jù),auto
autoplay
查詢媒體狀態(tài)paused
seeking 進度跳轉(zhuǎn)中
ended 播放完,loop為true時永不為true
duration媒體時長,載入前為NAN
initialTime開始時間
played已播放的時間段
buffered已緩沖的時間段
seekable需要跳到的時間段
readyState
networkState
error
媒體相關(guān)事件大部分的畫布繪制API都不是在canvas元素上定義,而是定義在一個繪制上下文對象上。
getContext() 用來獲取上下文對象,傳入"2d"參數(shù)會獲得CanvasRenderingContext2D對象,傳入"webgl"可以獲得3D圖形的上下文。
繪制線段和填充多邊形
c.beginPath() //開始一條新路徑 c.moveTo(100,100) //從(100,100)開始定義一條新的子路徑 c.lineTo(200,200) //從(100,100)到(200,200)繪制一條線段 c.fill() // 填充區(qū)域 c.stroke() // 勾勒線段 c.closePath() // 關(guān)閉路徑,即將終點和起點連接起來
save()將當前圖形狀態(tài)壓入用于保存狀態(tài)的棧上
restore() 從棧中彈出并恢復(fù)最近一次保存的狀態(tài)
畫布的尺寸和坐標尺寸:canvas元素的width和height屬性和畫布對象的寬度高度決定畫布的尺寸
坐標:畫布左上角為原點
坐標系轉(zhuǎn)換當前變換矩陣:定義畫布的當前坐標系
繪制和填充曲線 矩形fillRect()
stokeRect()
clearRect()
rect()
顏色、透明度、漸變以及圖案strokeStyle、fillStyle
globalAlpha
利用createPattern()方法填充圖案
var image = document.getElementById("myimage") c.fillStyle=c.createPattern(image,"repeat") // 第一個參數(shù)指定填充的圖案,可以是img元素(包括通過Image構(gòu)造函數(shù)創(chuàng)建)、canvas元素、video元素;第二個參數(shù)定義平鋪方式
利用CanvasGradient對象創(chuàng)建漸變
線段繪制相關(guān)的屬性lineWidth:默認為1,任意正數(shù),小于1的小數(shù)時繪制半透明
lineCap:封頂
lineJoin
文本fillText()/strokeText():
第一個參數(shù)為文本內(nèi)容
第二個和第三個參數(shù)分別為繪制X、Y坐標
textAlign/textBaseline
第四個參數(shù)指定顯示寬度,如果文本溢出則會縮放畫布或者采用更窄更小的字體
在繪制前可以通過measureText()度量文本寬度
裁剪clip()
陰影shadowColor:顏色
shadowOffsetX、shadowOffsetY偏移量
shadowBlur模糊度
圖片drawImage():
第一個參數(shù)為圖片源,可以是img元素(包括通過Image構(gòu)造函數(shù)創(chuàng)建)、canvas元素、video元素
第二個和第三個參數(shù)分別為繪制X、Y坐標
如果傳遞5個參數(shù),剩余兩個指定寬高
如果傳遞9個參數(shù),2~5參數(shù)指定源矩形區(qū)域,6~9指定目標矩形區(qū)域
toDataURL(),畫布元素自身的方法,提取成一張圖片,同源限制
第一個參數(shù)指定MIME類型,默認png
合成isPointInPath() 指定點是否在路徑上
getImageData() 檢測指定點是否已繪制
HTML5 API 地理位置navigator.geolocation
navigator.geolocation.getCurrentPosition() // 獲取當前位置,異步 navigator.geolocation.wathcPosition() // 獲取并監(jiān)聽當前位置,改變觸發(fā)回調(diào),異步 navigator.geolocation.clearWatch() //停止監(jiān)聽歷史記錄管理
location.hash、hashchange
history.pushState()、popstate、history.replaceState()
跨域消息傳遞postMessage(data數(shù)據(jù),url目標窗口源),觸發(fā)目標窗口window.onmessage,事件對象屬性:
data:內(nèi)容
source:消息來源window
origin:消息來源url
Web Worker Worker對象let worke= new Worker("./worker.js") // 創(chuàng)建worker實例 // 如果地址是絕對地址,那么受同源策略限制 worke.postMessage(data) // 將數(shù)據(jù)傳遞(結(jié)構(gòu)性復(fù)制)給worker // 在worker對象中接受消息 worke.onmessage=function(e){ let data=e.data } // 捕捉錯誤 worke.onerror=function(e){ console.log(e.filename) console.log(e.lineno) } // 也可以使用addEventListener和removeEventListener代替以上方法 worke.terminate() // 使用完關(guān)閉進程worker作用域
創(chuàng)建的worker在一個全新的運行環(huán)境中,即WorkerGlobalScope全局對象,該對象有如下屬性和方法:
onmessage=fn(e) 接受外部傳來的數(shù)據(jù)
postMessage(data) 發(fā)送消息出去
close() 關(guān)閉當前worker
importScript(url1,url2...) 加載庫代碼 同步
self 自身引用
計時器相關(guān)
location
navigator
常用的事件目標方法,addEventLisitener、removeEventListener
onerror
類型化數(shù)組和ArrayBuffer類數(shù)組對象,和常規(guī)數(shù)組區(qū)別:
類型化數(shù)組元素均為數(shù)字,在創(chuàng)建時就決定了數(shù)組中數(shù)字的類型和大?。▎挝唬何唬?/p>
類型化數(shù)組有固定長度
在創(chuàng)建類型化數(shù)組時,數(shù)組中元素總是默認為0
一共有8種:
方法:
set() 將一個常規(guī)或者類型化數(shù)組復(fù)制到另外一個類型化數(shù)組中
let bytes=new Uint8Array(1024) let pattern=new Uint8Array([0,1,2,3]) bytes.set(pattern) bytes.set(pattern,4) // 4為偏移量 bytes.set([0,1,2,3],8)
subarray(start,end) 返回部分內(nèi)容
DataView定義了8個set和get方法
Blob是對大數(shù)據(jù)塊的不透明引用或者句柄。表示二進制大對象
let blob= new BlobBuilder() blob.append("data") blob.size //字節(jié)大小 blob.type // MIME類型 blob.slice(0,1024,"text/plain")讀取blob
利用FileReader對象
文件系統(tǒng)APIlet fs = requestFileSystemSync(PERSISTENT,1024*1024) requestFileSystemSync(TEMPORARY,// 有效期 50*1024*1024,// 大小:50MB function(fs){//fs為該文件系統(tǒng)對象 },function(err){ })客戶端數(shù)據(jù)庫
webSQL 棄用
indexedDB 對象數(shù)據(jù)庫
let indexedDB=window.indexedDB let request=indexedDB.open("dbName") request.onerror=function(err){} request.onsuccess=function(){ let db=request.result }web套接字
let socket=new WebSocket(url) // ws://或者wss://協(xié)議 socket.onopen=function(e){} socket.onclose=function(e){} socket.onerror=function(e){} socket.onmessage=function(e){} socket.send("hello") socket.close()
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/100894.html
摘要:原文第一章主要介紹的大概情況基本語法。通過和來引用對象屬性或數(shù)組元素的值就構(gòu)成一個表達式。 原文:https://keelii.github.io/2016/06/16/javascript-definitive-guide-note-0/ 第一章 主要介紹 JavaScript 的大概情況、基本語法。之前沒有 JavaScript 基礎(chǔ)的看不懂也沒關(guān)系,后續(xù)章節(jié)會有進一步的詳細說明...
摘要:分號只有缺少分號無法正確解析代碼的時候會自動添加分號但例外,如果這三個關(guān)鍵字緊接著換行,會自動填補分號和例外,會自動作為下一行代碼的前綴操作符 分號 只有缺少分號無法正確解析代碼的時候會自動添加分號 var a a = 3 => var a; a = 3; var y = x + f (a + b).toString() => var y = x + f(a + b).toStrin...
摘要:如果沒有找到找到符合條件的文檔,就會以這個條件和更新文檔為基礎(chǔ)新建一個新的文檔。使用它可以快速方便的對文檔進行更新。更新多個文檔默認情況下,文檔的更新只針對第一個匹配到的文檔,多個條件符合時,其它文檔不會改變。 what is MongoDB ? 面向文檔的數(shù)據(jù)庫 不再有行的概念,不再有預(yù)定義模式 易于拓展 豐富的功能 索引 聚合 特殊的集合類型 文件存儲 高性能 可以一個示...
摘要:如果沒有找到找到符合條件的文檔,就會以這個條件和更新文檔為基礎(chǔ)新建一個新的文檔。使用它可以快速方便的對文檔進行更新。更新多個文檔默認情況下,文檔的更新只針對第一個匹配到的文檔,多個條件符合時,其它文檔不會改變。 what is MongoDB ? 面向文檔的數(shù)據(jù)庫 不再有行的概念,不再有預(yù)定義模式 易于拓展 豐富的功能 索引 聚合 特殊的集合類型 文件存儲 高性能 可以一個示...
閱讀 2532·2021-09-24 10:29
閱讀 3817·2021-09-22 15:46
閱讀 2584·2021-09-04 16:41
閱讀 2990·2019-08-30 15:53
閱讀 1271·2019-08-30 14:24
閱讀 3064·2019-08-30 13:19
閱讀 2181·2019-08-29 14:17
閱讀 3532·2019-08-29 12:55