js常用的几个方法封装

原创 2016年08月29日 10:18:56
var shelleyObj=(function(){
        /**************获取元素*****************/
        //根据id获取元素
        function getById(id){
            return document.getElementById(id);
        }
        //根据tagname获取元素集,一个参数是tagName,两个参数是(tagName的父元素,tagName);
        function getByTagName(tagName){
            return arguments.length>1 ? arguments[0].getElementsByTagName(arguments[1]):document.getElementsByTagName(tagName);
        }
        //根据className获取元素兼容写法,oParent是父元素,classname是要获取的类的名字
        function getByClassName(oParent,classname){
            if(oParent.getElementsByClassName){
                return oParent.getElementsByClassName(classname);
            }else{
                var aElem=oParent.getElementsByTagName("*");
                var arr=[];
                for(var i=0;i<aElem.length;i++){
                    var aTemp=aElem[i].className.split(" ");
                    if(findInArray(aTemp,classname)){
                        arr.push(aElem[i]);
                    }
                }
                return arr;
            }
        }
        //设置css属性
        function setStyle(id,key,value){
            document.getElementById(id).style[key] =value;
        }
        //设置innerHTML
        function setInnerhtml(id,html){
            document.getElementById(id).innerHTML = html;
        }
        //设置属性
        function setAttr(id,key,value){
            document.getElementById(id)[key]=value;
        }
        //*******DOM获取元素距离body(上,左)的绝对距离*********
        function getPos(obj){
            var l=0;
            var t=0;
            while(obj){
                l+=obj.offsetLeft;
                t+=obj.offsetTop
                obj=obj.offsetParent;
            }
            return {
                "left":l,
                "top":t
            }
        }
        /*************为元素绑定事件*****************/
        //elem是要添加事件的元素,eventName是事件名,handler是事件处理函数
        function addEvent(elem,eventName,handler){
            if(elem.addEventListener){
                elem.addEventListener(eventName,handler,false);
            }else if(elem.attachEvent){
                elem.attachEvent("on"+eventName,handler);
            }else{
                elem["on"+eventName]=handler;
            }
        }
        //移除元素elem的事件,eventName:事件名,handler:事件处理函数
        function removeEvent(elem,eventName,handler){
        if(elem.removeEventListener){
                elem.removeEventListener(eventName,handler,false);
            }else if(elem.detachEvent){
                elem.detachEvent("on"+eventName,handler);
            }else{
                elem["on"+eventName]=null;
            }
        }
        //事件兼容写法
        function getEvent(event){
            return event||window.event;
        }
        //目标事件兼容写法
        function getTarget(event){
            var event = getEvent(event);
            return event.target || event.srcElement;
        }
        //阻止浏览器默认行为兼容写法
        function preventDefault(event){
            var event = getEvent(event);
            if(event.preventDefault){
                event.preventDefault();//标准
            }else{
                event.returnValue = false;//IE
            }
        }
        //兼容IE/chrome/FF的鼠标滚轮事件,obj是在哪个元素上加,fn是事件处理函数
        function addWheel(obj,fn){
            function wheel(ev){
                var oEvent = ev || event;
                var down = true;
                down = oEvent.wheelDelta ? oEvent.wheelDelta<0:oEvent.detail>0;
                fn && fn(down);
            }
            if(window.navigator.userAgent.indexOf("Firefox")!=-1){
                addEvent(obj,"DOMMouseScroll",wheel);
            }else{
                addEvent(obj,"mousewheel",wheel);
            }
        }
        /**鼠标拖拽块儿移动
         * 按下mousedown
         *      移动mousemove
         *      抬起mouseup
         * **/
        function drag(obj){
            obj.onmousedown = function (ev){
                var oEvent = ev || event;
                //按下的点距离块儿的定位左边距离
                var disX = oEvent.clientX - obj.offsetLeft;
                var disY = oEvent.clientY - obj.offsetTop;
                document.onmousemove = function (ev){
                    var oEvent = ev || event;
                    var l = oEvent.clientX - disX;
                    var t= oEvent.clientY - disY;
                    //极限边界情况,右边和底边根据具体情况定
                    if(l<=0){l=0}
                    if(t<=0){t=0}


                    obj.style.left = l +"px";
                    obj.style.top = t +"px";


                    oEvent.preventDefault && oEvent.preventDefault();//addEventLisenter里面不识别return false
                    return false;//阻止浏览器默认行为
                }
                document.onmouseup = function(){
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }
        }
        //domReady事件(自定义兼容版,所有dom结构加载完),会在window.onload事件(所有资源下载完)执行前执行,
        function domReady(fn){
            //判断高版本浏览器
            if(document.addEventListener){
                addEvent(document,"DOMContentLoaded",function(){
                    fn && fn();
                })
            }else{
                addEvent(document,"readystatechange",function(){
                    if(document.readyState=="complete"){
                        fn && fn();
                    }
                })
            }
        }
        //输入框事件(实时监控输入字数的),ie9不兼容oninput和onpropertychange事件,所以要单写
        function listenInput(inpt,span){
            //ie9就每隔一个短时间去查询
            if(window.navigator.userAgent.indexOf("MSIE 9.0")!=-1){
                var timer = null;
                inpt.onfocus = function(){
                    timer = setInterval(function(){
                        span.innerHTML = inpt.value.length;
                    },30);
                }
                inpt.onblur = function(){
                    clearInterval(timer);
                }
            }else{
                //高版本的oninput和低版本的onpropertychange,因为事件不会报错,所以可以连等
                inpt.oninput = inpt.onpropertychange = function(){
                    span.innerHTML = inpt.value.length;
                }
            }
        }
        //事件委托(代理),多个子级的事件绑定到父级做判断事件源做处理
        function eventProxy(ul){
            var aLi = ul.getElementsByTagName("li");
            addEvent(ul,"click",function(ev){
                var oEvent = ev || event;
                var target = oEvent.target || srcElement;
                if(target.tagName==="LI"){
                    for(var i=0;i<aLi.length;i++){
                        aLi[i].style.background = "greenyellow";
                    }
                    target.style.background = "red";
                }
            });
        }
        /*****************物体移动操作*****************/
        function getStyle(obj,name){//getStyle方式一定要把属性显示的写出来
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj,false)[name];
            }
        }
        /**
            obj:移动的物体
            json:改变的属性值和终点
            duration:总时间
            fn:回调函数
        */
        function move(obj,json,duration,fn){
            var start = {};//起点集合
            var dist = {}//距离集合
            for(var name in json){
                start[name]=parseInt(getStyle(obj,name));
                dist[name] = json[name]-start[name];
            }
            var count = Math.floor(duration/30);//总共多少次
            var n = 0;//初始次数


            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                n++;
                if(n==count){
                    clearInterval(obj.timer);
                    fn&&fn();
                }
                for(var name in json){
                    var cur = parseInt(dist[name]/count*n);
                    obj.style[name] = start[name] + cur+"px";
                }
            },30);
        }
        /**move升级处理
            obj:移动的物体
            json:改变的属性值和终点
            options :{duration:总时间 type:移动方式 fn:回调函数}
        */
        function move2(obj,json,options){
            var options = options || {};
            options.duration = options.duration || 800;//没有赋值就是默认
            options.type = options.type || "linear";//同上


            var start = {};//起点集合
            var dist = {}//距离集合
            for(var name in json){
                start[name]=parseInt(getStyle(obj,name));
                dist[name] = json[name]-start[name];
            }
            var count = Math.floor(options.duration/30);//总共多少次
            var n = 0;//初始次数


            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                n++;
                if(n==count){
                    clearInterval(obj.timer);
                    options.fn&&options.fn();
                }
                for(var name in json){
                    var a =0;
                    var cur=0;
                    switch(options.type){
                        case "linear":
                            a = n/count;
                            cur = dist[name]*a;
                            break;
                        case "easing-in":
                            a = n/count;
                            cur = dist[name]*a*a*a;
                            break;  
                        case "easing-out":
                            a = 1-n/count;
                            cur = dist[name]*(1-a*a*a);
                            break;  
                        default :
                            break;  
                    }
                    if(name==="opacity"){
                        obj.style[name] = start[name]+cur;
                        obj.style.filter = "alpha(opacity="+(start[name]+cur)*100+")";
                    }else{
                        obj.style[name] = start[name] + cur+"px";
                    }
                }
            },30);
        }
        /*****************数组相关操作*****************/
        //判断一个元素是否在数组中,参数一arr是数组,参数二n是元素
        function findInArray(arr,n){
            for(var i=0;i<arr.length;i++){
                if(arr[i]==n){
                    return true;
                }
            }
            return false;
        }
        //数组从小到大排列sort参数,n1是数组前一项,n2是数组后一项
        function minNum(n1,n2){
            return n1-n2;
        }
        //数组从大到小排列sort参数
        function maxNum(n1,n2){
            return n2-n1;
        }
        //求数组最小值下表,arr是数组,start是从数组的哪一项开始比较的下表
        function findIminIndex(arr,start){
            var min=arr[start];
            var minIndex=start;
            for(var i=start+1;i<arr.length;i++){
                if(arr[i]<min){
                    min=arr[i];
                    minIndex=i;
                }
            }
            return minIndex;
        }
        //数组有小到大排序法之一(比较每一次最小,与当前最小交换)arr是数组
        function sortArrMinToMax(arr){
            for(var i=0;i<arr.length;i++){
                var temp=0;
                var index=findIminIndex(arr,i);
                if(arr[i]>arr[index]){
                    temp=arr[i];
                    arr[i]=arr[index];
                    arr[index]=temp;
                }
            }
            return arr;
        }
        //数组去重方法 arr是数组
        function  arrRemoveDuplicate(arr){
            var obj={};
            var result=[];
            for(var i=0;i<arr.length;i++){
                if(!obj[arr[i]]){
                    obj[arr[i]]=arr[i];
                }
            }
            for(var key in obj){
                result.push(key);
            }
            return result;
        }
        function arrRemoveDuplicate3(arr){
            var result="";
            var str=arr.join("");
            for(var i=0;i<str.length;i++){
                if(result.indexOf(str.charAt(i))==-1){
                    result+=str.charAt(i);
                }
            }
            result=result.split("");
            for(var j=0;j<result.length;j++){
                result[j]=parseInt(result[j]);
            }
            return result;
        }
        //ie8不支持array.indexOf,可以转成字符串
        function arrRemoveDuplicate1(arr){
            var result=[];
            result.push(arr[0]);
            for(var i=1;i<arr.length;i++){
                if(result.indexOf(arr[i])>-1){
                    continue;
                }else{
                    result.push(arr[i]);
                }
            }
            return result;
        }
        function arrRemoveDuplicate2(arr){
            var result=[];
            arr.sort();
            for(var i=0;i<arr.length;i++){
                if(result.indexOf(arr[i])!=-1){
                    continue;
                }else{
                    result.push(arr[i]);
                }
            }
            return result;
        }
        function sortCompare(arr){
            arr.sort();
            for(var i=0;i<arr.length;i++){
                if(arr[i]==arr[i+1]){
                    arr.splice(i,1);
                    i--;
                }
            }
            return arr;
        }


        //随机更换数组方法
        function  sortArrayRandom(arr){
        arr.sort(function(){
        return 0.5-Math.random();
        });
        }


        /***************时间对象相关处理方法*******************/
        //时间处理函数补0(当两位数字,十位为0补0),n为数字
        function toDou(n){
            return n<10 ? "0"+n : ""+n;
        }
        //求一个月多少天
        function daysInMonth(date){
            date.setMonth(date.getMonth()+1);
            date.setDate(0);
            return date.getDate(0);
        }
        //上个月最后一天是星期几
        function lastMonthWeek(date){
            var week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
            date.setDate(0);
            return week[date.getDay()];
        }
        /**************json and string*********************/
        //字符串转json,例name=tom&age=12
        function  stringToJson(str){
            var json={};
            var arr=[];
            arr=str.split("&");
            for(var i=0;i<arr.length;i++){
                var key=arr[i].substring(0,arr[i].indexOf("="));
                var value=arr[i].substring(arr[i].indexOf("=")+1);
                json[key]=value;
            }
            return json;
        }
        //json 转 字符串,json是参数json类型
        function jsonToString(json){
            var arr=[];
            for(var name in json){
                var str = name +"="+json[name];
                arr.push(str);
            }
            var result=arr.join("&");
            return result;
        }
        //中文转成编码
        function chineseToCode(str){
        return encodeURIComponent(str);
        }
        //编码转成中文
        function codeToChinese(code){
        return decodeURIComponent(code);
        }
        //字符串中出现那个字符的次数最多?多少次?str是字符串
        function maxTimeChar(str){
            var json = {};
            // 循环
            for(var i=0; i<str.length; i++){
                if(json[str.charAt(i)]){
                    json[str.charAt(i)]+=1;
                }else{
                    json[str.charAt(i)] = 1;
                }
            }
            var max = 0;
            var maxName;
            for(var name in json){
                if(json[name]>max){
                    max = json[name];
                    maxName = name;
                }
            }
            return maxName+":"+max;
        }
        //判断一个对象是否是空对象
        function isEmptyObject(obj){
        var arr=[];
        for(var key in obj){
        arr.push(key);
        }
        return arr.length>0 ? false:true;
        }
        /*************判断浏览器类型************/
        function judgeBrower(){
            var result="";
            if(window.navigator.userAgent.indexOf('Chrome')!=-1){
                result='谷歌浏览器';
            }else if(window.navigator.userAgent.indexOf('Firefox')!=-1){
                result='火狐浏览器';
            }else if(window.navigator.userAgent.indexOf('MSIE')!=-1){
                result='IE浏览器';
            }
            return reuslt;
        }


        return {
            getById:getById,
            getByTagName:getByTagName,
            getByClassName:getByClassName,
            setStyle:setStyle,
            setInnerhtml:setInnerhtml,
            setAttr:setAttr,
            getPos:getPos,
            addEvent:addEvent,
            removeEvent:removeEvent,
            getEvent:getEvent,
            getTarget:getTarget,
            preventDefault:preventDefault,
            addWheel:addWheel,
            drag:drag,
            domReady:domReady,
            move:move,
            move2:move2,
            listenInput:listenInput,
            eventProxy:eventProxy,
            findInArray:findInArray,
            maxNum:maxNum,
            minNum:minNum,
            findIminIndex:findIminIndex,
            sortArrMinToMax:sortArrMinToMax,
            arrRemoveDuplicate:arrRemoveDuplicate,
            arrRemoveDuplicate1:arrRemoveDuplicate1,
            arrRemoveDuplicate2:arrRemoveDuplicate2,
            arrRemoveDuplicate3:arrRemoveDuplicate3,
            sortCompare:sortCompare,
            sortArrayRandom:sortArrayRandom,
            lastMonthWeek:lastMonthWeek,
            daysInMonth:daysInMonth,
            stringToJson:stringToJson,
            jsonToString:jsonToString,
            chineseToCode:chineseToCode,
            codeToChinese:codeToChinese,
            isEmptyObject:isEmptyObject,
            maxTimeChar:maxTimeChar,
            judgeBrower:judgeBrower
        }
    })();

相关文章推荐

自己动手封装js工具类(JS中定义类的几种方式)

1、工厂方式    function Car(){     var ocar = new Object;     ocar.color = "blue";     ocar.doors =...
  • cnmm22
  • cnmm22
  • 2015年06月22日 20:36
  • 5570

js如何创建类(封装)

学过其他面向对象语言的JavaScripter,可能都应用过类,如:class{},等定义的一系列方法, 但是初学者看是学习js的时候,经常会看到这样一句话,那就是JavaScript是面向对象语言...
  • xi_2130
  • xi_2130
  • 2015年12月12日 16:43
  • 5635

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

底层方法封装

项目开发中面向接口编程,D层进行数据库的操作,一般都是一个接口对应一个实现类。       但是各个接口中有公共的方法如:增删改查等基本操作。我们把这些基本的操作抽象出来放在公共的接口实现D层代码的...

js自己封装方

//*后台管理页JS函数,Jquery扩展 $.ajaxSetup({     cache: false }); $(function () {     $('.aspNetHidden').hide...

将一段JS代码封装成一个方法

}).mouseout(function(){ $("#plate-3hover").removeClass("plate-3after") }); $("#plate-4").mousee...

原生JS 封装运动函数

在学原生JS之前,一直用jQuery 写运动,各种方便,但是不知其所以然,今天得空看了一个javascript 视频教程(这里不说了,以防广告的嫌疑),只能用一个词语形容之后的感觉-------醍醐灌...

常用js方法的封装

原来来自:这里写链接内容

原生javascript自己封装的常用小方法。

var zycTools = { //使用css选择器选择单个元素 $:function(elem){ return document.querySelector(el...

我自己的Javascript 库,封装了一些常用函数

/** @ Name : Kingwell Javascript Library @ Author :kingwell @ Date : 2012-8-22 @...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js常用的几个方法封装
举报原因:
原因补充:

(最多只允许输入30个字)