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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 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
3.从实例开始
2006/10/09 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
php实现简单四则运算器
2020/11/29 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
js 巧妙去除数组中的重复项
2010/01/25 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python检测QQ在线状态的方法
2015/05/09 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python set常用操作函数集锦
2017/11/15 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
python实现两张图片的像素融合
2019/02/23 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
初中语文教学反思
2014/02/02 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
师德师风自查材料
2014/10/14 职场文书