Pro JavaScript Techniques學習筆記

更新時間：2010年12月28日 19:27:03 作者：

Pro JavaScript Techniques學習筆記，學習js的朋友可以參考下。

全局變量是Window對象屬性的一部分，例子：

 
var test = 'test'; 
alert(window.test); 

瀏覽器渲染和操作HTML的大致順序：

HTML解析完畢
外部腳本和樣式表加載完畢
腳本在文檔內(nèi)解析并執(zhí)行
HTML DOM完全構(gòu)造起來
圖片和外部內(nèi)容加載
網(wǎng)頁完成加載
所有的主流瀏覽器都實現(xiàn)了innerHTML屬性，但是因為沒有統(tǒng)一標準，所以或多或少會有一些怪異的bug。

基于Mozilla的瀏覽器在innerHTML聲明中并不回會返回<style>元素；
IE返回的元素字符都是大寫的；
innerHTML作為一個只能用在HTML DOM文檔的元素中的屬性，若在XML DOM文檔中使用的話只會返回null值。
檢查元素是否有用一個指定的屬性：

復制代碼代碼如下:

 
function hasAttribute(elem, name) { 
return elem.getAttribute(name) != null; 
}; 

JavaScript事件在兩個階段中執(zhí)行：捕獲和冒泡。

GET請求不應具有破壞性的副作用(比如刪除一條消息)。

點擊、鼠標懸停和鼠標離開事件的任何場合下，都要考慮提供非鼠標綁定的可選事件。

復制代碼代碼如下:

 
onmouseout –> onblur 
onmousedown –> onkeydown 
onmouseup –> onkeyup 
onclick –> onkeypress 
onmouseover –> onfocus 

eg.

復制代碼代碼如下:

 
var ax = document.getElementsByTagName('a'); 
for (var i = 0; i < ax.length; i++) { 
ax[i].onmouseover = ax[i].onfocus = function(){ 
this.style.backgroundColor = 'blue'; 
}; 
ax[i].onmouseout = ax[i].onblur = function(){ 
this.style.backgroundColor = 'white'; 
}; 
}; 

靜態(tài)定位：這是元素定位的默認方式，它簡單地遵循文檔的普通流動(flow)。當元素是靜態(tài)定位時，top和left屬性無效。

position:static;top:0px;left:0px;
相對定位：這種定位形式與靜態(tài)定位非常相似，因為元素會繼續(xù)遵循文檔的普通流動，除非受到其他指定的影響。但是，設(shè)置top或者left屬性會引起元素相對于它的原始(靜態(tài))位置進行偏移。

position:relative;top:-50px;left:50px;
絕對定位：絕對定位的元素完全跳出頁面布局的普通流動，它會相對于它的第一個非靜態(tài)定位的祖先元素而展示。如果沒有這樣的祖先元素，則相對于整個文檔。

position:absolute;top:20px;left:0px;
固定定位：固定定位把元素相對于瀏覽器窗口而定位。設(shè)置元素的top和left為0會使它顯示在瀏覽器左上角，它完全忽略瀏覽器滾動條的拖動，一直會出現(xiàn)在用戶的視野。

position:fixed;top:20px;left:0px;
開發(fā)預留退路(degrading gracefully)：為頁面增加任何形式的動態(tài)交互都有疏遠某部分用戶的潛在可能。應該時刻在意的是，當JavaScript或者CSS禁用的時候，Web應用程序應該具備基最基本可用性。