一、函數(shù)頁面加載addLoadEvent()

由于window.onload只能綁定一條指令，當(dāng)有多條指令被綁定時，只會有最后的那個函數(shù)被實際執(zhí)行。對此，我們有兩個解決方法：

（1）先創(chuàng)建一個匿名函數(shù)來容納這兩個函數(shù)

window.οnlοad=function{ firstFunction(); secondFunction(); }

　　這個方法在不是很多函數(shù)的情況下可以很好的工作，但是一般我們更加建議使用法二

（2）addLoadEvent函數(shù)

該函數(shù)的偽代碼：

1.把現(xiàn)有的window.onload事件處理函數(shù)的值存入變量oldonload

2.如果在這個處理函數(shù)上還沒有綁定任何函數(shù)，就像平時那樣把新函數(shù)添加給它

3.如果在這個處理函數(shù)上已經(jīng)綁定了一些函數(shù)，就把新函數(shù)追加到現(xiàn)有指令的末尾

該函數(shù)代碼如下：

function addLoadEvent(func){ var oldοnlοad=window.onload; if(typeof window.onload!='function'){ window.οnlοad=func; } else{ window.οnlοad=function(){ oldonload(); func(); } } }

　　說明：這將把那些在頁面加載完畢時執(zhí)行的函數(shù)創(chuàng)建為一個隊列。如果想要添加新函數(shù)，只需要執(zhí)行以下兩行：

addLoadEvent(firstFunction); addLoadEvent(secondFunction);

　　

二、在元素后面插入元素insertAfter():

js函數(shù)只提供了insertBefore（），可是卻沒有提供insertAfter，但是它給了我們編寫該函數(shù)的所有工具

該函數(shù)偽代碼：

（1）獲取目標元素的父節(jié)點

（2）判斷目標元素的父節(jié)點的最后一個子節(jié)點是否是目標元素，若是，則直接把新元素添加到其父節(jié)點上

（3）否則，利用insertBefore把新元素插入到目標元素的下一個兄弟節(jié)點的前面

function insertAfter(newElement,parentNode){var parent=targetElement.parentNode;if(parent.lastChild==targetElement){parent.appendChild(newElement);}else{parent.insertBefore(newElement,targetElement.nextSibling);}}

　　

?

3.getHTTPObject(),用Ajax創(chuàng)建XMLHTTPRequest對象

不同IE版本中使用的XMLHTTP對象也不完全相同，為了兼容所有瀏覽器，函數(shù)應(yīng)當(dāng)這樣寫：

function getHTTPObject(){if(typeof XMLHttpRequest=="undefined")XMLHttpRequest=function(){try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}catch(e){}try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}catch(e){}try{return new ActiveXObject("Msxml2.XMLHTTP");}catch(e){}return false;}return new XMLHttpRequest();}

　　這樣，在我們編寫腳本需要創(chuàng)建XMLHTTP對象的時候，就可以使用以下語句：

var request=getHttpObject();

　　

4.js動畫，移動目標元素moveElement()

偽代碼如下：

（1）獲得元素的當(dāng)前元素

（2）如果元素已經(jīng)到達它的位置，則退出這個函數(shù)

（3）如果元素尚未達到它的目的地，則把它向目的地移近一點兒

（4）經(jīng)過一段時間間隔之從步驟1開始重復(fù)上述步驟

function moveElement(elementID,final_x,final_y,internal){ if(!document.getElementById) return false; if(!document.getElementById(elementID)) return false; var elem=document.getElementById(elementID); if(element.movement){ clearTimeout(elem.movement); }//利用與當(dāng)前元素的直接相關(guān)的屬性來清除movement指令，避免用戶在多次反復(fù)調(diào)用movement函數(shù)時導(dǎo)致元素同時往多個方向進行移動而產(chǎn)生錯誤 if(!elem.style.left){ elem.style.left="0px"; } if(!elem.style.top){ elem.style.top="0px"; }//判斷目標元素是否有設(shè)置定位，沒有則默認定位到top：0； left：0；處 var xpos=parseInt(elem.style.left); var ypos=parseInt(elem.style.top);//在這個函數(shù)中要進行多次的數(shù)值比較，而elem.style.left和elem.style.top返回的則是“XXpx”這樣一個字符串，所以要使用parseInt來轉(zhuǎn)換 var dist=0; if(xpos==final_x&&ypos==final_y){ return false; }//如果目標元素已經(jīng)到達目標點，則退出函數(shù) if(xpos<final_x){ dist=Math.ceil((final_x-xpos)/10);//ceil方法使得數(shù)值朝大于方向獲取最為接近的整數(shù) xpos=xpos+dist; } if(xpos>final-x){ dist=Math.ceil((xpos-final_x)/10); xpos=xpos+dist; } if(ypos<final_y){ dist=Math.ceil((final_y-ypos)/10); ypos=ypos+dist; } if(ypos>final_y){ dist=Math.ceil((ypos-final_y)/10); ypos=ypos+dist; } elem.style.left=xpos+"px"; elem.style.top=ypos+"px"; var repeat="moveElement('"+elementTD"+',"+final_x+","+final_y+","+internal+")";//因為setTimeout函數(shù)的第一個參數(shù)值為字符串，所以repeat需要參數(shù)拼接起來的字符串 elem.movement=setTimeout(repeat,interval); }

　

5.添加類：addClass()

有時候為了動態(tài)的給網(wǎng)頁添加樣式，我們常常通過給目標元素添加特定的類名來設(shè)置樣式：

偽代碼如下：

（1）判斷目標元素是否有類名，若沒有，則直接把value賦值給目標元素

（2）如果有類名，則將將原類名賦值給一個新變量，然后再給這個新變量賦值一個空格和要添加的類名，最后再把這個新變量賦值給目標元素的類名屬性

function addClass(element,value){ if(!element.className){ element.className=value; }else{ newClassName=element.className; newClassName+=" "; newClassName+=value; element.className=newClassName; } }

　　

　

?6.表格的增強顯示：stripeTables()和highlightRows()

代碼如下：

function stripeTables(){ if(!document.getElementByTagName) return false; var tables=document.getElementsByTagName("table"); for(var i=0;i<tables.length;i++){ var odd=false;//定義一個全局變量，進行一次循環(huán)就更替一次值，使得表格行的樣式間隔改變 var rows=tables[i].getElementsByTagName("tr"); for(var j=0;j<rows.length;j++){ if(odd=true){ addClass(rows[j],"odd"); odd=false; }else{ odd=true; } } } }

function highlightRows(){
if(!document.getElementsByTagName) return false;
var rows=document.getElementsByTagName("tr");
for(var i=0;i<rows.length;i++){
rows[i].oldClassName=rows[i].className;
rows[i].οnmοuseοver=function(){//鼠標移至目標元素上方時改變添加類名
addClass(this,"highlight");
}
rows[i].οnmοuseοut=function(){
this.className=this.oldClassName;//鼠標移開目標元素時恢復(fù)原類名
}
}
}

　　

?

轉(zhuǎn)載于:https://www.cnblogs.com/runhua/p/6436163.html

總結(jié)

以上是生活随笔為你收集整理的常用js函数收录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。