JQuery source code analysis notes (5) jQuery. support

Among them, jQuery. browser provides browser Information Based on UserAgent detection. JQuery. support uses feature detection to check browser functions and bugs.

Like the document, first of all, this module is a very underlying code and basically does not need to be used in daily development, but plug-in developers need it more. Because the plug-in must be compatible with various browsers. First, let's take a look at the browser features provided by the support module. The following results are displayed under Chrome 13 Dev. The members may change depending on the browser. (PS: Let's talk about IE again. Most of the attributes are special)

• Ajax: true. Whether the XMLHttpRequest object is supported. Earlier versions of IE do not support ActiveX. * AppendChecked: true. * BoxModel: true. Whether the rendering is based on W3C CSS box mode. The Quirks mode of IE6 and 7 is False. * ChangeBubbles: true. Whether the change event bubbles along the DOM tree. This is the W3C DOM event model requirement, but IE is False so far. JQuery simulates this bubble feature. * CheckClone: undefined. Whether to retain the selected status when cloning the Radio Button or CheckBox. Previously mentioned in the createFragment cache, the WebKit kernel is not retained. * CheckOn: false. Whether the CheckBox is On by default when it is not specified. * Cors: true. Whether the XMLHttpRequest object has the withCredentials attribute. Cross-origin requests can be executed. If this attribute is not available, but there are other ways to implement cross-origin XHR requests, it is also True (such as using Windows Gadget ). * CssFloat: true. Supports CSS attributes of cssFloat. IE is False, and styleFloat is used. * DeleteExpando: true. * FocusinBubbles: false. * GetSetAttribute: true. * HrefNormalized: true. Whether to return the original specified URL when getAttribute ("href") is called for an element. IE returns the complete path. For example, for the href = "1.html" link, IE will get http: //.../1.html. * HtmlSerialize: true. Whether the link element can be inserted with innerHTML. IE is false. * InlineBlockNeedsLayout: false. Whether the block element needs to be inline and hasLayout (the concept in IE is the root cause of most layout problems) in order to make the block element express inline-block ). There is a problem with IE8 or lower. * LeadingWhitespace: true. Whether the innerHTML attribute is strictly rendered by code. The front blank is removed from the IE6-8. (So this article written using Markdown has a format problem in IE, because the line feed is missing.) * noCloneChecked: true. 1.5.1 new attributes. Checks whether the browser clones the checked extension attribute. IE is false. * NoCloneEvent: true. Whether the copied element carries an Event processing function (that is, whether the Event handler is copied ). IE is false. * Opacity: true. Whether the opacity CSS attribute (transparency) is supported ). IE is false, which uses alpha filter. * OptDisabled: true. Whether the option element of the select element that has been disabled is disabled by default. * OptSelected: true. Whether the selected Attribute of the selected option element is normal by default. * RadioValue: true. * ReliableHiddenOffsets: true. When the cells in the table are set to display: none, there is still offsetWidth/Height. That is, hidden is unreliable. Only IE8 has this problem. For details, see bug 4512 * reliableMarginRight: true. Div has an explicit width, but there is no margin-right. In this case, the margin-right calculation based on the container is incorrect. There is a problem with the old WebKit version. See bug 3333 * scriptEval (): Before Version 1.5.1, this is an attribute and is now a function. Checks whether an inline script is automatically executed when a standard DOM operation function is added. For example, appendChild and createTextNode. IE is false. It uses text to insert a script. * ShrinkWrapBlocks: false. Whether the element will support the big parent node in the case of hasLayout. Only IE6 is true. * Style: true. Whether the style attribute of an element's inline can be accessed using the DOM attribute. For example, getAttribute ("style "). IE is false, which uses the cssText attribute. * SubmitBubbles: true. Whether the submit event bubbles along the DOM tree. IE is false. jQuery simulates this bubble process. * Tbody: true. Whether an empty table element can have no tbody element. Child elements are optional according to HTML specifications. However, if IE is false, A tbody element is automatically inserted.

JQuery creates several elements to determine the browser features. As follows:
Copy codeThe Code is as follows:
Var div = document. createElement ("div ");
Div. setAttribute ("className", "t ");
Div. innerHTML = "<LINK> <TABLE> <TBODY> </TABLE> <A style =" FLOAT: left; TOP: 1px; opacity :. 55 "href =" http://www.jb51.net/a "> a </A> <INPUT type = checkbox> ";
All = div. getElementsByTagName ("*");
A = div. getElementsByTagName ("a") [0];
Var select = document. createElement ("select ");
Opt = select. appendChild (document. createElement ("option "));
Input = div. getElementsByTagName ("input") [0];

The div element has a connotation. Including the blank beginning, empty Table element, inline style, opacity and so on. There are no other notes except a line of code and comments:
Copy codeThe Code is as follows:
Support = {
// IE removes the leading space, so nodeType is not 3 (text)
LeadingWhitespace: (div. firstChild. nodeType = 3 ),
// IE automatically inserts the tbody, so the length is different.
Tbody :! Div. getElementsByName ("tbody"). length,
// IE cannot insert link elements in this way
HtmlSerialize :!! Div. getElementsByTagName ("link"). length,
// If the style is obtained normally, the regular expression will pass normally.
Style:/top/. test (a. getAttribute ("style ")),
// The href attribute should be the original specified string, and IE will change it to the absolute URL starting with http
HrefNormalized: (a. getAttribute ("href") = "/"),
// Obtain the opacity attribute. The regular expression is used here to bypass WebKit [bug 5145] (http://dev.jquery.com/ticket/5145)
// But this should be an earlier version. At least in Chrome 13, regular expressions are not required.
Opacity:/^0.55 $/. test (a. style. opacity ),
// Use styleFloat for IE
CssFloat :!! A.style.css Float,
// No value is specified for the checkbox in the div to check whether the default value is on. WebKit is "". So my result is false.
CheckOn: (input. value = "on "),
// This select statement has only one option element. Therefore, this option is selected by default during rendering. In this case, selected should be true.
OptSelected: opt. selected,
SubmitBubbles: true,
ChangeBubbles: true,
FocusinBubbles: false,
DeleteExpando: true,
NoCloneEvent: true,
InlineBlockNeedsLayout: false,
ShrinkWrapBlocks: false,
ReliableMarginRight: true
};

Most of the following are step-by-step tests. The BoxModel test is interesting:
Copy codeThe Code is as follows:
Div. innerHTML = ""; // start from scratch
Div. style. width = div. style. paddingLeft = "1px ";
Body = document. createElement ("body ");
Body. style. width = 0;
Body. style. height = 0;
Body. style. border = 0;
Body. style. margin = 0; // set all to 0
Body. appendChild (div );
Document.doc umentElement. insertBefore (body, document.doc umentElement. firstChild );
Support. boxModel = div. offsetWidth = 2;
// At this time, the div is nested under the body. Body length, width, and height, and the border and margin are both 0. So the div offset should be its own paddingLeft + width. If not, it indicates that the box mode is incorrect.

Then it is worth noting that the event is bubbling, and the link to the technical reference article mentioned in the comment has expired. Search for "Detecting event support without browser sniffing" by yourself"
Copy codeThe Code is as follows:
// AttachEvent is IE, so only IE is checked here. other browsers use the default values set above.
If (div. attachEvent ){
For (I = {
Submit: 1,
Change: 1
Focusin: 1
}){
EventName = "on" + I;
IsSupported = (eventName in div );
If (! IsSupported ){
Div. setAttribute (eventName, "return ;");
IsSupported = (typeof div [eventName] = "function ");
}
Support [I + "Bubbles"] = isSupported;
}
}

PS: browser detection is a very tangled and Detailed task. This note is being improved ......

18: 30 Supplement: After IE9 testing, most of the above questions about IE do not exist. The following are the test results of IE9 + Win7:
Copy codeThe Code is as follows:
$. Support
{
BoxModel: true,
ChangeBubbles: true,
CheckClone: true,
CheckOn: true,
CssFloat: true,
DeleteExpando: true,
HrefNormalized: true,
HtmlSerialize: true,
LeadingWhitespace: true,
NoCloneEvent: false,
Opacity: true,
OptSelected: false,
ParentNode: true,
ScriptEval: true,
Style: true,
SubmitBubbles: true,
Tbody: true
}