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;
　　});