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 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