详解jQ的support模块

页面导航:首页 > 网络编程 > JavaScript > 详解jQ的support模块

详解jQ的support模块

来源: 作者: 时间:2016-01-23 10:23 【

jQuery的属性support是判断浏览器之间是否兼容的模块 ,该模块包含了leadingWhitespace,tbody,htmlSerialize,style,hrefNormalized,opacity,cssFloat,checkOn,optSelected,getSetAttribute 等兼容
 jQuery的属性support是判断之间是否兼容的模块 ,该模块包含了leadingWhitespace,tbody,Serialize,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 = 0;
                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>

 

 
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<