码迷,mamicode.com
首页 > Web开发 > 详细

jquery的css详解(一)

时间:2016-10-05 17:19:19      阅读:357      评论:0      收藏:0      [点我收藏+]

标签:

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

jquery的css详解(一)

标签:

原文地址:http://www.cnblogs.com/gongshunkai/p/5932362.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!