js调试工具推荐firefox的firebug插件
能够给js设置断点执行
能够运行时修改css样式
查看dom模型等
☆IE8自带的developerbar也很不错
☆打开firefox所有js警告:
在地址栏里录入:about:config
双击,设置javascriptoptionrestict打开为true能够看到很多警告,利于纠错
☆IE->firefoxjavascript类
△document.all("id")->document.getElementById("id")
并且控件尽量用id,而不是name标识
提示:
如果控件只有name,没有id,用getElementById时:
IE:也可以找到对象
FF:返回NULL
△获得form里某个元素的方法
elForm.elements['name'];
△取集合元素时,ie支持[],()2种写法,但是ff仅支持[],如:
table.rows(5).cells(0)
改为:
table.rows[5].cells[0]
△判断对象是否是object的方法应该为
if(typeof对象变量=="object")
而不是if(对象变量=="[object]")
△eval(对象名称)->document.getElementById
FF支持eval函数
△通过id直接调用对象
对象id.value=""
改为
document.getElementById("name").value=""
△obj.insertAdjacentElement("beforeBegin",objText);
改为用
obj.parentNode.insertBefore(objText,obj);
△FF的createElement不支持HTML代码
用document.write(esHTML);
或者创建元素后再设置属性,对input元素来说,需要先设置type再加入到dom里
varobj=createElement("input");
obj.type="checkbox";
varobj2=document.getElementById("id2");
obj2.parentNode.insertBefore(obj,obj2);
如果是直接插入html代码,则可以考虑用
createContextualFragment
△innerText->textContent
△对象名称中的$不能识别,建议改为_
objName="t1$spin"
改为
objName="t1_spin"
△FF里设置Attribute为某个对象,然后再取出来,这时候对象的属性都丢失了?
objText.setAttribute("obj",obj);
alert(obj.id)//正确的名字
obj=objText.getAttribute("obj");
alert(obj.id)//null
在IE下没有问题,FF对setAttribute来说,第2个参数都是字符串型的!!!
所以如果第2个参数是对象时,相当于调用对象的toString()方法了
解决的方法是用下面的调用方式:
objText.dropdown_select=obj;
obj=objText.dropdown_select
△className->class
FF下用class代替IE下的className
由于class是关键字,所以需要用setAttribute/getAttribute才行
setAttribute("class","css样式名称");
△在html里定义的属性,必须用getAttribute才行
获取时:
document.getElementByID("TD1").isOBJ总返回undefined,IE下是可以的
应该用:
document.getElementByID("TD1").getAttribute("isOBJ")
△FF里select控件不再是:总是在顶端显示
所以可能需要设置控件的zIndex
IE里覆盖select控件的方法是,用ifame
△对于if(vars==undefined)下面的值用于判断是等同的
undefined
null
false
0
△如果FF调用obj.focus();报错,请尝试改为:
window.setTimeout(function(){obj.focus();},20);
△FF下,keyCode是只读的,那把回车转换为tab怎么办?在录入时进行键值转换怎么办??
变通的方法是:
1.回车跳转->自己写跳转处理代码.
遍历dom里所有的元素,找到当前元素的下一个能够设置焦点的元素,给其设置焦点
2.在能够录入的控件里,
把选中的部分替换为新录入的内容:vartext=String.fromCharCode(event.keyCode);
同时阻止按键事件上传,调用:event.preventDefault()
△需要写标准
或者在onclick="原函数调用();returnfalse;"
△在firefox里,document.onfocus里获得不到实际获得焦点的控件?
为什么document.keydown可以呢?
△children->childNodes
△sytle.pixelHeight->style.height
△判断函数或者变量是否存在
if(!("varName"inwindow))varVarName=1;
△document.body.clientWidth
如果html包含上面的语句,则应该用下面的方法获取
document.documentElement.clientWidth
△window.createPopup
FF不支援
△document.body.onresize
FF不支援
用window.onresize
注意,頁面開啟時並不會觸發onresize事件?需要在onload裡也呼叫一次才行
△box模型的問題
IE下預設的是content-box為了統一,可用設定:
div,td{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
也可用在文件頭加入:
-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
但是對IE舊程式碼影響較大
△註冊事件
IE:attachEvent
FF:addEventListener("blur",myBlur,false);
第1個參數事件名稱不需要帶"on"
第3個參數false代表事件傳遞從事件物件沿著dom樹往body方向傳
△觸發事件
IE:obj.fireEvent("onclick");
FF:
vare=document.createEvent("Events");
e.initEvent("click",true,false);
element.dispatchEvent(event)
△在事件處理函數中取得物件句柄
varoThis=this;
obj.onfocus=function(evt){
oThis.doOnFocus(evt);
}
△統一事件處理框架程式碼
doOnFocus(evt){
evt=evt||window.event;
varel=evt.target||evt.srcElement;
//後續處理
}
△FF不支援onpropertychange事件
但是FF裡可以定義屬性的setter方法,如下面的:
HTMLElement.prototype.__defineSetter__("readOnly",function(readOnly){
//建構虛擬的event物件
varevt=[];
evt["target"]=this;
evt["propertyName"]='readOnly'
//onpropertychange函數需要定義evt參數,參考統一事件處理框架程式碼
if(this.onpropertychange)this.onpropertychange(evt);
});
☆IE->firefoxcss類別
△cursor:hand->cursor:pointer
△expressionfirefox不支援
在IE下expression也非常消耗CPU,所以不應該使用!!
為了達到較好的效果,應該建立自己的expressiontojavascript的處理函數
這樣在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不同,統一一下
input[type=text]{
height:20px;
}
注意input與[之間不能有空格!
△font在IE裡不能對body和td等起作用,FF可以
統一用font-family
