刚刚看了下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_jQuery
jQuery API文档:http://docs.jquery.com/Main_Page
jQuery 中国:http://jquery.org.cn/
VisualJQuery.com : http://visualjquery.com/
标签:
jQuery,中关于CSS操作部分使用说明

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“jQuery 中关于CSS操作部分使用说明”

暂无“jQuery 中关于CSS操作部分使用说明”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。