jQuery-1.9.1源码分析系列（七） 钩子（hooks）机制及浏览器兼容

jQuery.support = {
　　//当使用.innerHTML的时候,IE吞掉开头的空白。
　　leadingWhitespace:  true/false(空白还在/空白被吞掉（IE）), 

　　//IE浏览器会自动给空表插入tbody标签。
　　tbody:  true/false(tbody可用/tbody会被自动插入（IE）),
　　
　　// IE6-8下确保link/ script/ style或其他html5标签元素能使用innerHTML正确载入的前提是需要一个元素包裹他们。使用div元素来包裹，并且div之前要一个不换行的字符。例如“X<div><link/></div>”。
　　htmlSerialize:  true/false(不用包裹能正确加载/需要包裹（IE）),
　　
　　//获取节点的style属性时：现代浏览器使用elem.getAttribute("style"),而IE使用elem.style.cssText
　　style:  true/fasle(使用. getAttribute/IE下使用.cssTex),
　　
　　//确保节点的css特征opacity存在 (IE使用filter)
　　opacity:  true/false(opacity存在/opacity不存在),
　　
　　//验证float样式存在, (IE使用styleFloat而不是cssFloat)
　　cssFloat:  true/fasle(float样式使用cssFloat特征名/使用styleFloat特征名),
　　
　　//检查checkbox/radio的默认值(老版本WebKit 默认为""，其他浏览器默认为"on")
　　checkOn:  true/false(默认值为on/默认值为空),
　　
　　//确保一个默认选项有一个可用的selected特征值.
　　//(如果他是一个option组，WebKit的默认选项的selected特征值为false，IE也是。)
　　optSelected:  true/false(有默认选中/没有默认选中，兼容处理时需要设置一个),
　　 
　　//确保克隆的html5节点（没有内容）不会出现问题。
　　//比如document.createElement("nav").cloneNode( true ).outerHTML应该得到"<nav></nav>",而IE却是"<:nav></:nav>"
　　html5Clone:  true/false(能够正常克隆/IE下使用cloneNode有问题),
　　 
　　//确保节点的checked状态也能被克隆
　　noCloneChecked:  true/false(能够正常克隆/IE下克隆checked状态没有被克隆),
　　 
　　//确保option选项disabled而select不被标记为disabled(WebKit会把两者都标记为disabled)
　　optDisabled:  true/false(disabled正常/两者都会标记为disabled)
　　 
　　//测试是否能使用delete div.test的方式来删除特征，否则使用delete div[test]（IE<9）
　　deleteExpando: true/false(可以使用delete div.test/不能使用delete div.test)
　　 
　　//检查input标签是否可以使用getAttribute("value")来获取值（IE下不行，需要使用elem[‘value’]）
　　input: true/false(能信任getAttribute("value")/不能信任getAttribute("value"))
　　 
　　//检查一个input标签在更改为radio类型后他的值是否还是先前的值（ie会变成默认值”on”,其他浏览器不变）
　　radioValue: true/false(值不会改变/会改变成默认值),
　　 
　　// webkit不能正确克隆fragments中的checked状态
　　checkClone:  true/false(能正确克隆/不能正确克隆)
　　 
　　//判断事件是否被克隆。（兼容IE<9。 Opera不克隆事件(并且typeof div.attachEvent === undefined). IE9-10克隆事件通过attachEvent,但是不能通过 .click()来触发）
　　noCloneEvent:  true/false(现代浏览器克隆节点时事件不被克隆/ie8浏览器克隆节点的时候事件也被克隆)
　　 
　　// IE<9 (缺少submit/change事件冒泡)，Firefox 17+ (缺少focusin事件)
　　submitBubbles:  true/false(支持冒泡/不支持冒泡),
　　changeBubbles:  true/false（支持冒泡/不支持冒泡）,
　　focusinBubbles:  true/false（支持冒泡/不支持冒泡）,
　　 
　　//检查是否能准确克隆css样式，比如一些可以继承父节点的样式没有设值的时候值应该是inherit，但是并非每个浏览器都能获取到该值。
　　clearCloneStyle：true/false（能准确克隆/不能准确克隆）,
　　 
　　//（判断前提条件：DOM加载完成）判断offsetWidth/Height是否可靠（主要用于判断元素是否占用空间，如果元素占用空间了，就认为是可见的，否则就认为是不可见：hidden）；IE8下表格的空cell依然有offsetWidth/Height。
　　reliableHiddenOffsets： true/false（【offsetWidth/Height值可靠】/【offsetWidth/Height值不可靠】）
　　 
　　//（判断前提条件：DOM加载完成）测试getComputedStyle获取的位置是否是像素单位。webkit的bug,使用getComputedStyle返回的最终样式中top/left/right/bottom不一定是像素为单位的，可能是指定的百分比等
　　pixelPosition： true/false（位置css样式以像素为单位返回/位置css样式以指定的格式返回）
　　 
　　//（判断前提条件：DOM加载完成）测试设置的boxSizing是否可靠。使用getComputedStyle获取的最总计算样式的浏览器可能会出现问题。
　　boxSizingReliable:  true/false（可靠/不可靠）
　　 
　　//（判断前提条件：DOM加载完成）检测使用getComputedStyle 返回的margin-right值是否正确：WebKit Bug 13343 – getComputedStyle返回错误的margin-right值。解决办法：处理元素的display临时设置为inline-block的解决来计算。
　　reliableMarginRight： true/false(返回值可靠/返回值不可靠)
}

//还有一部分没有在jQuery.support中，但是在Sizzle引擎中有描述
support = {
　　//IE8下对节点的一些没有存在的属性（attributes）获取值返回一个字符串
　　attributes:  true/false(返回正确/返回字符串)
　　
　　//检测getElementsByClassName是否可靠。IE8不支持；Opera中如果同一个标签有多个classname,那么他只能找到第一个classname (在 9.6版本中)；Safari 3.2会缓存class属性并且使用. className修改后不会更改缓存。
　　getByClassName： true/false(可以信赖/不值得信赖)
　　
　　//检测getElementsByName是否可靠。IE下某些标签是没有name属性的，比如div。
　　getByName： true/false(可靠/不可靠)
　　 
　　//检测浏览器是否支持querySelectorAll方法。这里说一个关于context.querySelector/querySelectorAll的要点。context.querySelector查找的是context下匹配的第一个子元素。但是有一个特点就是选择器可以从context本身开始。比如有一个div如<div id=’chua’ class=’chua’><p></p></div>。我们查找p可以使用document.getElementById(‘chua‘) .querySelector(‘p ‘)。页可以是document.getElementById(‘chua‘) .querySelector(‘.chua p‘)。当然document.getElementById(‘chua‘) .querySelector(‘.chua‘)是查不到值的。
　　qsa： ture/false(支持/不支持)
　　 
　　//检测对matchesSelector的支持情况。目前除IE6-IE8，Firefox/Chrome/Safari/Opera/IE 的最新版本均已实现，但方法都带上了各自的前缀
　　matchesSelector： ture/false(支持/不支持)　　      
}

//属性钩子对象（所有的属性钩子都放在里面）
attrHooks: {
　　//属性为type的钩子
　　type: {
　　　　//操作为set的钩子
　　　　set: function( elem, value ) {
　　　　　　if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) {
　　　　　　　　//IE6-9设置完type后恢复value属性（attr）
　　　　　　　　var val = elem.value;
　　　　　　　　elem.setAttribute( "type", value );
　　　　　　　　if ( val ) { elem.value = val; }
　　　　　　　　　　return value;
　　　　　　　　}
　　　　　　}
　　　　}
　　}
}

//先获取钩子，此时name="type"　　
hooks = jQuery.attrHooks[ name ] || ( rboolean.test( name ) ? boolHook : nodeHook );
　　
//此时value="radio"
if ( value !== undefined ) {
　　...
　　} else if ( hooks && notxml && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ) {
　　　　return ret;
　　} else {
　　　　...
　　}
}

propFix: {
        tabindex: "tabIndex",
        readonly: "readOnly",
        "for": "htmlFor",
        "class": "className",
        maxlength: "maxLength",
        cellspacing: "cellSpacing",
        cellpadding: "cellPadding",
        rowspan: "rowSpan",
        colspan: "colSpan",
        usemap: "useMap",
        frameborder: "frameBorder",
        contenteditable: "contentEditable"
}

type:"select-one"
tagName: "SELECT"
value: "111"
textContent: "↵ Single↵ Single2↵"

tagName: "OPTION"
value: "111"
text: "Single"
textContent: "Single"

type: "radio"
value: "11111"

type: "checkbox"
value: "11111"

hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];
//如果钩子匹配到了，并且还存在get方法，那么就要调用这个方法了,如果有返回值就返回当前的这个最终值
if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
    return ret;
}