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 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 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
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
2018/02/10 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
python搭建虚拟环境的步骤详解
2016/09/27 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
python中的yield from语法快速学习
2020/11/06 Python
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
.NET常见笔试题集
2012/12/01 面试题
物业保安员岗位职责
2014/03/14 职场文书
2015年端午节国旗下演讲稿
2015/03/19 职场文书
律师函格式范本
2015/05/27 职场文书
2019辞职报告范本3篇!
2019/07/23 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
logback如何自定义日志存储
2021/08/30 Java/Android