jquery封装之--css封装

我之间我的博客里面有提到，自定义的库和jquery库是水火不相容的，其实在我学习了CSS封装后，我算是大彻大悟。

在前面的时候我提到，获取节点，要用到繁琐的getId,getClass,getTagName.今天学习了CSS封装，

我们也可以简化js代码

代码设置

我自己定义的base.js

//前台调用

var $ =function(args){
return new Base(args);

}

//基础类

function Base(args){//创建一个类
//创建一个数组来获取一个节点和节点数组
this.elements=[];
if(typeof args=='string'){
switch(args.charAt(0)){
case'#':
this.elements.push(this.getId(args.substring(1)));
break;
case'.':
this.elements=this.getClass(args.substring(1));
break;
default:
this.elements=this.getTagName(args);
}

}else if(typeof args=='object'){
if(args!=undefined){
this.elements[0]=args;
}
}

}

//设置CSS选择器子节点

Base.prototype.find=function(str){
var childElements=[];
for(var i=0;i<this.elements.length;i++){
switch(str.charAt(0)){
case'#':
childElements.push(this.getId(str.substring(1)));
break;
case'.':
var temps=this.getClass(str.substring(1),this.elements[i]);
for(var j=0;j<temps.length;j++){
childElements.push(temps[j]);
}

break;
default:

var temps=this.getTagName(str,this.elements[i]);
for(var j=0;j<temps.length;j++){
childElements.push(temps[j]);
}
}
}
this.elements=childElements;
return this;

}

//创建一个数组来获取一个节点和节点数组

//Base.prototype.elements=[];这是是在类外面定义的，所以要把它放在类里面进行私有化

Base.prototype.getId=function(id){

return document.getElementById(id);

};
//获取元素节点

Base.prototype.getTagName=function(tag,parentNode){
var node=null;
//做一个零时的数组
var temps=[];
if(parentNode!=undefined){
node=parentNode;
}else{
node=document;
}
var tags=node.getElementsByTagName(tag);
for(var  i=0;i<tags.length;i++){
temps.push(tags[i]);
}
return temps;
};

//获取Class节点的信息

Base.prototype.getClass=function(className,parentNode){
var node=null;
//做一个零时的数组
var temps=[];
if(parentNode!=undefined){
node=parentNode;
}else{
node=document;
}

var all=node.getElementsByTagName('*');
for(var i=0;i<all.length;i++){
if(all[i].className==className){
temps.push(all[i]);
}
}
return temps;

}

//获取某一个节点

Base.prototype.getElement=function(num){
var element=this.elements[num];
this.elements=[];
this.elements[0]=element;
return this;

}

index.js

window.onload=function(){
$('#box').css('background','red').click(function(){
alert($(this).html());
});
$('span').css('color','yellow');
//$('p').find('.a').css('color','red');

};

index.html

<div id="box">box</div>

<p>
<span class="a">pspan</span>

    <span>pspan</span>

    <span>pspan</span>

</p>

<p>
<span class="a">pspan</span>

    <span>pspan</span>

    <span>pspan</span>

</p>

<div>
<span>pspan</span>

    <span class="a">pspan</span>

    <span>pspan</span>

</div>