js小技巧

技巧

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.onload=function()

       {

           var oDiv=document.getElementById('div1');

           oDiv.onmousedown=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.onmousemove=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.onmouseup=function()

                {

                    document.onmousemove=null;

                    document.onmouseup=null;

 

                }

                return false;//反之FF中的二次拖拽问题

 

           }

       }

   </script>

默认行为

只能输入数字的框

   <script>

       window.onload=function()

       {

           var oTxt=document.getElementById('txt1');

           oTxt.onkeydown=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. oncontextmenu=function()

{

         returnfalse;//阻止默认事件

}

onkeydown onkeyup

ctrlKey、shiftKey、altKey

ClientX ClientY是可视区的位置

获取滚动条的高度

var scrollTop=document.documentElement.scrollTop||

                    document.body.scrollTop;

取消事件冒泡

           oBtn.onclick=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.onscroll=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.onload=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.onload=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.onload=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.onload=function()

       {

           var oTxt=document.getElementById('txt1');

           var oBtn=document.getElementById('btn1');

           oBtn.onclick=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.onclick=abc;

 

oBtn.onclick= function ()

    {

       alert('abc');

    }

;

 

 

window.onload

         当页面加载完成的时候发生

 

行为、样式、结构、三者分离

Js        css      html

 

innerHTML

inner html

可以在其中加入html代码

 

currentStyle只能取单一样式不能取复合样式

obj.currentStyle['background’];出错

可以用obj.currentStyle['backgroundColor’];取其中的单一样式

延时提示框

<script>

       window.onload=function()

       {

         var oDiv1 = document.getElementById('div1');

         var oDiv2 = document.getElementById('div2');

           var timer;

           oDiv2.onmouseover=oDiv1.onmouseover=function()

           {

                clearTimeout(timer);

                oDiv2.style.display='block';

           };

           oDiv2.onmouseout= oDiv1.onmouseout=function()

           {

                timer =setTimeout(function(){oDiv2.style.display='none';},500);

           };

 

       };

</script>

offsetLeft/ offsetTop

offsetLeft计算所有相关left信息的结果和（left、margin）

 

当需要给整个页面加事件时

document.onclick