jQuery属性操作（三）
在阅读attr、remove方法时，看到一些对浏览器兼容性做处理的hooks。接下来看一下这些hooks都做了哪些兼容性处理
1、attrHooks。主要处理IE6-9 input的type属性无法写入的问题。
attrHooks: {
type: {
set: function( elem, value ) {
// 如果value是radio，并且elem是input
if ( !jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input") ) {
var val = elem.value;
elem.setAttribute( "type", value );
if ( val ) {
elem.value = val;
}
return value;
}
}
}
}
当用户调用attr(elem, name, value)方法为elem添加属性时，jQuery通过调用jQuery.ttrHooks[name]，看是否该元素的该属性是否存在对应的hooks，
如果存在则返回该hooks，则调用该hooks的set方法为elem设置属性。
2、boolHook 处理属性值是ture或false的情况
boolHook = {
set: function( elem, value, name ) {
// 如果value是false，直接删除该属性
if ( value === false ) {
jQuery.removeAttr( elem, name );
// 否则将该属性的值设置为何名称相同。例如：checked=“checked”
} else {
elem.setAttribute( name, name );
}
// 返回属性名
return name;
}
};
3、propHooks 处理通过prop方法获取元素属性时的情况。jQuery中直接给propHooks的属性只有tabIndex，但后续又动态加入很多。
propHooks: {
// tabIndex属性是指定按tab键时，光标focus的先后顺序，主要指定给表单元素或链接。
tabIndex: {
get: function( elem ) {
// 如果该元素有tabindex属性，或者该元素时可focus元素，或者是链接，返回elem的tabIndex，否则返回-1
return elem.hasAttribute( "tabindex" ) || rfocusable.test( elem.nodeName ) || elem.href ?
elem.tabIndex :
-1;
}
}
}
4、为propHooks增加了selected属性
if ( !jQuery.support.optSelected ) {
jQuery.propHooks.selected = {
get: function( elem ) {
var parent = elem.parentNode;
if ( parent && parent.parentNode ) {
parent.parentNode.selectedIndex;
}
return null;
}
};
}
5、valHooks
valHooks: {
option: {
// 处理获取option值的兼容性。
get: function( elem ) {
var val = elem.attributes.value;
return !val || val.specified ? elem.value : elem.text;
}
},
// 处理得到或设置select值的兼容性问题，对原生js不熟悉，读起来好费劲。。。
select: {
get: function( elem ) {
var value, option,
// 得到select中所有的options
options = elem.options,
// 得到被选中的option的index
index = elem.selectedIndex,
// 用于后面初始化values提供依据，检测elem是单选select还是复选
one = elem.type === "select-one" || index < 0,
// 如果one为true则values初始化null，否则初始化为空数组
values = one ? null : [],
// 初始化max（有多少个option）
max = one ? index + 1 : options.length,
i = index < 0 ?
max :
one ? index : 0;
// Loop through all the selected options
for ( ; i < max; i++ ) {
option = options[ i ];
if ( ( option.selected || i === index ) &&
( jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null ) &&
( !option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" ) ) ) {
value = jQuery( option ).val();
// 如果是单选select，返回value
if ( one ) {
return value;
}
// 否则，如果是多选select，将value放入values数组中
values.push( value );
}
}
// 当是多选select时，返回所有的values
return values;
},
// 设置select的值
set: function( elem, value ) {
var optionSet, option,
// 拿到所有的option
options = elem.options,
// 将value转换成数组
values = jQuery.makeArray( value ),
// 得到option的个数
i = options.length;
// 遍历所有的option
while ( i-- ) {
option = options[ i ];
// 如果当前option的value在values数组中
if ( (option.selected = jQuery.inArray( jQuery(option).val(), values ) >= 0) ) {
// 则设置optionSet为true
optionSet = true;
}
}
// 遍历之后，如果optionSet仍为是false，说明没有被选中的option，设置select值失败
if ( !optionSet ) {
elem.selectedIndex = -1;
}
return values;
}
}
},
// 处理获取或设置radio和checkbox值的兼容性
jQuery.each([ "radio", "checkbox" ], function() {
jQuery.valHooks[ this ] = {
set: function( elem, value ) {
// 如果value是数组
if ( jQuery.isArray( value ) ) {
// 如果该属性的value在数组中，则将该元素设置为被选中
return ( elem.checked = jQuery.inArray( jQuery(elem).val(), value ) >= 0 );
}
}
};
// 如果浏览器不支持checkOn（？）
if ( !jQuery.support.checkOn ) {
jQuery.valHooks[ this ].get = function( elem ) {
return elem.getAttribute("value") === null ? "on" : elem.value;
};
}
});
6、propFix 建立html属性和js中对应属性的对应关系（html属性都是小写，js中采用的是驼峰标识）
// 首先直接添加两个特殊的属性对应关系
propFix: {
"for": "htmlFor",
"class": "className"
},
// 然后遍历数组，建立html（小写）和js（驼峰）的对应关系
jQuery.each([
"tabIndex",
"readOnly",
"maxLength",
"cellSpacing",
"cellPadding",
"rowSpan",
"colSpan",
"useMap",
"frameBorder",
"contentEditable"
], function() {
// 将小写的形式作为键，驼峰的形式作为值
jQuery.propFix[ this.toLowerCase() ] = this;
});
