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


Posted in Javascript onJune 10, 2007

刚刚看了下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/
Javascript 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
node.js从数据库获取数据
May 08 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 #Javascript
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 #Javascript
用CSS+JS实现的进度条效果效果
Jun 05 #Javascript
js实现DIV的一些简单控制
Jun 04 #Javascript
用js实现键盘方向键翻页功能的代码
Jun 03 #Javascript
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 #Javascript
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 #Javascript
You might like
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
JavaScript实现动画打开半透明提示层的方法
2015/04/21 Javascript
Augularjs-起步详解
2016/07/08 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
Python中实现的RC4算法
2015/02/14 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python pip如何手动安装二进制包
2020/09/30 Python
pytorch 实现L2和L1正则化regularization的操作
2021/03/03 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
车间主任岗位职责
2014/03/16 职场文书
婚前协议书
2014/04/15 职场文书
会计专业求职信
2014/08/10 职场文书
植物园观后感
2015/06/11 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript