jQuery属性操作(三)

时间:2021-06-08 19:49:36

在阅读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;
  });