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);//獲取第一個(gè)字符??
??if(c=="#"){?????
?return? document.getElementById(selector.substring(1,selector.length));//返回相應(yīng)的元素??
??}
}
//封裝class選擇器??
function byClass(selector){???
?var className=selector.substring(1);//從索引為1的元素往后取??
??//判斷瀏覽器是否支持getElementsByClassName???
?if(document.getElementsByClassName){?????
?return document.getElementsByClassName(className)??????//document.querySelectorAll('.cls')兼容性有問題??
??}else{???
???//document.getElementsByTagName('*')+正則表達(dá)式??????//\s空白字符 ^開始 $結(jié)束????
??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;?
}??
}
//封裝標(biāo)簽選擇器??
?function byTagName(element){? ??
?return document.getElementsByTagName(element);?
?}?
//向當(dāng)前元素末尾追加一個(gè)元素
function append(newEle, container) {
container.appendChild(newEle);
}?
//向當(dāng)前元素之前追加一個(gè)元素
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;
}
}
}?
//設(shè)置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;
}
}?
// 獲取設(shè)置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元素是否有某個(gè)類名
function hasClass(curEle, className) {
var reg = new RegExp("(^| +)" + className + "( +|$))");
return reg.test(curEle.className)
}?
3.事件監(jiān)聽
function bind(obj, ev, fn) {
if (obj.addEventListener) {
obj.addEventListener(ev, fn, false);
} else {
obj.attachEvent('on' + ev, function() {
fn.call(obj);
});
}
}
