js常用的几个方法封装
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
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
}
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
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
minIndex=i;
}
}
return minIndex;
}
//数组有小到大排序法之一（比较每一次最小，与当前最小交换）arr是数组
function sortArrMinToMax(arr){
for(var i=0;i
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
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
result+=str.charAt(i);
}
}
result=result.split("");
for(var j=0;j
}
return result;
}
//ie8不支持array.indexOf,可以转成字符串
function arrRemoveDuplicate1(arr){
var result=[];
result.push(arr[0]);
for(var i=1;i
continue;
}else{
result.push(arr[i]);
}
}
return result;
}
function arrRemoveDuplicate2(arr){
var result=[];
arr.sort();
for(var i=0;i
continue;
}else{
result.push(arr[i]);
}
}
return result;
}
function sortCompare(arr){
arr.sort();
for(var i=0;i
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
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
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
}
})();