jQuery 源码分析笔记(5) jQuery.support

jQuery创建了几个元素用来判断浏览器特性。如下：

var div = document.createElement(“div”);
div.setAttribute(“className”, “t”);
div.innerHTML = ” <LINK><TABLE><TBODY></TBODY></TABLE><A style=”FLOAT: left; TOP: 1px; opacity: .55″ href=”//www.jb51.net/a”>a</A><INPUT type=checkbox>”;
all = div.getElementsByTagName(“*”);
a = div.getElementsByTagName(“a”)[0];
var select = document.createElement(“select”);
opt = select.appendChild(document.createElement(“option”));
input = div.getElementsByTagName(“input”)[0];

其中div元素相当有内涵。包括了空白开头，空Table元素，inline style，opacity等等。除了一行行看代码和注释也没啥其他笔记了：

support = {
// IE会把开头的空格去掉，所以nodeType不是3（文本）
leadingWhitespace: (div.firstChild.nodeType === 3),
// IE会自动插入tbody，所以length不同
tbody: !div.getElementsByName(“tbody”).length,
// IE不允许用这种方式插入link元素
htmlSerialize: !!div.getElementsByTagName(“link”).length,
// 如果正常获得style的话，这个正则表达式应该会正常通过
style: /top/.test(a.getAttribute(“style”)),
// href属性应该是原始指定的字符串，IE会修改为http开头的绝对URL
hrefNormalized: (a.getAttribute(“href”) === “/a”),
// 能得到opacity属性。这里使用了正则表达式，是为了绕过WebKit[5145号bug](http://dev.jquery.com/ticket/5145)
// 但是这应该是一个早期版本的问题。起码在Chrome 13中，不用正则也是对的。
opacity: /^0.55$/.test(a.style.opacity),
// IE使用styleFloat
cssFloat: !!a.style.cssFloat,
// div中的checkbox没有指定值，看默认值是否是on。WebKit是””。所以我的结果是false
checkOn: (input.value === “on”),
// 这个select只有一个option元素，所以渲染时，这个option是默认选中的。此时selected应该是true。
optSelected: opt.selected,
submitBubbles: true,
changeBubbles: true,
focusinBubbles: false,
deleteExpando: true,
noCloneEvent: true,
inlineBlockNeedsLayout: false,
shrinkWrapBlocks: false,
reliableMarginRight: true
};

下面的大部分都是按部就班的测试。其中BoxModel的测试比较有趣：

div.innerHTML = “”; // 从头来
div.style.width = div.style.paddingLeft = “1px”;
body = document.createElement(“body”);
body.style.width = 0;
body.style.height = 0;
body.style.border = 0;
body.style.margin = 0; // 全部设置为0
body.appendChild(div);
document.documentElement.insertBefore(body, document.documentElement.firstChild);