积累js里有用的函数库

一.兼容地获取非行间样式（兼容火狐，ie，chrome）

function getStyle(obj,name)
{
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj,false)[name];    
    }
}

//调用
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    alert(getStyle(oDiv,'width'));
    
};

 说明：只能获取单一样式，不能获取复合样式。

单一样式：width、height、position

复合样式：background、border。例如，如果想取背景颜色，可以用backgroundColor

二.封装getByClass

function getByClass(oParent,sClass){
    var aEle=oParent.getElementsByTagName('*');
    var aResult=[];
    
    for(var i=0;i<aEle.length;i++){
        if(aEle[i].className==sClass){
            aResult.push(aEle[i]);    
        }    
    }
    return aResult;
}

三.比较完美的运动框架

1.支持多物体，对任意属性值，链式运动，以及多个值同时运动的情况，满足80%的运动情况。

 调用：startMove(obj，json,fnEnd)。第一个参数是运动的物体。中间一个参数是传一个包含希望运动的属性的json，例如想要同时变高和宽和透明度，可以var json={'height':300,'width':300,'opacity':100};，最后一个参数是传一个函数，即执行完该运动后，想要接着执行的运动。

2.代码：

// JavaScript Document
window.onload=function (){
    var oDiv1=document.getElementById('div1');
    
    oDiv1.onmouseover=function (){
        
        startMove(this,'opacity',100);
    };
        oDiv1.onmouseout=function (){
        
        startMove(this,'opacity',30);
    };
    
};

function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];    
        }else{
            return getComputedStyle(obj,false)[name];    
        }
}

//例如startMove(oDiv,{400,height:400})
function startMove(obj,json,fnEnd){
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var bStop=true;    //假设所有的值都已经到了
        
        for(var attr in json){
            var cur=0;
        
            if(attr=='opacity'){
                cur=Math.round(100*parseFloat(getStyle(obj,attr)));
            }else{
                cur=parseInt(getStyle(obj,attr));    
            }
            var speed=(json[attr]-cur)/6;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(cur!=json[attr]) 
                bStop=false;
            
            
            if(attr=='opacity'){
                obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                obj.style.opacity=(cur+speed)/100;
                
            }else{
                obj.style[attr]=cur+speed+'px';
            }
        } 
        
        if(bStop){
            clearInterval(obj.timer);    
            
            if(fnEnd) fnEnd();
        }
    },30);
}
move.js

四.获取鼠标在页面的绝对位置，消除滚动条的影响

1.如图所示：当存在滚动条时，不能用oDiv.style.top=oEvent.clientY+'px'，因为clientY是可视区的坐标，运用clientY+scrollTop即可得到鼠标的绝对坐标，将其封装为函数。

2.代码如下：

function getPos(ev){
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    
    return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}
函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1 {200px;height:200px;background:red;position:absolute;}
</style>
<script>
function getPos(ev){
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
    
    return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}

document.onmousemove=function (){
    var oEvent=event||ev;
    var oDiv=document.getElementById('div1');
    
    var pos=getPos(oEvent);
    
    oDiv.style.left=pos.x+'px';
    oDiv.style.top=pos.y+'px';
};
</script>
</head>

<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>
完整例子

3.存在的问题：移动鼠标时还是会有卡顿。

五.兼容性的绑定事件

1.attachEvent(事件名,函数)适合于ie10及以下版本，addEventListener(事件名，函数，捕获)适合于谷歌，火狐和ie9及以上版本。

  还有一个区别在于事件名，前者是完整的事件名，如'onclick'，后者是不带on的事件名，如‘click’

2.代码：

function myAddEvent(obj,ev,fn){
    if(obj.attachEvent){
        obj.attachEvent('on'+ev,fn);
    }else{
        obj.addEventListener(ev,fn,false);    
    }    
}
View Code

说明：依次传入obj，不带on的事件名和函数即可。

六.Ajax的库函数

1.主要有4步：创建Ajax对象，连接到服务器，发送请求，接收返回值

2.代码：

function ajax(url, fnSucc, fnFailed)
{
    //1.创建Ajax对象
    if(window.XMLHttpRequest)
    {
        var oAjax=new XMLHttpRequest();
    }
    else
    {
        var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //2.连接服务器（打开和服务器的连接）
    oAjax.open('GET', url, true);
    
    
    //3.发送
    oAjax.send();
    
    //4.接收
    oAjax.onreadystatechange=function ()
    {
        if(oAjax.readyState==4)
        {
            if(oAjax.status==200)
            {
                //alert('成功了：'+oAjax.responseText);
                fnSucc(oAjax.responseText);
            }
            else
            {
                //只有传入失败，才调用
                if(fnFailed)
                {
                    fnFailed();
                }
            }
        }
    };
}
View Code

调用：

window.onload=function (){
    var oBtn=document.getElementById('btn1');
    
    oBtn.onclick=function (){
        ajax('a1.txt?t='+new Date().getTime(),function (str){
            alert(str);
        },function (){alert('失败');});
    };
};
View Code

其中第三个参数(失败的参数)可以省略。

七.封装cookie。

1.代码：（包括设置cookie(包括过期时间)，读取cookie和删除cookie）

//设置cookie的过期时间
function setCookie(name,value,iDay){
    var oDate=new Date();
    oDate.setDate(oDate.getDate()+iDay);
    
    document.cookie=name+'='+value+    ';expires='+oDate;
}

//读取cookie
function getCookie(name){
    //cookie的格式：username=cx; password=11
    //注意这里的空格
    var arr=document.cookie.split('; ');
    for(var i=0;i<arr.length;i++){
        var arr2=arr[i].split('=');
        if(arr2[0]==name){
            return arr2[1];        
        }
    }
    return '';
}

//删除cookie
function removeCookie(name){
    setCookie(name,1,-1);
}
View Code

测试

//测试读取cookie
//alert(getCookie('sex'));

//测试设置cookie
//setCookie('username','cx',12);
//setCookie('password','11',1);

//测试删除cookie
removeCookie('username');
alert(document.cookie);
View Code

依次打开火狐浏览器->右键查看页面信息->安全->查看cookie，可以看到下图，即设置cookie成功。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/sunnyCx/p/8434727.html