936      阿裏雲  技術社區[雲棲]

JavaScript核心參考教程--客戶端JavaScript

博學，切問，近思--詹子知 (https://jameszhan.github.io)

上一章，我們分析了JavaScript內置對象的屬性和方法，這一章，我們要開始學習瀏覽器相關對象和組件的使用，盡管JavaScript可以運行在不同的腳本執行引擎當中，在服務器端，ASP後台程序就可以使用JScript來編寫。當然最廣泛的還是JavaScript在客戶端的應用。JavaScript除了可以訪問本身內置的各種對象外，還可以訪問瀏覽器提供的對象，通過對這些對象的訪問，可以得到當前網頁以及瀏覽器本身的一些信息，並能完成有關的操作。
瀏覽器窗口與網頁文檔之間，網頁文檔與文檔元素之間是一種從屬關係，他們關係如下：

瀏覽器的主要有以下對象：

Windows 對象。
Event 對象。
XMLHTTPRequest 對象。
Document 對象。
Screen 對象。
Navigator 對象。
Location 對象。
HTML標記通用屬性。
Form 對象。
Input 對象。
Option 對象。
Image 對象。
Link 對象。
Anchor 對象。

這裏我們主要對Window，Event，XMLHTTPRequest，Document，Screen，Navigator等主要對象進行介紹，其他的如Form，Input，Image，Option等對象，我們這裏僅列出其屬性和方法，不做過多介紹，因為它們的那些屬性在HTML標記中都有說明。

1. Window 對象

   Window 對象是瀏覽器腳本執行引擎的全局對象，它的屬性和方法眾多，我們先看一下它的方法和屬性列表，不要被它嚇到，其實常用的也就那麼幾個，後麵我會專門有介紹，對於一些不太常用，需要的時侯可以回頭來再看這個表。
   

   closed	一個隻讀的布爾值,聲明了窗口是否已經關閉。
   defaultStatus	一個可讀可寫的字符串,聲明了顯示在狀態欄中的默認消息。
   document	對描述窗口和框架中含有的文檔的Document對象的隻讀引用。
   frames	Window對象的數組,每個Window對象在窗口中含有一個框架。
   history	對窗口或框架的History對象的隻讀引用。
   length	窗口或框架包含的框架個數,也是數組frames[]中的元素數。
   location	用於窗口或框架的Location對象。
   Math	對一個對象的引用,該對象含有各種算術函數和常量。
   name	一個字符串,存放了窗口的名字。
   navigator	對Navigator對象的隻讀引用,提供Web瀏覽器的版本信息和配置信息。
   opener	一個可讀可寫的屬性,是對一個Window對象的引用,該對象含有調用open()方法的腳本以打開頂級瀏覽器窗口的腳本, 隻有表示頂層窗口的Window對象的opener屬性才有效,表示框架的Window對象的opener屬性無效。
   parent	對一個Window對象的隻讀引用,這個Window對象包含當前的窗口或框架。
   screen	一個Screen對象,由瀏覽器中所有窗口共享。
   self	對窗口自身的隻讀引用,等價於window屬性。
   status	一個可讀可寫的字符串,聲明了瀏覽器狀態欄中的當前內容。
   top	對一個頂級窗口的隻讀引用,頂級窗口包含了這個窗口。
   window	window對象等價於self屬性,它包含了對窗口自身的引用。
   innerHeight,innerWidth	可讀可寫的屬性,聲明了窗口的文檔顯示區高度和寬度,以象素計, NS 支持。
   outerHeight,outerWidth	可讀可寫的屬性,聲明了整個窗口的高度和寬度,以象素計, Firefox, NS 支持。
   pageXOffset,pageYOffset	隻讀的整數,聲明了當前文檔向右和向下滾動過的象素數, Firefox, NS 支持。
   screenX,screenY	隻讀整數,聲明了窗口左上角在屏幕的X坐標和Y坐標, Firefox, NS 支持。
   clientInformation	IE中與navigator屬性同義，IE支持。
   event	一個Event對象,該對象存放窗口Window中最近發生事件的詳細信息，IE支持。
   alert()	在對話框框中顯示簡單的消息。
   confirm()	用對話框詢問一個回答為是或否的問題。
   prompt()	用對話框請求輸入一個簡單的字符串。
   setInterval()	周期性執行指定的代碼。
   clearInterval()	取消周期性執行的代碼。
   setTimeout()	在經過指定的時間之後執行代碼。
   clearTimeout()	取消掛起超時操作。
   focus()	把鍵盤焦點賦予頂層瀏覽器窗口。
   blur()	把鍵盤焦點從頂層窗口中移走。
   open()	創建並打開一個新窗口。
   close()	關閉窗口。
   moveBy()	把窗口移動一個相對的數量。
   moveTo()	把窗口移動到一個絕對的位置。
   resizeBy()	把窗口大小調整指定的數量。
   resizeTo()	把窗口大小調整到指定的大小。
   scrollBy()	把窗口滾動指定的數量。
   scrollTo()	把窗口滾動到指定的位置。
   scroll()	滾動窗口中顯示的文本。
   print()	模擬對瀏覽器Print按鈕的點擊。
   back()	其行為和用戶點擊了Back按鈕一樣, Firefox，NS支持。
   captureEvents()	指定直接發送給該窗口的事件類型, Firefox，NS支持。
   forward()	其行為和用戶點擊了Forward按鈕一樣, Firefox，NS支持。
   handleEvent()	為給定的Event對象調用合適的事件處理程序, Firefox，NS支持。
   home()	顯示瀏覽器的主頁，Firefox，NS支持。
   releaseEvents()	指定不再捕捉的事件類型, Firefox，NS支持。
   routeEvent()	將Event對象傳遞給下一個對它感興趣的對象的合適的事件處理程序, Firefox，NS支持。
   stop()	模擬對瀏覽器Stop按鈕的點擊, Firefox，NS支持。
   navigate()	裝載並顯示出指定的URL, IE支持。
   onblur	當窗口失去焦點時調用該事件的處理程序。
   onerror	當發生JavaScript錯誤時調用該事件的處理程序。
   onfocus	當窗口獲得焦點時調用該事件的處理程序。
   onload	當文檔(或框架集)被完全裝載進來時調用該事件的處理程序。
   onmove	當移動窗口時調用該事件的處理程序,僅NS支持。
   onresize	當調整窗口大小時調用該事件的處理程序。
   onunload	當瀏覽器離開當前文檔(或框架集)時調用該事件的處理程序。

   最常用要數open方法和close方法了，我們先來看一下open方法的詳細定義：
   
   window.open(url, target, style);
   url：指定需要打開的文件的鏈接。
   target：指定要打開窗口的位置，一般有幾個可選屬性：_blank在新窗口打開頁麵，_self在當前窗口打開頁麵，_top在頂層窗口打開頁麵，另外還可以指定其他已命名的窗口。
   style：指定窗口顯示的風格，因為它的參數眾多，且都是可選的，我們用一個例子來說明它。假設我們指定，說明我們打開的新窗口的風格是：（高度100，寬度400，不顯示工具欄，菜單欄，滾動條，URL欄，狀態欄，並且不可改變大小，左上角在屏幕上的位置是(100，300)）
   返回值：該方法返回對新窗口的引用。這個方法頗受爭議，萬惡的彈出窗口就是它了。
   close 方法就比較簡單，它主要用來關閉指定引用的窗口。
   現在，我們先來看一個例子。 var newWindow; function openWindow(){ newWindow = window.open("", "_blank", "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300"); } function closeWindow(){ if(newWindow){ newWindow.close(); } }openWindowcloseWindow

   如果你想輪詢的執行某任務，比如在AJAX的程序中，輪詢的檢查服務器上的數據更新，或是希望經過指定的時間去執行某個操作，這個時候我們就需要用到setTimeout,setInterval哥倆了。而clearTimeout，clearInterval 專門用來取消它們。

   先來看看setTimeout函數的定義：

   功能：用於在指定的毫秒數後調用函數或計算表達式。
   語法：setTimeout(code,millisec)
   參數：

   • code：在定時時間到時要執行的JavaScript代碼串。
   • millisec：設定的定時時間，用毫秒數表示。
   返回值：定時器的ID值，可用於clearTimeout()方法停止指定的定時器。

    

   注：setTimeout()隻執行code一次。如果要多次調用，可使用setInterval()或者讓code自身再次調用setTimeout()。

    

   setInterval函數的定義如下：

   功能：按照指定的周期（以毫秒計）來調用函數或計算表達式。
   語法：setInterval(code,millisec)
   參數：

   • code：在定時時間到時要執行的JavaScript代碼串。
   • millisec：設定的定時時間，用毫秒數表示。
   返回值：定時器的ID值，可用於clearInterval()方法停止指定的定時器。

    

   注：setInterval()方法會不停地調用函數，直到用clearInterval()終止定時或窗口被關閉。

    

   我們來看一個例子，下麵有兩個個進度條，當點擊startTimeout的時候，第一條進度條的長度會逐漸的增加，當點擊endTimeout的時候，它就會停下來。當點擊startInterval的時候，第二條進度條的長度會逐漸的增加，當點擊endInterval之後，它也會停下來。
    
   startTimeoutendTimeout
   
    
   startIntervalendInterval
   這兩個特效的實現，我們就用到了setInterval和setTimeout。以下是它的實現源碼。 function progress(id){ var bar = document.getElementById(id); var len = parseInt(bar.style.width); if(len > 300){ len = 10; } bar.style.width = len + 1 + 'px'; } var timeoutHandler, intervalHandler; function startTimeout(){ //每執行一次，progressBar1的width加1。 progress('progressBar1'); //100ms 後，調用startTimeout timeoutHandler = window.setTimeout(startTimeout, 100); } function startInterval(){ //每隔100ms，progressBar2的with加1. intervalHandler = window.setInterval("progress('progressBar2')", 100); } function endTimeout(){ clearTimeout(timeoutHandler); } function endInterval(){ clearInterval(intervalHandler); }

    

   moveBy()，moveTo()，resizeBy()，resizeTo()，幾個方法盡管用的不多，但是卻很有意思，它可以控製窗口的大小和位置，我們使用一個例子來看它們的用法： function moveWindow(){ // 打開一個新的空白窗口。 var ow = window.open("", "_blank", "height=300, width=500, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300"); //1秒鍾後，把它向下和向右分別移動100個像素。 setTimeout(function(){ ow.document.writeln("我向下和向右分別移動100個像素<br />"); ow.moveBy(100, 100) }, 1000); //2秒鍾後，把它左上角移到坐標(100, 100)處。 setTimeout(function(){ ow.document.writeln("我左上角的坐標是(100, 100)<br />"); ow.moveTo(100, 100) }, 2000); //3秒鍾後，把它的寬度減少100，高度增加100。 setTimeout(function(){ ow.document.writeln("我的寬度減少了100，高度增加了100。<br />"); ow.resizeBy(-100, 100) }, 3000); //4秒鍾後，把它的寬度和高度設置成300。 setTimeout(function(){ ow.document.writeln("我的寬度和高度和寬度是300。<br />"); ow.resizeTo(300, 300) }, 4000); //5秒鍾後，關閉彈出窗口。 setTimeout(function(){ ow.document.writeln("我要被關閉了。<br />"); ow.document.close(); ow.close(); }, 5000); } moveWindow
   在這個例子中，我們用到了一個還沒學習的方法document.writeln，這個方法在後麵會有介紹，它的主要功能是將一個或多個指定的字符串插入當前正在解析的文檔中或插入由open()方法打開的文檔流中。

   說到這裏，我們不得不提一下瀏覽器中的對話框，它有三種，就是提示框，確認框，和輸入框。使用alert()，confirm()，prompt()函數可以顯示它們，由於它們比較簡單，而篇幅有限，我們就用一個例子來介紹他們。 function showAlert(){ alert('歡迎你光臨我的博客！'); } function showConfirm(){ if(confirm("請確認你的操作")){ alert('你確認了你的操作。'); }else{ alert('你取消了你的操作。'); } } function showPrompt(){ var str = prompt("請你輸入Something！"); alert("你輸入的內容是:" + str); } showAlertshowConfirmshowPrompt

    

   Top

    

2. Event 對象

   事件模型使得瀏覽器能響應用戶的動作，現在的瀏覽器都實現了強壯的事件模型，使腳本可以更加智能地處理事件。遺憾的是，不同瀏覽器的下事件模型是不一致的，對於不同模型下的事件對象擁有的屬性和方法也是不一致的，下麵列出了不同模型下事件的屬性和方法。

   IE事件模型

   altKey, ctrlKey, shiftKey	一個布爾值,指定事件發生時,Alt, Ctrl, Shift鍵是否被按下並保持住了。
   keyCode	對於鍵盤事件,該屬性聲明了被敲擊的鍵生成的Unicode字符碼。
   reason	對於datasetcomplete事件,reason存放數據傳輸事件的狀態碼,0(成功)、1(失敗)、2(錯誤)。
   type	一個字符串,說明了事件的類型。
   returnValue	如果設置了該屬性,它的值比事件處理程序真正的返回值優先級高。
   cancelBubble	如果事件處理程序想阻止事件傳播到包容對象,必須把該屬性設置成true。
   fromElement	對於mouseover和mouseout事件,該屬性引用移出鼠標的元素。
   toElement	對於mouseover和mouseout事件,該屬性引用移入鼠標的元素。
   srcElement	對生成事件的Window對象、Document對象或HTMLDocument對象的引用。
   srcFilter	對於filterchange事件,該屬性聲明改變的過濾器。
   clientX, clientY	聲明了事件發生的位置相對於瀏覽器頁麵的X坐標和Y坐標。
   offsetX, offsetY	發生事件的地點在事件源元素的坐標係統中的X坐標和Y坐標。
   x, y	事件發生的位置的x坐標和y坐標(IE中它們聲明了相對於用CSS動態定位的最內層包容元素的X坐標和Y坐標)。
   screenX, screenY	事件發生的地點相對於屏幕的X坐標和Y坐標。
   button	對於鼠標事件,button事件聲明了被按下的鼠標按鈕或按鈕。

   Firefox, NS事件模型

   type	一個字符串,說明了事件的類型。
   width	隻能由resize的事件設置,聲明了調整過窗口的新高度或框架的新寬度。
   height	隻能由resize的事件設置,聲明了調整過窗口的新高度或框架的新高度。
   which	"對於鍵盤事件和鼠標事件來說,which聲明的是按下或放開的鍵或鼠標按鈕。
   target	對生成事件的Window對象、Document對象、Layer對象或HTMLDocument對象的引用。
   modifiers	聲明了事件發生時按下並保持住的組合鍵,NS6 未定義該屬性。
   layerX, layerY	事件相對於包容圖層的X坐標和Y坐標。
   pageX, pageY	事件發生的位置相對於瀏覽器頁麵的X坐標和Y坐標。
   x, y	事件發生的位置的x坐標和y坐標(在NS4中其等價於layerX和layerY)。
   screenX, screenY	事件發生的地點相對於屏幕的X坐標和Y坐標。

   瀏覽器之間的鬥爭可害苦了我們這些開發者，為了兼容不同的瀏覽器，我們必須加入額外的判斷語句。我們來看幾個例子。
   例子1：得到事件源元素，並得到事件發生的坐標。 function findEventSource(e){ var evt = e.srcElement || e.target; var x = e.pageX || e.x; var y = e.pageY || e.y; alert("事件源: "+ evt.innerText + "/n坐標：(" + x + ", " + y + ")"); } 事件源1事件源2

   我們還可以動態的為元素綁定特定事件處理程序。不過不同的瀏覽器支持的函數又是不一致的。IE下支持attachEvent()方法，而Firefox下支持addEventListener()方法。
   attachEvent("eventType",fun)
   eventType是指事件類型,fun是指調用事件的函數
   addEventListener("eventType",fun,flag)
   addEventListener方法的前兩個參數和attachEvent方法一樣， flag參數則是一個boolean 值，指明該結點是否以DOM中所謂的捕捉模式來偵聽事件。對於一個典型的事件偵聽器來說，第三個參數應該為false（假）。
   
   不僅可以為元素添加指定事件的處理程序，而且還可以為指定事件刪除指定的處理程序。IE下可以使用detachEvent()方法，而Firefox下可以使用removeEventListener()方法。

   例子2：為元素綁定事件處理程序 var eventTestFunction = function(){ alert("事件已經觸發，測試成功。"); } //為button MyEventTestButton 綁定事件處理程序。 function attachEventForTestButton(){ //getElementById 方法可以拿到指定ID 的元素，將在DOM模型中介紹。 var btn = document.getElementById('MyEventTestButton'); if(btn.addEventListener){ btn.addEventListener('click', eventTestFunction, false); }else{ btn.attachEvent('onclick', eventTestFunction); } alert("事件綁定成功。"); } //為button MyEventTestButton 刪除事件處理程序。 function detachEventForTestButton(){ //getElementById 方法可以拿到指定ID 的元素，將在DOM模型中介紹。 var btn = document.getElementById('MyEventTestButton'); if(btn.removeEventListener){ btn.removeEventListener('click', eventTestFunction, false); }else{ btn.detachEvent('onclick', eventTestFunction); } alert("事件綁定取消。"); } 綁定事件取消綁定 測試事件綁定

    

   Top
3. XMLHTTPRequest組件

   XMLHttpRequest對象是當今所有AJAX和Web 2.0應用程序的技術基礎。盡管軟件經銷商和開源社團現在都在提供各種AJAX框架以進一步簡化XMLHttpRequest對象的使用；但是，我們仍然很有必要理解這個對象的詳細工作機製。下表列出了它的所有屬性和方法。

   abort()	停止當前請求。
   getAllResponseHeaders()	把HTTP請求的所有響應首部作為鍵/值對返回。
   getResponseHeader()	格式：getResponseHeader(header),返回指定名稱的HTTP響應頭。
   open()	格式：open(method, url, async)。method指示HTTP請求方式，參數可以是GET,POST或PUT, url指示請求資源的地址，參數可以是相對於URL或絕對值URL，async參數是否建立異步連接，默認為true, 建立對服務器的調用。
   send()	格式：send(content)，向服務器發送請求。
   setRequestHeader()	格式：setRequestHeader(header, value)，把指定首部設置為所提供的值，在設置任何首部之前必須先調用open()。
   onreadystatechange	用於指定狀態改變時的事件處理函數，每個狀態都會觸發這個事件處理器。
   readyState	請求的狀態。有5個可取值：0=未初始化、1=正在加載、2=已加載、3=交互中、4=完成。
   responseText	服務器的響應,表示一個串。
   responseXML	服務器的響應,表示為XML.這個對象可以解析為一個DOM對象。
   status	服務器響應的HTTP狀態碼。
   statusText	HTTP狀態碼的相應文本。

   為了使大家更好的理解它的原理和使用方法，我們跟著例子來學習。
   例1：創建XMLHTTPRequest對象。 // 為了兼容不同的瀏覽器，以下給出了創建XMLHttpRequest對象的方法。 function createXhrObject(){ var _msxml_progid = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'], http; try{ http = new XMLHttpRequest(); }catch(e){ for(var i=0; i<this._msxml_progid.length; ++i){ try { http = new ActiveXObject(this._msxml_progid[i]); break; } catch(ignore){} } } return http; } 例2：從指定的網站上獲取信息。 function getGoogleInfo(){ var xmlHttp = createXhrObject(); var url = "/zhiqiangzhan/archive/2009/10/13/4663506.aspx"; xmlHttp.open('HEAD', url, true); xmlHttp.onreadystatechange = function(){ switch(xmlHttp.readyState){ case 0: alert('未初始化！'); break; case 1: alert('正在加載！'); break; case 2: alert('已加載！'); break; case 3: alert('交互中！'); break; default: var headers = xmlHttp.getAllResponseHeaders(); var str = headers; if(xmlHttp.status == 200){ str += "Response:/n" + xmlHttp.responseText; }else{ str += xmlHttp.status + " " + xmlHttp.statusText; } alert(str); alert('已完成！'); break; } }; xmlHttp.send(null); } 獲取網站信息

   Top
4. Document對象

   Document對象也是最常用的對象之一，下表列出了它的常用屬性和方法，不過此處列出的方法和屬性都不是太常用，下篇我們將介紹DOM（文檔對象模型），到時我們還將介紹document作為文檔對象的另外的屬性和方法，那些方法和屬性可比現在的這些實用的多。

   alinkColor	一個字符串屬性,指定了document中被激活的鏈接的顏色。
   anchors	一個Anchor對象數組,每個元素代表了文檔中的一個錨。
   applets	一個Applet對象數組。
   bgColor	一個字符串,它是與文檔關聯在一起的cookie的值。
   domain	一個字符串,它指定了文檔所屬的Internet域。
   embeds	一個對象數組,每個元素表示一個由<embed>標記嵌入文檔的數據。
   fgColor	一個字符串屬性,指定document文本的默認顏色。
   forms	一個數組,元素是Form對象,每個元素代表出現在document中的一個表單。
   images	一個數組,元素是Image對象,每個元素代表用<img>嵌入文檔的一個圖像。
   lastModified	一個隻讀字符串,聲明了最後一次修改文檔的日期。
   linkColor	一個字符串屬性,指定了文檔中未被訪問過的鏈接的顏色。
   links	一個數組,元素是Link對象,每個元素代表了文檔中出現過的一個超文本鏈接。
   location	一個Location對象,含有當前文檔的完整URL,是Window.location的同義詞，不建議使用。
   plugins	數組embeds[]的同義詞,不推薦使用。
   referrer	一個隻讀字符串,含有鏈接到當前文檔的文檔的URL(如果存在)。
   title	一個隻讀字符串,指定了當前文檔的標題。
   URL	一個隻讀字符串,聲明了文檔的URL。
   vlinkColor	一個字符串屬性,指定了document中已經訪問過的鏈接的顏色。
   activeElement	一個隻讀屬性,引用文檔中當前活動的輸入元素(即具有輸入焦點的元素)，僅IE支持。
   all	一個數組,元素是文檔中包含的所有元素，僅IE支持。
   charset	文檔采用的字符集，僅IE支持。
   children	一個數組,元素是文檔的所有直接子元素,以他們在源代碼中的順序存放，僅IE支持。
   defaultCharset	文檔采用的默認字符集，僅IE支持。
   expando	如果將expando設置成false,可以阻止客戶端對象的擴展，僅IE支持。
   parentWindow	包含文檔的窗口，僅IE支持。
   readyState	文檔裝載的狀態，僅IE支持。它有4個可用的值: uninitialized(還沒有開始裝載文檔) loading(正在裝載文檔) interactive(裝載的文檔已經足夠與用戶進行交互) Complete(文檔已經裝載完畢)
   clear()	擦去文檔的內容,反對使用。
   close()	關閉由open方法打開的文檔流。
   open()	打開一個可供寫入文檔內容的流。
   write()	將一個或多個指定的字符串插入當前正在解析的文檔中或插入由open()方法打開的文檔流中。
   writeln()	與write()方法相似,隻是在輸入的字符串中插入一個換行符。
   captureEvents()	請求指定類型的事件，Firefox支持。
   getSelection()	返回當前選中的文檔文本。
   releaseEvents()	停止捕捉指定類型的事件。
   routeEvent()	根據捕捉到的事件找到下一個與之相關的元素。
   elementFromPoint()	返回位於指定地點(X坐標,Y坐標)的元素，僅是IE。

   上麵我們已經演示了writeln()方法，用於往文檔中寫入字符串，write()方法也類似，下麵我們跟著例子來學習document的部分屬性和方法 function showDemo(){ // 打開一個新的空白窗口。 var ow = window.open("", "_blank", "height=300, width=500, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300"); // 設置標題 setTimeout(function(){ ow.document.write("設置頁麵的標題，同Blog頁麵標題一致。<br />"); ow.document.title = document.title; }, 1000); // 設置字體顏色。 setTimeout(function(){ ow.document.write("設置文檔字體顏色，紅色。<br />"); ow.document.fgColor = '#ff0000'; }, 2000); // 設置背景顏色。 setTimeout(function(){ ow.document.write("設置文檔背景顏色，黑色。<br />"); ow.document.bgColor = '#000000'; }, 3000); // 關閉文檔輸入。 setTimeout(function(){ ow.document.write("關閉文檔輸入。<br />"); ow.document.close(); }, 4000); // 文檔關閉後，再次寫入數據，原來的數據將被清空。 setTimeout(function(){ ow.document.write("文檔關閉後，再次寫入數據，原來的數據將被清空。。<br />"); ow.document.close(); }, 6000); } showDemo

   Top
5. Screen 對象

   Screen 對象提供有關顯示器的信息。常用來判別用戶顯示器的分別率，對象的所有屬性都是隻讀的。

   availHeight, availWidth	聲明了顯示web瀏覽器的屏幕的可用高度和寬度,以象素計。
   availLeft, availTop	聲明了屏幕最左側的X坐標和Y坐標,這個坐標不是分配給暫存特性的空間的坐標。
   colorDepth	聲明了瀏覽器分配的顏色數的以2為底的對數,可用於顯示圖像。
   pixelDepth	聲明顯示瀏覽器屏幕的顏色深度,以每象素的位數計。
   height, width	聲明了顯示web瀏覽器的屏幕的高度和寬度,以象素計。

   以下代碼演示了如何顯示用戶的分辨率 //顯示用戶的分辨率 function showResolution(){ alert("您當前電腦的分辨率是: " + screen.width + "×" + screen.height); } showResolution

    

6. Navigator對象

   使用Navigator對象可以查看用戶正在使用的瀏覽器的信息。

   appCodeName	一個隻讀字符串,聲明了瀏覽器的代碼名。
   appName	一個隻讀字符串,聲明了瀏覽器的名字。
   appVersion	一個隻讀字符串,聲明了瀏覽器的平台和版本信息。
   CookieEnabled	一個隻讀布爾值，指示是否支持Cookie。
   language	一個隻讀字符串,聲明了瀏覽器版本使用的默認語言，Firefox，NS支持。
   mimeTypes	一個MimeType對象的數組,其中每個元素代表瀏覽器支持的一種MIME類型。
   platform	一個隻讀字符串,聲明了運行瀏覽器的操作係統和(或)硬件平台。
   systemLanguage	一個隻讀字符串,聲明了瀏覽器版本使用的默認語言，IE支持。
   userAgent	一個隻讀字符串,聲明了瀏覽器用於HTTP請求的用戶代理頭的值。
   userLanguage	一個隻讀字符串,聲明了用戶想使用的語言，IE支持。
   plugins	一個Plugin對象的數組,其中每個元素代表瀏覽器已經安裝的插件。

   
   function showNavigatorInfo(){ var result = ''; for(var p in navigator){ result += p + ': ' + navigator[p] + '/n'; } alert(result); } 顯示當前瀏覽器的信息
   
   下麵的代碼常用來判別瀏覽器的類型，既可以顯示瀏覽器的型號，還可以顯示瀏覽器的版本。 
   var navigatorDetector = function() { var o = { ie:0, opera:0, gecko:0, webkit: 0, mobile: null, air: 0, caja: 0 }, ua = navigator.userAgent, m; if ((/KHTML/).test(ua)) { o.webkit=1; } m=ua.match(/AppleWebKit//([^/s]*)/); if (m&&m[1]) { o.webkit=parseFloat(m[1]); if (/ Mobile///.test(ua)) { o.mobile = "Apple"; } else { m=ua.match(/NokiaN[^//]*/); if (m) { o.mobile = m[0]; } } m=ua.match(/AdobeAIR//([^/s]*)/); if (m) { o.air = m[0]; } } if (!o.webkit) { m=ua.match(/Opera[/s//]([^/s]*)/); if (m&&m[1]) { o.opera=parseFloat(m[1]); m=ua.match(/Opera Mini[^;]*/); if (m) { o.mobile = m[0]; } } else { // not opera or webkit m=ua.match(/MSIE/s([^;]*)/); if (m&&m[1]) { o.ie=parseFloat(m[1]); } else { m=ua.match(/Gecko//([^/s]*)/); if (m) { o.gecko=1; m=ua.match(/rv:([^/s/)]*)/); if (m&&m[1]) { o.gecko=parseFloat(m[1]); } } } } } m=ua.match(/Caja//([^/s]*)/); if (m&&m[1]) { o.caja=parseFloat(m[1]); } return o; }(); function getNavigatorInfo(){ var str = ''; for(var p in navigatorDetector){ str += p + ': ' + navigatorDetector[p] + '/n'; } alert(str); } 運行代碼
   Top
7. Location 對象

   Location提供了關於當前打開窗口或者特定框架的url信息。
   

   hash	一個可讀可寫的字符串,指定了當前URL中的錨部分,包括前導散列符(#)。
   host	一個可讀可寫的字符串,指定了當前URL中的主機名和端口部分。
   hostname	一個可讀可寫的字符串,指定了當前URL中的主機名部分。
   href	一個可讀可寫的字符串,它聲明了當前顯示文檔的完整URL。
   pathname	一個可讀可寫的字符串,聲明了當前URL中的路徑部分。
   port	一個可讀可寫的字符串,聲明了當前URL中的端口部分。
   protocol	一個可讀可寫的字符串,聲明了當前URL中的協議部分。
   search	一個可讀可寫的字符串,聲明了當前URL中的查詢部分。
   reload()	從緩存或服務器中再次把當前文檔裝載進來。
   replace()	用一個新文檔替換當前文檔,而不用在瀏覽器的會話曆史中生成一個新的記錄。

   顯示Location信息 function showLocationInfo(){ var str = ""; for(var p in location){ str += p + ': ' + location[p] + '/n'; } alert(str); } 顯示Location信息
8. HTML標記通用屬性

   對於每個HTML標記，他們一般具有如下屬性和方法

   all	該元素包含的所有元素的完整列表,以他們出現的順序存放,該屬性的行為與Document.all[]屬性的行為一致,僅IE支持。
   children	一個數組,元素是文檔的所有直接子元素,以他們在源代碼中的順序存放，IE支持。
   className	一個可讀可寫的字符串,聲明了元素的class性質的值。
   document	包含該元素的document對象的引用，僅IE支持。
   id	一個可讀可寫的字符串,聲明了id性質的值。
   innerHTML	一個可讀可寫的字符串,聲明了元素含有的HTML文本,不包括元素自身的開始標記和結束標記。
   innerText	一個可讀可寫的字符串,聲明了元素含有的純文本,不包括元素自身的開始標記和結束標記。
   lang	一個可讀可寫的字符串,聲名了element元素的lang的值。
   offsetHeight	元素和它的內容的高度,僅IE支持。
   offsetLeft	元素element的X坐標,相對於offsetParent指定的包容元素，IE支持。
   offsetParent	定義了聲名坐標係統的包容元素，IE支持。
   offsetTop	元素element的Y坐標,相對於offsetParent指定的包容元素，僅IE支持。
   offsetWidth	元素和它的內容的寬度，僅IE支持。
   outerHTML	一個可讀可寫的字符串,聲明了一個元素的HTML文本,其中包括元素自身的開始標記和結束標記, IE支持。
   outerText	一個可讀可寫的字符串,聲明了一個元素的純文本,其中包括元素自身的開始標記和結束標記, IE支持。
   parentElement	當前元素的直接父元素,該屬性是隻讀的。
   sourceIndex	元素在包容它的Docuement.all[]數組中的下標, IE支持。
   style	元素的內聯CSS樣式性質。
   tagName	一個隻讀字符串,聲明定義element的HTML標記的名字。
   title	一個可讀可寫的字符串,聲明了定義element的HTML標記的title性質值。
   contains()	判斷當前元素是否含有指定的元素。
   getAttribute()	獲取一個命名性質的值。
   handleEvent()	把Event對象傳遞給適當的事件處理程序。
   insertAdjacentHTML()	把HTML文本插入到與當前元素鄰接的文檔中。
   insertAdjacentText()	把純文本插入到與當前元素鄰接的文檔中。
   removeAttribute()	從元素中刪除一個屬性和它的值。
   scrollIntoView()	滾動文檔,使該元素出現在窗口的頂部或底部。
   setAttribute()	設置元素的性質值。
   onclick	當用戶點擊該元素時調用。
   ondbclick	當用戶雙擊該元素時調用。
   onhelp	當用戶請求幫助(F1)時調用,僅在IE中有效)。
   onkeydown	當用戶按下一個鍵時調用。
   onkeypress	當用戶按下一個鍵或放開一個鍵時調用。
   onkeyup	當用戶放開一個鍵時調用。
   onmousedown	當用戶按下一個鼠標按鈕時調用。
   onmousemove	當用戶移動鼠標時調用。
   onmouseout	當用戶把鼠標移開當前元素時調用。
   onmouseover	當用戶把鼠標移過一個元素時調用。
   onmouseup	當用戶放開一個鼠標按鈕時調用。

   Top

    

9. Form 對象

   action	表單的處理頁麵。
   elements	一個數組,元素是表單中的輸入元素。
   encoding	可讀可寫的字符串,提交表單時傳輸數據的編碼形式。
   length	表單中的元素個數,等價於elements.length。
   mothod	一個可讀可寫的字符串,它指定了提交表單數據所采用的方法。
   name	聲名表單的名字,該屬性可讀可寫。
   target	一個可讀可寫的字符串,指定了要顯示提交表單的結果的窗口或框架的名字。
   reset()	把表單的所有元素重置為它們的默認值。
   submit()	提交表單。

   Top
10. Input 對象

    checked	一個可讀可寫的布爾值,聲明了Checkbox元素和Radio元素當前是否被選中。
    defaultChecked	一個隻讀的布爾值,聲明了Checkbox或Radio的初始狀態。
    defaultValue	聲明了在該表單元素中出現的初始文本,在重置表單時可以使用這個值來恢複元素。
    form	一個隻讀屬性,引用含有該元素的Form對象。
    length	對於Select表單元素,這個屬性聲明的是options[]數組中存放的選項數。
    name	一個隻讀的字符串,聲明了該元素的名字。
    options	對於Select表單元素來說,這個數組存放的是Option對象。
    selectedIndex	對於Select來說,這個整數聲明了當前選中的Select對象的選項。
    type	一個隻讀字符串,聲明了表單元素的類型。
    value	一個字符串屬性,聲明了在提交表單時提交給服務器的值。
    blur()	一個字符串屬性,聲明了在提交表單時提交給服務器的值。
    click()	在表單元素上模擬鼠標點擊。
    focus()	將鍵盤焦點賦予該元素。
    select()	對於顯示可編輯文本的表單元素來說,選中其中出現的所有文本。
    onblur	將鍵盤焦點從元素中移開。
    onchange	對於非按鈕表單元素來說,當用戶輸入了一個新值或選擇了一個新值時調用。
    onclick	對於那些按鈕表單元素來說,當用點擊或選擇了該按鈕時調用。
    onfocus	當用戶把鍵盤焦點給予該元素時調用。

    Top

     

11. Option 對象

    defaultSelected	一個布爾值,聲明在創建包含該屬性的Select對象時,該選項是否被選中。
    index	一個隻讀整數,聲明了選項在包含它的Select對象的options[]數組中的位置和下標。
    selected	一個可讀可寫的布爾值,聲明了一個選項當前是否被選中了。
    text	一個字符串,聲明了顯示給用戶的選項文本。
    value	一個可讀可寫的字符串,聲明了如果在提交表單時option處於選中的狀態,要傳遞給服務器的文本。

    Top
12. Image 對象

    border	一個整數,聲明了圖像邊線的寬度。
    complete	一個隻讀的布爾值,聲明圖像是否已經完全裝載進來了。
    height	一個整數,聲明了圖像的高度,以象素計。
    length	表單中的元素個數,等價於elements.length。
    hspace	一個整數,聲明了插入到圖像左右的水平距離。
    lowsrc	聲明了替代圖像(一般較小)的URL,當用戶的瀏覽器在低分辨率的顯示器上運行時就顯示該圖像。
    name	聲明圖片的名稱。
    src	聲明圖片的URL地址。
    vspace	一個整數,聲明了插入到圖像上下的垂直距離。
    width	一個整數,聲明了圖像的寬度,以象素計。
    onabort	如果用戶放棄裝載圖像,則調用該事件處理程序。
    onerror	如果在裝載圖像過程中發生了錯誤,則調用該事件處理程序。
    onload	在成功的裝載了圖像時調用該事件處理程序。

    Top
13. Link 對象

    hash	一個可讀可寫的字符串,指定了Link對象的錨部分,包括前導散列符(#)。
    host	一個可讀可寫的字符串,指定了Link的URL的主機名和端口部分。
    hostname	一個可讀可寫的字符串,指定了Link的URL的主機名部分。
    href	一個可讀可寫的字符串,指定了Link的完整URL。
    pathname	一個可讀可寫的字符串,聲明了Link的URL的路徑部分。
    port	一個可讀可寫的字符串,聲明了Link的URL的端口部分。
    protocol	一個可讀可寫的字符串,聲明了Link的URL的協議部分。
    search	一個可讀可寫的字符串,聲明了Link的URL的查詢部分。
    target	一個可讀可寫的字符串,指定了顯示鏈接文檔的Window對象的名稱。
    text	聲明了出現在鏈接的標記<a>和</a>之間的文本，僅NS支持。

    
    借助Link的屬性，我們可以用來分析url的內容。 function analyzeURLInfo(){ var url = "https://www.google.com:8080/?name=jame&id=13#250"; var el = document.createElement('a'); el.href = url; var str = "hash: " + el.hash + '/n'; str += "host: " + el.host + '/n'; str += "pathname: " + el.pathname + '/n'; str += "protocol: " + el.protocol + '/n'; str += "search: " + el.search + '/n'; str += "target: " + el.target + '/n'; alert(str); } URL分析
    Top
14. Anchor對象

    name	Anchor對象的名字,該屬性的值由<a>的name性質設置。
    text	該屬性聲明了錨標記<a>和</a>之間的純文本(如果存在)。

    Top

相關文章:

1. JavaScript核心參考教程--內置對象
2. JavaScript核心參考教程--RegExp對象

最後更新：2017-04-02 04:01:42

  上一篇： HTML輸入流編碼探測

  下一篇： 消息中間件ActiveMQ(3)--P2P實驗