通过阅读源码可以发现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 there
if ( 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
