原生javascript常用的一些封装

1.DOM操作

//封装id选择器1

function  byId(id){

return typeof(id) === "string"?document.getElementById(id):id;

}

//封装id选择器2

function $(selector){

var c=selector.substring(0,1);//获取第一个字符  

  if(c=="#"){     

 return  document.getElementById(selector.substring(1,selector.length));//返回相应的元素  

  }

}

//封装class选择器  

function byClass(selector){   

 var className=selector.substring(1);//从索引为1的元素往后取  

  //判断浏览器是否支持getElementsByClassName   

 if(document.getElementsByClassName){     

 return document.getElementsByClassName(className)      //document.querySelectorAll('.cls')兼容性有问题  

  }else{   

   //document.getElementsByTagName('*')+正则表达式      //\s空白字符 ^开始 $结束    

  var reg=new RegExp('^|\\s'+className+'$|\\s');    

  var elems=document.getElementsByTagName("*");//获取页面中所有元素   

   var arr=[];//保存获取到的指定className的元素    

  for(var i=0;i

  if(reg.test(elems[i].className)){//如果和模式匹配上   

       arr.push(elem[i]);    

    }    

  }     

 return arr; 

}  

}

//封装标签选择器  

 function byTagName(element){    

 return document.getElementsByTagName(element); 

 } 

//向当前元素末尾追加一个元素

function append(newEle, container) {

container.appendChild(newEle);

} 

//向当前元素之前追加一个元素

function prepend(newEle, container) {

var firstEle = this.firstChild(container);

if(firstEle) {

container.insertBefore(newEle, firstEle);

return;

}

this.append(newEle, container);

} 

2.class样式操作

//添加class

function addClass(obj, sClass) {

var aClass = obj.className.split(' ');

if (!obj.className) {

obj.className = sClass; return;

}

for (var i = 0; i < aClass.length; i++) {

if (aClass[i] === sClass) return;

}

obj.className += ' ' + sClass;

} 

//移除class

function removeClass(obj, sClass) {

var aClass = obj.className.split(' ');

if (!obj.className) return;

for (var i = 0; i < aClass.length; i++) {

if (aClass[i] === sClass) {

aClass.splice(i, 1);

obj.className = aClass.join(' ');

break;

}

}

} 

//设置css

function setCss(curEle, attr, value) {

reg = /^(width|height|top|right|bottom|left|(margin|padding)(Top|Right|Bottom|Right|)?)$/;

if(attr === "float") {

curEle.style["cssFloat"] = value;

curEle.style["styleFloat"] = value;

return;

}

if(attr === "opacity") {

curEle.style["opacity"] = value;

curEle.style["filter"] = "alpha(opacity=" + value * 100 + ")";

return;

}

if(reg.test(attr)) {

if(!isNaN(value)) {

curEle.style[attr] = value + "px";

}

}

curEle.style[attr] = value;

} 

// 获取元素样式

function getCss(curEle, attr) {

var val = null, reg = null;

if(!flag) {

if(attr === "opacity") {

val = curEle.currentStyle["filter"];

reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i

val = reg.test(val) ? reg.exec(val)[1] / 100 : 1;

} else {

val = curEle.currentStyle[attr];

}

} else {

val = window.getComputedStyle(curEle, null)[attr];

}

reg = /^(-?\d+(\.\d+)?)(px|pt|rem|rm)?$/i;

if(reg.test(val)) {

return parseFloat(val);

} else {

return val;

}

} 

// 获取设置css

function css(curEle) {

var arg2 = arguments[1];

if(typeof arg2 === "string") {

var arg3 = arguments[2];

if(typeof arg3 === "undefined") {

return this.getCss.call(curEle, arguments);

}

this.setCss.call(curEle, arguments);

}

arg2 = arg2 || 0;

if(arg2.toString() === "[object Object]") {

this.setGroupCss.apply(this, arguments);

}

} 

// 判断dom元素是否有某个类名

function hasClass(curEle, className) {

var reg = new RegExp("(^| +)" + className + "( +|$))");

return reg.test(curEle.className)

} 

3.事件监听

function bind(obj, ev, fn) {

if (obj.addEventListener) {

obj.addEventListener(ev, fn, false);

} else {

obj.attachEvent('on' + ev, function() {

fn.call(obj);

});

}

}