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

php中文网

发布时间：2016-05-16 19:12:41

1167人浏览过

来源于php中文网

原创

刚刚看了下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的操作部分节选如下：

兴泰网络办公系统1.61

基于 Internet 的 Web 技术，完全采用B/S 体系结构的网络办公系统。该系统具有安全性高、功能极为强大、可在广域网中使用也可在局域网中使用、也可以同时在局域网和广域网中使用的特点，全傻瓜式安装，无需作复杂配置，界面采用类似windows资源管理器的设计，结构清晰，条理分明，即使不熟悉电脑的人也可很快掌握全部操作。该系统通过在广域网内的广泛试用验证和经专业技术人员的调试、测试，确认具有很

下载

复制代码代码如下:

  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;  
  }, 