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詳解（一）