技巧
prompt输入框
返回值是输入的内容或null
confirm();
有返回值,确定返回true、取消返回false
固定定位
position:fixed ;
Location
userAgent
当前的浏览器
window.navigator.userAgent
同步/异步
继承
<script>
function A()
{
this.abc=12;
}
A.prototype.show=function()
{
alert(this.abc);
}
//继承
function B()
{
//this--new B()
A.call(this);//属性继承
}
for(var i in A.prototype)//方法继承
{
B.prototype[i]= A.prototype[i];
}
B.prototype.fn=function()
{
alert('abcd');
}
var obj=new B();
var objA=new A();
objA.fn();
</script>
Call();
//第一个参数是this
<script>
function show(a,b)
{
alert(this+a+b);
}
show.call('abc',12,5);
</script>
原型prototype
用构造函数加属性
用原型加方法
给原型加function
实例:Array.prototype.sum=function()
{
varresult=0;
for(var i=0;i<this.length;i++)
{
result+=this[i];
}
return result;
}
JS特性
用没有定义的变量---报错
用没有定义的属性---undefined
Ajax
1. 创建ajax对象
2. 连接到服务器
3. 发送请求
4. 接收返回值
请求状态监控
Onreadystatechange事件
readyState属性:请求状态
0(未初始化)还没有调用open()方法
1(载入)已调用send()方法,正在发送请求
2(载入成功)send()发送完成,已收到全部相应内容
3(解析)正在解析响应内容
4(完成)相应内容解析完成,可以在服务器端调用了
status属性:请求结束
responseText
代码实例
function ajax(url,fnSucc,fnFaild){
if(window.XMLHttpRequest)//如果直接写XMLHttpRequest在IE6下报错
{ //因为在IE6下没有定义XMLHttpRequest
var oAjax=new XMLHttpRequest();//不兼容IE6
}
else
{
//IE6下用ActiveXObject("Microsoft.XMLHTTP").
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');//只兼容IE
}
// alert(oAjax.readyState);//0(未初始化)还没有调用open()方法
//2.连接服务器
//open(方法,文件名,异步传输);
oAjax.open('GET',url,true);//阻止缓冲
// alert(oAjax.readyState);//1
//3.发送请求
oAjax.send();
// alert(oAjax.readyState);//1 已调用send()方法,正在发送请求
//4.接收返回
oAjax.onreadystatechange=function() //当ajax和服务器通信是发生
{
//oAjax.readyState //浏览器和服务器,进行到哪一步了
if(oAjax.readyState==4) //读取完成
{
if(oAjax.status==200) //HTTP状态码 200代表成功
{
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
{
fnFaild(oAjax.status);
}
}
}
};
}
Get post
get:通过网址 容量小 安全性差
post:不通过网址 容量大 安全性好一点
eval
eval(str)将str解析成js可以识别的内容
去掉缓冲的方法
修改url,如在url后加上一个时间戳参数
鼠标拖动
<script>
function getPos(ev)
{
varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}
window.οnlοad=function()
{
var oDiv=document.getElementById('div1');
oDiv.οnmοusedοwn=function(ev)
{
var oEvent=ev||event;
var iLeft;
var iTop;
var posDown=getPos(oEvent);
iLeft=posDown.x-oDiv.offsetLeft;
iTop=posDown.y-oDiv.offsetTop;
// alert(iLeft+','+iTop);
document.οnmοusemοve=function(ev)
{
var oEventMove=ev||event;
varposMove=getPos(oEventMove);
var l=posMove.x-iLeft;
var t=posMove.y-iTop
if(l<0)
{
l=0;
}
elseif(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';
}
document.οnmοuseup=function()
{
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
return false;//反之FF中的二次拖拽问题
}
}
</script>
默认行为
只能输入数字的框
<script>
window.οnlοad=function()
{
var oTxt=document.getElementById('txt1');
oTxt.οnkeydοwn=function(ev)
{
var oEvent=ev||event;
variInput=parseInt(oEvent.keyCode);
//alert(iInput);
if((iInput>=48&&iInput<=58)||iInput==8||iInput==39||iInput==37)
{
}
else
{
return false;
}
};
};
</script>
浏览器自带行为
oncontextmenu
document. οncοntextmenu=function()
{
returnfalse;//阻止默认事件
}
onkeydown onkeyup
ctrlKey、shiftKey、altKey
ClientX ClientY是可视区的位置
获取滚动条的高度
var scrollTop=document.documentElement.scrollTop||
document.body.scrollTop;
取消事件冒泡
oBtn.οnclick=function(ev)
{
var oEvent=ev||event;
oDiv.style.display='block';
oEvent.cancelBubble=true;//将取消冒泡属性赋值为true,防止往父级传递
//alert('oBtn');
}
完美运动框架
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,json,fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var bStop=true;//假设所有的值都已经到了
for(name in json)
{
var cur=0;
if(name=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj,name))*100);
}
else
{
cur=parseInt(getStyle(obj,name));
}
var speed=(json[name]-cur)/16;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[name])
{
bStop=false;
}
if(name=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[name]=cur+speed+'px';
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fnEnd)
{
fnEnd();
}
}
},30);
}
Js中的回调
function c
{
a(b);
}
function b(){}
function a(b)
{
If(b)
{
b();
}
}
offset的Bug
如果width:200px border:1px 此时的offsetWidth=202px
如果width:200px border:1px paddint:10px此时的offsetWidth=222px
Offset的值要考虑边距等多种属性
<script>
setInterval(function()
{
var oDiv=document.getElementById('div1');// width:200px border:1px
oDiv.style.width=oDiv.offsetWidth-1+'px';//此时的offsetWidth=202
//oDiv.style.width=202-1=201px.变大了
//导致每次增加一
},30);
</script>
在需要使用offsetWidth等属性时用:
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
returngetComputedStyle(obj,false)[name];
}
}
获取非行间样式
匀速运动
<script>
var timer=null;
function startMove(iTarget)
{
var oDiv = document.getElementById('div1');
var speed;
clearInterval(timer);
timer=setInterval(function()
{
if(oDiv.offsetLeft<iTarget)
{
speed=7;
}
else
{
speed=-7;
}
if(Math.abs(iTarget-oDiv.offsetLeft)<7)
{
oDiv.style.left=iTarget+'px';
clearInterval(timer);
} else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
document.title=oDiv.offsetLeft+' '+speed;
}
},30);
};
</script>
右侧浮动框
<script>
window.οnscrοll=function()
{
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||
document.body.scrollTop;
//取整是为了防止出现0.5的情况导致悬浮框上下抖动
startMove(parseInt((document.documentElement.clientHeight-
oDiv.offsetHeight)/2)+scrollTop);
}; var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function()
{
varspeed=(iTarget-oDiv.offsetTop)/6;
speed=speed>0?Math.ceil(speed) :Math.floor(speed);
if(oDiv.offsetTop==iTarget)
{
clearInterval(timer);
}
else
{
oDiv.style.top=oDiv.offsetTop+speed+'px';
}
},30);
}
</script>
缓冲运动
<script>
window.οnlοad=function()
{
var oDiv=document.getElementById('div1');
};
var timer=null;
function startMove(iTarget)
{
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function()
{
varspeed=(300-oDiv.offsetLeft)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
oDiv.style.left=oDiv.offsetLeft+speed+'px';
document.title=oDiv.offsetLeft+''+speed;
},30);
};
</script>
Math
Math.ceil// 向上取整
Math.floor// 向下取整
Math.abs//绝对值
Math.round//四舍五入
获取透明度
offsetAlpha
var alpha;
oDiv.style.filter='alpha(opacity:'+alpha+')';
oDiv.style.opacity=alpha/100;
运动
运动框架:
1. 在开始运动时,关闭已有定时器
2. 把运动和停止隔开(if/else)
Bug:
1. 定时器至少执行一次
2. 重复点击会加速setInterval至少会执行一次
if(oDiv.offsetLeft>=300)
{
clearInterval(timer);
}
else//使用else防止至少执行一次
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
<script>
var timer;
function startMove()
{
var oDiv=document.getElementById('div1');
var speed=10;
clearInterval(timer);
//为防止多次点击开启定时器,在每次开之前关掉之前的定时器
timer = setInterval(function(){
if(oDiv.offsetLeft>=300)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
</script>
表格操作
一个表格中只用一个tHead和tFoot可以有多个tBody
oTab.tBodies[0].rows[1].cells[1].innerHTML;
tBodies 获取tBody
rows获取行tr
cells获取单元格td
tHead
tFoot
<script>
window.οnlοad=function()
{
var oTab=document.getElementById('tab1');
alert(oTab.rows.length);//会加上tHead的行
alert(oTab.tBodies[0].rows.length);
}
</script>
删除表格中的某一行记得tBodies
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
搜索
忽略大小写toLowerCase
模糊搜索
var str=”asdasd”
str.search(‘a’)//查找a在字符串str中的位置,找到返回位置,没找到返回-1.
var str=”asd 123 sdf qwe”
var arr=str.split(‘ ’);//用空格切分
把关键字切分开,每个关键字都搜索一边
文档碎片
1. 文档碎片可以提高DIM操作性能(理论上)
2. 文档碎片原理
3. document.createDocumentFragmentd
<script>
window.οnlοad=function()
{
var oUl=document.getElementById('ul1');
var oFrag=document.createDocumentFragment();
for(var i=0;i<10000;i++)
{
var oLi=document.createElement('li');
oFrag.appendChild(oLi);
}
oUl.appendChild(oFrag);
}
</script>
设置属性值的方法
<script>
window.οnlοad=function()
{
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');
oBtn.οnclick=function()
{
//oTxt.value='asdasda';
//oTxt['value']='asdasd';
oTxt.setAttribute('value','asdasd');
}
}
</script>
offsetParent
用于获取该元素用于定位的父级
绝对定位元素,根据谁定位?
根据最近的有绝对定位的元素进行定位,一直往上级找。
input标签提示
<input id="text1"type="text" title="input"/>
<a href="javascript:;">连接</a>的用处
当一个空连接是,不写出#,写出#会页面的回到顶端,写出<a href="javascript:;">连接</a>
class在js中是关键字
所以在js中用样式时用className代替
操作属性的方法 . []
第一种. 点操作
<input id="text1"type="text" title="input"/>
<script>
function change()
{
var oText = document.getElementById('text1');
oText.title="请输入";
}
</script>
第二种 [] 点操作
oText[‘title’]="请输入";
区别:
正常使用. 方便;
[]中可以使用变量,
当要修改的东西不一定的时候使用[]
Style和className
元素.style.属性=xxx是修改行间样式
之后再修改className不会有效果
oDiv.style.background='red'
用style加样式是加在行间。
Style取样式也是在行间。
样式优先级
*<标签<class<id<行间
匿名函数
function abc()
{
alert('abc');
}
oBtn.οnclick=abc;
oBtn.οnclick= function ()
{
alert('abc');
}
;
window.onload
当页面加载完成的时候发生
行为、样式、结构、三者分离
Js css html
innerHTML
inner html
可以在其中加入html代码
currentStyle只能取单一样式不能取复合样式
obj.currentStyle['background’];出错
可以用obj.currentStyle['backgroundColor’];取其中的单一样式
延时提示框
<script>
window.οnlοad=function()
{
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var timer;
oDiv2.οnmοuseοver=oDiv1.οnmοuseοver=function()
{
clearTimeout(timer);
oDiv2.style.display='block';
};
oDiv2.οnmοuseοut= oDiv1.οnmοuseοut=function()
{
timer =setTimeout(function(){oDiv2.style.display='none';},500);
};
};
</script>
offsetLeft/ offsetTop
offsetLeft计算所有相关left信息的结果和(left、margin)
当需要给整个页面加事件时
document.onclick