浏览器功能测试模块是其他模块的基础。
一般解决浏览器不兼容问题有两种方式:浏览器嗅觉和浏览器功能测试。
jQuery.support 有34个测试项,包括DOM测试(15个),样式测试(3个),事件测试(4个),Ajax测试(2个),盒模型测试(10个)
查看测试项的结果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="release"></div>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function(){
var result = '', counter = 0;
for (var n in $.support){
result += '<li>' + n +":"+$.support[n] + "</li>";
}
$("#release").html('<ol>'+result + '<ol>');
});
</script>
</body>
</html>
* leadingWhitespace:true
* tbody:true
* htmlSerialize:true
* style:true
* hrefNormalized:true
* opacity:true
* cssFloat:true
* checkOn:true
* optSelected:true
* getSetAttribute:true
* enctype:true
* html5Clone:true
* submitBubbles:true
* changeBubbles:true
* focusinBubbles:false
* deleteExpando:true
* noCloneEvent:true
* inlineBlockNeedsLayout:false
* shrinkWrapBlocks:false
* reliableMarginRight:true
* noCloneChecked:true
* optDisabled:true
* radioValue:true
* checkClone:true
* appendChecked:true
* ajax:true
* cors:true
* reliableHiddenOffsets:true
* boxModel:true
* doesNotAddBorder:true
* doesAddBorderForTableAndCells:true
* fixedPosition:true
* subtractsBorderForOverflowNotVisible:false
* doesNotIncludeMarginInBodyOffset:true
总体结构
jQuery.support = (function() {
var support,
support = {
// IE strips leading whitespace when .innerHTML is used
leadingWhitespace: ( div.firstChild.nodeType === 3 ),
// Make sure that tbody elements aren't automatically inserted
// IE will insert them into empty tables
tbody: !div.getElementsByTagName("tbody").length,
// Make sure that link elements get serialized correctly by innerHTML
// This requires a wrapper element in IE
htmlSerialize: !!div.getElementsByTagName("link").length,
// Get the style information from getAttribute
// (IE uses .cssText instead)
style: /top/.test( a.getAttribute("style") ),
// Make sure that URLs aren't manipulated
// (IE normalizes it by default)
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
opacity: /^0.55/.test( a.style.opacity ),
// Verify style float existence
// (IE uses styleFloat instead of 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)
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)
optSelected: opt.selected,
// Test setAttribute on camelCase class. If it works, we need attrFixes when doing get/setAttribute (ie6/7)
getSetAttribute: div.className !== "t",
// Tests for enctype support on a form(#6743)
enctype: !!document.createElement("form").enctype,
// Makes sure cloning an html5 element does not cause problems
// Where outerHTML is undefined, this still works
html5Clone: document.createElement("nav").cloneNode( true ).outerHTML !== "<:nav></:nav>",
// Will be defined later
submitBubbles: true,
changeBubbles: true,
focusinBubbles: false,
deleteExpando: true,
noCloneEvent: true,
inlineBlockNeedsLayout: false,
shrinkWrapBlocks: false,
reliableMarginRight: true
};
support.noCloneChecked = input.cloneNode( true ).checked;
support.optDisabled = !opt.disabled;
support.deleteExpando = false;
....
jQuery(function() {
support.reliableHiddenOffsets = isSupported && ( tds[ 0 ].offsetHeight === 0 );
...
jQuery.extend( support, offsetSupport );
});
(function(){
jQuery.extend(jQuery.support, {
ajax: !!xhr,
cors: !!xhr && ("withCredentials" in xhr)
});
});
return support;
})();