Preface
jQuery's attribute support is a module that determines whether browsers are compatible. This module contains compatibility issues such as leadingWhitespace, tbody, htmlSerialize, style, hrefNormalized, opacity, cssFloat, checkOn, optSelected, getSetAttribute.... All these attributes are only used within jQuery, because some modules within jQ need to judge these things, so they are directly written into a support module, which can be used for us, but we basically didn't use them when we wrote the code.
Today I will review these things. The browsers tested are FF, CHROME, IE11, and IE6-IE10 are simulated using 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 ― The standard browser will automatically generate link tags
$.support.style ―-IE67 getAttriute will get various types of data....
$.support.opacity ―- IE678 does not support opacity
$.support.cssFloat ―--supported by the standard browser of cssFloat, IE must use styleFloat
$.support.optSelected ―The browser does not set the default option
$.support.getSetAttribute ―-getSetAttribute compatibility between browsers
$.support.html5Clone - - Issue of copying tags
$.support.boxModel - Whether to support box model
$.support.submitBubbles ―-Bubble
$.support.changeBubbles --Bubble
$.support.focusinBubbles ―-Bubble
$.support.deleteExpando ―IE's DOM element is a COM component, and cannot delete the attributes of the component.
$.support.noCloneEvent - Event to copy the element
$.support.reliableHiddenOffsets - the problem of td in tr in the table element;
$.support.boxSizing - Whether boxSizing is supported
$.support.doesNotIncludeMarginInBodyOffset ―-body does not contain margin (Is it a problem?)
$.support.pixelPosition - Gets whether the pixel value returned by the style
$.support.boxSizingReliable ―-Is boxSizing available
$.support.reliableMarginRight - - The bug in margin in chrome
$.support.inlineBlockNeedsLayout - - Problem with layout in IE
$.support.shrinkWrapBlocks - - The problem of automatically expanding 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) + "Information:<br>"+ message+"<br>"; el.appendChild( span ); }; //The elements created directly through createElement in IE lower version include parentNode; if( !el.parentNode || (el.parentNode.toString() === "[object]") ) { document.body.appendChild(el); }; return l; }; })(); </script> IE678 automatically filters the spaces before and after the element, and the 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 adhere to user input, and el should contain three nodes : ["", "<div id=/"null/"> </div>", ""] node;
There is only 1 node in IE678, and this node is the DIV:
$.support.checkOn property
The default value of checkbox in standard browsers is "on", and IE5678 is also "on", but in some webkits, the value of checkbox defaults to "" string, and the current browser version is very high, basically there is no problem. If you have a low version of Chrome, you can use the following demo to test to see if there is any problem:
<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) + "Information:<br>"+ message+"<br>"; el.appendChild( span ); }; //The elements created directly through createElement in IE are 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"); //The standard browser has a change event; el.onchange = function() { l(el.value); l(ck.checked) } //The universal event propertychange in IE; el.onpropertychange = function() { l(el.value); l(ck.checked) } l(el.value); </script> </body></html>$.support.tbody property
Create a new table in IE6 and IE7 will automatically create a tbody element;
If we add tr or td to the created table, then all browsers will automatically create tbody;
If it is a dynamically created table and tr and add tr to the tbody, then tbod will not come out at all. All browsers follow the developers' operations (the browser's 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) + "Information:<br>"+ message+"<br>"; el.appendChild( span ); }; //The elements created directly through createElement in the lower version of IE are 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 will output 1. The standard browser follows user input and 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>"; //Whether it is standard or IE67 will automatically generate tbody tag l(el.getElementsByTagName("tbody").length); </script> <script> var el = document.getElementById("tb3"); el.innerHTML="<table><td>111</td></table>"; //Whether it is standard or IE67 will automatically generate tbody tag l(el.getElementsByTagName("tbody").length); </script> <script> var tb = document.createElement("table"); var tr = document.createElement("tr"); tr.innerHTML = "trrtrtr"; tb.appendChild(tr); document.getElementsByTagName("body")[0].appendChild(tb); </script> </body></html>After the code is executed, you will see that when there are no elements in the table, chrome does not automatically generate tbody. If you do not write the table according to the normal writing method, it is like this
"<table><tr>111</tr></table>";
The generated HTML becomes like this " 111<table><tr></tr></table>“， in jQ you write $(“<table><tr>111</tr></table>”)， and the generated HTML is also like this ["111","<table><tr></tr></table>"]， so I repeatedly emphasize that writing the nesting of HTML tags must comply with the standards...
Another exception in IE. TBODY will be automatically added through innerHTML , and if you nest your tags incorrectly, he will not care about you. The appendChild method will not actively generate tBODY like other browsers;
$.support.htmlSerialize
IE678 browser cannot dynamically generate link tags through innerHTML. To create them by creating 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) + "Information:<br>"+ message+"<br>"; el.appendChild( span ); }; //The elements created directly through createElement in the lower version of IE are parentNode; if( !el.parentNode || (el.parentNode.toString() === "[object]") ) { document.body.appendChild(el); }; return l; }; })(); </script> <div> 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>Although most link tags can be generated through innerHTML, it is not feasible for us to generate script tags through innerHTML:
1 2Next page Read the full text