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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
Javascript 解构赋值详情
Nov 17 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
PHP5 面向对象(学习记录)
2009/12/02 PHP
php实现文件编码批量转换
2014/03/10 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
PHP连接access数据库
2015/03/27 PHP
解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法
2015/10/23 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHP加密解密类实例代码
2016/07/20 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
Python实现list反转实例汇总
2014/11/11 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
医院实习介绍信
2014/01/12 职场文书
党支部特色活动方案
2014/08/20 职场文书
服务整改报告
2014/11/06 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
美术教师个人工作总结
2015/02/06 职场文书
班主任寄语2015
2015/02/26 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
SSM VUE Axios详解
2021/10/05 Vue.js