jquery.support()

本文深入解析了jQuery在不同浏览器环境下的兼容性处理机制,详细介绍了jQuery如何通过一系列测试来确定浏览器支持的特性,如事件冒泡、样式克隆、复选框默认值等。文章覆盖了jQuery对CSS样式、DOM操作、事件处理等方面的兼容性处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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
				if ( !input.type ) {//input.type 默认是有值的,默认为text;
					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)
				support.checkOn = input.value !== "";//在大部分浏览器下,复选框的默认value值为on,但是在老版本的WebKit下是空值"";

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

				// Will be defined later  
				//定义初始值,是jq的检测一部分是初始化的时候,就能检测到,一部分要是页面DOM加载完成才能检测到的,所以有一些值需要初始化值
				support.reliableMarginRight = true;
				support.boxSizingReliable = true;
				support.pixelPosition = false;

				// Make sure checked status is properly cloned
				// Support: IE9, IE10
				input.checked = true;//让复选框选中,然后在clone出一份,有些浏览器下,克隆的复习框是选中的状态,有一些则是未选中状态,这里就是做一些这个问题的兼容
				support.noCloneChecked = input.cloneNode( true ).checked;

				// Make sure that the options inside disabled selects aren't marked as disabled
				// (WebKit marks them as disabled)
				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";//老版本下,input radio的默认value值是on,所以不等于‘t’

				// #11217 - WebKit loses check when the name is after the checked attribute
				input.setAttribute( "checked", "t" );
				input.setAttribute( "name", "t" );

				fragment.appendChild( input );//将input框放到文档碎片中

				// Support: Safari 5.1, Android 4.x, Android 2.3
				// old WebKit doesn't clone checked state correctly in fragments
				support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;//support.checkClone,这里主要看克隆出来的是否有值

				// Support: Firefox, Chrome, Safari
				// Beware of CSP restrictions (https://developer.mozilla.org/en/Security/CSP)
				//onfocus 主要是指光标移入事件,这个事件不具备冒泡的一个性质,就是你给父级加focus,那这个input是不具备冒泡(捕获?)机制的,这里的onfocusin是具备冒泡
				support.focusinBubbles = "onfocusin" in window;

				div.style.backgroundClip = "content-box";//给div设置背景剪切
				div.cloneNode( true ).style.backgroundClip = "";//克隆出一个新的div,并且将该div的背景剪切设置为空
				support.clearCloneStyle = div.style.backgroundClip === "content-box";
				//克隆的div和原来的div的backgroundClip是否相等,主要看是否影响到原来的div的backgroundClip属性值
				//除了backgroundClip之外,其他跟background有关的,都会有影响

				// Run tests that need a body at doc ready
				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.innerHTML = "";//这里也是针对1点击的版本的操作,因为1点几版本中的divinnerHTML里面添加了不少的东西
					// 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%";
					//上面的top: 1%,是因为某些浏览器下会将百分之1转成像素的形式

					// Workaround failing boxSizing test due to offsetWidth returning wrong value
					// with some non-1 values of body zoom, ticket #13543
					//jQuery.swap ==>  这是css样式转换的方法
					jQuery.swap( body, body.style.zoom != null ? { zoom: 1 } : {}, function() {//zoom主要是元素在页面中显示的比例
						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

						// 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下,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;
			})( {} );

			jQuery.support.cors = !!xhrSupported && ( "withCredentials" in xhrSupported );
			//xhrSupported http request 的对象, withCredentials是ajax跨域的一个属性
			jQuery.support.ajax = xhrSupported = !!xhrSupported;//浏览器是否支持ajax的
		});
		/*
		*	checkOn:true ==>如果这个值为true,则浏览器的复选框的默认value值不为空:
		if ( !jQuery.support.checkOn ) {这里对复选框默认value做了兼容,如果默认value为“”,则设置value为on
			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;
			};
		}
		*	optSelected:true ==>下来菜单默认子项的第一项是否选中的状态
		*	reliableMarginRight:true ==>
		*	boxSizingReliable:true ==>
		*	pixelPosition:true ==>
		*	noCloneChecked:true ==>
		*	optDisabled:true ==>下来菜单禁止点击,子项是否禁止点击:true,表示子项没有被禁止
		*	radioValue:true ==>
		*	checkClone:true ==>
		*	focusinBubbles:false ==>
		*	clearCloneStyle:true ==>
		*	cors:true ==>
		*	ajax:true ==>
		*	boxSizing:true ==>
		*/

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值