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 相关文章推荐
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
javascript 中模板方法单例的实现方法
Oct 17 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
layui的table中显示图片方法
Aug 17 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
在实例中重学JavaScript事件循环
Dec 03 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
网页设计常用的一些技巧
2006/12/22 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
进一步理解Python中的函数编程
2015/04/13 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
python 6行代码制作月历生成器
2020/09/18 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
招商引资工作汇报材料
2014/10/28 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
Python连续赋值需要注意的一些问题
2021/06/03 Python
Python中re模块的元字符使用小结
2022/04/07 Python
吉利入股戴姆勒后smart“长大了”
2022/04/21 数码科技