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 相关文章推荐
[原创]来自ImageSee官方 JavaScript图片浏览器
Jan 16 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 Javascript
VUE 动态组件的应用案例分析
Dec 02 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
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
php函数式编程简单示例
2019/08/08 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
基于jquery的无刷新分页技术
2011/06/11 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
详细解读Python中的__init__()方法
2015/05/02 Python
Python闭包实现计数器的方法
2015/05/05 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
Python判断两个对象相等的原理
2017/12/12 Python
Python日志模块logging基本用法分析
2018/08/23 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
Python Sqlalchemy如何实现select for update
2020/10/12 Python
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
店长岗位职责
2015/02/11 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
redis protocol通信协议及使用详解
2022/07/15 Redis