jQuery源码 support

support 在jQuery中是个很重要的地方，统一表现形式，搞定兼容性。
support就是干一件事情，就是功能检测。
jQuery并没有判断什么浏览器，而是判断有什么功能。
检测一下是否兼容这个功能，没有这个功能，就兼容就可以了。
主要是内部使用，外部很少使用。

$(function () {
	var temp = $.support;
	for (var pro in temp) {
		document.write(pro + "  " + temp[pro] + "</br>");
	}
});

/*
测试的事chrome浏览器。返回true是支持，返回false是不支持。

checkOn true
optSelected true
reliableMarginRight true
boxSizingReliable true
pixelPosition true
noCloneChecked true
optDisabled true
radioValue true
checkClone true
focusinBubbles false
clearCloneStyle true
cors true			//	跟ajax 有关	 跨域 IE（IE9不支持） 和 W3C都支持，
ajax true			//	跟ajax 有关
boxSizing true

*/


创建了一个工具方法，返回了一个json。
思路：主要是通过创建一些元素，然后通过这些元素，并给元素添加了一些属性，来判断这些属性，然后进行兼容性获取。
但是获取判断分2种，一种是直接进行获取的，创建就即可以判断，另一种是要等页面加载完成之后，才可以判断。

jQuery是用hooks，钩子去解决兼容性问题。
support只是检测的。具体是用hooks（钩子机制）去解决问题。


源码：
	
jQuery.support = (function( support ) {

//这里创建了一些元素，input，文档碎片，div，下拉菜单，下拉菜单的子项。
	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。
　　//	最新的jq都已经去掉了。
	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)
　　// 这里的意思是，大部分浏览器下面， checkbox的默认值都是on。但是老版本的webkit下面是空的，就是false。
	support.checkOn = input.value !== "";
　　//	这里统一都返回on。

	// Must access the parent to make an option select properly
	// Support: IE9, IE10
	support.optSelected = opt.selected;		//下拉菜单的子项。是否被选中。

	// Will be defined later
　　//	这几个属性，就是等页面加载结束以后，才可判断是否支持。具体在后面($(function () { 检查 }))
	support.reliableMarginRight = true;
	support.boxSizingReliable = true;
	support.pixelPosition = false;

	// Make sure checked status is properly cloned
	// Support: IE9, IE10
　　//　　这里说明在IE9 和 10 是有兼容性问题。通过hooks去兼容。
	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)
　　//　　 非常老的版本的webkit中，下拉列表被禁止了，子项也被禁止了。
	select.disabled = true;
	support.optDisabled = !opt.disabled;

	// Check if an input maintains its value after becoming a radio
	// Support: IE9, IE10
　　// 注意创建时赋值顺序，如果value 和 type 赋值顺序反了，就不会有问题了。
	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
	input.setAttribute( "checked", "t" );
	input.setAttribute( "name", "t" );

	fragment.appendChild( input );

	// Support: Safari 5.1, Android 4.x, Android 2.3
	// old WebKit doesn't clone checked state correctly in fragments
　　// 只有webkit下，在clone一个碎片的时候，cheecked无法返回一个值。
	support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;

	// Support: Firefox, Chrome, Safari
	// Beware of CSP restrictions (https://developer.mozilla.org/en/Security/CSP)
　　// 是否支持focusin 事件， 光标移入事件，但是不具备冒泡的机制。
　　// 但是 onfocusin 具备 冒泡机制的。
	support.focusinBubbles = "onfocusin" in window;

　　//	背景剪切
　　// 	这里是克隆的节点，原则上说，新的节点是不会影响以前到节点，
　　//	如果新节点可以影响以前到节点。div.style.backgroundClip == ''；
　　// 	任何跟背景有关的。
　　//	原则上面来说，克隆是不应该影响到以前的节点的。这里就解决了这个问题。
	div.style.backgroundClip = "content-box";
	div.cloneNode( true ).style.backgroundClip = "";
	support.clearCloneStyle = div.style.backgroundClip === "content-box";

	// Run tests that need a body at doc ready
　　// 这里就是要等到页面加载以后才能判断的属性。进行处理。。。。。。
	jQuery(function() {
		var container, marginDiv,
			// Support: Firefox, Android 2.3 (Prefixed box-sizing versions).
　　　　　　// -webkit-box-sizing CSS3的属性，作用就是当前页面是标准模式，还是怪异模式。
　　　　　　//	content-box就是标准模式。
　　　　　　//	这里区分一下标准模式和怪异模式
　　　　　　// 	标准模式和怪异模式简单区分，就是对盒模型的影响。
　　　　　　//  怪异模型下，padding和border还有content，跟我W3C里面的content等价。
　　　　　　//	box-sizing:content-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;
		}
　　　　// body 存在，就是一个页面。就进行后续的判断。

　　　　// 创建了div，设定了样式。
　　　　// 创建的div，要添加人body中，所以将它的位置设定到浏览器看不到的地方。
		container = document.createElement("div");
		container.style.cssText = "border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px";

/*******这里添加一下属性******/
		// Check box-sizing and margin behavior.
		body.appendChild( container ).appendChild( div );
		div.innerHTML = "";
		// Support: Firefox, Android 2.3 (Prefixed box-sizing versions).
		// 这里的 box-sizing:border-box;是怪异模式。
		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%";

/********swap函数就是转换一下CSS样式。*****/
		// Workaround failing boxSizing test due to offsetWidth returning wrong value
		// with some non-1 values of body zoom, ticket #13543
　　　　// 	body.style.zoom != null,	zoom是设定显示比例。如果设定1，就是1:1显示，如果是2，就是放大了2倍。
　　　　// 	不等于空，都影响offsetWidth这个属性，不等于空的时候，就统一一下。
　　　　//	swap 内的funciotn()	是一个回调函数，判断是否支持这个属性。
　　　　//	w3c 和 IE 都支持这个属性。
/************************boxSizing 还在用 *******************************************************************/
		jQuery.swap( body, body.style.zoom != null ? { zoom: 1 } : {}, function() {
			support.boxSizing = div.offsetWidth === 4;
		});

/*******判断这个函数是否存在******/
/************************getComputedStyle 还在用 *******************************************************************/
		// Use window.getComputedStyle because jsdom on node.js will break without it.
　　　　//	这里的意思是node里面没有这个函数。在node里面，就不会用了。浏览器都支持。
		if ( window.getComputedStyle ) {
　　　　　　//	像素问题。
　　　　　　//  w3c 是true ，只有Safari返回 pixelPosition ＝ false; 其他的浏览器返回的都是像素。
　　　　　　// 	1% 转换为 像素值。 判断是否支持像素定位。
/************************pixelPosition 还在用 *******************************************************************/
			support.pixelPosition = ( window.getComputedStyle( div, null ) || {} ).top !== "1%";

　　　　　　//	IE 下 boxSizingReliable＝false，W3C是true。
　　　　　　//  　　padding:1px;
　　　　　　//	IE 下的怪异模式，width ＝ width － padding ＝ 2px;
/************************boxSizingReliable 还在用 *******************************************************************/
			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
　　　　　　//	还原了数据
			marginDiv = div.appendChild( document.createElement("div") );
			marginDiv.style.cssText = div.style.cssText = divReset;
　　　　　　//	设定了0，又改变了宽度。
			marginDiv.style.marginRight = marginDiv.style.width = "0";
			div.style.width = "1px";
　　　　　　//	reliableMarginRight 都是true。因为取反了。所以。浏览器得到的都是0.
　　　　　　//	webkit老版本，有问题。现在浏览器都修正了这个问题。
/************************reliableMarginRight 还在用 *******************************************************************/
			support.reliableMarginRight =
				!parseFloat( ( window.getComputedStyle( marginDiv, null ) || {} ).marginRight );
		}

　　　　// 检测结束以后，将创建的div删掉。
		body.removeChild( container );
	});

	return support;
})( {} );

 

 

这里真好解释一下box-sizing

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

　　content-box：　　　  border和padding不计算入width之内

　　padding-box：　　　 padding计算入width内

　　border-box：　　　　 border和padding计算入width之内，其实就是怪异模式了~

 

chrome， ie8+浏览器支持content-box和border-box；

ff则支持全部三个值。

 

使用时：

-webkit-box-sizing: 100px;　　　　 // for ios-safari, android

-moz-box-sizing:100px; 　　　　　 //for ff 

box-sizing:100px;　　　　　　　　  //for other