function $(){
return new Base(); //每次要调用new一个新对象否则回造成叠加
}
function Base(){
this.elements=[]; //因为要返回new对象所以创建一个数组保存获取的DOM对象
this.getId=function(id){
this.elements.push(document.getElementById(id));
return this;
};
this.getTagName=function(tagName){
var tags = document.getElementsByTagName(tagName);
for(var i = 0;i < tags.length;i++){ //getElementsByTagName获取的是数组要所以要遍历元素
this.elements.push(tags[i]);
};
return this;
};
this.getClass=function(className,n){
if(arguments.length==1){ //判断参数,如果1个参数是要获取所有Class
var all = document.getElementsByTagName("*");
for(var i = 0;i<all.length;i++){
if (all[i].className==className){
this.elements.push(all[i]);
}
}
}else if(arguments.length==2){ //两个参数是想获取第n个class
this.elements.push(document.getElementsByClassName(className)[n]);
}
return this;
};
}
Base.prototype.addClass=function(className){ //添加class
for(var i = 0;i < this.elements.length;i++){
this.elements[i].className += " " + className;
}
return this;
}
Base.prototype.css=function (attr,value){
for(var i = 0;i < this.elements.length;i++){
if(arguments.length==1){ //1个参数是要的到属性值
if(typeof window.getComputedStyle != "undefined"){ //判断浏览器是否支持getComputedStyle
return window.getComputedStyle(this.elements[i],null).getPropertyValue(attr);
}else if(typeof this.element[i].currentStyle != "undefined"){ //判断是否支持currentStyle
return this.element[i].currentStyle.getAttribute(attr);
}
}
this.elements[i].style[attr]=value; //如果不是1个参数设置属性并返回对象
};
return this;
}
Base.prototype.html=function (value){ //innerHTML方法
for(var i = 0;i < this.elements.length;i++){
if(arguments.length==0){ //如果没传参数表示要获取innerHTML
return this.elements[i].innerHTML;
}
this.elements[i].innerHTML=value; //有参数是要设置innerHTML
};
return this;
}
Base.prototype.click=function(fn){ //添加click方法
for (var i = 0;i < this.elements.length;i++){
this.elements[i].οnclick=fn
};
return this;
}
这样就封装好了 一个 DOM相关方法;
每次这样调用:
$().getClass("box",1).css("backgroundColor","#ccc").innerHTML("直接获取了class名为box的第2个元素对象并设置了background-color为#ccc并设置标签内容为这段文字")
直接获取了class名为box的第2个元素对象并设置了background-color为#ccc并设置标签内容为这段文字,这样将很多DOM方法封装后 十分简便