zoukankan      html  css  js  c++  java
  • 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;
      });

  • 相关阅读:
    【控件推荐】Html编辑器控件 CuteEditor
    【ASP.NET】网页中嵌入视频
    【经验分享】ASP.NET 项目中用到的广告效果
    【转贴好文】服务器概述
    【经验分享】取某月的最后一天的方法
    【经验分享】Word无法使用鼠标选中问题解决
    【经验分享】Sqlserver和Oracle混合事务
    【编码之外】2009春节前最后一天班,感谢一下帮助过我的朋友
    【转贴好文】做快乐的程序员
    【经验分享】JavaScript 中的事件说明
  • 原文地址:https://www.cnblogs.com/charling/p/3496505.html
Copyright © 2011-2022 走看看