学习jQuery.support
做前端最痛苦的莫过于兼容问题了，同一样东西，不同浏览器有不同的实现，同一个浏览器不同的版本也有不同的处理。直叫人抓狂。但既然做了前端，就不得不提起耐心，面对这些万恶的兼容。
jQuery作为一个目前来讲最流行的JS库，它同样提供了检测各种各样特性的功能，告诉你某个功能该浏览器是否支持，好让你做出进一步的处理。下面，先罗列一下一些问题吧。
测试浏览器：IE6，IE7，IE8，IE9，chrome 23.0.1271.95，firefox 17.0.1，其中IE78是在IE9的文档模式下，不包准确，但jQuery和网上搜到的结果应该可以相信前人的测试是准确的。另，在chrome23这本版本已修复的bug也不列入。
1. IE678的childNodes不包含空白文本节点，firstChild同理
2. 空table，IE会自动生成tbody，而标准浏览器不会(标准浏览器如果有tr存在，也会自动生成tbody)
3. IE678无法通过div.innerHTML = '<link />';来插入link，同样的还有style,script节点
4. IE67无法用getAttribute获取style，返回object，同理也无法用setAttribute设置style
5. IE67，无法通过getAttribute获取用户设定的原始href值
6. IE678是通过filter滤镜来支持透明度
7. IE678通过styleFloat来获取float，而标准浏览器用cssFloat
8. IE中，第一个option不被默认选中，包括IE9依然如此，其他则选中
9. IE67, 某些特殊属性的获取也比较特殊，如class, for, char，不能直接使用getAttribute获取
10. IE6在克隆HTML5的新标签元素时outerHTML有":"
11. IE6789,input元素的checked属性不能被拷贝
12. IE678不能delete节点上的属性
13. IE会拷贝事件
14. IE下，input被更换类型后，无法保持前一个类型所设的值，蛋疼才会这样做
越看越觉得悲催，不列了。直接看jQuery的源码解释吧。
jQuery.support = (function() {
var support,
all,
a,
select,
opt,
input,
fragment,
eventName,
i,
isSupported,
clickFn,
div = document.createElement("div");
// Setup
div.setAttribute( "className", "t" );
div.innerHTML = " <link/><table></table><a href='/a'>a</a><input type='checkbox'/>";
// Support tests won't run in some limited or non-browser environments
all = div.getElementsByTagName("*");
a = div.getElementsByTagName("a")[ 0 ];
if ( !all || !a || !all.length ) {
return {};
}
// First batch of tests
select = document.createElement("select");
opt = select.appendChild( document.createElement("option") );
input = div.getElementsByTagName("input")[ 0 ];
a.style.cssText = "top:1px;float:left;opacity:.5";
support = {
// IE strips leading whitespace when .innerHTML is used
// IE678的childNodes不包含空白文本节点，firstChild同理
leadingWhitespace: ( div.firstChild.nodeType === 3 ),
// Make sure that tbody elements aren't automatically inserted
// IE will insert them into empty tables
// 空table，IE会自动生成tbody，而标准浏览器不会(标准浏览器如果有tr存在，也会自动生成tbody)
tbody: !div.getElementsByTagName("tbody").length,
// Make sure that link elements get serialized correctly by innerHTML
// This requires a wrapper element in IE
// IE678无法通过div.innerHTML = '<link />';来插入link
htmlSerialize: !!div.getElementsByTagName("link").length,
// Get the style information from getAttribute
// (IE uses .cssText instead)
// IE67无法用getAttribute获取style，返回object，同理也无法用setAttribute设置style
style: /top/.test( a.getAttribute("style") ),
// Make sure that URLs aren't manipulated
// (IE normalizes it by default)
// getAttribute获取href的问题，详见http://www.cnblogs.com/littledu/articles/2710234.html
hrefNormalized: ( a.getAttribute("href") === "/a" ),
// Make sure that element opacity exists
// (IE uses filter instead)
// Use a regex to work around a WebKit issue. See #5145
// IE678是通过filter滤镜来支持透明度
opacity: /^0.5/.test( a.style.opacity ),
// Verify style float existence
// (IE uses styleFloat instead of cssFloat)
// IE678通过styleFloat来获取float，而标准浏览器用cssFloat
cssFloat: !!a.style.cssFloat,
// Make sure that if no value is specified for a checkbox
// that it defaults to "on".
// (WebKit defaults to "" instead)
// checkbox的默认值为'on'，chrome 23.0.1271.95 m测试
checkOn: ( input.value === "on" ),
// Make sure that a selected-by-default option has a working selected property.
// (WebKit defaults to false instead of true, IE too, if it's in an optgroup)
// IE中，第一个option不被默认选中，包括IE9依然如此，其他则选中
optSelected: opt.selected,
// Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)
// IE67无法通过setAttribute('class','ooxx')来设置className(IE67支持setAttribute('className','ooxx')),其他浏览器则可以，反之getAttribute同理
getSetAttribute: div.className !== "t",
// Tests for enctype support on a form (#6743)
// 本机所有浏览器支持一样ie6789,chrome,ff
enctype: !!document.createElement("form").enctype,
// Makes sure cloning an html5 element does not cause problems
// Where outerHTML is undefined, this still works
// IE6在克隆HTML5的新标签元素时outerHTML有":"
html5Clone: document.createElement("nav").cloneNode( true ).outerHTML !== "<:nav></:nav>",
// jQuery.support.boxModel DEPRECATED in 1.8 since we don't support Quirks Mode
// 检测诡异模式，也就是IE6没有doctype时的模式
boxModel: ( document.compatMode === "CSS1Compat" ),
// Will be defined later
submitBubbles: true,
changeBubbles: true,
focusinBubbles: false,
deleteExpando: true,
noCloneEvent: true,
inlineBlockNeedsLayout: false,
shrinkWrapBlocks: false,
reliableMarginRight: true,
boxSizingReliable: true,
pixelPosition: false
};
// Make sure checked status is properly cloned
// IE6789,checked不能被拷贝
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)
// chrome23已修复
select.disabled = true;
support.optDisabled = !opt.disabled;
// Test to see if it's possible to delete an expando from an element
// Fails in Internet Explorer
// IE678不能delete节点上的属性
try {
delete div.test;
} catch( e ) {
support.deleteExpando = false;
}
//IE会拷贝事件
if ( !div.addEventListener && div.attachEvent && div.fireEvent ) {
div.attachEvent( "onclick", clickFn = function() {
// Cloning a node shouldn't copy over any
// bound event handlers (IE does this)
support.noCloneEvent = false;
});
div.cloneNode( true ).fireEvent("onclick");
div.detachEvent( "onclick", clickFn );
}
// Check if a radio maintains its value
// after being appended to the DOM
// IE下，input被更换类型后，无法保持前一个类型所设的值，蛋疼
input = document.createElement("input");
input.value = "t";
input.setAttribute( "type", "radio" );
support.radioValue = input.value === "t";
input.setAttribute( "checked", "checked" );
// #11217 - WebKit loses check when the name is after the checked attribute
// chrome23已修复
input.setAttribute( "name", "t" );
div.appendChild( input );
fragment = document.createDocumentFragment();
fragment.appendChild( div.lastChild );
// WebKit doesn't clone checked state correctly in fragments
// chrome23已修复
support.checkClone = fragment.cloneNode( true ).cloneNode( true ).lastChild.checked;
// Check if a disconnected checkbox will retain its checked
// value of true after appended to the DOM (IE6/7)
support.appendChecked = input.checked;
fragment.removeChild( input );
fragment.appendChild( div );
// Technique from Juriy Zaytsev
// http://perfectionkills.com/detecting-event-support-without-browser-sniffing/
// We only care about the case where non-standard event systems
// are used, namely in IE. Short-circuiting here helps us to
// avoid an eval call (in setAttribute) which can cause CSP
// to go haywire. See: https://developer.mozilla.org/en/Security/CSP
// 检测事件类型，如果上面的英文文章看不懂，推荐看这篇：http://www.cnblogs.com/GrayZhang/archive/2010/10/29/feature-detection-event.html
if ( div.attachEvent ) {
for ( i in {
submit: true,
change: true,
focusin: true
}) {
eventName = "on" + i;
isSupported = ( eventName in div );
if ( !isSupported ) {
div.setAttribute( eventName, "return;" );
isSupported = ( typeof div[ eventName ] === "function" );
}
support[ i + "Bubbles" ] = isSupported;
}
}
// Run tests that need a body at doc ready
jQuery(function() {
var container, div, tds, marginDiv,
divReset = "padding:0;margin:0;border:0;display:block;overflow:hidden;",
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 = "visibility:hidden;border:0;width:0;height:0;position:static;top:0;margin-top:1px";
body.insertBefore( container, body.firstChild );
// Construct the test element
div = document.createElement("div");
container.appendChild( div );
// Check if table cells still have offsetWidth/Height when they are set
// to display:none and there are still other visible table cells in a
// table row; if so, offsetWidth/Height are not reliable for use when
// determining if an element has been hidden directly using
// display:none (it is still safe to use offsets if a parent element is
// hidden; don safety goggles and see bug #4512 for more information).
// (only IE 8 fails this test)
// 把上面英文翻译了就知道是什么意思了
div.innerHTML = "<table><tr><td></td><td>t</td></tr></table>";
tds = div.getElementsByTagName("td");
tds[ 0 ].style.cssText = "padding:0;margin:0;border:0;display:none";
isSupported = ( tds[ 0 ].offsetHeight === 0 );
tds[ 0 ].style.display = "";
tds[ 1 ].style.display = "none";
// Check if empty table cells still have offsetWidth/Height
// (IE <= 8 fail this test)
support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 );
// Check box-sizing and margin behavior
div.innerHTML = "";
div.style.cssText = "box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;";
//检测是否支持box-sizing
support.boxSizing = ( div.offsetWidth === 4 );
support.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== 1 );
// NOTE: To any future maintainer, we've window.getComputedStyle
// because jsdom on node.js will break without it.
if ( window.getComputedStyle ) {
support.pixelPosition = ( window.getComputedStyle( div, null ) || {} ).top !== "1%";
support.boxSizingReliable = ( window.getComputedStyle( div, null ) || { width: "4px" } ).width === "4px";
// Check if div with explicit width and no margin-right incorrectly
// gets computed margin-right based on width of container. For more
// info see bug #3333
// Fails in WebKit before Feb 2011 nightlies
// WebKit Bug 13343 - getComputedStyle returns wrong value for margin-right
marginDiv = document.createElement("div");
marginDiv.style.cssText = div.style.cssText = divReset;
marginDiv.style.marginRight = marginDiv.style.width = "0";
div.style.width = "1px";
div.appendChild( marginDiv );
support.reliableMarginRight =
!parseFloat( ( window.getComputedStyle( marginDiv, null ) || {} ).marginRight );
}
if ( typeof div.style.zoom !== "undefined" ) {
// Check if natively block-level elements act like inline-block
// elements when setting their display to 'inline' and giving
// them layout
// (IE < 8 does this)
// IE67,block的元素设置了inline+zoom后，特性会表现的跟inline-block一样，这里是通过offsetWidth来计算
// inline元素是不算width的，所以输出offsetWidth会是2(因为padding:1px)，而IE67下表现为inline-block，所以输出为3
div.innerHTML = "";
div.style.cssText = divReset + "width:1px;padding:1px;display:inline;zoom:1";
support.inlineBlockNeedsLayout = ( div.offsetWidth === 3 );
// Check if elements with layout shrink-wrap their children
// (IE 6 does this)
div.style.display = "block";
div.style.overflow = "visible";
div.innerHTML = "<div></div>";
div.firstChild.style.width = "5px";
support.shrinkWrapBlocks = ( div.offsetWidth !== 3 );
container.style.zoom = 1;
}
// Null elements to avoid leaks in IE
body.removeChild( container );
container = div = tds = marginDiv = null;
});
// Null elements to avoid leaks in IE
fragment.removeChild( div );
all = a = select = opt = input = fragment = div = null;
return support;
})();
jQuery版本 1.8.3
