现在的位置: 首页 > 综合 > 正文

jQuery.support 的实现方式

2012年06月27日 ⁄ 综合 ⁄ 共 2135字 ⁄ 字号 评论关闭

jQuery.support 用于检查浏览器对各项特性的支持。检查项多达 27 个。

首先,让我们用一段代码测试一下 support 中包含的检查项:

<script src='jquery.js'></script>
<script>
support = $.support;
for (key in support) {
    document.write('support.' + key + ' = ' + support[key] + '<br />');
}
</script>
IE 下的输出结果为:

support.leadingWhitespace = false
support.tbody = false
support.htmlSerialize = false
support.style = false
support.hrefNormalized = false
support.opacity = false
support.cssFloat = false
support.checkOn = true
support.optSelected = false
support.getSetAttribute = false
support.submitBubbles = false
support.changeBubbles = false
support.focusinBubbles = true
support.deleteExpando = false
support.noCloneEvent = false
support.inlineBlockNeedsLayout = false
support.shrinkWrapBlocks = true
support.reliableMarginRight = true
support.noCloneChecked = false
support.optDisabled = true
support.radioValue = false
support.checkClone = undefined
support.appendChecked = false欠款
support.boxModel = false
support.reliableHiddenOffsets = false
support.ajax = true
support.cors = false
FireFox 中的显示结果为:

support.leadingWhitespace = true
support.tbody = true
support.htmlSerialize = true
support.style = true
support.hrefNormalized = true
support.opacity = true
support.cssFloat = true
support.checkOn = true
support.optSelected = true
support.getSetAttribute = true
support.submitBubbles = true
support.changeBubbles = true
support.focusinBubbles = false
support.deleteExpando = true
support.noCloneEvent = true
support.inlineBlockNeedsLayout = false
support.shrinkWrapBlocks = false
support.reliableMarginRight = true
support.noCloneChecked = true
support.optDisabled = true
support.radioValue = true
support.checkClone = undefined
support.appendChecked = true
support.boxModel = true
support.reliableHiddenOffsets = true
support.ajax = true
support.cors = true
要注意的是,源代码中 checkClone 的检查是有问题的。这将在后面提到。

接下来,我们就对这些检查项进行逐一的分析。

leadingWhitespace

检查用 innerHTML 赋值时,是否会保留前面的空白符。

IE中为 false , Firefox 中为 true 。

实现方式如下:

$ = function(){    女装品牌大全
    var div = document.createElement( "div" );
    div.innerHTML = "   <link/><table></table><a href='/a' style='top:1px;float:left;opacity:.55;'>a</a><input type='checkbox'/>";
   
    var support = {
        leadingWhitespace: (div.firstChild.nodeType === 3)    
    }
   
    return { support : support }
}();

这段代码中,先创建了一个 div ,之后就用 innerHTML 为 div 赋值,

然后检查 div 的第一个子元素的 nodeType 是否为 3 (表示文本),

是的话则空白字符被保留,否则未被保留。

抱歉!评论已关闭.