jQuery源码-CSS样式相关部分

jQuery.extend({
    // Add in style property hooks for overriding the default
    // behavior of getting and setting a style property
    //钩子方法，对一些特殊的属性，需要有特殊的样式读取（get）、设置（set）方法
    cssHooks: {
        //@cssHooks1：透明度
        opacity: {
            get: function( elem, computed ) {
                if ( computed ) {
                    // We should always get a number back from opacity
                    var ret = curCSS( elem, "opacity" );
                    return ret === "" ? "1" : ret;

                } else {
                    return elem.style.opacity;
                }
            }
        }
    }
});

//@cssHooks3：透明度
if ( !jQuery.support.opacity ) {    //如果不支持style.opacity，关于support下文有讲到，暂时从字面上理解即可
    jQuery.cssHooks.opacity = {
        get: function( elem, computed ) {
            // IE uses filters for opacity
            return ropacity.test( (computed && elem.currentStyle ? elem.currentStyle.filter : elem.style.filter) || "" ) ?    //IE:是否存在filter:alpha(opacity=30)的样式设置
                ( parseFloat( RegExp.$1 ) / 100 ) + "" :    //存在：将opacity转换成小数点形式（与遵守标准的浏览器保持一致）
                computed ? "1" : "";    //不存在：未设置opacity，视为全部透明，即1
        },

        set: function( elem, value ) {
            var style = elem.style,
                currentStyle = elem.currentStyle,
                opacity = jQuery.isNumeric( value ) ? "alpha(opacity=" + value * 100 + ")" : "",    //为IE、非IE保持一致，需要乘以100
                filter = currentStyle && currentStyle.filter || style.filter || "";

            // IE has trouble with opacity if it does not have layout
            // Force it by setting the zoom level
            style.zoom = 1;    //此处为解决IE bug，表示还不知道有这么个bug存在于人世间，重构的兄弟们辛苦了

            // if setting opacity to 1, and no other filters exist - attempt to remove filter attribute #6652
            if ( value >= 1 && jQuery.trim( filter.replace( ralpha, "" ) ) === "" ) {

                // Setting style.filter to null, "" & " " still leave "filter:" in the cssText
                // if "filter:" is present at all, clearType is disabled, we want to avoid this
                // style.removeAttribute is IE Only, but so apparently is this code path...
                style.removeAttribute( "filter" );

                // if there there is no filter style applied in a css rule, we are done
                if ( currentStyle && !currentStyle.filter ) {
                    return;
                }
            }

            // otherwise, set new filter values
            style.filter = ralpha.test( filter ) ?
                filter.replace( ralpha, opacity ) :
                filter + " " + opacity;
        }
    };
}

//@cssHooks4：marginRight（右外边距）
//据说是为了处理神bug存在的，就不伤害自己脑细胞了，了解下即可
jQuery(function() {
    // This hook cannot be added until DOM ready because the support test
    // for it is not run until after DOM ready
    if ( !jQuery.support.reliableMarginRight ) {
        jQuery.cssHooks.marginRight = {
            get: function( elem, computed ) {
                // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
                // Work around by temporarily setting element display to inline-block
                return jQuery.swap( elem, { "display": "inline-block" }, function() {
                    if ( computed ) {
                        return curCSS( elem, "margin-right" );
                    } else {
                        return elem.style.marginRight;
                    }
                });
            }
        };
    }
});

// These hooks are used by animate to expand properties
//@cssHooks5：待填坑
jQuery.each({
    margin: "",
    padding: "",
    border: "Width"
}, function( prefix, suffix ) {

    jQuery.cssHooks[ prefix + suffix ] = {
        expand: function( value ) {
            var i,

                // assumes a single number if not a string
                parts = typeof value === "string" ? value.split(" ") : [ value ],
                expanded = {};

            for ( i = 0; i < 4; i++ ) {
                expanded[ prefix + cssExpand[ i ] + suffix ] =
                    parts[ i ] || parts[ i - 2 ] || parts[ 0 ];
            }

            return expanded;
        }
    };
});

//@cssHooks2用到
function getWidthOrHeight( elem, name, extra ) {

    // Start with offset property
    var val = name === "width" ? elem.offsetWidth : elem.offsetHeight,
        i = name === "width" ? 1 : 0,
        len = 4;

    if ( val > 0 ) {    //此处作用，减去paddingTopWidth、paddingBottomWidth、borderTopWidth、borderBottomWidth，要不要这么隐晦啊啊！！！
        if ( extra !== "border" ) {
            for ( ; i < len; i += 2 ) {
                if ( !extra ) {
                    val -= parseFloat( jQuery.css( elem, "padding" + cssExpand[ i ] ) ) || 0;
                }
                if ( extra === "margin" ) {
                    val += parseFloat( jQuery.css( elem, extra + cssExpand[ i ] ) ) || 0;
                } else {
                    val -= parseFloat( jQuery.css( elem, "border" + cssExpand[ i ] + "Width" ) ) || 0;
                }
            }
        }

        return val + "px";
    }

    // Fall back to computed then uncomputed css if necessary
    val = curCSS( elem, name );
    if ( val < 0 || val == null ) {    //会有小于0的情况吗？？？
        val = elem.style[ name ];
    }

    // Computed unit is not pixels. Stop here and return.
    if ( rnumnonpx.test(val) ) {    //val单位非px
        return val;
    }

    // Normalize "", auto, and prepare for extra
    val = parseFloat( val ) || 0;

    // Add padding, border, margin
    //目测：在getClentHeight、getClientWidth等处可以用到
    if ( extra ) {
        for ( ; i < len; i += 2 ) {
            val += parseFloat( jQuery.css( elem, "padding" + cssExpand[ i ] ) ) || 0;
            if ( extra !== "padding" ) {
                val += parseFloat( jQuery.css( elem, "border" + cssExpand[ i ] + "Width" ) ) || 0;
            }
            if ( extra === "margin" ) {
                val += parseFloat( jQuery.css( elem, extra + cssExpand[ i ]) ) || 0;
            }
        }
    }

    return val + "px";
}

• jQuery.support  //浏览器对某些特性的支持，详情见下文

//各种测试是否支持某些属性
//仅将CSS相关部分挑出来，完整的support方法包注释200++行，有兴趣可以看下源码
jQuery.support = (function(){
    var marginDiv,
        div = document.createElement( "div" );
    div.innerHTML = "   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>";    
    
    var a = div.getElementsByTagName( "a" )[ 0 ];
    
    var support = {
        // Make sure that element opacity exists
        // (IE uses filter instead)
        // Use a regex to work around a WebKit issue. See #5145
        opacity: /^0.55/.test( a.style.opacity ),    //是否支持opacity==>IE6/7/8采用filter来实现（半）透明效果，
        
        // Verify style float existence
        // (IE uses styleFloat instead of cssFloat)
        cssFloat: !!a.style.cssFloat,    //（1）IE：node.style.styleFloat（2）chrome等：node.style.cssFloat
        
        reliableMarginRight: true,        //解决webkit的bug：getComputedStyle返回错误的margin-right值
                                        //解决方案：暂时将节点的display属性设为inline-block
        pixelMargin: true,    //是否支持margin返回的结果是px为单位（webkit里面，如果设置了百分值，则返回百分值），测试了下chrome下是ok的    
    };
    
    // Check if div with explicit width and no margin-right incorrectly
    // gets computed margin-right based on width of container. For more
    // info see bug #3333
    // Fails in WebKit before Feb 2011 nightlies
    // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
    if ( window.getComputedStyle ) {    //jQuery.support.reliableMarginRight
        div.innerHTML = "";
        marginDiv = document.createElement( "div" );
        marginDiv.style.width = "0";
        marginDiv.style.marginRight = "0";
        div.style.width = "2px";
        div.appendChild( marginDiv );
        support.reliableMarginRight =
            ( parseInt( ( window.getComputedStyle( marginDiv, null ) || { marginRight: 0 } ).marginRight, 10 ) || 0 ) === 0;
    }
    
    if ( window.getComputedStyle ) {    //jQuery.support.pixelMargin
        div.style.marginTop = "1%";
        support.pixelMargin = ( window.getComputedStyle( div, null ) || { marginTop: 0 } ).marginTop !== "1%";
    }    
    
    return support;
})();

jQuery.extend({
    // A method for quickly swapping in/out CSS properties to get correct calculations
    //将offsetHeight、offsetWidth为0的元素快速修改样式，获得需要的值后，再改回去
    //options：{display:'block',position:'absolute',visibility:'hidden'}
    /**
     * @description 将offsetHeight、offsetWidth为0（可能因display=none等原因导致）的元素快速修改样式，获得浏览器实际渲染的值后，再改回去
     * @param {DOMObject} elem dom节点
     * @param {Object} options {display:'block',position:'absolute',visibility:'hidden'}
     * @param {Function} callback 回调方法，如获取修改后的dom节点的宽、高等
    */
    swap: function( elem, options, callback ) {
        var old = {},
            ret, name;
 
        // Remember the old values, and insert the new ones
        for ( name in options ) {   //先将dom元素设置为display=block;position=absolute;visibility=hidden;
            old[ name ] = elem.style[ name ];
            elem.style[ name ] = options[ name ];
        }
 
        ret = callback.call( elem );
 
        // Revert the old values
        for ( name in options ) {   //将改变的display、position、visibiliby设置回去
            elem.style[ name ] = old[ name ];
        }
 
        return ret;
    }
});

jQuery.extend({
    // Add in properties whose names you wish to fix before
    // setting or getting the value
    //此处的属性名需要特殊处理，如float，在IE里为node.style.styleFloat，支持标准的浏览器里为node.style.cssFloat
    cssProps: {
        // normalize float css property
        "float": jQuery.support.cssFloat ? "cssFloat" : "styleFloat"
    }
});

jQuery.extend({
    // Exclude the following css properties to add px
    //排除一下css属性，无需加px，此处有些疑问，如lineHeight，需再研究下。
    cssNumber: {
        "fillOpacity": true,
        "fontWeight": true,
        "lineHeight": true,
        "opacity": true,
        "orphans": true,
        "widows": true,
        "zIndex": true,
        "zoom": true
    }
});

var ralpha = /alpha\([^)]*\)/i,    //匹配如：alpha(opacity=20)
    ropacity = /opacity=([^)]*)/,    //匹配如：filter:alpha(opacity=20)等形式
    // fixed for IE9, see #8346
    rupper = /([A-Z]|^ms)/g,    //此处暂不明，但觉厉，需再探究下
    rnum = /^[\-+]?(?:\d*\.)?\d+$/i,    //匹配数字（包括浮点），如(+/-)1、(+/-)0.1、(+/-).1、(+/-)1.1
    rnumnonpx = /^-?(?:\d*\.)?\d+(?!px)[^\d\s]+$/i,    //非px值，如'10em'、'10%'等
    rrelNum = /^([\-+])=([\-+.\de]+)/,    //设置属性支持相对写法，如$('#header').css('height', '+=10px')等。。
    rmargin = /^margin/,    //属性是否为margin开头的，如margin-left、margin-top等

    cssShow = { position: "absolute", visibility: "hidden", display: "block" },    //对于offsetHeight或offsetWidth为0的元素

    // order is important!
    cssExpand = [ "Top", "Right", "Bottom", "Left" ],    //计算宽、高用到

    curCSS,    //最终只是把getComputedStyle或currentStyle方法其中之一赋给curCss

    getComputedStyle,    //遵守标准的浏览器获取css样式的方法
    currentStyle;    //IE浏览器获取css样式的方法