一、函數頁面加載addLoadEvent()

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

（1）先創建一個匿名函數來容納這兩個函數

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

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

（2）addLoadEvent函數

該函數的偽代碼：

1.把現有的window.onload事件處理函數的值存入變量oldonload

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

3.如果在這個處理函數上已經綁定了一些函數，就把新函數追加到現有指令的末尾

該函數代碼如下：

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(); } } }

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

addLoadEvent(firstFunction); addLoadEvent(secondFunction);

　　

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

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

該函數偽代碼：

（1）獲取目標元素的父節點

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

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

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

　　

?

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

不同IE版本中使用的XMLHTTP對象也不完全相同，為了兼容所有瀏覽器，函數應當這樣寫：

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();}

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

var request=getHttpObject();

　　

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

偽代碼如下：

（1）獲得元素的當前元素

（2）如果元素已經到達它的位置，則退出這個函數

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

（4）經過一段時間間隔之從步驟1開始重復上述步驟

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

　

5.添加類：addClass()

有時候為了動態的給網頁添加樣式，我們常常通過給目標元素添加特定的類名來設置樣式：

偽代碼如下：

（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;//定義一個全局變量，進行一次循環就更替一次值，使得表格行的樣式間隔改變 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;//鼠標移開目標元素時恢復原類名
}
}
}

　　

?

轉載于:https://www.cnblogs.com/runhua/p/6436163.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。