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获取地址栏参数
Dec 22 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
网站内容禁止复制和粘贴、另存为的js代码
Feb 26 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
JS Thunk 函数的含义和用法实例总结
Apr 08 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
javascript instanceof,typeof的区别
2010/03/24 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
javascript常见操作汇总
2014/09/03 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
vue生命周期的探索
2019/04/03 Javascript
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
详解小白之KMP算法及python实现
2019/04/04 Python
python 日期排序的实例代码
2019/07/11 Python
python中图像通道分离与合并实例
2020/01/17 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
联谊会主持词
2014/03/26 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
狮子林导游词
2015/02/03 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书