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 相关文章推荐
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
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
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
javascript数组排序汇总
2015/07/07 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
python实现通过shelve修改对象实例
2014/09/26 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
Python实现两款计算器功能示例
2017/12/19 Python
pyshp创建shp点文件的方法
2018/12/31 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Django中ORM的基本使用教程
2020/12/22 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
社会实践心得体会
2014/01/03 职场文书
餐饮商业计划书范文
2014/04/29 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
2014酒店客房部工作总结
2014/12/16 职场文书