欢迎来到福编程网,本站提供各种互联网专业知识!

jQuery 中关于CSS操作部分使用说明

发布时间:2007-06-10 作者: 来源:转载
刚刚看了下jQuery的源代码,其中关于CSS及className的操作思想确实很不错,值得借鉴。其中关于jQuery.className.has的定义部分,是用的正则来实现的,其实此处直接利用Javascript中String对象的indexOf方法来作处理的话,比用正则效率会更些,因此复制代码代
刚刚看了下jQuery的源代码,其中关于CSS及className的操作思想确实很不错,值得借鉴。
其中关于jQuery.className.has的定义部分,是用的正则来实现的,其实此处直接利用Javascript中String对象的indexOf方法来作处理的话,比用正则效率会更些,因此复制代码 代码如下:
jQuery.className.has的定义可以改进成:
has:function(t,c){
t=t.className||t;
t=""+t+"";
c=""+c+"";
returnt.indexOf(c)>-1;
}

原代码中关于CSS及className的操作部分节选如下:
复制代码 代码如下:
className:{
//internalonly,useaddClass("class")
add:function(elem,c){
jQuery.each(c.split(/s+/),function(i,cur){
if(!jQuery.className.has(elem.className,cur))
elem.className+=(elem.className?"":"")+cur;
});
},

//internalonly,useremoveClass("class")
remove:function(elem,c){
elem.className=c?
jQuery.grep(elem.className.split(/s+/),function(cur){
return!jQuery.className.has(c,cur);
}).join(""):"";
},

//internalonly,useis(".class")
has:function(t,c){
t=t.className||t;
//escaperegexcharacters
c=c.replace(/([.+*?[^]$(){}=!<>|:])/g,"$1");
returnt&&newRegExp("(^|s)"+c+"(s|$)").test(t);
}
},
swap:function(e,o,f){
for(variino){
e.style["old"+i]=e.style[i];
e.style[i]=o[i];
}
f.apply(e,[]);
for(variino)
e.style[i]=e.style["old"+i];
},

css:function(e,p){
if(p=="height"||p=="width"){
varold={},oHeight,oWidth,d=["Top","Bottom","Right","Left"];

jQuery.each(d,function(){
old["padding"+this]=0;
old["border"+this+"Width"]=0;
});

jQuery.swap(e,old,function(){
if(jQuery.css(e,"display")!="none"){
oHeight=e.offsetHeight;
oWidth=e.offsetWidth;
}else{
e=jQuery(e.cloneNode(true))
.find(":radio").removeAttr("checked").end()
.css({
visibility:"hidden",position:"absolute",display:"block",right:"0",left:"0"
}).appendTo(e.parentNode)[0];

varparPos=jQuery.css(e.parentNode,"position");
if(parPos==""||parPos=="static")
e.parentNode.style.position="relative";

oHeight=e.clientHeight;
oWidth=e.clientWidth;

if(parPos==""||parPos=="static")
e.parentNode.style.position="static";

e.parentNode.removeChild(e);
}
});

returnp=="height"?oHeight:oWidth;
}

returnjQuery.curCSS(e,p);
},

curCSS:function(elem,prop,force){
varret;

if(prop=="opacity"&&jQuery.browser.msie)
returnjQuery.attr(elem.style,"opacity");

if(prop=="float"||prop=="cssFloat")
prop=jQuery.browser.msie?"styleFloat":"cssFloat";

if(!force&&elem.style[prop])
ret=elem.style[prop];

elseif(document.defaultView&&document.defaultView.getComputedStyle){

if(prop=="cssFloat"||prop=="styleFloat")
prop="float";

prop=prop.replace(/([A-Z])/g,"-$1").toLowerCase();
varcur=document.defaultView.getComputedStyle(elem,null);

if(cur)
ret=cur.getPropertyValue(prop);
elseif(prop=="display")
ret="none";
else
jQuery.swap(elem,{display:"block"},function(){
varc=document.defaultView.getComputedStyle(this,"");
ret=c&&c.getPropertyValue(prop)||"";
});

}elseif(elem.currentStyle){

varnewProp=prop.replace(/-(w)/g,function(m,c){returnc.toUpperCase();});
ret=elem.currentStyle[prop]||elem.currentStyle[newProp];

}

returnret;
},

附录:
jQuery官方网站:http://jquery.com/
jQuery源码下载:http://docs.jquery.com/Downloading_jQuery
jQuery API文档:http://docs.jquery.com/Main_Page
jQuery 中国:http://jquery.org.cn/
VisualJQuery.com : http://visualjquery.com/

相关推荐