一、函数页面加载addLoadEvent()
由于window.onload只能绑定一条指令，当有多条指令被绑定时，只会有最后的那个函数被实际执行。对此，我们有两个解决方法：
（1）先创建一个匿名函数来容纳这两个函数
window.onload=function{
firstFunction();
secondFunction();
}
这个方法在不是很多函数的情况下可以很好的工作，但是一般我们更加建议使用法二
（2）addLoadEvent函数
该函数的伪代码：
1.把现有的window.onload事件处理函数的值存入变量oldonload
2.如果在这个处理函数上还没有绑定任何函数，就像平时那样把新函数添加给它
3.如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾
该函数代码如下：
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}
else{
window.onload=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].onmouseover=function(){//鼠标移至目标元素上方时改变添加类名
addClass(this,"highlight");
}
rows[i].onmouseout=function(){
this.className=this.oldClassName;//鼠标移开目标元素时恢复原类名
}
}
}