首页 > 代码库 > jquery的css详解（一）
jquery的css详解（一）
通过阅读源码可以发现css是jq的实例方法。而在内部调用jq的工具方法access来实现的，对该方法不了解的朋友请点击 -> jquery工具方法access详解
在access的回调中做了一个判断，value不等于undefined则调用jq的工具方法style，否则调用jq的工具方法css
可以看出，style是设置，css是获取。也就是说要搞懂jq的实例方法css，必须先要搞懂jq的工具方法style和css
jQuery.fn.extend({ css: function( name, value ) { return jQuery.access( this, function( elem, name, value ) { return value !== undefined ? jQuery.style( elem, name, value ) : jQuery.css( elem, name ); }, name, value, arguments.length > 1 ); }, ...............................});
jQuery.css有4个参数，前面2个一看就明白，elem是元素，name是样式名称，后面2个是用于把样式值转为数字类型
比如 : $(selector).css(‘width‘) //100px
$(selector).width() //100
其实$(selector).width()就是调用了jQuery.css并传递了后面2个参数，把带px的转成数值类型。这个我们稍后再分析，接着往下看。
jQuery.extend({ ....................... css: function( elem, name, numeric, extra ) { var val, num, hooks, origName = jQuery.camelCase( name ); // Make sure that we‘re working with the right name name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( elem.style, origName ) ); // gets hook for the prefixed version // followed by the unprefixed version hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ]; // If a hook was provided get the computed value from there if ( hooks && "get" in hooks ) { val = hooks.get( elem, true, extra ); } // Otherwise, if a way to get the computed value exists, use that if ( val === undefined ) { val = curCSS( elem, name ); } //convert "normal" to computed value if ( val === "normal" && name in cssNormalTransform ) { val = cssNormalTransform[ name ]; } // Return, converting to number if forced or a qualifier was provided and val looks numeric if ( numeric || extra !== undefined ) { num = parseFloat( val ); return numeric || jQuery.isNumeric( num ) ? num || 0 : val; } return val; }, ...................});
我们接着往下分析：
origName = jQuery.camelCase( name ); 这句代码是把样式名称转驼峰式的写法，比如：background-color转成backgroundColor
我们看一下camelCase源码：
var rmsPrefix = /^-ms-/, rdashAlpha = /-([\da-z])/gi, fcamelCase = function( all, letter ) { return ( letter + "" ).toUpperCase(); };jQuery.extend({ .............................. camelCase: function( string ) { return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase ); }, ..............................});
继续往下走。。。。
这句代码是对name的赋值操作，当jQuery.cssProps的属性包含origName则赋值给name，否则调用vendorPropName方法并且动态生成一个jQuery.cssProps的属性且赋值给name
cssProps里面没有则通过vendorPropName生成，以后就直接往cssProps里面取，应该就是这样的思想。
我们看一下cssProps和vendorPropName这俩家伙是什么东西。
name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( elem.style, origName ) );
cssProps默认定义了一个float的属性，对应的值为cssFloat与styleFloat
因为float是js的保留字，所以不能在样式中直接用，就跟class一样的道理，需要改成className。
cssProps: { // normalize float css property "float": jQuery.support.cssFloat ? "cssFloat" : "styleFloat"},
vendorPropName主要是针对css3的样式名称进行处理，我们知道css3样式都是有前缀的，比如moz,ms,webkit等
而我们使用jq是不需要写前缀的，比如：$(selector).css(‘tranfroms‘)
好了，大致了解了vendorPropName作用我们分析源码
vendorPropName内部分为3块，下面我们一个个分析。
function vendorPropName( style, name ) { // shortcut for names that are not vendor prefixed if ( name in style ) { return name; } // check for vendor prefixed names var capName = name.charAt(0).toUpperCase() + name.slice(1), origName = name, i = cssPrefixes.length; while ( i-- ) { name = cssPrefixes[ i ] + capName; if ( name in style ) { return name; } } return origName;}
首先做一个判断，如果在style中找到了name则直接返回name，说明name已经是有前缀的样式名称了，比如：$(selector).css(‘MozTranfroms‘)，否则走下面的代码。
if ( name in style ) { return name;}
把name的第一个字母转大写赋值给capName，capName再赋值给origName，i等于cssPrefixes的长度。
var capName = name.charAt(0).toUpperCase() + name.slice(1), origName = name, i = cssPrefixes.length;
cssPrefixes = [ "Webkit", "O", "Moz", "ms" ],
遍历i，把带前缀的样式名称赋值给name，再一次name in style
while ( i-- ) { name = cssPrefixes[ i ] + capName; if ( name in style ) { return name; }}
分析完了vendorPropName我们继续看css的代码
这里是做了hooks的处理，如透明度、宽度等默认都是空，利用hooks转为数值0
hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ];// If a hook was provided get the computed value from thereif ( hooks && "get" in hooks ) { val = hooks.get( elem, true, extra );}
经过了上面的各种处理，调用curCSS获取到样式的值
if ( val === undefined ) { val = curCSS( elem, name );}
某些样式默认值是normal，调用cssNormalTransform做了处理
if ( val === "normal" && name in cssNormalTransform ) { val = cssNormalTransform[ name ];}
cssNormalTransform = { letterSpacing: 0, fontWeight: 400},
这里就是css后面2个参数起作用的地方，把样式的值转为数值类型
if ( numeric || extra !== undefined ) { num = parseFloat( val ); return numeric || jQuery.isNumeric( num ) ? num || 0 : val;}
最终返回val
jquery的css详解（一）