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()
△会被firefox解释为提交form或者刷新页面?
需要写标准
或者在onclick=原函数调用();returnfalse;
△在firefox里,document.onfocus里获得不到实际获得焦点的控件?
为什么document.keydown可以呢?
△children->childnodes
△sytle.pixelheight->style.height
△判断函数或者变量是否存在
if(!(varnameinwindow))varvarname=1;
△document.body.clientwidth
-//w3c//dtdxhtml1.0transitional//en>
如果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//enhttp://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