javascript记要
javascript记录
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,attr,iTarget,fnEnd)
8多值同时运动（完美）startMove(obj,json,fnEnd)
9微博发布框
注意
if(oUl.children.length>0)
{
oUl.insertBefore(oLi,aLi[0]);
}
else
{
oUl.appendChild(oLi);
}
var iHeight=oLi.offsetHeight;
oLi.style.height=0;
10弹性运动
停止条件：Math.abs(speed)<1&&Math.abs(iTarget-left)<1
oDiv.style.left=oDiv.offsetLeft+speed+’px’;
由于oDiv.style.left=只接受整数，故每次定时器开启相加时都会舍去小数部分
left=left+speed;这里left就是一普通变量，神马都能接收，你懂得。。。
11碰撞运动+重力
var oDiv=document.getElementById('div1');
iSpeedY+=3; //注意重力语句书写顺序（位置）
var l=oDiv.offsetLeft+iSpeedX;
var t=oDiv.offsetTop+iSpeedY;
12弹性+拖拽+重力
13布局转换
注意：要有默认margin值即便为零
解决层级问题zIndex++;
事件
1事件对象var oEvent=ev||event;(clientX指的是可视区的坐标)
2取消冒泡oEvent.cancelBubble
3跟随鼠标的Div注意：oDiv.style.top=clientY+scrollTop;
4一串跟随鼠标的Div
注意：
function getPos(ev)
{
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
return {x:scrollLeft+ev.clientX,y:scrollTop+ev.clientY};
}
Div的position：absolute;
5keyCode键盘字符编号
6键盘控制Div的移动
注意：document.onkeydown
if(oEvent.keyCode==37)
{
oDiv.style.left=oDiv.offsetLeft-10+'px';
}
7ctrlKey/shiftKey/altKey
oTxt1.onkeydown=function(ev)
{
var oEvent=ev||event;
if(oEvent.keyCode==13&&oEvent.ctrlKey)
{
oTxt2.value+=oTxt1.value+'\n';
oTxt1.value='';
}
};
8阻止右键菜单并自定义菜单
document.oncontextmenu=function()
{
return false;
};
9只能输入数字的文本框
oTxt.onkeydown=function(ev)
{
var oEvent=ev||event;
if(oEvent.keyCode!=8&&(oEvent.keyCode>57||oEvent.keyCode<48))
{
return false;
}
};
10拖拽
解决：菜单栏抬起问题、火狐的bug问题(down/move/up)
11事件绑定
attachEvent和addEventListener
12事件捕获
oDiv.setCapture();所有事件都集中到oDiv上oDiv.releaseCapture();释放捕获
13完美拖拽
oDiv.mousedown/if(oDiv.setCapture){oDiv...}else{document...}
function mouseMove(ev)
{
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
if(l<0)
{
l=0;
}
else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
{
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}
if(t<0)
{
t=0;
}
else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
{
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';//一定要注意位置！
}
14自定义滚动条并控制另一个Div大小
删除y轴移动的代码、
oDiv.style.left=l+'px';
var scale=l/(oDiv1.offsetWidth-oDiv.offsetWidth);
oDiv2.style.width=scale*400+'px';
oDiv2.style.height=scale*400+'px';
注意控制透明度时的两种不同写法
oDiv2.style.filter="alpha(opacity:'+100*scale+')"; oDiv2.style.opacity=scale;
控制文章的上下移动：xi.style.top=-scale*(xi.offsetHeight-oDiv2.offsetHeight)+'px';
注意布局外Div：设宽高position：relative内Div无设宽高position：absolute；left=0；top=0；
15阻止缓存
“aaa.txt?t=”+new Date().getTime(); 或”aaa.txt?date=”+Math.random();
实例
1微博发布框
注意：ie = !-[1,];
onchange : 当光标消失的时候，只能触发一次
ie : onpropertychange : 输入连续触发
标准：oninput : 也是连续触发
return String(str).replace(/[^\x00-\xff]/g,'aa').length
思路：oT.onfocus、oT.onblur、if(ie)、toChange()、getLength()、oA.onclick
2图片预加载：
3在window.onload中使oImg.src与onmouseover的src保持一致即可
苹果菜单
注意：aImg.width与aImg.style.left而没有aImg.style.width一说