window window對象不但充當全局作用域,而且表示瀏覽器視窗。 window對象有innerWidth和innerHeight屬性,可以獲取瀏覽器視窗的內部寬度和高度。內部寬高是指除去菜單欄、工具欄、邊框等占位元素後,用於顯示網頁的凈寬高。還有一個outerWidth和outerHeight ...
window
window
對象不但充當全局作用域,而且表示瀏覽器視窗。
window
對象有innerWidth
和innerHeight
屬性,可以獲取瀏覽器視窗的內部寬度和高度。內部寬高是指除去菜單欄、工具欄、邊框等占位元素後,用於顯示網頁的凈寬高。還有一個outerWidth
和outerHeight
屬性,可以獲取瀏覽器視窗的整個寬高。
補充:
網頁可見區域寬:document.body.clientWidth 網頁可見區域高:document.body.clientHeight 網頁可見區域寬:document.body.offsetWidth (包括邊線和滾動條的寬) 網頁可見區域高:document.body.offsetHeight (包括邊線的寬) 網頁正文全文寬:document.body.scrollWidth 網頁正文全文高:document.body.scrollHeight 網頁被捲去的高:document.body.scrollTop 或者 jQuery(document).scrollTop() 網頁被捲去的左:document.body.scrollLeft 網頁正文部分上:window.screenTop 網頁正文部分左:window.screenLeft 屏幕解析度的高:window.screen.height 屏幕解析度的寬:window.screen.width 屏幕可用工作區高度:window.screen.availHeight 屏幕可用工作區寬度:window.screen.availWidth 屏幕彩色位數: window.screen.colorDepth 屏幕像素/英寸比例: window.screen.deviceXDPI 瀏覽器視窗的高度: $(window).height() 瀏覽器視窗的寬度: $(window).width()View Code
特殊1: document.body.scrollTop總為0的解決方法 var scrollPos; if (typeof window.pageYOffset != 'undefined') { scrollPos = window.pageYOffset; } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { scrollPos = document.documentElement.scrollTop; } else if (typeof document.body != 'undefined') { scrollPos = document.body.scrollTop; } alert(scrollPos ); 特殊2: 網頁正文全文寬:"+ document.body.scrollWidth; 網頁正文全文高:"+ document.body.scrollHeight; 以上函數有時獲取不了,就用以下方法。 var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { //Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; }View Code
navigator
navigator
對象表示瀏覽器的信息,最常用的屬性包括:
-
navigator.appName:瀏覽器名稱;
-
navigator.appVersion:瀏覽器版本;
-
navigator.language:瀏覽器設置的語言;
-
navigator.platform:操作系統類型;
-
navigator.userAgent:瀏覽器設定的
User-Agent
字元串。
初學者為了針對不同瀏覽器編寫不同的代碼,喜歡用if
判斷瀏覽器版本,例如:
var width; if (getIEVersion(navigator.userAgent) < 9) { width = document.body.clientWidth; } else { width = window.innerWidth; }
但這樣既可能判斷不准確,也很難維護代碼。正確的方法是充分利用JavaScript對不存在屬性返回undefined
的特性,直接用短路運算符||
計算:
var width = window.innerWidth || document.body.clientWidth;
screen
screen
對象表示屏幕的信息,常用的屬性有:
-
screen.width:屏幕寬度,以像素為單位;
-
screen.height:屏幕高度,以像素為單位;
-
screen.colorDepth:返回顏色位數,如8、16、24。
location
location
對象表示當前頁面的URL信息。例如,一個完整的URL:
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
可以用location.href
獲取。要獲得URL各個部分的值,可以這麼寫:
location.protocol; // 'http' location.host; // 'www.example.com' location.port; // '8080' location.pathname; // '/path/index.html' location.search; // '?a=1&b=2' location.hash; // 'TOP'
要載入一個新頁面,可以調用location.assign()
。如果要重新載入當前頁面,調用location.reload()
方法非常方便。
document
document
對象表示當前頁面。由於HTML在瀏覽器中以DOM形式表示為樹形結構,document
對象就是整個DOM樹的根節點。
document
的title
屬性是從HTML文檔中的<title>xxx</title>
讀取的,但是可以動態改變:
document
對象還有一個cookie
屬性,可以獲取當前頁面的Cookie。
Cookie是由伺服器發送的key-value標示符。因為HTTP協議是無狀態的,但是伺服器要區分到底是哪個用戶發過來的請求,就可以用Cookie來區分。當一個用戶成功登錄後,伺服器發送一個Cookie給瀏覽器,例如user=ABC123XYZ(加密的字元串)...
,此後,瀏覽器訪問該網站時,會在請求頭附上這個Cookie,伺服器根據Cookie即可區分出用戶。
Cookie還可以存儲網站的一些設置,例如,頁面顯示的語言等等。
JavaScript可以通過document.cookie
讀取到當前頁面的Cookie:
document.cookie; // 'v=123; remember=true; prefer=zh'
由於JavaScript能讀取到頁面的Cookie,而用戶的登錄信息通常也存在Cookie中,這就造成了巨大的安全隱患,這是因為在HTML頁面中引入第三方的JavaScript代碼是允許的:
<!-- 當前頁面在wwwexample.com --> <html> <head> <script src="http://www.foo.com/jquery.js"></script> </head> </html>
如果引入的第三方的JavaScript中存在惡意代碼,則www.foo.com
網站將直接獲取到www.example.com
網站的用戶登錄信息。
為瞭解決這個問題,伺服器在設置Cookie時可以使用httpOnly
,設定了httpOnly
的Cookie將不能被JavaScript讀取。這個行為由瀏覽器實現,主流瀏覽器均支持httpOnly
選項,為了確保全全,伺服器端在設置Cookie時,應該始終堅持使用httpOnly
。
document.write() 僅僅向文檔輸出新內容
如果在文檔已完成載入後執行 document.write,整個 HTML 頁面將被覆蓋:
參考:http://www.w3school.com.cn/tiy/t.asp?f=js_write_over
DOM | Document
// 返回ID為'test'的節點: var test = document.getElementById('test'); // 獲取節點test下的所有直屬子節點: var cs = test.children; var first = test.firstElementChild;
第二種方法是使用querySelector()
和querySelectorAll()
,需要瞭解selector語法,然後使用條件來獲取節點,更加方便:
// 通過querySelector獲取ID為q1的節點: var q1 = document.querySelector('#q1'); // 通過querySelectorAll獲取q1節點內的符合條件的所有節點: var ps = q1.querySelectorAll('div.highlighted > p');
嚴格地講,我們這裡的DOM節點是指Element
,但是DOM節點實際上是Node
,在HTML中,Node
包括Element
、Comment
、CDATA_SECTION
等很多種,以及根節點Document
類型,但是,絕大多數時候我們只關心Element
,也就是實際控制頁面結構的Node
,其他類型的Node
忽略即可。根節點Document
已經自動綁定為全局變數document
。
修改Dom
修改CSS也是經常需要的操作。DOM節點的style
屬性對應所有的CSS,可以直接獲取或設置。因為CSS允許font-size
這樣的名稱,但它並非JavaScript有效的屬性名,所以需要在JavaScript中改寫為駝峰式命名fontSize
:
// 獲取<p id="p-id">...</p>var p = document.getElementById('p-id'); // 設置CSS: p.style.color = '#ff0000'; p.style.fontSize = '20px'; p.style.paddingTop = '2em';
插入DOM
有兩個辦法可以插入新的節點。一個是使用appendChild
,把一個子節點添加到父節點的最後一個子節點。例如:
<!-- HTML結構 --> <p id="js">JavaScript</p> <div id="list"> <p id="scheme">Scheme</p> </div>
把<p id="js">JavaScript</p>
添加到<div id="list">
的最後一項:
var js = document.getElementById('js'), list = document.getElementById('list'); list.appendChild(js);
現在,HTML結構變成了這樣:
<!-- HTML結構 --><div id="list"> <p id="scheme">Scheme</p> <p id="js">JavaScript</p>
</div>
因為我們插入的js
節點已經存在於當前的文檔樹,因此這個節點首先會從原先的位置刪除,再插入到新的位置。
更多的時候我們會從零創建一個新的節點,然後插入到指定位置:
haskell = document.createElement('p');
動態創建一個節點然後添加到DOM樹中,可以實現很多功能。舉個例子,下麵的代碼動態創建了一個<style>
節點,然後把它添加到<head>
節點的末尾,這樣就動態地給文檔添加了新的CSS定義:
var d = document.createElement('style'); d.setAttribute('type', 'text/css'); d.innerHTML = 'p { color: red }'; document.getElementsByTagName('head')[0].appendChild(d);
insertBefore
如果我們要把子節點插入到指定的位置怎麼辦?可以使用parentElement.insertBefore(newElement, referenceElement);
,子節點會插入到referenceElement
之前。
很多時候,需要迴圈一個父節點的所有子節點,可以通過迭代children
屬性實現:
var i, c, list = document.getElementById('list'); for (i = 0; i < list.children.length; i++) { c = list.children[i]; // 拿到第i個子節點 }
刪除DOM
要刪除一個節點,首先要獲得該節點本身以及它的父節點,然後,調用父節點的removeChild
把自己刪掉:
// 拿到待刪除節點: var self = document.getElementById('to-be-removed'); // 拿到父節點: var parent = self.parentElement; // 刪除: var removed = parent.removeChild(self); removed === self; // true
註意到刪除後的節點雖然不在文檔樹中了,但其實它還在記憶體中,可以隨時再次被添加到別的位置。
當你遍歷一個父節點的子節點併進行刪除操作時,要註意,children
屬性是一個只讀屬性,並且它在子節點變化時會實時更新。因此,刪除多個節點時,要註意children
屬性時刻都在變化。
操作表單
用JavaScript操作表單和操作DOM是類似的,因為表單本身也是DOM樹。
不過表單的輸入框、下拉框等可以接收用戶輸入,所以用JavaScript來操作表單,可以獲得用戶輸入的內容,或者對一個輸入框設置新的內容。
HTML表單的輸入控制項主要有以下幾種:
-
文本框,對應的
<input type="text">
,用於輸入文本; -
口令框,對應的
<input type="password">
,用於輸入口令; -
單選框,對應的
<input type="radio">
,用於選擇一項; -
覆選框,對應的
<input type="checkbox">
,用於選擇多項; -
下拉框,對應的
<select>
,用於選擇一項; -
隱藏文本,對應的
<input type="hidden">
,用戶不可見,但表單提交時會把隱藏文本發送到伺服器。
獲取值
如果我們獲得了一個<input>
節點的引用,就可以直接調用value
獲得對應的用戶輸入值:
// <input type="text" id="email"> var input = document.getElementById('email'); input.value; // '用戶輸入的值'
這種方式可以應用於text
、password
、hidden
以及select
。但是,對於單選框和覆選框,value
屬性返回的永遠是HTML預設的值,而我們需要獲得的實際是用戶是否“勾上了”選項,所以應該用checked
判斷:
// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label> // <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label> var mon = document.getElementById('monday'); var tue = document.getElementById('tuesday'); mon.value; // '1' tue.value; // '2' mon.checked; // true或者false tue.checked; // true或者false
設置值
設置值和獲取值類似,對於text
、password
、hidden
以及select
,直接設置value
就可以:
// <input type="text" id="email">var input = document.getElementById('email'); input.value = '[email protected]'; // 文本框的內容已更新
對於單選框和覆選框,設置checked
為true
或false
即可。
HTML5控制項
HTML5新增了大量標準控制項,常用的包括date
、datetime
、datetime-local
、color
等,它們都使用<input>
標簽:
<input type="date" value="2015-07-01">
<input type="datetime-local" value="2015-07-01T02:03:04">
<input type="color" value="#ff0000">
不支持HTML5的瀏覽器無法識別新的控制項,會把它們當做type="text"
來顯示。支持HTML5的瀏覽器將獲得格式化的字元串。例如,type="date"
類型的input
的value
將保證是一個有效的YYYY-MM-DD
格式的日期,或者空字元串。
提交表單
最後,JavaScript可以以兩種方式來處理表單的提交(AJAX方式在後面章節介紹)。
方式一是通過<form>
元素的submit()
方法提交一個表單,例如,響應一個<button>
的click
事件,在JavaScript代碼中提交表單:
<form id="test-form"> <input type="text" name="test"> <button type="button" onclick="doSubmitForm()">Submit</button></form> <script> function doSubmitForm() { var form = document.getElementById('test-form'); // 可以在此修改form的input... // 提交form: form.submit(); }</script>
這種方式的缺點是擾亂了瀏覽器對form的正常提交。瀏覽器預設點擊<button type="submit">
時提交表單,或者用戶在最後一個輸入框按回車鍵。因此,第二種方式是響應<form>
本身的onsubmit
事件,在提交form時作修改:
<form id="test-form" onsubmit="return checkForm()"> <input type="text" name="test"> <button type="submit">Submit</button></form> <script>
function checkForm() { var form = document.getElementById('test-form'); // 可以在此修改form的input... // 繼續下一步: return true; }
</script>
註意要return true
來告訴瀏覽器繼續提交,如果return false
,瀏覽器將不會繼續提交form,這種情況通常對應用戶輸入有誤,提示用戶錯誤信息後終止提交form。
在檢查和修改<input>
時,要充分利用<input type="hidden">
來傳遞數據。
例如,很多登錄表單希望用戶輸入用戶名和口令,但是,安全考慮,提交表單時不傳輸明文口令,而是口令的MD5。普通JavaScript開發人員會直接修改<input>
:
<form id="login-form" method="post" onsubmit="return checkForm()"> <input type="text" id="username" name="username"> <input type="password" id="password" name="password"> <button type="submit">Submit</button></form> <script> function checkForm() { var pwd = document.getElementById('password'); // 把用戶輸入的明文變為MD5: pwd.value = toMD5(pwd.value); // 繼續下一步: return true; }</script>
這個做法看上去沒啥問題,但用戶輸入了口令提交時,口令框的顯示會突然從幾個*
變成32個*
(因為MD5有32個字元)。
要想不改變用戶的輸入,可以利用<input type="hidden">
實現:
<form id="login-form" method="post" onsubmit="return checkForm()"> <input type="text" id="username" name="username"> <input type="password" id="input-password"> <input type="hidden" id="md5-password" name="password"> <button type="submit">Submit</button></form> <script> function checkForm() { var input_pwd = document.getElementById('input-password'); var md5_pwd = document.getElementById('md5-password'); // 把用戶輸入的明文變為MD5: md5_pwd.value = toMD5(input_pwd.value); // 繼續下一步: return true; }</script>
註意到id
為md5-password
的<input>
標記了name="password"
,而用戶輸入的id
為input-password
的<input>
沒有name
屬性。沒有name
屬性的<input>
的數據不會被提交。
操作文件
在HTML表單中,可以上傳文件的唯一控制項就是<input type="file">
。
註意:當一個表單包含<input type="file">
時,表單的enctype
必須指定為multipart/form-data
,method
必須指定為post
,瀏覽器才能正確編碼並以multipart/form-data
格式發送表單的數據。
出於安全考慮,瀏覽器只允許用戶點擊<input type="file">
來選擇本地文件,用JavaScript對<input type="file">
的value
賦值是沒有任何效果的。當用戶選擇了上傳某個文件後,JavaScript也無法獲得該文件的真實路徑:
通常,上傳的文件都由後臺伺服器處理,JavaScript可以在提交表單時對文件擴展名做檢查,以便防止用戶上傳無效格式的文件:
var f = document.getElementById('test-file-upload'); var filename = f.value; // 'C:\fakepath\test.png' if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) { alert('Can only upload image file.'); return false; }
File API
由於JavaScript對用戶上傳的文件操作非常有限,尤其是無法讀取文件內容,使得很多需要操作文件的網頁不得不用Flash這樣的第三方插件來實現。
隨著HTML5的普及,新增的File API允許JavaScript讀取文件內容,獲得更多的文件信息。
HTML5的File API提供了File
和FileReader
兩個主要對象,可以獲得文件信息並讀取文件。
下麵的例子演示瞭如何讀取用戶選取的圖片文件,併在一個<div>
中預覽圖像:
var fileInput = document.getElementById('test-image-file'), info = document.getElementById('test-file-info'), preview = document.getElementById('test-image-preview'); // 監聽change事件: fileInput.addEventListener('change', function () { // 清除背景圖片: preview.style.backgroundImage = ''; // 檢查文件是否選擇: if (!fileInput.value) { info.innerHTML = '沒有選擇文件'; return; } // 獲取File引用: var file = fileInput.files[0]; // 獲取File信息: info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' + file.lastModifiedDate; if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') { alert('不是有效的圖片文件!'); return; } // 讀取文件: var reader = new FileReader(); reader.onload = function(e) { var data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...' preview.style.backgroundImage = 'url(' + data + ')'; }; // 以DataURL的形式讀取文件: reader.readAsDataURL(file); });
上面的代碼演示瞭如何通過HTML5的File API讀取文件內容。以DataURL的形式讀取到的文件是一個字元串,類似於data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...
,常用於設置圖像。如果需要伺服器端處理,把字元串base64
後的字元發送給伺服器並用Base64解碼就可以得到原始文件的二進位內容。
回調
上面的代碼還演示了JavaScript的一個重要的特性就是單線程執行模式。在JavaScript中,瀏覽器的JavaScript執行引擎在執行JavaScript代碼時,總是以單線程模式執行,也就是說,任何時候,JavaScript代碼都不可能同時有多於1個線程在執行。
你可能會問,單線程模式執行的JavaScript,如何處理多任務?
在JavaScript中,執行多任務實際上都是非同步調用,比如上面的代碼:
reader.readAsDataURL(file);
就會發起一個非同步操作來讀取文件內容。因為是非同步操作,所以我們在JavaScript代碼中就不知道什麼時候操作結束,因此需要先設置一個回調函數:
reader.onload = function(e) { // 當文件讀取完成後,自動調用此函數: };
當文件讀取完成後,JavaScript引擎將自動調用我們設置的回調函數。執行回調函數時,文件已經讀取完畢,所以我們可以在回調函數內部安全地獲得文件內容。