时间:2021-05-26
其中jQuery.browser已经提供了根据UserAgent检测的浏览器信息。而jQuery.support 使用特性检测来检查浏览器的功能以及Bug。
和文档一样,首先说明一下,这个模块是很底层的代码,基本不需要在日常开发中使用,但是插件的开发者更需要。因为插件需要兼容各个浏览器。首先看一下 support模块提供了哪些浏览器特性的检测,以下结果是在Chrome 13 Dev下看到的结果。根据浏览器的不同,这里的成员可能会有变化。(PS:再次吐槽IE,大部分属性都是IE比较特别)
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="https:///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);
support.boxModel = div.offsetWidth === 2;
// 这个时候div嵌套在body下。而body长宽高,边框和margin都是0。所以div的偏移应该就是它自己的paddingLeft+width。如果不对,就说明盒模式不对。
然后值得注意的是事件的冒泡,注释中提到的技术参考文章链接已经失效。请自己搜索"Detecting event support without browser sniffing"
复制代码 代码如下:
// attachEvent是IE的,所以这里实际上只检查了IE,其他浏览器都是前面设置的默认值。
if(div.attachEvent) {
for(i = {
submit: 1,
change: 1
focusin: 1
}) {
eventName = "on" + i;
isSupported = (eventName in div);
if(!isSupported) {
div.setAttribute(eventName, "return;");
isSupported = (typeof div[eventName] === "function");
}
support[i + "Bubbles"] = isSupported;
}
}
PS: 浏览器检测是一个很纠结,很细节的任务。这个笔记慢慢完善中……
18:30补充:经过IE9的测试,以上大部分IE相关问题都已经不存在。以下是IE9+Win7的测试结果:
复制代码 代码如下:
$.support
{
boxModel: true,
changeBubbles: true,
checkClone: true,
checkOn: true,
cssFloat: true,
deleteExpando: true,
hrefNormalized: true,
htmlSerialize: true,
leadingWhitespace: true,
noCloneEvent: false,
opacity: true,
optSelected: false,
parentNode: true,
scriptEval: true,
style: true,
submitBubbles: true,
tbody: true
}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
JQuery和HTML5Canvas两种方法实现弹幕效果:方法一,JQuery实现。源码:JQuery弹幕.ctxt{background:#666;width
本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法。分享给大家供大家参考。具体分析如下:先上例子,下面代码的作用是:对
在上篇文章给大家介绍了jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构,本篇继续给大家介绍jquery1.9.1源码分析系列相关知识,具体内容请
本文较为详细的分析了jQuery源码解读之addClass()方法。分享给大家供大家参考。具体分析如下:给jQuery原型对象扩展addClass功能,jQue
本文较为详细的分析了jQuery源码解读之hasClass()方法。分享给大家供大家参考。具体分析如下:复制代码代码如下:jQuery.fn.extend({h