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 相关文章推荐
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
Nov 30 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 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
php 显示指定路径下的图片
2009/10/29 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
js更优雅的兼容
2010/08/12 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
人工神经网络算法知识点总结
2019/06/11 Python
Python的互斥锁与信号量详解
2019/09/12 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
学院书画协会部门职责
2013/11/28 职场文书
英文简历中的自荐信范文
2013/12/14 职场文书
打架检讨书50字
2014/01/11 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
主题教育活动总结
2014/05/05 职场文书
公司委托书格式范文
2014/10/09 职场文书
工作保证书怎么写
2015/02/28 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python