1.取得樣式表裡面的width,border color 之類的css(不是行間) 主要是IE6-7支援currentStyle,標準瀏覽器支援getComputedStyle;
實例:封裝函數
function getStyle(obj,name){
if(obj.
return obj.currentStyle[名稱];
}
else{
return getComputedStyle(obj,false)[名稱];
}
}
相容性可以這樣寫
var top = document.body.scrollTop | document.documentElement.scrollTop;
3.事件物件
標準瀏覽器:事件物件作為事件函數的參數
IE低版本需要直接用event物件(全域)
複製程式碼
程式碼如下:
程式碼如下:
function (ev){
var event = ev || event;
}
現在event就作為了事件物件
4.綁定事件IE 的綁定事件IE 的綁定事件對象
type: 字串,事件名稱,不含“on”,如“click”、“mouseover”、“keydown”等。
listener :實作了 EventListener 介面或是 JavaScript 中的函式。
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
IE中:
target .attachEvent(type, listener);
target: 文件節點、document、window 或XMLHttpRequest。
type: 字串,事件名稱,含“on”,如“onclick”、“onmouseover”、“onkeydown”等。
listener :實作了 EventListener 介面或是 JavaScript 中的函式。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
事件綁定的封裝函數:
function addEvent(obj,ev,fn){
if(obj. attachEvent){
obj.attachEvent('on' ev,fn)
}
else{
obj.addEventListener(ev, fn, false);
}
}
}
這樣的封裝函數如果綁定事件fn函數裡面用到this 需提防this 為window(只有IE低版本有這個bug) 不是obj;
複製程式碼
程式碼如下:
addEvent(document,'click',function(ev){
var ev =ev||window.event;
var target = ev.target||ev.srcElement; // 取得事件來源主要處理IE低版this為window之bug
alert(target)
}) ;
綁定之取消事件fn為函數名字
程式碼:
function removeEvent(obj,ev,fn){
if(obj.detachEvent){
obj.detachEvent('on' ev,fn)
}
else{
obj.removeEventListener(ev, fn, false);
}
}
5.ajax Ajax創建XMLHttppttp低版本不兼容標準版創建XMLHttp對象: 複製代碼 代碼如下: //1.建立物件if(window.XMLHttpRequest) { var oAjax=new XMLHttpRequest();//標準瀏覽器} else { { var oAjax=new ActiveXObject("Microsoft.XMLHTTP");//IE低版本} alert(oAjax);
6.取消預設事件
js中預設事件取消是主要是兩種return false 和preventDefault
取消預設事件中return false 是相容任何瀏覽器但是如果遇到事件綁定的addEventListener 會取消不掉預設事件
取消預設右鍵事件範例:
document.addEventListener('contextmenu',function(ev){
ev.preventDefault();
}))
document.oncontextmenu = function(){
return falsese;
};
7.call與apply 的區別
call、apply 可以調用函數
例如
程式碼如下:
function show(){
alert(this)
}
//show(); 彈出window
//show .call();彈出windwo
//show.call(this) //彈出window
//show.call(5); //彈出5;
show.call(this,5) ; //彈出window
call(this,arg1,arg2,...)可以看出call裡面的參數this主要是指涉事件物件以後參數是函數中用到的參數
用call與apply來主要是修改this的,功能上和普通的函數沒有太大的區別
apply(this,arguments) 主要是對參數不確定來使用
8、DOM取得子節點children和childNodes
children 取得子節點只能是取第一層必須是標籤節點
例如:
代碼如下:
children[0] 這樣只能是取到第一個span 要是想取到第一個a標籤children[0].children[0 ],所以說children的長度只是2; childNodes在高版本上會算上空文本在火狐谷歌上上面的是長度是5;在IE低版本(6-8)長度是4.