快捷導(dǎo)航

源碼解讀jQ中瀏覽器兼容模塊support第1/2頁(yè)

更新時(shí)間：2016年08月01日 12:04:21 投稿：daisy

jquery support主要是檢測(cè)瀏覽器兼容性，支持力度的方法，用于展示不同瀏覽器各自特性和bug的屬性集合。作為一個(gè)靜態(tài)成員，提供給jquery內(nèi)部函數(shù)，告訴他們某些功能是否能用。避免了以往通過(guò)檢測(cè)瀏覽器版本做修改。下面我們通過(guò)源碼詳細(xì)解讀jQ中瀏覽器兼容模塊support。

前言

jQuery的屬性support是判斷瀏覽器之間是否兼容的模塊，該模塊包含了leadingWhitespace，tbody，htmlSerialize，style，hrefNormalized，opacity，cssFloat，checkOn，optSelected，getSetAttribute….等兼容問(wèn)題，所有的這些屬性也只是jQuery內(nèi)部會(huì)用到，因?yàn)閖Q內(nèi)部一些模塊需要對(duì)這些東西進(jìn)行判斷，就直接寫成了一個(gè)support模塊，可以供我們，但是我們寫代碼的時(shí)基本都沒用到啊，

今天再把這些玩意兒過(guò)一下，測(cè)試的瀏覽器為FF，CHROME，IE11， IE6-IE10是用IE11模擬的：

$.support.leadingWhitespace　　———— IE中自動(dòng)去空格

$.support.checkOn —-chrome中radio默認(rèn)值為checkOn

$.support.tbody —-IE通過(guò)innerHTML自動(dòng)生成tbody

$.support.htmlSerialize —–　　標(biāo)準(zhǔn)瀏覽器會(huì)自動(dòng)生成link標(biāo)簽

$.support.style　　—-IE67中g(shù)etAttriute會(huì)獲取各種類型的數(shù)據(jù)….

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

$.support.cssFloat　　 —-cssFloat標(biāo)準(zhǔn)瀏覽器支持的，IE要用styleFloat

$.support.optSelected　　—–瀏覽器并不會(huì)設(shè)置默認(rèn)的option

$.support.getSetAttribute　　—-getSetAttribute在瀏覽器之間的兼容

$.support.html5Clone　　　—- 復(fù)制標(biāo)簽的問(wèn)題

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

$.support.submitBubbles　　—-冒泡

$.support.changeBubbles　　—-冒泡

$.support.focusinBubbles　　—-冒泡

$.support.deleteExpando 　　—–IE的DOM元素是COM組件，不能delete組件的屬性

$.support.noCloneEvent　　 —-復(fù)制元素的事件

$.support.reliableHiddenOffsets 　　—-table元素中tr內(nèi)td的問(wèn)題；

$.support.boxSizing　　—是否支持boxSizing

$.support.doesNotIncludeMarginInBodyOffset　　—-body不會(huì)包含margin的問(wèn)題（算不算問(wèn)題呢？）

$.support.pixelPosition 　　—-獲取樣式返回的是否是像素值

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

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

$.support.inlineBlockNeedsLayout —-IE中l(wèi)ayout的問(wèn)題

$.support.shrinkWrapBlocks —-IE6中自動(dòng)擴(kuò)大寬高的問(wèn)題

$.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低版本直接通過(guò)createElement創(chuàng)建的元素有parentNode;
          if( !el.parentNode || (el.parentNode.toString() === "[object]") ) {
            document.body.appendChild(el);
          };
          return l;
        };
      })();

    </script>
    IE678中自動(dòng)過(guò)濾了元素前后的空格,
    而且空格不包含在childNodes里面,
    <script type="text/javascript">
      var el = document.createElement("div");
      el.innerHTML = " <div id=\"null\"> </div> ";
      l(el.childNodes.length);
    </script>
  </body>
</html>

標(biāo)準(zhǔn)瀏覽器中是遵守用戶輸入， el應(yīng)該包含三個(gè)節(jié)點(diǎn) ：["", "<div id=\"null\"> </div>", ""]節(jié)點(diǎn);

IE678中卻只有1個(gè)節(jié)點(diǎn)，這個(gè)節(jié)點(diǎn)就是那個(gè)DIV:

$.support.checkOn屬性

標(biāo)準(zhǔn)瀏覽器中的checkbox默認(rèn)value為”on”,IE5678也都是”on”, 但是在某些webkit中checkbox的值默認(rèn)為”"字符串，現(xiàn)在的瀏覽器版本都很高了，基本沒有這個(gè)問(wèn)題, 如果你有chrome低版本的話可以用下面這個(gè)demo測(cè)試看看有沒有問(wèn)題：

<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低版本直接通過(guò)createElement創(chuàng)建的元素有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");
      //標(biāo)準(zhǔn)瀏覽器有change事件;
      el.onchange = function() {
        l(el.value);
        l(ck.checked)
      }
      //IE中的萬(wàn)能事件propertychange;
      el.onpropertychange = function() {
        l(el.value);
        l(ck.checked)
      }
      l(el.value);
    </script>
  </body>
</html>

$.support.tbody屬性

在IE6和IE7中新建table會(huì)自動(dòng)創(chuàng)建tbody元素;

如果我們?yōu)閯?chuàng)建的table添加tr或者添加td，那么所有的瀏覽器都會(huì)自動(dòng)創(chuàng)建tbody;

如果是動(dòng)態(tài)創(chuàng)建的table和tr，把tr添加到tbody中，那么tbod根本不會(huì)出來(lái)，所有瀏覽器都遵循開發(fā)者的操作(瀏覽器的心思真的不好猜測(cè)啊)

<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低版本直接通過(guò)createElement創(chuàng)建的元素有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中會(huì)輸出1， 標(biāo)準(zhǔn)瀏覽器遵循用戶輸入，不會(huì)是自動(dòng)生成tbody，所以tobdy的length是0
      l(el.getElementsByTagName("tbody").length);
    </script>
    <script>
      var el = document.getElementById("tb2");
      el.innerHTML="<table><tr>111</tr></table>";
      //無(wú)論是標(biāo)準(zhǔn)還是IE67都會(huì)自動(dòng)生成tbody標(biāo)簽
      l(el.getElementsByTagName("tbody").length);
    </script>
    <script>
      var el = document.getElementById("tb3");
      el.innerHTML="<table><td>111</td></table>";
      //無(wú)論是標(biāo)準(zhǔn)還是IE67都會(huì)自動(dòng)生成tbody標(biāo)簽
      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>

代碼執(zhí)行完畢以后你會(huì)看到，當(dāng)table里沒有元素的時(shí)候， chrome沒有自動(dòng)產(chǎn)生tbody，如果你不按照正常的寫法寫table，而是這樣

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

產(chǎn)生的HTML變成這樣”111<table><tr></tr></table>“， 在jQ中你這樣寫$(“<table><tr>111</tr></table>”)， 生成的HTML也是這樣的["111","<table><tr></tr></table>"]，所以再三強(qiáng)調(diào)寫html標(biāo)簽的嵌套要符合標(biāo)準(zhǔn)….

在IE中又是例外一回事，通過(guò)innerHTML的方式會(huì)自動(dòng)添加tbody，而且你標(biāo)簽嵌套錯(cuò)了他也不管你，通過(guò)appendChild的方式跟其他瀏覽器一樣不會(huì)主動(dòng)生成tbody；

$.support.htmlSerialize

IE678瀏覽器中不能夠通過(guò)innerHTML動(dòng)態(tài)生成link標(biāo)簽，要通過(guò)新建標(biāo)簽的形式創(chuàng)建：

<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低版本直接通過(guò)createElement創(chuàng)建的元素有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  rel="stylesheet">';
    </script>
  </body>
</html>

雖然link標(biāo)簽多數(shù)都可以通過(guò)innerHTML生成，但是我們要通過(guò)innerHTML生成script標(biāo)簽是不可行的：

12 下一頁(yè)閱讀全文

您可能感興趣的文章: