jQuery css

系统 2028 0

jQuery css模块用于css属性的修改操作。

 

jQuery.fn.css

      jQuery.fn.css = 
      
        function
      
      
        ( name, value ) {
    
      
      
        //
      
      
        又是用access来操作
      
      
        return
      
       jQuery.access( 
      
        this
      
      , 
      
        function
      
      
        ( elem, name, value ) {
        
      
      
        var
      
      
         styles, len,
            map 
      
      =
      
         {},
            i 
      
      = 0
      
        ;
        
        
      
      
        //
      
      
        如果name是数组
      
      
        if
      
      
         ( jQuery.isArray( name ) ) {
            
      
      
        //
      
      
        通过getStyles方法返回elem的styles
      
      
            styles =
      
         getStyles( elem );
            len 
      
      =
      
         name.length;

            
      
      
        //
      
      
        创建对应styles的处理函数map
      
      
        for
      
       ( ; i < len; i++
      
         ) {
                map[ name[ i ] ] 
      
      = jQuery.css( elem, name[ i ], 
      
        false
      
      
        , styles );
            }

            
      
      
        return
      
      
         map;
        }

        
      
      
        //
      
      
        如果不是数组,则返回jQuery.style或jQuery.css
      
      
        return
      
       value !== undefined ?
      
        
            jQuery.style( elem, name, value ) :
            jQuery.css( elem, name );
    }, name, value, arguments.length 
      
      > 1
      
         );
};
      
    

又是通过jQuery.access来遍历和操作属性。

根据value值来判断是返回一个函数数组,还是返回一个函数传入jQuery.access。

主要用到jQuery.css和jQuery.style两个方法。

 

getStyles

      
        function
      
      
         getStyles( elem ) {
    
      
      
        return
      
       window.getComputedStyle( elem, 
      
        null
      
      
         );
}
      
    

这是一个获取实际css style的方法。

可是……getComputedStyle是啥东西……

getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),只读。

语法:

      
        var
      
       styles = window.getComputedStyle("元素", "伪类");
    

如果没有伪类,则传null。

实际上就是获取最终浏览器绘制时的css值,因为style不会返回所有css值,只会返回设置的css值,所以需要用该方法来获得所有css值。

限于篇幅本文就不详细解释了,有兴趣的朋友请参见: 获取元素CSS值之getComputedStyle方法熟悉

 

jQuery.style

      jQuery.style = 
      
        function
      
      
        ( elem, name, value, extra ) {
    
      
      
        //
      
      
         不处理text和comment节点
      
      
        if
      
       ( !elem || elem.nodeType === 3 || elem.nodeType === 8 || !
      
        elem.style ) {
        
      
      
        return
      
      
        ;
    }

    
      
      
        var
      
      
         ret, type, hooks,
        
      
      
        //
      
      
        修正css属性名
      
      
        origName =
      
         jQuery.camelCase( name ),
        style 
      
      =
      
         elem.style;

    
      
      
        //
      
      
        jQuery.cssProps是css缓存,如果有则取出值,否则通过vendorPropName函数来得到实际的css名字
      
      
    name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] =
      
         vendorPropName( style, origName ) );

    
      
      
        //
      
      
         获取必要的钩子
      
      
    hooks = jQuery.cssHooks[ name ] ||
      
         jQuery.cssHooks[ origName ];

    
      
      
        //
      
      
         如果value已定义
      
      
        if
      
       ( value !==
      
         undefined ) {
        type 
      
      = 
      
        typeof
      
      
         value;

        
      
      
        //
      
      
         如果value是+=或则-=一个数,则转成对应的数字
      
      
        if
      
       ( type === "string" && (ret =
      
         rrelNum.exec( value )) ) {
            value 
      
      = ( ret[1] + 1 ) * ret[2] +
      
         parseFloat( jQuery.css( elem, name ) );
            
      
      
        //
      
      
         将其类型改成number
      
      
            type = "number"
      
        ;
        }

        
      
      
        //
      
      
         确保NaN和null不被设置
      
      
        if
      
       ( value == 
      
        null
      
       || type === "number" &&
      
         isNaN( value ) ) {
            
      
      
        return
      
      
        ;
        }

        
      
      
        //
      
      
         如果value是数字则加上px
      
      
        if
      
       ( type === "number" && !
      
        jQuery.cssNumber[ origName ] ) {
            value 
      
      += "px"
      
        ;
        }

        
      
      
        //
      
      
         修复#8908,IE9的问题,对于克隆的元素清除掉其background时,其原型的background也会被清除
      
      
        if
      
       ( !jQuery.support.clearCloneStyle && value === "" && name.indexOf("background") === 0
      
         ) {
            style[ name ] 
      
      = "inherit"
      
        ;
        }

        
      
      
        //
      
      
         如果钩子存在,则使用钩子设置值,否则用style[ name ]来设置值
      
      
        if
      
       ( !hooks || !("set" 
      
        in
      
       hooks) || (value = hooks.set( elem, value, extra )) !==
      
         undefined ) {
            style[ name ] 
      
      =
      
         value;
        }

    } 
      
      
        else
      
      
         {
        
      
      
        //
      
      
         如果钩子存在,则使用钩子返回值
      
      
        if
      
       ( hooks && "get" 
      
        in
      
       hooks && (ret = hooks.get( elem, 
      
        false
      
      , extra )) !==
      
         undefined ) {
            
      
      
        return
      
      
         ret;
        }

        
      
      
        //
      
      
         否则用style[ name ]来返回值
      
      
        return
      
      
         style[ name ];
    }
};
      
    

这里面有一个挺有趣的问题。下面两个代码最后结果是多少呢?

        alert(("-" + 5) + 6);
      
        alert(("-" + 5) * 6);
      

 

jQuery.css

      jQuery.css = 
      
        function
      
      
        ( elem, name, extra, styles ) {
    
      
      
        var
      
      
         val, num, hooks,
        origName 
      
      =
      
         jQuery.camelCase( name );

    
      
      
        //
      
      
         修正名字name
      
      
    name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] =
      
         vendorPropName( elem.style, origName ) );

    
      
      
        //
      
      
         得到必要的钩子
      
      
    hooks = jQuery.cssHooks[ name ] ||
      
         jQuery.cssHooks[ origName ];

    
      
      
        //
      
      
         如果有钩子则使用get来获取值
      
      
        if
      
       ( hooks && "get" 
      
        in
      
      
         hooks ) {
        val 
      
      = hooks.get( elem, 
      
        true
      
      
        , extra );
    }

    
      
      
        //
      
      
         没有钩子则用curCSS函数获取
      
      
        if
      
       ( val ===
      
         undefined ) {
        val 
      
      =
      
         curCSS( elem, name, styles );
    }

    
      
      
        //
      
      
         将"normal"转成特定的值
      
      
        if
      
       ( val === "normal" && name 
      
        in
      
      
         cssNormalTransform ) {
        val 
      
      =
      
         cssNormalTransform[ name ];
    }

    
      
      
        //
      
      
         是否需要强行转成数字或者true
      
      
        if
      
       ( extra === "" ||
      
         extra ) {
        num 
      
      =
      
         parseFloat( val );
        
      
      
        return
      
       extra === 
      
        true
      
       || jQuery.isNumeric( num ) ? num || 0
      
         : val;
    }
    
      
      
        return
      
      
         val;
};
      
    

 

curCSS函数

      
        var
      
       curCSS = 
      
        function
      
      
        ( elem, name, _computed ) {
    
      
      
        var
      
      
         width, minWidth, maxWidth,
        computed 
      
      = _computed ||
      
         getStyles( elem ),

        
      
      
        //
      
      
         解决IE9的问题,getPropertyValue用IE9中用.css('filter')
      
      
        ret = computed ? computed.getPropertyValue( name ) ||
      
         computed[ name ] : undefined,
        style 
      
      =
      
         elem.style;

    
      
      
        //
      
      
         如果实际styles数组存在
      
      
        if
      
      
         ( computed ) {

        
      
      
        //
      
      
        如果ret为"",且elem不是子文档(没有style)
      
      
        if
      
       ( ret === "" && !
      
        jQuery.contains( elem.ownerDocument, elem ) ) {
            ret 
      
      =
      
         jQuery.style( elem, name );
        }

        
      
      
        //
      
      
         支持:Chrome < 17,Safari 5.1
      
      
        //
      
      
         来自Dean Edwards帅呆的hack
      
      
        //
      
      
         将百分比转成更加有用的px
      
      
        if
      
       ( rnumnonpx.test( ret ) &&
      
         rmargin.test( name ) ) {

            
      
      
        //
      
      
         记住原始值
      
      
            width =
      
         style.width;
            minWidth 
      
      =
      
         style.minWidth;
            maxWidth 
      
      =
      
         style.maxWidth;

            
      
      
        //
      
      
         通过改变minWidth、maxWidth、width得到相应的px值
      
      
            style.minWidth = style.maxWidth = style.width =
      
         ret;
            ret 
      
      =
      
         computed.width;

            
      
      
        //
      
      
         再将原来的值赋回去
      
      
            style.width =
      
         width;
            style.minWidth 
      
      =
      
         minWidth;
            style.maxWidth 
      
      =
      
         maxWidth;
        }
    }

    
      
      
        return
      
      
         ret;
};
      
    

 Dean Edwards的hack主要利用的是部分浏览器会使用计算值来表示元素宽度,而非使用值。

 

show & hide

      jQuery.fn.show = 
      
        function
      
      
        () {
    
      
      
        return
      
       showHide( 
      
        this
      
      , 
      
        true
      
      
         );
};
      
    

jQuery.fn.show直接引用showHide函数,jQuery.fn.hide也是一样:

      jQuery.fn.hide = 
      
        function
      
      
        () {
    
      
      
        return
      
       showHide( 
      
        this
      
      
         );
};
      
    

而jQuery.fn. toggle则可接受state或者通过判断当前元素是否hidden,再调用jQuery.fn.show或者jQuery.fn.hide。

      jQuery.fn.toggle = 
      
        function
      
      
        ( state ) {
    
      
      
        var
      
       bool = 
      
        typeof
      
       state === "boolean"
      
        ;

    
      
      
        return
      
      
        this
      
      .each(
      
        function
      
      
        () {
        
      
      
        if
      
       ( bool ? state : isHidden( 
      
        this
      
      
         ) ) {
            jQuery( 
      
      
        this
      
      
         ).show();
        } 
      
      
        else
      
      
         {
            jQuery( 
      
      
        this
      
      
         ).hide();
        }
    });
};
      
    

 

showHide函数

      
        function
      
      
         showHide( elements, show ) {
    
      
      
        var
      
      
         elem,
        values 
      
      =
      
         [],
        index 
      
      = 0
      
        ,
        length 
      
      =
      
         elements.length;

    
      
      
        //
      
      
         遍历所有元素
      
      
        for
      
       ( ; index < length; index++
      
         ) {
        elem 
      
      =
      
         elements[ index ];
        
      
      
        //
      
      
        如果元素没有style属性,则跳过
      
      
        if
      
       ( !
      
        elem.style ) {
            
      
      
        continue
      
      
        ;
        }
        
      
      
        //
      
      
        取出保存在缓存的olddisplay值
      
      
        values[ index ] = jQuery._data( elem, "olddisplay"
      
         );
        
      
      
        //
      
      
        如果要显示
      
      
        if
      
      
         ( show ) {
            
      
      
        //
      
      
         通过将display设置成"",来判断""元素是否会显示
      
      
        if
      
       ( !values[ index ] && elem.style.display === "none"
      
         ) {
                elem.style.display 
      
      = ""
      
        ;
            }

            
      
      
        //
      
      
         如果display被设成了"",并且元素隐藏了,则通过css_defaultDisplay设置默认显示方法
      
      
        if
      
       ( elem.style.display === "" &&
      
         isHidden( elem ) ) {
                values[ index ] 
      
      = jQuery._data( elem, "olddisplay"
      
        , css_defaultDisplay(elem.nodeName) );
            }
        
      
      
        //
      
      
        如果缓存没有值,且元素没有隐藏
      
      
        } 
      
        else
      
      
        if
      
       ( !values[ index ] && !
      
        isHidden( elem ) ) {
            
      
      
        //
      
      
        将目前的display值保存入缓存
      
      
            jQuery._data( elem, "olddisplay", jQuery.css( elem, "display"
      
         ) );
        }
    }

    
      
      
        //
      
      
         在第二次循环设置display属性,避免不断回流
      
      
        for
      
       ( index = 0; index < length; index++
      
         ) {
        elem 
      
      =
      
         elements[ index ];
        
      
      
        if
      
       ( !
      
        elem.style ) {
            
      
      
        continue
      
      
        ;
        }
        
      
      
        if
      
       ( !show || elem.style.display === "none" || elem.style.display === ""
      
         ) {
            
      
      
        //
      
      
         是否要西那是,要显示则设置成缓存值或者"",否则设置为"none"
      
      
            elem.style.display = show ? values[ index ] || "" : "none"
      
        ;
        }
    }

    
      
      
        return
      
      
         elements;
}
      
    

jQuery css


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论