解密jQuery内核 样式操作
基础回顾
jQuery里节点样式读取以及设置都是通过.css()这个方法来实现的，本章通一下分解探究下jquery里这部分代码的实现
那么jQuery要处理样式的哪些问题?
先简单回顾下样式操作会遇到的问题
HTML样式定义3种方式了
<link/> 外部引入也就是定义CSS中的 <style/>嵌入式样式 style特性地定义
给一个HTML元素设置css属性，如
var head= document.getElementById("head"); head.style.width = "20px"; head.style.height = "10px"; head.style.display = "block";
这是DOM2级样式提供的API了，这里总的来说还涉及了3个问题，当然也是jQuery内部需要解决的兼容问题了
1 单一的设置太麻烦，而且每次style一次就等于浏览器要绘制一次，当然高级的浏览器是可能会合并style的次数的
2 style只能针对行类样式，对于link引入的样式，无法获取
3 样式属性名的兼容问题，比如驼峰，保留字
样式规则
任何支持style特性的HTML元素在js中有一个对象的style属性，其实也是一个实例，但是内部属性命名都是采用的驼峰形式的
比如 background-image =>要写成 backgroundImage
其中一个是比较特殊的就是 float, 保留字嘛所以就换成 cssFloat, IE : styleFloat
然后对于width,hight这些处理都最好要有一个量度单位
合并cssText
可能针对一种情况给出的处理就是cssText合并
var head= document.getElementById("head"); head.style.cssText="width:20px;height:10px;display:bolck";
和innerHTML一样，cssText很快捷且所有浏览器都支持。此外当批量操作样式时，cssText只需一次reflow，提高了页面渲染性能
当然如果是在创建的时候，我们还可以利用文档碎片
缺点自然就是样式被整体覆盖了，所以在处理的时候应该要先获取需要保留的样式然后再拼接起来
样式访问
之前说过了style只能获取行类样式了，那么CSS外部样式表定义的样式如何处理？
DOM2增加了 document.defauleView,提供了 getComputedStyle()方法 返回了类似style属性的 css的dom隐射的实例对象
自然包行了样式表的最终样式了
getComputedStyle与style的区别
区别就在于getComputedStyle是只能读的，style是可以可读可写的
看看jQuery的
function getStyles( elem ) { return window.getComputedStyle( elem, null ); }
没有defauleView前缀，查了下在浏览器中，该属性返回当前 document 对象所关联的 window
对象，如果没有，会返回 null。
应该就能直接window调用了
当然啦，IE这个老大反正就不怎么守规矩了，getComputedStyle方法IE6~8是不支持，所以自己弄出来了currentStyle
处理类似style的处理了,jQuery2X 可以无视IE9以下的兼容了， 所以这个略过~
以上就是样式操作需要了解是基础了，那么总的来说
jQuery需要的处理问题就显而易见了
1 参数传递
2 命名规范
3 访问规则
4 性能优化
.css()
关于css的接口
jQuery.fn.css 与 jQuery.css
我们知道实例是调用静态的方法
css的接口参数传递是可以很多个组合情况的，这也符合了jQuery少写多做的原则了
最终方法与设置样式的方法是实例方法，所以我们看传递的参数就知道了，只能是单一的elem, name, value 实参
jQuery.style( elem, name, value ) :
jQuery.css( elem, name );
所以如果我们传递是对象或者别的方式就需要一个过滤的环节
css参数的处理也跟之前的attr属性的处理保持一致，采用了jQuery.access方法统一调配
这个具体之前就分析了，无非就是递归参数，但是有个可学的设计思路
分离不同的逻辑判断通过回调传递进去
取值jQuery.css()
先看看源码
css: function( elem, name, extra, styles ) { var val, num, hooks, origName = jQuery.camelCase( name ); name = jQuery.cssProps[ origName ] || ( jQuery.cssProps[ origName ] = vendorPropName( elem.style, origName ) ); hooks = jQuery.cssHooks[ name ] || jQuery.cssHooks[ origName ]; if ( hooks && "get" in hooks ) { val = hooks.get( elem, true, extra ); } if ( val === undefined ) { val = curCSS( elem, name, styles ); } if ( val === "normal" && name in cssNormalTransform ) { val = cssNormalTransform[ name ]; } if ( extra === "" || extra ) { num = parseFloat( val ); return extra === true || jQuery.isNumeric( num ) ? num || 0 : val; } return val; }
首先自然是检测是是否驼峰写法了，如果不是就得转化下
origName = jQuery.camelCase( name );
把正则拖出来
‘background-image‘.replace(/-([\da-z])/gi, fcamelCase = function( all, letter ) { return letter.toUpperCase(); })
找到-后面的，转成大写开头
修正命名float
jQuery.cssProps
css样式的钩子处理，针对不同的兼容增加的解耦处理，这里先跳过下章再将，不影响代码流程
所以最终在默认情况下是通过curCSS处理的取值
curCSS = function( elem, name, _computed ) { var width, minWidth, maxWidth, computed = _computed || getStyles( elem ), // Support: IE9 // getPropertyValue is only needed for .css(‘filter‘) in IE9, see #12537 ret = computed ? computed.getPropertyValue( name ) || computed[ name ] : undefined, style = elem.style;
最终就是通过getComputedStyle的getPropertyValue方法了，所以通体来说跟之前假设的处理是保持一致的，只是做了不同的兼容
设值jQuery.style()
处理的方式与css类似，只是要注意了style才具有样式的修改权限
这样的传对象其实都是需要调用多次style处理的，当然没有采用cssText的方式处理，因为本身以前的属性就会丢失了
var color = a.css({"background-color":‘red‘,‘width‘:‘200px‘});
总结：
jQuery的处理流程：
1. 分解参数
2. 转换为驼峰式，修正属性名
3. 如果有钩子，则调用钩子的set get
4. 最终实现都是依靠浏览器自己的API的
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
