Home>

jquery support mainly detects browser compatibility,Supportive methodsA collection of attributes used to show the respective features and bugs of different browsers.As a static member,Provided to jquery internal functions,Tell them if certain features work.Avoid the modification by detecting the browser version in the past.Below we interpret the browser compatible module support in jq in detail through source code.

Foreword

The jquery attribute support is a module to determine whether the browsers are compatible. This module containsleadingwhitespace, tbody, htmlserialize, style, hrefnormalized, opacity, cssfloat, checkon, optselected, getsetattribute ...and other compatibility issues,All these properties are only used internally by jquery.Because some modules inside jq need to judge these things, Written directly into a support module, which can be used for us, But we basically did n’t use it when we wrote the code.

Let ’s play with these things again today, The browsers tested were ff, chrome, ie11, ie6-ie10 were simulated with ie11:

$.support.leadingwhitespace———— Automatically remove spaces in ie

$.support.checkon—The default value of radio in chrome is checkon

$.support.tbody—- ie automatically generates tbody through innerhtml

$.support.htmlserialize— standard browser will automatically generate link tags

$.support.style—The getattriute in ie67 will get various types of data….

$.support.opacity—- ie678 does not support opacity

$.support.cssfloat—-cssfloat standard browser support,ie use stylefloat

$.support.optselected—The browser does not set the default option

$.support.getsetattribute—-getsetattribute compatibility between browsers

$.support.html5clone—- Copy label problem

$.support.boxmodel—-Whether the box model is supported

$.support.submitbubbles—-bubbly

$.support.changebubbles—-bubbly

$.support.focusinbubbles—-bubbly

$.support.deleteexpando—The dom element of ie is a com component, you cannot delete the attribute of the component

$.support.nocloneevent—- copy event

$.support.reliablehiddenoffsets—The problem of td in tr in the table element;

$.support.boxsizing—whether boxsizing is supported

$.support.doesnotincludemargininbodyoffset—-body does not include the problem of margin

$.support.pixelposition—-Get whether the style returns pixel values

$.support.boxsizingreliable—-boxsizing is available

$.support.reliablemarginright—The margin bug in chrome

$.support.inlineblockneedslayout—The problem of layout in ie

$.support.shrinkwrapblocks—The problem of automatically expanding the width and height in ie6

$.support.leadingwhitespace property

<html>
  <head>
    <meta charset="utf-8" />
    <title>compatible</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) + "message:<br>" + message + "<br>";
            el.appendchild (span);
          };
          //ie elements created by createelement directly through createelement have parentnode;
          if (! el.parentnode || (el.parentnode.tostring () === "[object]")) {
            document.body.appendchild (el);
          };
          return l;
        };
      }) ();
    </script>
    ie678 automatically filters the space before and after the element,    And spaces are not included in childnodes,    <script type="text/javascript">
      var el=document.createelement ("div");
      el.innerhtml="<div id=\" null \ "></div>";
      l (el.childnodes.length);
    </script>
  </body>
</html>

Standard browsers respect user input, el should contain three nodes:["", "<div id=\" null \ "></div>", ""]node;

There is only one node in ie678, and this node is the div:

$.support.checkon property

<html>
  <head>
    <meta charset="utf-8" />
    <title>compatible</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) + "message:<br>" + message + "<br>";
            el.appendchild (span);
          };
          //ie elements created by createelement directly through createelement have parentnode;
          if (! el.parentnode || (el.parentnode.tostring () === "[object]")) {
            document.body.appendchild (el);
          };
          return l;
        };
      }) ();
    </script>
    <input type="checkbox" />
    <script type="text/javascript">
      var el=document.getelementbyid ("ck");
      //The standard browser has a change event;
      el.onchange=function () {
        l (el.value);
        l (ck.checked)
      }
      //universal event propertychange in ie;
      el.onpropertychange=function () {
        l (el.value);
        l (ck.checked)
      }
      l (el.value);
    </script>
  </body>
</html>

$.support.tbody property

New tables in ie6 and ie7 will automatically create tbody elements;

If we add tr or td to the created table, all browsers will automatically create tbody;

If the table and tr are created dynamically and tr is added to tbody, then tbod will not come out at all. All browsers follow the developer's actions (browser mind is really hard to guess)

<html>
  <head>
    <meta charset="utf-8" />
    <title>compatible</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) + "message:<br>" + message + "<br>";
            el.appendchild (span);
          };
          //ie elements created by createelement directly through createelement have parentnode;
          if (! el.parentnode || (el.parentnode.tostring () === "[object]")) {
            document.body.appendchild (el);
          };
          return l;
        };
      }) ();
    </script>
    <div></div>
    <div></div>
    <div></div>
    <script type="text/javascript">
      var el=document.getelementbyid ("tb");
      el.innerhtml="<table></table>"
      //ie67 will output 1, standard browser follows user input,Will not automatically generate tbody, so the length of tobdy is 0
      l (el.getelementsbytagname ("tbody"). length);
    </script>
    <script>
      var el=document.getelementbyid ("tb2");
      el.innerhtml="&table;<tr>111</tr></table>";
      //Both the standard and ie67 will automatically generate tbody tags
      l (el.getelementsbytagname ("tbody"). length);
    </script>
    <script>
      var el=document.getelementbyid ("tb3");
      el.innerhtml="&table;><td>111</td></table>";
      //Both the standard and ie67 will automatically generate tbody tags
      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>

After the code is executed, you will see, When there are no elements in the table, chrome does not automatically generate a tbody, if you do n’t write the table in the normal way, but instead

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

The resulting html becomes like this "111<table><tr></tr></table>",In jq you write$("<table><tr>111</tr></table>"),The generated html is also like this["111", "<table><tr></tr></table>"],So repeatedly emphasized that the nesting of html tags must conform to standards ...

Another exception in ie,Viainnerhtml way will automatically add tbody, and your tags are nested incorrectly and he doesn't care about you,ViaappendchildLike other browsers, it does not actively generate tbody.

$.support.htmlserialize

The ie678 browser cannot dynamically generate link tags through innerhtml. To create them in the form of new tags:

<html>
  <head>
    <meta charset="utf-8" />
    <title>compatible</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) + "message:<br>" + message + "<br>";
            el.appendchild (span);
          };
          //ie elements created by createelement directly through createelement have parentnode;
          if (! el.parentnode || (el.parentnode.tostring () === "[object]")) {
            document.body.appendchild (el);
          };
          return l;
        };
      }) ();
    </script>
    <div>
      bounce
    </div>
    <div></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>

Although most link tags can be generated by innerhtml, it is not feasible to generate script tags through innerhtml:

  • Previous AngularJS basic ng-focus directive simple example
  • Next AngularJS basic ng-include directive example explained