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实现json页面分页实例代码
Feb 20 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
浅析Node.js 中 Stream API 的使用
Oct 23 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
Vue 列表上下过渡效果的实例代码
Jun 25 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
PHP常用技巧汇总
2016/03/04 PHP
利用PHP获取汉字首字母并且分组排序详解
2017/10/22 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
JQuery操作单选按钮以及复选按钮示例
2013/09/23 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
2016/12/21 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
js实现简单的倒计时
2021/01/28 Javascript
python中sets模块的用法实例
2014/09/30 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
python实现redis三种cas事务操作
2017/12/19 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
pymongo中group by的操作方法教程
2019/03/22 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
如何给Python代码进行加密
2020/01/10 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
JSF的标签库有哪些
2012/04/27 面试题
创业计划书如何吸引他人眼球
2014/01/10 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
村容村貌整治方案
2014/05/21 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书