1网页换肤
原理：改变link的href属性
2单机按钮显示隐藏div
原理：if....else.....判断div的display属性
3单击不同按钮改变div背景色
原理：通过函数传参的方式能很好的实现
4单击不同按钮改变div宽高
原理：通过传入函数两个参数实现，即属性：值
5全选反选不选
原理：if(aInput.checked==true){aInput.checked=false}else{.....}
6选项卡
原理：全部清除其他后再给本身加样式关键：aBtn.index=i;
7js简易日历
注意：var oTxt=oDiv.getElementsByTagName('div')[0];和oTxt.innerHTML=引号的应用！
8求和
关键isNaN()
9利用%实现隔行变色和数字转换为分秒
10实现n个数字求和
关键：定义一个result=0，for循环arguments的length
11根据arguments的length封装一个css函数用于获取或设置属性值
12封装一个获取非行间样式getStyle(obj,attr)
13,splice(起点，长度)删除和arr.sort(function(n1,n2){ return n2-n1;});排序
14.超酷数码时钟，注意：定义变量的位置，要在定时器要调用的函数内！还有charAt()是字符串的方法而非数组喔！
15延时提示框实例，注意：setTimeout为多少秒后触发一次
16oDiv下getElementById()是不允许的，必须document
17无缝滚动图片
offsetLeft指的是border到border之间的距离
offsetWidth不包括margin，无缝滚动制作是尽量避免margin的使用！
对于同一个元素要么你一直改变他的style，要么你一直改变他的class，混着来你懂得！
Dom
1childNodes与nodeType的配合使用或children的单独使用
2单击a链接隐藏或显示li中的内容parentNode
3offsetParent获取元素有定位的父级
4firstChild的一个兼容处理
if(oUl.firstElementChild)
        {
                oUl.firstElementChild.style.background='red';//高版本
        }
        else
        {
                oUl.firstChild.style.background='red';//低版本ie7等
        }
5setAttribute、getAttribute、removeAttribute
6封装一个getByClass
function getByClass(oParent,sClass)
{
        var aEle=oParent.getElementsByTagName('*');
        var aResult=[];
        for(var i=0;i<aEle.length;i++)
        {
                if(aEle.className=='box')
                {
                        aResult.push(aEle);
                }
        }
        return aResult;
}
7创建与插入：creatElement()与appendChild()或insertBefore
根据aLi.length是否大于0，再判断使用insertBefore，因为在低版本浏览器中当开始无li时，oUl.insertBefore(oLi,aLi[0]);会出错！
删除Dom元素：oUl.removeChild();
8表格隔行变色
关键：tBodies[0、定义oldColor以记录
添加表格oTab.tBodies[0].appendChild(oTr);
删除表格var id=oTab.tBodies[0].rows.length+1;oTd.innerHTML=id++;
var oTd=document.createElement('td');//注意获取a的方式
搜索表格
Search找到并返回字符串出现的位置，没找到返回-1；
window.onload=function()
{
        var oTab=document.getElementById('tab1');
        var oName=document.getElementById('name');
        var oBtn=document.getElementById('btn1');
        oBtn.onclick=function()
        {
                for(var i=0;i<oTab.tBodies[0].rows.length;i++)
                {
                        var sTab=oTab.tBodies[0].rows.cells[1].innerHTML.toLowerCase();
                        var sTxt=oName.value.toLowerCase()
                        var arr=sTxt.split(' ');
                        oTab.tBodies[0].rows.style.background='';
                        for(var j=0;j<arr.length;j++)
                        {
                                if(sTab.search(arr[j])!=-1)
                                {
                                        oTab.tBodies[0].rows.style.background='green';
                                }
                        }
                }        
        };
};
9给li中的数字排序
原理：转换为数组利用其sort()、parseInt等；三步：转换、排序、插入
运动
1分享到startMove(iTarget)
if(oDiv.offsetLeft>iTarget)
{
        speed=-10;
}
else
{
        speed=10;
}
注意：var timer=null;的定义的位置
2透明度的变化
注意：额外定义一个alpha变量来代替‘offsetAlpha’
if(alpha<iTarget)
{
        speed=10;
}
else                                   
{
        speed=-10;
}
if(alpha==iTarget)
3缓冲运动
注意：var speed=(目标-oDiv.offsetLeft)/10;speed=speed>0?Math.ceil(speed):Math.floor(speed);
4滑动的侧边栏
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var mm=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
var oDivTop=parseInt(scrollTop+mm);
startMove(oDivTop);//offsetTop包括滚动
5匀速运动的停止条件
if(Math.abs(iTarget-oDiv.offsetLeft)<=7)
{
        clearInterval(timer);
        oDiv.style.left=iTarget+'px';
}
5多物体运动中所有变量都不能公用！startMove(obj,iTarget)
多个Div同时变宽注意：aDiv.timer=null;
多个Div透明度变化注意：aDiv.alpha=30;obj.alpha+=speed;
6任意值运动startMove(obj, attr, iTarget)
注意：offset系列当有边框是会出现问题！解决：getStyle()
步骤：取当前值、算速度、判停止
7链式运动startMove(obj,