//11.support : 功能检测(解决内部源码的兼容性问题)
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") );
if ( !input.type ) {
return support;
}
input.type = "checkbox";//改为复选框
//在大部分浏览器下，复选框的默认value值为on，但是在老版本的WebKit下是空值"";
support.checkOn = input.value !== "";
//下拉菜单select的子项option，默认第一个子项是否选中
support.optSelected = opt.selected;
//定义初始值，是jq的检测一部分是初始化的时候，就能检测到，一部分要是页面DOM加载完成才能检测到的，所以有一些值需要初始化值
support.reliableMarginRight = true;
support.boxSizingReliable = true;
support.pixelPosition = false;
//让复选框选中，然后在clone出一份，有些浏览器下，克隆的复习框是选中的状态，有一些则是未选中状态，这里就是做一些这个问题的兼容
input.checked = true;
support.noCloneChecked = input.cloneNode( true ).checked;
//下来菜单禁止点击
select.disabled = true;
support.optDisabled = !opt.disabled;
//这里一定要注意顺序问题，一定是先设置value再去设置type
input = document.createElement("input");
input.value = "t";
input.type = "radio";
//老版本下，input radio的默认value值是on，所以不等于‘t’
support.radioValue = input.value === "t";
input.setAttribute( "checked", "t" );
input.setAttribute( "name", "t" );
fragment.appendChild( input );//将input框放到文档碎片中
support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;
//onfocus 主要是指光标移入事件，这个事件不具备冒泡的一个性质，就是你给父级加focus，
//那这个input是不具备冒泡（捕获？）机制的，这里的onfocusin是具备冒泡
support.focusinBubbles = "onfocusin" in window;
div.style.backgroundClip = "content-box";//给div设置背景剪切
//克隆出一个新的div，并且将该div的背景剪切设置为空
div.cloneNode( true ).style.backgroundClip = "";
support.clearCloneStyle = div.style.backgroundClip === "content-box";
//克隆的div和原来的div的backgroundClip是否相等，主要看是否影响到原来的div的backgroundClip属性值
//除了backgroundClip之外，其他跟background有关的，都会有影响
jQuery(function() {//这里面的主要是针对要dom加载完成才能检测的
var container, marginDiv,
// Support: Firefox, Android 2.3 (Prefixed box-sizing versions).
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 ];
if ( !body ) {
// Return for frameset docs that don't have a body
return;
}
container = document.createElement("div");
container.style.cssText = "border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px";
//因为这里创建标签，并且append到body上其实是做功能检测的，
//如果没有将left设置为-9999的话，会在页面中占据一定的位置，这样就会影响到页面的效果，所以要设置left，将它定出去
//margin-top:1px；主要是1.几版本需要用到对offsetTop等之类的要做功能检测需要用到，这里2.0.3版本不需要用到
// Check box-sizing and margin behavior.
body.appendChild( container ).appendChild( div );//创建div标签
div.innerHTML = "";//这里也是针对1点几的版本的操作，因为1点几版本中的divinnerHTML里面添加了不少的东西
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%";
//上面的top: 1%,是因为某些浏览器下会将百分之1转成像素的形式
//jQuery.swap ==> 这是css样式转换的方法
jQuery.swap( body, body.style.zoom != null ? { zoom: 1 } : {}, function() {
support.boxSizing = div.offsetWidth === 4;//boxSizing，怪异模式是否支持
});
// Use window.getComputedStyle because jsdom on node.js will break without it.
if ( window.getComputedStyle ) {//在nodejs环境下是没有getComputedStyle的
support.pixelPosition = ( window.getComputedStyle( div, null ) || {} ).top !== "1%";
support.boxSizingReliable = ( window.getComputedStyle( div, null ) || { width: "4px" } ).width === "4px";
//IE下怪异模式下，设置了width和padding的话，这个时候的width是要减掉padding的值，所以这里如果是IE的话 ，width不是4px而是2px，因为设置了padding 1px
//在老版本的webkit下，div.style.width = "1px";设置width后会影响到marginRight的值
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;
})({});
//11.support : 功能检测(解决内部源码的兼容性问题)
