jQuery源码分析（一）jQuery.support

  1 // Internet Explorer 8.0.7601.17514 | Chrome 34.0.1847.131 m | Firefox 30.0
  2 (function () {
  3 
  4     jQuery.support = {};
  5 
  6     var root = document.documentElement,
  7         script = document.createElement("script"),
  8         div = document.createElement("div"),
  9         id = "script" + jQuery.now();
 10 
 11     div.style.display = "none";
 12     div.innerHTML = "    <link/><table></table><a href=‘/a‘ style=‘color:red;float:left;opacity:.55;‘>a</a><input type=‘checkbox‘/>";
 13 
 14     var all = div.getElementsByTagName("*"),
 15         a = div.getElementsByTagName("a")[0],
 16         select = document.createElement("select"),
 17         opt = select.appendChild(document.createElement("option"));
 18 
 19     // Can‘t get basic test support 【IE8:false | Chrome:false | Firefox:false】
 20     if (!all || !all.length || !a) {
 21         return;
 22     }
 23 
 24     jQuery.support = {
 25         // IE strips leading whitespace when .innerHTML is used 【IE去掉了前导空格】
 26         leadingWhitespace: div.firstChild.nodeType === 3,// 【IE8:false | Chrome:true | Firefox:true】
 27 
 28         // Make sure that tbody elements aren‘t automatically inserted
 29         // IE will insert them into empty tables
 30         tbody: !div.getElementsByTagName("tbody").length,// 【IE8:true | Chrome:true | Firefox:true】
 31 
 32         // Make sure that link elements get serialized correctly by innerHTML 【确保link元素在innerHTML里正确序列化】
 33         // This requires a wrapper element in IE 【在IE里link需要一个包裹元素】
 34         htmlSerialize: !!div.getElementsByTagName("link").length,// 【IE8:false | Chrome:true | Firefox:true】
 35 
 36         // Get the style information from getAttribute
 37         // (IE uses .cssText instead)
 38         style: /red/.test(a.getAttribute("style")),// 【IE8:true | Chrome:true | Firefox:true】
 39 
 40         // Make sure that URLs aren‘t manipulated
 41         // (IE normalizes it by default)
 42         hrefNormalized: a.getAttribute("href") === "/a",// 【IE8:true | Chrome:true | Firefox:true】
 43 
 44         // Make sure that URLs aren‘t manipulated
 45         // (IE uses filter instead)
 46         // use a regex to work around a WebKit issue. See #5145
 47         opacity: /^0.55$/.test(a.style.opacity),// 【IE8:false | Chrome:true | Firefox:true】
 48 
 49         // Verify style float existence
 50         // (IE uses styleFloat instead of cssFloat) 【IE8使用styleFloat而不是cssFloat】
 51         cssFloat: !!a.style.cssFloat,// 【IE8:false | Chrome:true | Firefox:true】
 52 
 53         // Make sure that if no value is specified for a checkbox
 54         // that it defaults to "on".
 55         // (Webkit default to "" instead)
 56         checkOn: div.getElementsByTagName("input")[0].value === "on",// 【IE8:true | Chrome:true | Firefox:true】
 57 
 58         // Make sure that a selected-by-default option has a working selected property.
 59         // (WebKit defaults to false instead of true,IE too,if it‘s in an optgroup) 【IE默认false而不是true，Chrome已经修正】
 60         optSelected: opt.selected,// 【IE8:false | Chrome:true | Firefox:true】
 61 
 62         // Will be defined later
 63         deleteExpando: true,
 64         optDisabled: false,
 65         checkClone: false,
 66         scriptEval: false,
 67         noCloneEvent: true,
 68         boxModel: null,
 69         inlineBlockNeedsLayout: false,
 70         shrinkWrapBlocks: false,
 71         reliableHiddenOffsets: true
 72     };
 73 
 74     // Make sure that the options inside disabled selects aren‘t marked as disabled
 75     // (WebKit marks them as disabled)
 76     select.disabled = true;
 77     jQuery.support.optDisabled = !opt.disabled;// 【IE8:true | Chrome:true | Firefox:true】
 78 
 79     script.type = "text/javascript";
 80     try {
 81         script.appendChild(document.createTextNode("window." + id + "=1;"));
 82     } catch (e) { }
 83 
 84     root.insertBefore(script, root.firstChild);
 85 
 86     // Make sure that the execution of code works by injecting a script
 87     // tag with appendChild/createTextNode
 88     // (IE doesn‘t support this,fails,and uses .text instead)
 89     if (window[id]) {
 90         jQuery.support.scriptEval = true;// 【IE8:false | Chrome:true | Firefox:true】
 91         delete window[id];
 92     }
 93 
 94     // Test to see if it‘s possible to delete an expando from an element
 95     // Fails in Internet Explorer
 96     try {
 97         delete script.test;
 98 
 99     } catch (e) {
100         jQuery.support.deleteExpando = false;// 【IE8:false | Chrome:true | Firefox:true】
101     }
102 
103     root.removeChild(script);
104 
105     if (div.attachEvent && div.fireEvent) {
106         div.attachEvent("onclick", function click() {
107             // Cloning a node shouldn‘t copy over any
108             // bound event handlers (IE does this) 【克隆节点不应该复制任何绑定的事件处理程序】
109             jQuery.support.noCloneEvent = false;// 【IE8:true | Chrome:false | Firefox:false】
110             div.detachEvent("onclick", click);
111         });
112         div.cloneNode(true).fireEvent("onclick");// 【fireEvent会引起事件冒泡；fireEvent在即使DOM没有绑定事件（此处指"onclick"）也不会报错】
113     }
114 
115     div = document.createElement("div");
116     div.innerHTML = "<input type=‘radio‘ name=‘radiotest‘ checked=‘checked‘/>";
117 
118     var fragment = document.createDocumentFragment();
119     fragment.appendChild(div.firstChild);
120 
121     // WebKit doesn‘t clone checked state correctly in fragments
122     jQuery.support.checkClone = fragment.cloneNode(true).cloneNode(true).lastChild.checked;// 【IE8:true | Chrome:true | Firefox:true】
123 
124     // Figure out if the W3C box Model works as expected
125     // document.body must exist before we can do this
126     jQuery(function () {
127         var div = document.createElement("div");
128         div.style.width = div.style.paddingLeft = "1px";
129 
130         document.body.appendChild(div);
131         jQuery.boxModel = jQuery.support.boxModel = div.offsetWidth === 2;// 【IE8:true | Chrome:true | Firefox:true】
132             
133         if ("zoom" in div.style) {
134             // Check if natively block-level elements act like inline-block
135             // elements when setting their display to ‘inline‘ and giving
136             // them layout
137             // (IE < 8 does this)
138             div.style.display = "inline";
139             div.style.zoom = 1;
140             jQuery.support.inlineBlockNeedsLayout = div.offsetWidth === 2;// 【IE8:false | Chrome:false | Firefox:false】
141 
142             // Check if elements with layout shrink-wrap their children
143             // (IE 6 does this)
144             div.style.display = "";
145             div.innerHTML = "<div style=‘width:4px;‘></div>";
146             jQuery.support.shrinkWrapBlocks = div.offsetWidth !== 2;// 【IE8:false | Chrome:false | Firefox:false】
147         }
148 
149         div.innerHTML = "<table><tr><td style=‘padding:0;border:0;display:none‘></td><td>t</td></tr></table>";
150         var tds = div.getElementsByTagName("td");
151 
152         // Check if table cells still have offsetWidth/Height when they are set
153         // to display:none and there are still other visible table cells in a
154         // table row; if so, offsetWidth/Height are not reliable for use when
155         // determining if an element has been hidden directly using
156         // display:none (it is still safe to use offsets if a parent element is
157         // hidden; don safety goggles and see bug #4512 for more information).
158         // (only IE 8 fails this test)
159         jQuery.support.reliableHiddenOffsets = tds[0].offsetHeight === 0;// 【IE8:false | Chrome:true | Firefox:true】
160 
161         tds[0].style.display = "";
162         tds[0].style.display = "none";
163 
164         // Check if empty table cells still have offsetWidth/Height
165         // (IE < 8 fail this test)
166         jQuery.support.reliableHiddenOffsets = jQuery.support.reliableHiddenOffsets && tds[0].offsetHeight === 0;// 【IE8:false | Chrome:true | Firefox:true】
167         div.innerHTML = "";
168 
169         document.body.removeChild(div).style.display = "none";
170         div = tds = null;
171     });
172 
173     // Technique from Juriy Zaytsev
174     // http://thinkweb2.com/projects/prototype/detecting-event-support-without-browser-sniffing/
175     var eventSupported = function (eventName) {
176         var el = document.createElement("div");
177         eventName = "on" + eventName;
178 
179         var isSupported = (eventName in el);
180         if (!isSupported) {
181             el.setAttribute(eventName, "return;");
182             isSupported = typeof el[eventName] === "function";
183         }
184         el = null;
185 
186         return isSupported;
187     }
188         
189     jQuery.support.submitBubbles = eventSupported("submit");// 【IE8:false | Chrome:true | Firefox:true】
190     jQuery.support.changeBubbles = eventSupported("change");// 【IE8:false | Chrome:true | Firefox:true】
191 
192     // release memory in IE
193     root = script = div = all = a = null;
194 })();