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的类继承
Mar 05 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
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的远程多会话调试
2017/09/21 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
Python os模块介绍
2014/11/30 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
python pygame模块编写飞机大战
2018/11/20 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python3实现字符串操作的实例代码
2019/04/16 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Python学习笔记之装饰器
2020/08/06 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
2014年五一活动策划方案
2014/03/15 职场文书
小学班主任评语大全
2014/04/23 职场文书
施工单位安全责任书
2014/07/24 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
师德师风自查总结
2014/10/14 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
基层工作经历证明
2015/06/19 职场文书
拔河比赛新闻稿
2015/07/17 职场文书