刚刚看了下jQuery的源代码，其中关于CSS及className的操作思想确实很不错，值得借鉴。 其中关于jQuery.className.has的定义部分，是用的正则来实现的，其实此处直接利用Javascript中String对象的indexOf方法来作处理的话，比用正则效率会更些，因此复制代码 代码如下:jQuery.className.has的定义可以改进成： has: function( t, c ) { t = t.className || t; t = " " + t + " "; c = " " + c + " "; return t.indexOf(c)>-1; } 原代码中关于CSS及className的操作部分节选如下： 复制代码 代码如下: className: { // internal only, use addClass("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; }); }, // internal only, use removeClass("class") remove: function( elem, c ){ elem.className = c ? jQuery.grep( elem.className.split(/s+/), function(cur){ return !jQuery.className.has( c, cur ); }).join(" ") : ""; }, // internal only, use is(".class") has: function( t, c ) { t = t.className || t; // escape regex characters c = c.replace(/([.\+*?[^]$(){}=!<>|:])/g, "\$1"); return t && new RegExp("(^|\s)" + c + "(\s|$)").test( t ); } }, swap: function(e,o,f) { for ( var i in o ) { e.style["old"+i] = e.style[i]; e.style[i] = o[i]; } f.apply( e, [] ); for ( var i in o ) e.style[i] = e.style["old"+i]; }, css: function(e,p) { if ( p == "height" || p == "width" ) { var old = {}, 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]; var parPos = 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); } }); return p == "height" ? oHeight : oWidth; } return jQuery.curCSS( e, p ); }, curCSS: function(elem, prop, force) { var ret; if (prop == "opacity" && jQuery.browser.msie) return jQuery.attr(elem.style, "opacity"); if (prop == "float" || prop == "cssFloat") prop = jQuery.browser.msie ? "styleFloat" : "cssFloat"; if (!force && elem.style[prop]) ret = elem.style[prop]; else if (document.defaultView && document.defaultView.getComputedStyle) { if (prop == "cssFloat" || prop == "styleFloat") prop = "float"; prop = prop.replace(/([A-Z])/g,"-$1").toLowerCase(); var cur = document.defaultView.getComputedStyle(elem, null); if ( cur ) ret = cur.getPropertyValue(prop); else if ( prop == "display" ) ret = "none"; else jQuery.swap(elem, { display: "block" }, function() { var c = document.defaultView.getComputedStyle(this, ""); ret = c && c.getPropertyValue(prop) || ""; }); } else if (elem.currentStyle) { var newProp = prop.replace(/-(w)/g,function(m,c){return c.toUpperCase();}); ret = elem.currentStyle[prop] || elem.currentStyle[newProp]; } return ret; }, 附录：jQuery官方网站：http://jquery.com/jQuery源码下载：http://docs.jquery.com/Downloading_jQueryjQuery API文档：http://docs.jquery.com/Main_PagejQuery 中国：http://jquery.org.cn/VisualJQuery.com : http://visualjquery.com/

　　推荐阅读

　　Javascript & DHTML 实例编程（教程）基础知识

[ 2007-04-11 14:31:50 | Author: never-online ] 这一节首先请下载JScript.chm这本手册，无论新手老手，有一本手册是免不了的，特别是对于新手，如果你没有空翻犀牛书，那么这本手册将是你了解这门语言的首选。下>>>详细阅读

本文标题：jQuery 中关于CSS操作部分使用说明

地址：http://www.17bianji.com/kaifa2/JS/30402.html

 1/2    1