jquery Source code parsing: jquery Static Property Object Support detailed

Jquery.support is a function detection method to detect whether a browser supports certain features. Used internally for jquery.

Let's look at some source code first:

Jquery.support = (function (support) {

......

return support;
})( {} );

Jquery.support is actually a JSON object. Under Firefox, print the support object:

Next, let's look at its source code.

Jquery.support = (function (support) {

var input = document.createelement ("input"),
fragment = Document.createdocumentfragment (),
div = document.createelement ("div"),
select = Document.createelement ("select"),
opt = Select.appendchild (document.createelement ("option"));

if (!input.type) { //if the INPUT element created does not have a type, it is returned directly. Now browsers support type type, so the IF statement is not entered
return support;
}

Input.type = "checkbox"; //Change the type of this input

Support.checkon = Input.value!== ""; the value of the//check box defaults to what the old version of WebKit, the default value is "", so it's Support.checkon = False. The default value for other browsers is on, so Support.checkon = True. For this differentiation, jquery solves the compatibility problem by hooks, so that all browsers return the same values.

support.optselected = opt.selected; //created a drop-down menu select, and created a subkey option. Under Firefox and Google Chrome, the first subkey will be selected by default. However, under IE, it will not be selected by default.

Support.reliablemarginright = true; //These three Tests will be judged after the DOM is loaded, just define it first.
Support.boxsizingreliable = true;
Support.pixelposition = false;

Input.checked = true; //Leave check box selected
support.noclonechecked = Input.clonenode (true). Checked; //The new check box that was cloned is also selected. Under Firefox, under Safari, under Chrome, the clones are all selected, Ie9-10, and the clones are not selected. jquery will use hooks to solve this compatibility problem, let ie9-10, the cloned check box selected

Select.disabled = true; //Prohibit drop-down menu
support.optdisabled =!opt.disabled; The option under//select should not be affected, and the old version of WebKit's opt.disabled will also become true, which is affected by select

input = document.createelement ("input"); //Create a new input
Input.value = "T"; //Set the value of input to "T".
Input.type = "Radio"; //set type of input again
Support.radiovalue = Input.value = = = "T"; //Determine if the value of input is equal to "t", ie will be equal to ON, so IE returns false

Input.setattribute ("Checked", "T"); //Set Input's Checked property value to "T"
Input.setattribute ("name", "T"); //Set Input's Name property value to "T"

Fragment.appendchild (input); //Add this input to the document fragment object

Support.checkclone = Fragment.clonenode (True). CloneNode (True). lastchild.checked; //In the old version of WebKit, the cloned document fragment cannot return the value of checked and therefore equals false.

Support.focusinbubbles = "onfocusin" in window; //Only IE supports this event. The focus event does not bubble, and Focusin supports

Div.style.backgroundClip = "Content-box"; //Background cut
Div.clonenode (true). Style.backgroundclip = ""; //cloned div should not affect the original Div
Support.clearclonestyle = Div.style.backgroundClip = = = = = "Content-box"; //ie will be affected, become "", equal to False

JQuery (function () { ////Some methods need to wait until the DOM is loaded to be judged by functional detection , meaning that these newly created elements are actually added to the page to be detected

var container, Margindiv,
Divreset = "Padding:0;margin:0;border:0;display:block;-webkit-box-sizing:content-box;-moz-box-sizing:content-box ; Box-sizing:content-box ", //content-box is the standard mode, Border-box is the weird mode.
BODY = document.getElementsByTagName ("body") [0];

if (!body) { //If the body does not exist, return directly.
Return
}

container = document.createelement ("div");
Container.style.cssText = "border:0;width:0;height:0;position:absolute;top:0;left:-9999px;margin-top:1px";

Body.appendchild (Container). appendchild (Div);
div.innerhtml = "";
Div.style.cssText = "-WEBKIT-BOX-SIZING:BORDER-BOX;-MOZ-BOX-SIZING:BORDER-BOX;BOX-SIZING:BORDER-BOX;PADDING:1PX; border:1px;display:block;width:4px;margin-top:1%;p osition:absolute;top:1% ";

Jquery.swap (body, body.style.zoom! = null?) {zoom:1}: {}, Function () {//zoom is the property of the magnified page, equal to 1, do not enlarge or shrink
support.boxsizing = Div.offsetwidth = = = 4; //Weird mode, equals 4, supports boxsizing, all browsers support
});

if (window.getComputedStyle) {
Support.pixelposition = (window.getComputedStyle (div, null) | | {}). Top!== "1%"; //safari returns 1%, so it is equal to false. Other browsers convert to pixel values.
Support.boxsizingreliable = (window.getComputedStyle (div, null) | | {width: "4px"}). width = = = "4px"; //ie, if it is weird mode, width is not equal to 4px, need to subtract Padding,border

Margindiv = Div.appendchild (document.createelement ("div"));
MarginDiv.style.cssText = Div.style.cssText = Divreset;
MarginDiv.style.marginRight = MarginDiv.style.width = "0";
Div.style.width = "1px"; //old version of WebKit, will make the width of margindiv into 1

Support.reliablemarginright =!parsefloat ((window.getComputedStyle (margindiv, null) | | {}). marginright); //should be equal to 0,reliablemarginright equals True.
}

Body.removechild (container);
});

return support;
})( {} );

There are two properties in the support object printed above, one is Ajax and the other is cors. The source code is:

JQuery.support.cors =!! xhrsupported && ("Withcredentials" in xhrsupported); //First determine if the Ajax object exists and whether it supports cross-domain. Xhrsupported is the new XMLHttpRequest () object, IE9 and the following versions do not support
JQuery.support.ajax = xhrsupported =!! xhrsupported; //Whether AJAX requests are supported.

Come on!

jquery Source code parsing: jquery Static Property Object Support detailed