细说浏览器特性检测(1)-jQuery1.4添加部分

function addEvent(element, type, handler) { if (element.attachEvent) { //IE8及以下浏览器 element.attachEvent('on' + type, handler); } else { //W3C标准浏览器 element.addEventListener(type, handler, false); } };

函数可以通过检测attachEvent函数是否存在，以决定使用attachEvent或者addEventListener，这也是最简单的一种特性检测，因而通常在需要时才进行实时的检测。另一种特性检测由于检测的过程较为麻烦，因此会预先完成检测，将检测的结果（通常是Boolean类型）保存在某个变量中。

本文的主要目标是分析、说明在jQuery1.4中浏览器特性检测新增的内容，同时加深浏览器兼容性方面几个细节的记忆。

jQuery1.4主要增加了以下几个浏览器特性标识，本文针对它们一一进行分析：

checkOn 1.4版本引入，决定没有设置value值的checkbox是否有默认的value值”on”。 optSelected 1.4.3版本引入，决定select元素的第一个option元素是否会默认被选中。 optDisabled 1.4.3版本引入，决定当select元素设置为disabled后，其所有option子元素是否也会被设置为disabled。 checkClone 1.4.1版本引入，决定对DocumentFragment使用cloneNode函数时是否会将radio和checkbox的checked属性保留。 inlineBlockNeedsLayout 1.4.3版本引入，决定在IE下一个block元素拥有hasLayout属性并有display: inline;时，是否会按inline-block显示。 shrinkWrapBlocks 1.4.3版本引入，决定在IE下一个元素拥有hasLayout属性和固定的width/height时，是否不会被子元素撑大。 reliableHiddenOffsets 1.4.3版本引入，决定一个td或th元素设置为display: none;时，是否还有offsetHeight。

checkOn

使用以下代码可以检测该特性：

<input id="checkOn" type="checkbox" /> <script type="text/javascript"> alert(document.getElementById('checkOn').value); </script>

以下为各浏览器中运行结果：

经测试，除Chrome外，所有浏览器都会给没有value的checkbox一个默认的value值”on”。

该特性被jQuery用来获取checkbox和radio的值，兼容的判断语句如下：

//不支持checkOn的浏览器都不存在property/attribute混用问题，因此需要明确使用getAttribute return support.checkOn ? element.value : (element.getAttribute('value') === null ? 'on' : element.value);