jQuery中的功能检测方法jQuery.support

// 输出在图片
// $(function(){
//   for(var attr in $.support) {
//     $('body').append('<div>' + attr + ':'+ $.support[attr] + '</div>');
//   }
// });

// 只是用于检测操作，检测哪些支持，哪些不支持
// 具体的处理是通过hooks来解决的
jQuery.support = (function( support ) {
  var input = document.createElement("input"),
    fragment = document.createDocumentFragment(),
    div = document.createElement("div"),
    select = document.createElement("select"),
    opt = select.appendChild( document.createElement("option") );

  // Finish early in limited environments
  // 这个在最新版本中已经被去掉了，因为input.type 默认是有值的 text
  if ( !input.type ) {
    return support;
  }

  input.type = "checkbox";

  // Support: Safari 5.1, iOS 5.1, Android 4.x, Android 2.3
  // Check the default checkbox/radio value ("" on old WebKit; "on" elsewhere)
  // input.value 在老版本的WebKit中的默认值是"", 在其它浏览器中是"on"
  /**
   * if ( !jQuery.support.checkOn ) {
      jQuery.valHooks[ this ].get = function( elem ) {
        // Support: Webkit
        // "" is returned instead of "on" if a value isn't specified
        return elem.getAttribute("value") === null ? "on" : elem.value;
      };
    }
   */
  support.checkOn = input.value !== "";

  // Must access the parent to make an option select properly
  // Support: IE9, IE10，IE11下都是false
  // 返回true，说明子项被选中了；返回false，说明子项未选中
  // 查看默认子项第一项是选中的还是未选中
  support.optSelected = opt.selected;

  // Will be defined later
  // 必须得等正个页面加载完，再去做判断，相当于进行DOM节点操作，必须得等DOM节点加载完
  // 这里只是给了一个默认的初始值
  support.reliableMarginRight = true;
  support.boxSizingReliable = true;
  support.pixelPosition = false;

  // Make sure checked status is properly cloned
  // Support: IE9, IE10 以下都是false
  // 首先让复选框选中
  input.checked = true;
  // 检测如果然复选框选中，复制这个节点，是否选中
  support.noCloneChecked = input.cloneNode( true ).checked;

  // Make sure that the options inside disabled selects aren't marked as disabled
  // (WebKit marks them as disabled)
  // 为true，表示禁用下拉列表
  select.disabled = true;
  // 一般情况下，子项跟它没什么关系 opt.disable = false
  // 在非常老的webkit下，select被禁用以后true，opt也会被禁用true
  support.optDisabled = !opt.disabled;

  // Check if an input maintains its value after becoming a radio
  // Support: IE9, IE10，IE11以上都是false，在IE中是"on"
  // 注意：是先去设置value值，再去设置type值，如果改变先后顺序，则无论在哪种浏览器下，返回都是true
  input = document.createElement("input");
  input.value = "t";
  input.type = "radio";
  support.radioValue = input.value === "t";

  // #11217 - WebKit loses check when the name is after the checked attribute
  // 单选框设置了checked = "t  name = "t"
  input.setAttribute( "checked", "t" );
  input.setAttribute( "name", "t" );
  // 把input放入到文档碎片当中
  fragment.appendChild( input );

  // Support: Safari 5.1, Android 4.x, Android 2.3 都返回false
  // old WebKit doesn't clone checked state correctly in fragments
  // 来观察checked到底有没有值
  support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;

  // Support: Firefox, Chrome, Safari 都是不支持的，在IE下是支持的
  // Beware of CSP restrictions (https://developer.mozilla.org/en/Security/CSP)
  // 如果是 onFocus ，指的是光标移入事件，不具备冒泡的性质
  // onfocusin 是具备冒泡机制的
  /**
   * <div id = "div1">
   *  <input type="text">
   * </div>
   * 
   * var oDiv = document.getElementById('div1');
   * oDiv.onfocus = function(){
   *  alert(123);   // 不会输出123 如果改为onfocus，就可以啦
   * };
   */
  support.focusinBubbles = "onfocusin" in window;
  
  // IE9，IE10，IE11 都是有问题的
  /**
   * var div = document.createElement('div');
   * div.style.backgroundColor = 'red';
   * div.cloneNode(true).style.background = "";
   * alert(div.style.backgroundColor);
   */
  // 背景被裁剪至内容区（content box）外沿
  div.style.backgroundClip = "content-box";
  // 一般来说，克隆出来一个节点，给这个节点设置background之后是不会影响到原来的div的（任何跟背景有关的，都会有这个问题）
  div.cloneNode( true ).style.backgroundClip = "";
  // 如果没影响到，返回true，如果影响到了，返回false
  support.clearCloneStyle = div.style.backgroundClip === "content-box";

  // Run tests that need a body at doc ready
  // 需要等DOM加载完，才可以进行的操作
  jQuery(function() {
    var container, marginDiv,
      // Support: Firefox, Android 2.3 (Prefixed box-sizing versions).
      // content-box 是不包含padding margin 的 content 的长度，默认是 border-box
      divReset = "padding:0;margin:0;border:0;display:block;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box",
      body = document.getElementsByTagName("body")[ 0 ];

    // 查看body是否存在
    if ( !body ) {
      // Return for frameset docs that don't have a body
      return;
    }

    container = document.createElement("div");
    // left:-9999px 可以在页面之外，因为这个只是做测试用的 
    container.style.cssText = "border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px";

    // Check box-sizing and margin behavior.
    // div = document.createElement("div")
    body.appendChild( container ).appendChild( div );
    // 这句话是没有用的，针对的是1.X的版本，1.X的版本里面有很多东西，清空一下
    div.innerHTML = "";
    // Support: Firefox, Android 2.3 (Prefixed box-sizing versions).
    div.style.cssText = "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%";

    // Workaround failing boxSizing test due to offsetWidth returning wrong value
    // with some non-1 values of body zoom, ticket #13543
    // zoom可以设置页面的显示比例的 zoom = 1，页面跟显示的页面是1 ： 1的关系，zoom = 2，就是放大了2倍
    // function 是设置完你想要检测的东西
    jQuery.swap( body, body.style.zoom != null ? { zoom: 1 } : {}, function() {
      // 检测一下div.offsetWidth === 4是否成立，就可以看出来是否支持盒子模型
      // 因为上面设置了width:4px
      support.boxSizing = div.offsetWidth === 4;
    });

    // Use window.getComputedStyle because jsdom on node.js will break without it.
    // 在node.js环境下，是没有window.getComputedStyle
    if ( window.getComputedStyle ) {
      // 返回1%是false   只有safari返回的是false，说明在safari下可以设置为1%，其它浏览器返回的是象素
      support.pixelPosition = ( window.getComputedStyle( div, null ) || {} ).top !== "1%";
      // 在IE11，IE10，IE9下都是false，在IE下是border-box模式，如果还有padding存在的话，width = width - 2 * padding
      support.boxSizingReliable = ( window.getComputedStyle( div, null ) || { width: "4px" } ).width === "4px";

      // Support: Android 2.3
      // Check if div with explicit width and no margin-right incorrectly
      // gets computed margin-right based on width of container. (#3333)
      // WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
      // 在webkit老版本中（false），当更改div.style.width为1px的时候，会影响到marginDiv.style.marginRight
      // 现在的浏览器当中都是true
      // 又创建了一个div，添加到已有的div当中
      marginDiv = div.appendChild( document.createElement("div") );
      marginDiv.style.cssText = div.style.cssText = divReset;
      marginDiv.style.marginRight = marginDiv.style.width = "0";
      div.style.width = "1px";

      support.reliableMarginRight =
        !parseFloat( ( window.getComputedStyle( marginDiv, null ) || {} ).marginRight );
    }

    // 要把它删掉，因为只是做测试用的
    body.removeChild( container );
  });

  return support;
})( {} );