首頁 > 開發者 > JavaScript
1.Window對象是所有用戶端JavaScript特性和API的主要存取點。
Window對象中的一個重要屬性是document，它引用Document對象。
JavaScript程式可以通過Document對象和它包含的Element對象遍曆和管理文檔。
2.URL中的JavaScript
在URL後面跟一個JavaScript：協議限定符。裡面的代碼會作為JavaScript代碼進行運行，需用分號分割。
如：
<a href="javascript:alert('OK!')"></a>
由於<a>標籤通常範圍超連結，來載入新文檔。如果要用且URL不會覆蓋當前文檔，
可以用void操作符強制函數調用或給運算式賦予undefined值：
如：
<a href="javascript:void window.open('about:blank');"></a>
3.JavaScript的執行分為兩個階段：
第一階段：載入文檔內容，並執行<sacript>元素裡的代碼
第二階段：文檔載入完成，且指令碼執行完成後，進入這個第二階段。
這個階段是非同步，且由事件驅動。在事件驅動階段，Web瀏覽器呼叫事件處理常式函數。
4.如果想要程式相應一個事件，寫一個函數，叫做"事件處理常式"或"事件監聽器"或"回調"，
然後註冊這個函數，這樣他就會在事件法發生時調用它。
大部分瀏覽器中的大部分時間來說，會把一個對象傳遞給事件處理常式作為參數，那個對象的屬性提供了事件的詳細資料。
如：傳遞給點擊事件的對象，會有一個屬性說明滑鼠的哪個按鈕被點擊(在IE
中，這些事件資訊被儲存在全域event對象裡，而不是傳遞給處理常式函數。)
事件處理常式的傳回值有時候用來指示函數是否充分處理了事件，以及阻止瀏覽器執行它預設會進行的各種操作。
有些事件的目標是文件項目，他們會經常網上傳遞給文檔樹，這個過程叫"冒泡"。
如果要為一個事件註冊多個事件處理函數，可以使用addEventListener()的方法，允許註冊多個監聽器。
如：
window.addEventListener("load",function(){.....},false);
該方法在IE9上才得到實現。在IE8以及之前的瀏覽器中，必須使用一個相似的方法，是attachEvent（）
window.attachEvent("load",function(){.....});
5.IE裡面的條件注釋
為了針對IE處理不相容性，必須按照某種方式為IE進行編碼，條件引入就是一種。
在我之前的文章中有詳細說明：<!--[if IE 9]>....<!end if-->
6.解析URL
Location 對象是 Window 對象的一個部分，可通過 window.location 屬性來訪問
7.瀏覽曆史
Window獨享的history屬性引用的是該視窗的History對象。
History對象是用來把視窗的瀏覽曆史用文檔和文檔狀態的列表的形式表示。
history.back() //後退
history.forward()// 前進
history.go(-2) //後退兩個曆史記錄
jQuery有history外掛程式。
8.瀏覽器和螢幕資訊
a:Window對象的navigator屬性引用的是包含瀏覽器廠商和版本資訊的Navigator對象。
例子：
<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
警告：來自 navigator 對象的資訊具有誤導性，不應該被用於檢測瀏覽器版本，這是因為：
navigator 資料可被瀏覽器使用者更改
瀏覽器無法報告晚於瀏覽器發布的新作業系統
b:Window對象的screen屬性引用的是Screen對象。
9.對話方塊
Window對象提供了三種方法用來向使用者簡單顯示的對話方塊
alert()
comfirm()
prompt()
這三個方法都會產生阻塞。
還有一種更加複雜的方法showModalDialog()
javascript之window對象
window ：window對象是BOM中所有對象的核心，除了是BOM中所有對象的父物件外，還包含一些視窗控制函數。
1、全域的window對象
JavaScript中的任何一個全域函數或變數都是window的屬性。
<script type="text/javascript"> var name="撼地神牛"; document.write(window.name);</script>
2、window與self對象
self對象與window對象完全相同，self通常用於確認就是在當前的表單內。
<script type="text/javascript"> document.write(window == self); //必須相等，永遠都相等 document.write(window.Top == window.self); //判斷當前架構是否是主架構</script>
window、self、window.self三者是等價的。
3、window的子物件
window的主對象主要有如下幾個：
JavaScript document 對象
JavaScript frames 對象
JavaScript history 對象
JavaScript location 對象
JavaScript navigator 對象
JavaScript screen 對象
4、window函數索引(僅對IE有效)
表單控制函數：
JavaScript moveBy() 函數：從當前位置水平移動表單x個像素，垂直移動表單y個像素，x為負數，將向左移動表單，y為負數，將向上移動表單。
JavaScript moveTo() 函數：移動表單左上方到相對於螢幕左上方的(x,y)點，當使用負數做為參數時會把表單移出螢幕的可視地區。
JavaScript resizeBy() 函數：相對表單當前的大小，寬度調整w個像素，高度調整h個像素。如果參數為負值，將縮小表單，反之擴大表單。
JavaScript resizeTo() 函數：把表單寬度調整為w個像素，高度調整為h個像素。
<body> <input type="button" id="btn1" value="先設定表單固定大小！" onclick="window.resizeTo(500,500);" /> <input type="button" id="btn2" value="再縮小10像素！" onclick="window.resizeBy(-10,-10);" /> <input type="button" id="btn2" value="上！" onclick="window.moveBy(0,-5);" /> <input type="button" id="btn2" value="下！" onclick="window.moveBy(0, 5);" /> <input type="button" id="btn2" value="左！" onclick="window.moveBy(-5, 0);" /> <input type="button" id="btn2" value="右！" onclick="window.moveBy(5, 0);" /> <input type="button" id="btn2" value="距離左上方左邊100像素，頂部200像素" onclick="window.moveTo(100, 200);" /></body>
表單捲軸控制函數：
JavaScript scrollTo() 函數：在表單中如果有捲軸，將橫向捲軸移動到相對於表單寬度為x個像素的位置，將縱向捲軸移動到相對於表單高度為y個像素的位置。
JavaScript scrollBy() 函數：如果有捲軸，將橫向捲軸移動到相對於當前橫向捲軸的x個像素的位置(就是向左移動x像素)，將縱向捲軸移動到相對於當前縱向捲軸高度為y個像素的位置(就是向下移動y像素)。
注意區別，一個是相對當前視窗，一個是相當現在捲軸的位置。
<div style="height:150%; width:150%; background-color:#ddd"> <input type="button" id="btn1" value="移動捲軸！" onclick="window.scrollTo(100,100);" /> //相當於設定絕對位置 <input type="button" id="btn1" value="移動捲軸！" onclick="window.scrollBy(100,100);" /> //相當於累加</div>
表單焦點控制函數：
JavaScript focus() 函數：使表單或空間獲得焦點
JavaScript blur() 函數：使表單或控制項失去焦點
<div> <input type="button" value="獲得焦點" onclick="document.getElementById('testInput').focus()" /> <input type="button" value="失去焦點" onclick="document.getElementById('testInput').blur()" /> <input type="text" value="text" id="testInput" onblur="alert('我已失去焦點')" /></div>
建立表單函數：
JavaScript open() 函數：開啟(彈出)一個新的表單
JavaScript close() 函數：關閉表單
JavaScript opener 屬性：通過opener可以實現跨表單之間的通訊，但是要保證是在同一網域名稱下，而且一個表單要包含另一個表單的opener。
window.open(url, name, features, replace);
open函數參數說明：
url -- 要載入表單的URL；
name -- 建立表單的名稱(也可以是HTML target屬性的取值，目標)；
features -- 代表表單特性的字串，字串中每個特性使用逗號分隔；
replace -- 一個布爾值，說明新載入的頁面是否替換當前載入的頁面，此參數通常不用指定。
open方法樣本：
<a href="2.html" target="2">在新視窗開啟串連</a>
<a href="#" onclick="window.open('http://www.google.com','2');">在已建立串連的頁面開啟新地址</a>
首先使用普通HTML連結開啟一個頁面(target名為dreamdu)，之後使用open函數開啟另一個頁面，瀏覽器首先要尋找是否有名稱為dreamdu的表單，如果有，就在這個表單中載入open的地址。
經過設定的open
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
彈窗方法:
方法一：<body onload="openwin()"> 瀏覽器讀頁面時快顯視窗；
方法二：<body onunload="openwin()"> 瀏覽器離開頁面時快顯視窗；
| 參數名稱 | 類型 | 說明 |
|---|---|---|
| height | Number | 設定表單的高度，不能小於100 |
| left | Number | 說明建立表單的左座標，不能為負值 |
| location | Boolean | 表單是否顯示地址欄，預設值為no |
| resizable | Boolean | 表單是否允許通過拖動邊線調整大小，預設值為no |
| scrollable | Boolean | 表單中內部超出視窗可視範圍時是否允許拖動，預設值為no |
| toolbar | Boolean | 表單是否顯示工具列，預設值為no |
| top | Number | 說明建立表單的上座標，不能為負值 |
| status | Boolean | 表單是否顯示狀態列，預設值為no |
| width | Number | 建立表單的寬度，不能小於100 |
特性字串中的每個特性使用逗號分隔，每個特性之間不允許有空格。
window.open函數建立立表單後會返回建立表單的window對象，通過此對象可以控制表單（移動，改變大小，關閉）。
close函數：
<input type="button" value="關閉已經開啟的表單！" onclick="window.close();" />
self.close();配合上setTimeout()可以實現，開啟的視窗定時關閉的效果。
對話方塊函數：
JavaScript alert() 函數：彈出訊息對話方塊（對話方塊中有一個OK按鈕）
JavaScript confirm() 函數：彈出訊息對話方塊（對話方塊中包含一個OK按鈕與Cancel按鈕）
JavaScript prompt() 函數：彈出訊息對話方塊（對話方塊中包含一個OK按鈕、Cancel按鈕與一個文本輸入框）
alert();
不說。
confirm(str);
confirm()訊息對話方塊是排它的，也就是在使用者點擊對話方塊的按鈕前，不能進行任何其它操作。
if(confirm("確定跳大？")){ alert("果斷跳大");}else{ alert("猥瑣打錢");}
顯示如下：
prompt(str1, str2);
函數有兩個參數
str1 -- 要顯示在訊息對話方塊中的文本，不可修改
str2 -- 文字框中的內容，可以修改
var sResult=prompt("請在下面輸入你的姓名", "撼地神牛");if(sResult!=null){ alert(sResult + "已經超越神的殺戮");}else{ alert("無名氏已經超越神的殺戮");}
顯示如下：
時間等待與間隔函數：
JavaScript setTimeout() 函數
JavaScript clearTimeout() 函數
JavaScript setInterval() 函數
JavaScript clearInterval() 函數
1、setTimeout()、clearTimeout() 在指定的時間後調用函數
文法：
setTimeout(fun,time); fun：函數體或函數名，time指定時間，單位為毫秒。
clearTimeout(id); 取消指定的setTimeout函數將要執行的代碼
setTimeout(function () { document.write("隔3秒後觸發"); }, 3000) //在3秒後輸出 setTimeout(fun1, 5000); //在5秒後輸出 function fun1() { document.write("函數名的方式5秒後觸發"); }
2、setInterval()、clearInterval(value) 在間隔指定的事件後重複調用函數
文法：
setInterval(fun1,time) fun：函數體或函數名，time指定的時間，單位為毫秒。會返回一個值,這個值是統計該函數的個數用的，第一個是1，第二個就是2，指明是第幾個setInterval函數。
clearInterval(value) value:setInterval()函數返回的值，根據這個值可以停止setInterval()的重複。
var i = 0;var h = setInterval(function () { document.write("3秒輸出一次<br/>"); i++; if (i >= 3) { clearInterval(h); document.write("停止輸出"); }}, 3000);
注意，javascript是單線程的，因此，這個定時函數實際上是通過插入執行隊列的方式來實現。
如下面的代碼：
function fn() { setTimeout(function(){alert('can you see me?');},1000); while(true) {} }
alert();永遠都不會執行，因為線程一直被死迴圈佔用了。
window.location子物件
解析URL對象location
location對象的屬性有：href,protocal,host,hostname,port,pathname,search,hash
document.write(location.href + "<br/>"); // http://localhost:4889/javascriptTest.html document.write(location.protocol + "<br/>"); // http: document.write(location.host + "<br/>"); // localhost:4889 document.write(location.hostname + "<br/>"); // localhost document.write(location.port + "<br/>"); // 4889 document.write(location.pathname + "<br/>"); // /javascriptTest.html document.write(location.search + "換行<br/>"); //http://localhost:4889/javascriptTest.html?id=1&name=張三 如果路徑是這樣，則輸出 ?id=1&name=%E5%BC%A0%E4%B8%89 document.write(location.hash); //http: //localhost:4889/javascriptTest.html#kk=你好?id=1&name=張三 如果路徑是這樣，則輸出 #kk=你好?id=1&name=張三
載入新文檔
location.reload() 重新載入頁面
location.replace() 本視窗載入新文檔
location.assign() 本視窗載入新文檔
location = "http://www.baidu.com" //跳轉到指定網址
location = "search.html" //相對路徑跳轉
location = "#top" //跳轉到頁面頂部
瀏覽曆史
History()對象的back()與forward() 與瀏覽器的“後退”，"前進"功能一樣。
history.go(-2); 後退兩個記錄
瀏覽器和螢幕資訊
navigator.appName Web瀏覽器全稱
navigator.appVersion Web瀏覽器廠商和版本的詳細字串
navigator.userAgent 用戶端絕大部分資訊
navagator.platform 瀏覽器運行所在的作業系統
document.write(navigator.userAgent + "<br/>"); // Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11 document.write(navigator.appName + "<br/>"); //Netscape document.write(navigator.appVersion + "<br/>"); //5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11 document.write(navigator.platform); //Win32
視窗的關係
parent == self 只有最上層視窗才返回true
parent和top屬性允許指令碼引用它的表單的祖先，通常表單是通過<iframe>元素建立的，可以用來擷取最上層視窗。
5、event事件對象
最有用的兩個操作：阻止事件冒泡。有時return false;不管用，這個或許就管用了。
//IE：window.event.cancelBubble = true;//停止冒泡window.event.returnValue = false;//阻止事件的預設行為//Firefox：event.preventDefault();// 取消事件的預設行為 event.stopPropagation(); // 阻止事件的傳播
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
