封装框架-类选择器 四种方法添加、移除、判断、替换
//封装框架类操作1.addClass(添加类)
//2.removeClass(移除样式)
//3.hasClass(判断是否有这个样式)
//4.toggleClass(有这个类就移除,没有就添加个新的)
//例:itcast(div).addClass("类名")
//样式操作模块
itcast.fn.extend({
css:function(name,value){
//第二个参数没有传入,而第一个参数是字符串
if(value===undefined&&typeofname==="string"){
//查询,有兼容问题两种兼容
if(window.getComputedStyle){
varstyles=window.getComputedStyle(this[0]);
returnstyles[name];
}else{
returnthis[0].currentStyle[name];
}
}
//如果设置了值
this.each(function(){
//第一个参数如果是对象
if(value===undefined&&typeofname==="object"){
for(varkinname){
this.style[k]=name[k];
}
}else{
this.style[name]=value;
}
})
returnthis;
},
//添加类样式
addClass:function(cName){
this.each(function(){
varclsName=this.className;
clsName+=""+cName;
this.className=itcast.trim(clsName);
})
returnthis;
},
//移除样式
removeClass:function(cName){
this.each(function(){
varclaname=""+this.className+"";
claName=claName.replace(""+cName+"","");
console.log(claName);
this.className=itcast.trim(claName);
})
returnthis;
},
//如果有这个类就返回true没有就返回false
hasClass:function(cName){
varhasCls=false;
this.each(function(){
varclaName=this.className;
hasCls=(""+claName+"").indexOf(""+cName+"")!==-1;
if(hasCls){
returnfalse;
}
})
returnhasCls;
},
//判断是否有这个类有就移出,没有就添加一个新的
toggleClass:function(cName){
this.each(function(){
if(itcast(this).hasClass(cName)){
itcast(this).removeClass(cName);
}else{
itcast(this).addClass(cName);
}
})
}
});