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