js調(diào)試工具推薦firefox的firebug插件

能夠給js設(shè)置斷點(diǎn)執(zhí)行

能夠運(yùn)行時(shí)修改css樣式

查看dom模型等

☆I(lǐng)E8自帶的developerbar也很不錯(cuò)

☆打開firefox所有js警告:
在地址欄里錄入:about:config
雙擊,設(shè)置javascriptoptionrestict打開為true能夠看到很多警告,利于糾錯(cuò)

☆I(lǐng)E->firefoxjavascript類

△document.all("id")->document.getElementById("id")
并且控件盡量用id,而不是name標(biāo)識(shí)

提示:
如果控件只有name,沒有id,用getElementById時(shí):
IE:也可以找到對(duì)象
FF:返回NULL

△獲得form里某個(gè)元素的方法
elForm.elements['name'];

△取集合元素時(shí),ie支持[],()2種寫法,但是ff僅支持[],如:
table.rows(5).cells(0)
改為:
table.rows[5].cells[0]

△判斷對(duì)象是否是object的方法應(yīng)該為
if(typeof對(duì)象變量=="object")
而不是if(對(duì)象變量=="[object]")

△eval(對(duì)象名稱)->document.getElementById
FF支持eval函數(shù)

△通過id直接調(diào)用對(duì)象
對(duì)象id.value=""
改為
document.getElementById("name").value=""

△obj.insertAdjacentElement("beforeBegin",objText);

改為用
obj.parentNode.insertBefore(objText,obj);

△FF的createElement不支持HTML代碼

用document.write(esHTML);

或者創(chuàng)建元素后再設(shè)置屬性,對(duì)input元素來說,需要先設(shè)置type再加入到dom里
varobj=createElement("input");
obj.type="checkbox";

varobj2=document.getElementById("id2");
obj2.parentNode.insertBefore(obj,obj2);

如果是直接插入html代碼,則可以考慮用
createContextualFragment

△innerText->textContent

△對(duì)象名稱中的$不能識(shí)別,建議改為_
objName="t1$spin"
改為
objName="t1_spin"

△FF里設(shè)置Attribute為某個(gè)對(duì)象,然后再取出來,這時(shí)候?qū)ο蟮膶傩远紒G失了?
objText.setAttribute("obj",obj);

alert(obj.id)//正確的名字
obj=objText.getAttribute("obj");
alert(obj.id)//null

在IE下沒有問題,FF對(duì)setAttribute來說,第2個(gè)參數(shù)都是字符串型的!!!
所以如果第2個(gè)參數(shù)是對(duì)象時(shí),相當(dāng)于調(diào)用對(duì)象的toString()方法了

解決的方法是用下面的調(diào)用方式:
objText.dropdown_select=obj;
obj=objText.dropdown_select

△className->class
FF下用class代替IE下的className
由于class是關(guān)鍵字,所以需要用setAttribute/getAttribute才行
setAttribute("class","css樣式名稱");

△在html里定義的屬性,必須用getAttribute才行
<tdid="TD1"isOBJ="true">

獲取時(shí):
document.getElementByID("TD1").isOBJ總返回undefined,IE下是可以的

應(yīng)該用:
document.getElementByID("TD1").getAttribute("isOBJ")

△FF里select控件不再是:總是在頂端顯示
所以可能需要設(shè)置控件的zIndex
IE里覆蓋select控件的方法是,用ifame

△對(duì)于if(vars==undefined)下面的值用于判斷是等同的
undefined
null
false
0

△如果FF調(diào)用obj.focus();報(bào)錯(cuò),請(qǐng)嘗試改為:
window.setTimeout(function(){obj.focus();},20);

△FF下,keyCode是只讀的,那把回車轉(zhuǎn)換為tab怎么辦?在錄入時(shí)進(jìn)行鍵值轉(zhuǎn)換怎么辦??

變通的方法是:
1.回車跳轉(zhuǎn)->自己寫跳轉(zhuǎn)處理代碼.
遍歷dom里所有的元素,找到當(dāng)前元素的下一個(gè)能夠設(shè)置焦點(diǎn)的元素,給其設(shè)置焦點(diǎn)

2.在能夠錄入的控件里,
把選中的部分替換為新錄入的內(nèi)容:vartext=String.fromCharCode(event.keyCode);
同時(shí)阻止按鍵事件上傳,調(diào)用:event.preventDefault()

△<button>會(huì)被firefox解釋為提交form或者刷新頁面???
需要寫標(biāo)準(zhǔn)<buttontype="button">
或者在onclick="原函數(shù)調(diào)用();returnfalse;"

△在firefox里,document.onfocus里獲得不到實(shí)際獲得焦點(diǎn)的控件?
為什么document.keydown可以呢?

△children->childNodes

△sytle.pixelHeight->style.height

△判斷函數(shù)或者變量是否存在
if(!("varName"inwindow))varVarName=1;

△document.body.clientWidth

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN">

如果html包含上面的語句,則應(yīng)該用下面的方法獲取
document.documentElement.clientWidth

△window.createPopup

FF不支持

△document.body.onresize

FF不支持

用window.onresize

注意,頁面打開時(shí)并不會(huì)觸發(fā)onresize事件?需要在onload里也調(diào)用一次才行

△box模型的問題

IE下默認(rèn)的是content-box為了統(tǒng)一,可用設(shè)置:

div,td{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}

也可用在文檔頭加入:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

但是對(duì)IE舊代碼影響較大

△注冊(cè)事件

IE:attachEvent

FF:addEventListener("blur",myBlur,false);

第1個(gè)參數(shù)事件名稱不需要帶"on"

第3個(gè)參數(shù)false代表事件傳遞從事件對(duì)象沿dom樹往body方向傳

△觸發(fā)事件

IE:obj.fireEvent("onclick");

FF:

vare=document.createEvent("Events");

e.initEvent("click",true,false);

element.dispatchEvent(event)

△在事件處理函數(shù)中獲得對(duì)象句柄

varoThis=this;

obj.onfocus=function(evt){

oThis.doOnFocus(evt);

}

△統(tǒng)一事件處理框架代碼

doOnFocus(evt){

evt=evt||window.event;

varel=evt.target||evt.srcElement;

//后續(xù)處理

}

△FF不支持onpropertychange事件

但是FF里可以定義屬性的setter方法,如下面的:

HTMLElement.prototype.__defineSetter__("readOnly",function(readOnly){

//構(gòu)造虛擬的event對(duì)象

varevt=[];

evt["target"]=this;

evt["propertyName"]='readOnly'

//onpropertychange函數(shù)需要定義evt參數(shù),參考統(tǒng)一事件處理框架代碼

if(this.onpropertychange)this.onpropertychange(evt);

});

☆I(lǐng)E->firefoxcss類

△cursor:hand->cursor:pointer

△expressionfirefox不支持

在IE下expression也非常消耗CPU,所以不應(yīng)該使用!!

為了達(dá)到較好的效果,應(yīng)該建立自己的expressiontojavascript的處理函數(shù)

這樣在IE和FF里就都能用了.

△FILTERfirefox不支持

filter:Alpha(Opacity=50);

替換為

-moz-opacity:0.5;

△text-overflow

不支持

△transparent

firefox下obj.setAttribute("bgColor","#ffffff")只支持顏色

必須用obj.style.backgroundColor="transparent"才行

△FF下text控件高度與IE不同,統(tǒng)一一下

input[type=text]{

height:20px;

}

注意input與[之間不能有空格!

△font在IE里不能對(duì)body和td等起作用,FF可以

統(tǒng)一用font-family