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<elems.length;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);
});
}
}
