详解jQ的support模块

2022-10-02 14:12:39

　　jQuery的属性support是判断浏览器之间是否兼容的模块，该模块包含了leadingWhitespace，tbody，htmlSerialize，style，hrefNormalized，opacity，cssFloat，checkOn，optSelected，getSetAttribute....等兼容问题，所有的这些属性也只是jQuery内部会用到，因为jQ内部一些模块需要对这些东西进行判断，就直接写成了一个support模块，可以供我们，但是我们写代码的时基本都没用到啊，今天再把这些玩意儿过一下，测试的浏览器为FF，CHROME，IE11， IE6-IE10是用IE11模拟的：

　　$.support.leadingWhitespace　　———— IE中自动去空格

　　$.support.checkOn ----chrome中radio默认值为checkOn

　　$.support.tbody ----IE通过innerHTML自动生成tbody

　　$.support.htmlSerialize -----　　标准浏览器会自动生成link标签

　　$.support.style　　----IE67中getAttriute会获取各种类型的数据....

　　$.support.opacity　　---- IE678不支持opacity

　　$.support.cssFloat　　 ----cssFloat标准浏览器支持的，IE要用styleFloat

　　$.support.optSelected　　-----浏览器并不会设置默认的option

　　$.support.getSetAttribute　　----getSetAttribute在浏览器之间的兼容

　　$.support.html5Clone　　　---- 复制标签的问题

　　$.support.boxModel　　---- 是否支持盒模型

　　$.support.submitBubbles　　----冒泡

　　$.support.changeBubbles　　----冒泡

　　$.support.focusinBubbles　　----冒泡

　　$.support.deleteExpando 　　-----IE的DOM元素是COM组件，不能delete组件的属性

　　$.support.noCloneEvent　　 ----复制元素的事件

　　$.support.reliableHiddenOffsets 　　----table元素中tr内td的问题；

　　$.support.boxSizing　　---是否支持boxSizing

　　$.support.doesNotIncludeMarginInBodyOffset　　----body不会包含margin的问题（算不算问题呢？）　　

　　$.support.pixelPosition 　　----获取样式返回的是否是像素值

　　$.support.boxSizingReliable　　----boxSizing是否可用

　　$.support.reliableMarginRight ----chrome中margin的bug

　　$.support.inlineBlockNeedsLayout ----IE中layout的问题

　　$.support.shrinkWrapBlocks ----IE6中自动扩大宽高的问题

　　$.support.leadingWhitespace属性

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

        <script type="text/javascript">

            window.l = (function() {

                var el = document.createElement("div"), index = ;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;";

                return function(message) {

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

        </script>

        IE678中自动过滤了元素前后的空格,

        而且空格不包含在childNodes里面,

        <script type="text/javascript">

            var el = document.createElement("div");

            el.innerHTML = "  <div id=\"null\"> </div> ";

            l(el.childNodes.length);

        </script>

    </body>

</html>

　　标准浏览器中是遵守用户输入， el应该包含三个节点：["", "<div id=\"null\"> </div>", ""]节点;

　　IE678中却只有1个节点，这个节点就是那个DIV:

　　$.support.checkOn属性

　　标准浏览器中的checkbox默认value为"on",IE5678也都是"on", 但是在某些webkit中checkbox的值默认为""字符串，现在的浏览器版本都很高了，基本没有这个问题, 如果你有chrome低版本的话可以用下面这个demo测试看看有没有问题：

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

        <script type="text/javascript">

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

        </script>

        <input id="ck" type='checkbox'/>

        <script type="text/javascript">

            var el = document.getElementById("ck");

            //标准浏览器有change事件;

            el.onchange = function() {

                l(el.value);

                l(ck.checked)

            }

            //IE中的万能事件propertychange;

            el.onpropertychange = function() {

                l(el.value);

                l(ck.checked)

            }

            l(el.value);

        </script>

    </body>

</html>

　　张鑫旭： checkbox复选框的一些深入研究与理解；

　　$.support.tbody属性

　　在IE6和IE7中新建table会自动创建tbody元素;

　　如果我们为创建的table添加tr或者添加td，那么所有的浏览器都会自动创建tbody;

　　如果是动态创建的table和tr，把tr添加到tbody中，那么tbod根本不会出来，所有浏览器都遵循开发者的操作(浏览器的心思真的不好猜测啊)

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

        <script type="text/javascript">

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

        </script>

        <div id="tb"></div>

        <div id="tb2"></div>

        <div id="tb3"></div>

        <script type="text/javascript">

            var el = document.getElementById("tb");

            el.innerHTML = "<table></table>"

            //IE67中会输出1， 标准浏览器遵循用户输入，不会是自动生成tbody，所以tobdy的length是0

            l(el.getElementsByTagName("tbody").length);

        </script>

        <script>

            var el = document.getElementById("tb2");

            el.innerHTML="<table><tr>111</tr></table>";

            //无论是标准还是IE67都会自动生成tbody标签

            l(el.getElementsByTagName("tbody").length);

        </script>

        <script>

            var el = document.getElementById("tb3");

            el.innerHTML="<table><td>111</td></table>";

            //无论是标准还是IE67都会自动生成tbody标签

            l(el.getElementsByTagName("tbody").length);

        </script>

        <script>

            var tb = document.createElement("table");

            var tr = document.createElement("tr");

            tr.innerHTML = "trtrtr";

            tb.appendChild(tr);

            document.getElementsByTagName("body")[0].appendChild(tb);

        </script>

    </body>

</html>

　　代码执行完毕以后你会看到，当table里没有元素的时候， chrome没有自动产生tbody，如果你不按照正常的写法写table，而是这样

"<table><tr>111</tr></table>";

　　产生的HTML变成这样"111<table><tr></tr></table>"，在jQ中你这样写$("<table><tr>111</tr></table>")，生成的HTML也是这样的["111","<table><tr></tr></table>"]，所以再三强调写html标签的嵌套要符合标准....

　　在IE中又是例外一回事，通过innerHTML的方式会自动添加tbody，而且你标签嵌套错了他也不管你，通过appendChild的方式跟其他浏览器一样不会主动生成tbody；

$.support.htmlSerialize

　　IE678浏览器中不能够通过innerHTML动态生成link标签，要通过新建标签的形式创建：

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

        <script type="text/javascript">

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

        </script>

        <div class="bounce animated infinite">

            bounce

        </div>

        <div id="link"></div>

        <script type="text/javascript">

            var eLink = document.getElementById("link");

            eLink.innerHTML = '<link href="http://cdn.bootcss.com/animate.css/3.3.0/animate.css" rel="stylesheet">';

        </script>

    </body>

</html>

　　虽然link标签多数都可以通过innerHTML生成，但是我们要通过innerHTML生成script标签是不可行的：

//这样的写法在浏览器中根本不生效；

document.body.innerHTML = "<script src='1.js'></script>"

//但是我们可以通过jQuery的方式生成并插入到DOM数种

$("<script src='1.js'></script>").appendTo(document.body)

　　$.support.style

　　标准浏览器通过getAttribute获取都应该是字符串的，IE67你getAttriute是各种奇葩，你获取的style是一整个样式对象, IE67要获取行内样式要用 eDiv.style.cssText 才行哦

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

        <script type="text/javascript">

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

        </script>

        <div id="div" style="background:#f00;" onclick="fn">

            divide

        </div>

        <div id="link"></div>

        <script type="text/javascript">

            var fn = function() {

                alert(1);

            };

            var eDiv = document.getElementById("div");

            //标准浏览器要么返回的是background:#f00，要么返回background: rgb(255, 0, 0);

            //IE6,IE7返回了所有的style属性

            l(eDiv.getAttribute("style"));

            l(typeof eDiv.getAttribute("onclick"));

        </script>

    </body>

</html>

　　IE67中获取style返回的是下面图片, 这个应该是eDiv的元素属性才对，意思就是说IE67中DOM属性和节点属性傻傻分不清楚，比如onclick返回的是function....(等等，我想静静....):

　　获取一个html页面的相对路径可以通过动态创建一个锚链接，然后获取这个锚连接的href就可以获取到绝对的路径，浏览器获取script标签的src方式要根据浏览器的特性，一般来说是这样的：

　　document.querySelector ？ node.src : node.getAttribute("src",4);

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

        <script type="text/javascript">

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

        </script>

        <a id="a" href="./xx.html"></a>

        <script id="js" src="xx.js"></script>

        <div id="link"></div>

        <script type="text/javascript">

            var fn = function() {

                alert(1);

            };

            //反正你通过属性的方式获取a锚连接的href都是绝对路径，getAttribute都是开发者输入的字符串，

            var eA = document.getElementById("a");

            l(eA.getAttribute("href",3));

            l(eA.href);

            var js = document.getElementById("js");

            //IE8以后和标准浏览器获取绝对的src直接通过src，IE67通过src获取绝对路径, 这个技巧在获取script标签的src时候会用到;

            l(js.getAttribute("src",4));

            l(js.src);

        </script>

    </body>

</html>

　　$.support.opacity

　　opacity这个玩意儿到了IE9才支持， IE678只能用滤镜:filter:opacity(alpha=10);

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

        <script type="text/javascript">

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

        </script>

        <div style="position: absolute;">

            1111

        </div>

        <div style="opacity:0.2;float:left">

            对对对

        </div>

        <script type="text/javascript">

            l("haha");

        </script>

    </body>

</html>

　　$.support.cssFloat

　　这个玩意儿标准浏览器是cssFloat， IE中要用styleFloat，比如：

element.style.cssFloat;

element.style.styleFloat;

　　$.support.optSelected

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

        <script type="text/javascript">

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

        </script>

        <script type="text/javascript">

        select = document.createElement("select");

        var opt;

        //创建optino元素的方法1：

        //opt = document.createElement("option");

        //opt.setAttribute("value","value");

        //opt.setAttribute("name","name");

        //(opt.textContent  = "text")|| (opt.innerText = "text");

        //创建optino元素的方法2：

        //这样也可以;

        //opt = document.createElement("option");

        //opt.value = "value";

        //opt.text = "text";

        //这样也行;

        //创建optino元素的方法3：

        opt = new Option("text","value");

        select.appendChild( opt );

        document.getElementsByTagName("body")[0].appendChild(select);

        l( opt.selected );

        </script>

    </body>

</html>

　　$.support.getSetAttribute

　　IE67可以用setAttribute设置className的class，出了IE67以外的浏览器可以用setAttribute(class,"")设置class；

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

        <script type="text/javascript">

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

        </script>

        <script type="text/javascript">

        div = document.createElement("div");

        div.setAttribute( "className", "t" );

        l(div.className !== "t");

        /*

        div.setAttribute( "class", "t" );

        l(div.className == "t");

        */

        </script>

    </body>

</html>

　　$.support.html5Clone　

　　IE6新建一些无法识别的标签时候会出现问题，比如

        <script type="text/javascript">

        l(document.createElement("nav").cloneNode( true ).outerHTML);

        </script>

　　在IE6中执行会变成这样：，而且这个特性在IE11模拟IE5，IE6一点效果都没有；

　　小技巧为了让IE6支持HTML5的标签可以自己创建html5标签，而且你可以给这些标签自定义样式：

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

        <script>

        (function(){

            var element=['header','footer','article','aside','section','nav','menu','hgroup','details','dialog','figure','figcaption'],

                len=element.length;

            while(len--){

                document.createElement(element[len])

            };

         })();

         </script>

        <style>

        nav{

            width:100px;

            height:100px;

            background:#f00;

            display:block;

        }

        </style>

        <nav>nav</nav>

        <footer>footer</footer>

        <script type="text/javascript">

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

        </script>

        <script type="text/javascript">

        l(document.createElement("nav").cloneNode( true ).outerHTML);

        </script>

    </body>

</html>

　　$.support.boxModel

　　这个玩意儿 document.compatMode === "'BackCompat'" 是为了让我们知道当前的文档模式是否是标准的文档模式，还是有用的;

　　$.support.submitBubbles, $.support.changeBubbles, $.support.focusinBubbles

　　除了火狐以外所有的浏览器都支持focusin和focusout，这两个事件和focus和blur的区别是， focus和blur并不会发生冒泡，focusin和focusout会冒泡，我们可以通过focusin和focusout实现事件代理，例子：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <meta charset="utf-8" />

  <title>focus(in|out) not implemented</title>

  <script type="text/javascript">//<![CDATA[

   document.addEventListener('focusin',function(e){if(e.target.tagName=='INPUT')e.target.style.backgroundColor='green'},0)

   document.addEventListener('focusout',function(e){if(e.target.tagName=='INPUT')e.target.style.backgroundColor='white'},0)

  //]]></script>

 </head>

 <body>

  <div><input type="text" style="background:red" /></div>

  <div>Please click on input above to change element color.</div>

  <div><a href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#event-type-focusIn">http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#event-type-focusIn</a></div>

  <div style="color:red">Firefox: not implemented yet!</div>

  <div style="color:green">IE 9: focused in - green</div>

  <div style="color:green">Opera 11.5: focused in - green</div>

  <div style="color:green">Chrome 14: focused in - green</div>

  <div style="color:green">Safari 5.1: focused in - green</div>

  <div>Konqueror 4.7: only DOMFocus</div>

 </body>

</html>

　　虽然就只有firefox不支持focusin，但是support.focusinBubbles在ff，chrome，以及IE11中的值都为false，也就是说jQuery把他们都统一起来，通过focus和blur的的自定义代理模拟focusin和focusout；

　　因为ie6-ie10中都支持attachEvent方法，所以focusinBubble都为true， IE11不支持attachEvent，所以focusinBubble为false了;

　　submitBubbles和changeBubbles在IE8以下的浏览器中都是false;
　　结果的确有点乱，在后面的事件系统中不支持事件冒泡是要做特殊处理的，下面这个代码从jQ中切出来(￣_,￣ )的代码；

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

        <script>

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;word-break:break-all";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

　　　　　　　　//写了一个小小的JSON方法，哈哈o(^▽^)o,666666666666666

            if(!window.JSON) {

                window.JSON = {

                    stringify : function(json) {

                        var str = "{";

                        for(var p in json) {

                            if( typeof json[p] === "object") {

                                str += (p+":"+ window.JSON.stringify(json[p]) +",");

                            }else {

                                str += (p+":"+String(json[p])+",")

                            };

                        };

                        return str.slice(0,-1)+"}";

                    }

                }

            };

            //testing;

            l( JSON.stringify({1:{2:3,4:{5:"six"}}}) );

        </script>

        <script type="text/javascript">

        var support = {

            submitBubbles: true,

            changeBubbles: true,

            focusinBubbles: false

        };

        var div = document.createElement("div");

        if ( div.attachEvent ) {

            for ( i in {

                submit: true,

                change: true,

                focusin: true

            }) {

                eventName = "on" + i;

                isSupported = ( eventName in div );

                if ( !isSupported ) {

                    div.setAttribute( eventName, "return;" );

                    isSupported = ( typeof div[ eventName ] === "function" );

                };

                support[ i + "Bubbles" ] = isSupported;

            };

        };

        l( JSON.stringify(support) );

        </script>

    </body>

</html>

　　$.support.deleteExpando

　　因为IE6和IE7下的DOM元素是COM组件，delete删除COM组件的属性会报错，所以有了deleteExpando这个玩意儿，DEMO

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

        <div id="id"></div>

        <script>

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;word-break:break-all";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

            var id = document.getElementById("id");

            id.test = "1111";

            try {

                delete id.test;

            } catch( e ) {

                l( "delete错误" );

            };

        </script>

    </body>

</html>

　　$.support.noCloneEvent

　　又是IE，复制元素会把事件复制过去，support.noCloneEvent就是检测IE是否会复制元素的事件的属性，因为jQuery中元素的事件是和数据缓存系统($.data,$.cahce)紧密耦合的，要复制一个元素的事件直接复制元素的expanDo就可以，事件并不是直接绑定到元素上的, 相关的JS代码:

        if ( !div.addEventListener && div.attachEvent && div.fireEvent ) {

            div.attachEvent( "onclick", clickFn = function() {

                // Cloning a node shouldn't copy over any

                // bound event handlers (IE does this)

                support.noCloneEvent = false;

            });

            div.cloneNode( true ).fireEvent("onclick");

            div.detachEvent( "onclick", clickFn );

        }

　　 $.support.reliableHiddenOffsets

　　reliableHiddenOffsets这个是很少见的一个问题，在IE7和IE6中出现bug，如果一个table中有一个有内容的td的display为none，这个table其他的td没有内容但是是显示着的话，那么这些td的高度为1，这个1不知道是从哪里来的，很怪的一个bug（然道是空格？），不管了，反正用的少

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

    </body>

        <script>

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;word-break:break-all";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

        </script>

        <script type="text/javascript">

            var container = document.createElement("div");

            var div = document.createElement("div");

            var isSupported;

            var body = document.getElementsByTagName("body")[0];

            body.insertBefore( container, body.firstChild );

            container.appendChild( div );

            div.innerHTML = "<table><tr><td></td><td>t</td></tr></table>";

            tds = div.getElementsByTagName("td");

            tds[0].style.cssText = "padding:0;margin:0;border:0;display:none";

            isSupported = (tds[0].offsetHeight === 0);

            tds[0].style.display = "";

            tds[1].style.display = "none";

            isSupported = isSupported && ( tds[ 0 ].offsetHeight === 0 );

            l( isSupported );

        </script>

</html>

　　$.support.boxSizing，$.support.doesNotIncludeMarginInBodyOffset

　　IE8中是支持box-sizing的，IE6，IE7通过开启怪异模式也是支持boxSizing的；doesNotIncludeMarginInBodyOffset很不常用，一般的offsetLeft或者offsetTop是从边框外开始计算的，也就是包含了margin，但是因为body这个元素的特殊性质，body的offsetTop和offsetLeft并不包含margin，而且body一般有一个默认8px的marign，导致计算位置的时候会产生混乱， so， jQ把他们统一起来了，doesNotIncludeMarginInBodyOffset这个在任何浏览器中都未true，（哎，放心了，我的小心肝都快碎了）；

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

    </body>

        <script>

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;word-break:break-all";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

        </script>

        <script type="text/javascript">

            var div = document.createElement("div");

            var body = document.getElementsByTagName("body")[0];

            var support = {};

            body.insertBefore( div, body.firstChild );

            div.innerHTML = "";

            div.style.cssText = "box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:1px;border:1px;display:block;width:4px;margin-top:1%;position:absolute;top:1%;";

            support.boxSizing = ( div.offsetWidth === 4 );

            support.doesNotIncludeMarginInBodyOffset = ( body.offsetTop !== 1 );

            l( support.boxSizing );

            l( support.doesNotIncludeMarginInBodyOffset );

        </script>

</html>

　　$.support.pixelPosition ,$.support.boxSizingReliable,$.support.reliableMarginRight

　　piexelPosition是指当你给一个元素设置百分比的宽度或者高度的时候，通过getComputedStye标准浏览器都要返回像素的宽高，有些浏览器返回的还是百分比的宽高，这个bug应该是低版本的chrome或者ff才有的bug， IE(<=IE10)通过currentStyle获取的宽高返回的还是百分比的宽高, 要获取像素宽高需要hack.....,我想静静....;

　　boxSizingReliable这个也是再次验证盒模型是否支持，不知道有什么用;

　　reliableMarginRight是指低版本chrome获取不到marginRight的问题，jQuery真是操碎了心， bugs链接；

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

    </body>

        <script>

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;word-break:break-all";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

        </script>

        <script type="text/javascript">

            var div = document.createElement("div");

            var body = document.getElementsByTagName("body")[0];

            var support = {};

            body.insertBefore( div, body.firstChild );

            div.innerHTML = "";

            div.style.cssText = "width:50%";

            if(window.getComputedStyle)

                l( window.getComputedStyle(div,null)["width"] );

            if(div.currentStyle) {

                l( div.currentStyle["width"] );

            }

        </script>

</html>

　　$.support.inlineBlockNeedsLayout, $.support.shrinkWrapBlocks

　　在IE67浏览器，如果元素的display样式值为inline-block，并不会生效，要用display：inline；zoom:1;进行模拟，所以inlineBlockNeedsLayout也是对于IE做的特殊处理；

　　shrinkWrapBlocks是因为在IE6中，子元素的宽度超过的父级元素，父元素的宽度也会被撑开，老问题。

<html>

    <head>

        <meta charset="utf-8" />

        <title>兼容</title>

    </head>

    <body>

    </body>

        <script>

            window.l = (function() {

                var el = document.createElement("div"), index = 0;

                el.style.cssText = "padding:10px;position:fixed;top:0;right:0;width:10%;border:1px solid #f00;word-break:break-all";

                return function(message) {

                    message = message.toString();

                    if( message ) {

                        var span = document.createElement("span");

                        span.innerHTML = (++index) + "信息:<br>"+ message+"<br>";

                        el.appendChild( span );

                    };

                    //IE低版本直接通过createElement创建的元素有parentNode;

                    if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {

                        document.body.appendChild(el);

                    };

                    return l;

                };

            })();

        </script>

        <div id="shrinkWrapBlocks" style="width: 1px; zoom: 1;">

            <div style="width: 4px;">

            </div>

        </div> 

        <script type="text/javascript">

            var div = document.getElementById('shrinkWrapBlocks'),

            inner = div.getElementsByTagName('div')[0];

            l(div.offsetWidth);

        </script>

</html>

　　参考这里：

　　　　学习jQuery.support

　　　 focusin和focusout相关

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

　　　 MDN的focusin和focusout

　　　　jQuery support 源码解读

作者： NONO
出处：http://www.cnblogs.com/diligenceday/

QQ：287101329

码农公寓

$.support.leadingWhitespace属性

$.support.checkOn属性

$.support.tbody属性

$.support.htmlSerialize

$.support.style

$.support.opacity

$.support.cssFloat

$.support.optSelected

$.support.getSetAttribute

$.support.html5Clone

$.support.boxModel

$.support.submitBubbles, $.support.changeBubbles, $.support.focusinBubbles

$.support.deleteExpando

$.support.noCloneEvent

$.support.reliableHiddenOffsets

$.support.boxSizing，$.support.doesNotIncludeMarginInBodyOffset

$.support.pixelPosition ,$.support.boxSizingReliable,$.support.reliableMarginRight

$.support.inlineBlockNeedsLayout, $.support.shrinkWrapBlocks

相关文章

　　$.support.leadingWhitespace属性

　　$.support.checkOn属性

　　$.support.tbody属性

　　$.support.style

　　$.support.opacity

　　$.support.cssFloat

　　$.support.optSelected

　　$.support.getSetAttribute

　　$.support.html5Clone　

　　$.support.boxModel

　　$.support.submitBubbles, $.support.changeBubbles, $.support.focusinBubbles

　　$.support.deleteExpando

　　$.support.noCloneEvent

　　 $.support.reliableHiddenOffsets

　　$.support.boxSizing，$.support.doesNotIncludeMarginInBodyOffset

　　$.support.pixelPosition ,$.support.boxSizingReliable,$.support.reliableMarginRight

　　$.support.inlineBlockNeedsLayout, $.support.shrinkWrapBlocks