当前位置：首页 > 资讯 > 技术文档

源码解读jQ中浏览器兼容模块support第1/2页

时间：2021-07-22 07:23 编辑：来源：阅读：
扫一扫，手机访问

摘要：源码解读jQ中浏览器兼容模块support第1/2页

前言 jQuery的属性support是判断浏览器之间是否兼容的模块，该模块包含了[b]leadingWhitespace，tbody，htmlSerialize，style，hrefNormalized，opacity，cssFloat，checkOn，optSelected，getSetAttribute….[/b]等兼容问题，所有的这些属性也只是jQuery内部会用到，因为jQ内部一些模块需要对这些东西进行判断，就直接写成了一个support模块，可以供我们，但是我们写代码的时基本都没用到啊，今天再把这些玩意儿过一下，测试的浏览器为FF，CHROME，IE11， IE6-IE10是用IE11模拟的： [b]$.support.leadingWhitespace[/b]　　———— IE中自动去空格 [b]$.support.checkOn[/b] —-chrome中radio默认值为checkOn [b]$.support.tbody[/b] —-IE通过innerHTML自动生成tbody [b]$.support.htmlSerialize [/b]—–　　标准浏览器会自动生成link标签 [b]$.support.style[/b]　　—-IE67中getAttriute会获取各种类型的数据…. [b]$.support.opacity[/b]　　—- IE678不支持opacity [b]$.support.cssFloat[/b]　　 —-cssFloat标准浏览器支持的，IE要用styleFloat [b]$.support.optSelected[/b]　　—–浏览器并不会设置默认的option [b]$.support.getSetAttribute[/b]　　—-getSetAttribute在浏览器之间的兼容 [b]$.support.html5Clone[/b]　　　—- 复制标签的问题 [b]$.support.boxModel[/b]　　—- 是否支持盒模型 [b]$.support.submitBubbles[/b]　　—-冒泡 [b]$.support.changeBubbles[/b]　　—-冒泡 [b]$.support.focusinBubbles[/b]　　—-冒泡 [b]$.support.deleteExpando[/b] 　　—–IE的DOM元素是COM组件，不能delete组件的属性 [b]$.support.noCloneEvent[/b]　　 —-复制元素的事件 [b]$.support.reliableHiddenOffsets[/b] 　　—-table元素中tr内td的问题； [b]$.support.boxSizing[/b]　　—是否支持boxSizing [b]$.support.doesNotIncludeMarginInBodyOffset[/b]　　—-body不会包含margin的问题（算不算问题呢？） [b]$.support.pixelPosition[/b] 　　—-获取样式返回的是否是像素值 [b]$.support.boxSizingReliable[/b]　　—-boxSizing是否可用 [b]$.support.reliableMarginRight [/b] —-chrome中margin的bug [b]$.support.inlineBlockNeedsLayout [/b] —-IE中layout的问题 [b]$.support.shrinkWrapBlocks[/b] —-IE6中自动扩大宽高的问题 [b]$.support.leadingWhitespace属性[/b]

<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应该包含三个节点[b]：["", "<div id=\"null\"> </div>", ""][/b]节点; IE678中却只有1个节点，这个节点就是那个DIV: [img]http://files.jb51.net/file_images/article/201608/201681115028835.png?201671115037[/img] [b]$.support.checkOn属性[/b] 标准浏览器中的checkbox默认value为”on”,[b]IE5678[/b]也都是”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>

[b]$.support.tbody属性[/b] 在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，而是这样 [code]"<table><tr>111</tr></table>";[/code] 产生的HTML变成这样”[code]111<table><tr></tr></table>“， [/code]在jQ中你这样写[code]$(“<table><tr>111</tr></table>”)， [/code]生成的HTML也是这样的[code]["111","<table><tr></tr></table>"]，[/code]所以再三强调写html标签的嵌套要符合标准…. [img]http://files.jb51.net/file_images/article/201608/201681115234652.png?201671115248[/img] 在IE中又是例外一回事，通过[b]innerHTML的方式会自动添加tbody[/b]，而且你标签嵌套错了他也不管你，通过[b]appendChild[/b]的方式跟其他浏览器一样不会主动生成tbody； [img]http://files.jb51.net/file_images/article/201608/201681115312848.png?201671115321[/img] [b]$.support.htmlSerialize[/b] 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标签是不可行的：

当前1/2页 [b]1[/b][url=http://www.1sucai.cn/article/89595_2.htm]2[/url][url=http://www.1sucai.cn/article/89595_2.htm]下一页[/url][url=http://www.1sucai.cn/article/89595_all.htm]阅读全文[/url]

全部评论(0)

上一篇：AjaxToolKit之Rating控件的使用方法
下一篇：kkpager 实现ajax分页查询功能

资讯排行榜
更多>>