Analysis of source code of JQuery.prototype.init selector constructor _jquery

first, source of thought analysis summary
Profile:
The core idea of jquery can be simply summed up as "query and Operation Dom", today we mainly analyze the JQuery.prototype.init selector constructor to handle the parameters in the selector function.
The parameters of this function are the parameters of the jquery () ===$ () execution function, you can look at this article first by looking at what I have written about the jquery basic framework, understanding the basic framework.
Thinking Analysis:
Here are some of the uses of jquery (for querying the DOM), each of which returns a selector instance (the customary jquery object (a NodeList object) that contains the DOM node of the query):
1, Processing $ (""), $ (null), $ (undefined), $ (false)
If the argument is above an illegal value, the jquery object does not contain a DOM node
2, processing $ (domelement)
If the parameter is a node element, the jquery object contains the parameter node element, adding the attribute value to the parameter node element, the 1 context, the length property, and the use of [] accessing the DOM node in the jquery object
Example 2.1:

Copy Code code as follows:

var obj = document.getElementById (' container '),
JQ = $ (obj);

Console.log (jq.length); 1
Console.log (Jq.context); Obj
Console.log (jq.[ 0]); Obj

3, processing $ (HTML string)
If the first argument is an HTML string, the jquery object contains the ChildNodes node in the fragment document fragment created by the Jquery.clean function
Example 3.1:

Copy Code code as follows:

var jqhtml = $ (' Console.log (jqhtml); [

If the first argument (HTML string) is an empty single label, and the second argument context is a non-empty pure object
Example 3.2:

Copy Code code as follows:

var jqhtml = $ (' <div></div> ', {class: ' Css-class ', data-name: ' Data-val '});

Console.log (jqhtml.attr[' class ')); Css-class
Console.log (jqhtml.attr[' data-name ')); Data-val

4, processing $ (#id)
If the first argument is a # Canadian Id,jquery object contains the element node that uniquely owns the ID,
and add the attribute values to document, parameter string, 1, context, selector, length property and use [] to access DOM nodes in the jquery object
Example 4.1:

Copy Code code as follows:

var JQ = $ (' #container ');

Console.log (jq.[ 0]); The included DOM node element
Console.log (jq.length); 1
Console.log (Jq.context); Document
Console.log (Jq.selector); Container

5, processing $ (. ClassName)
If the first argument is a. Classname,jquery object that has a LABEL element with class name ClassName, and adds an attribute value to the parameter string, the document's selector, the context property
The actual execution code is:

Copy Code code as follows:

return JQuery (document)-Find (ClassName);

6, processing $ (. ClassName, context)
If the first argument is. ClassName, the second argument is a context object (can be. ClassName (equivalent to Processing $ (. ClassName. ClassName), jquery object, or DOM node),
The jquery object contains a descendant node element with class name ClassName in the second parameter context object, and adds a contextual and selector attribute
The actual execution code is:

Copy Code code as follows:

return JQuery (context)-Find (ClassName);

Example 6.1:
HTML code:

Copy Code code as follows:

<div class= "Main" >
<H2 class= "title" > main content title <p> Main Title </p>
</div>
<div class= "Sub" >
<H2 class= "title" > Secondary content title <p> Sub Title </p>
</div>

JavaScript code:

Copy Code code as follows:

var jq, context;
Context = '. Sub ';
var JQ = $ ('. Title ', context);
Console.log (Jq.text ()); Secondary content Title
Console.log (Jq.context); Document
Console.log (Jq.selector); . Sub. Title
Context = $ ('. Sub ');
var JQ = $ ('. Title ', context);
Console.log (Jq.text ()); Secondary content Title
Console.log (Jq.context); Document
Console.log (Jq.selector); . Sub. Title
Context = $ ('. Sub ') [0];
var JQ = $ ('. Title ', context);
Console.log (Jq.text ()); Secondary content Title
Console.log (Jq.context); Node element classname as Sub
Console.log (Jq.selector); . title

7, Processing $ (FN)
If the first argument is the FN function, the $ (document) is called. Ready (FN);
Example 7.1:

Copy Code code as follows:

$ (function (e) {
Console.log (' domcontent is loaded ');
})
The code above is equivalent to:
JQuery (document). Ready (function (e) {
Console.log (' domcontent is loaded ');
});

8, processing $ (jquery object)
If the first argument is a jquery object, which has already been parsed if the parameter is a # Canadian ID when querying the DOM, the jquery object returned adds an attribute value of the parameter string, the document's selector, the context property
Example 8.1:

Copy Code code as follows:

var JQ = $ (' #container ');
Console.log (Jq.selector); #container
Console.log (Jq.context); Document

So what happens when $ ($ (' #container ') is processed? Similarly, the jquery objects that are returned are the same as those handled in cases 5 and 6
Example 8.2:

Copy Code code as follows:

var jq2 = $ ($ (' #container '));
Console.log (Jq2.selector); #container
Console.log (Jq2.context); Document

Second, source code annotation Analysis
[Based on jQuery1.8.3]

Copy Code code as follows:

var rootjquery = $ (document),
rquickexpr =/^ (?: [^#<]* (<[\w\W]+>) [^>]*$|# ([\w\-]*) $)/;
Jquery.fn = Jquery.prototype = {
Init:function (selector, context, rootjquery) {
var match, Elem, ret, doc;
Handle $ (""), $ (null), $ (undefined), $ (false)
if (!selector) {
return this;
}
Handle $ (domelement)
if (Selector.nodetype) {
This.context = this[0] = selector;
This.length = 1;
return this;
}
Handle HTML Strings
if (typeof selector = = "string") {
if (Selector.charat (0) = = "<" && Selector.charat (selector.length-1) = = ">" && selector.length >= 3) {
Assume that strings so start and end with <> are HTML and skip the Regex check
Match = [NULL, selector, NULL];
} else {
Match = rquickexpr.exec (selector);
}
Match HTML or make sure no, specified for #id
MATCH[1] is not NULL, then an HTML string, match[2] is not NULL, the element ID
if (Match && (match[1] | | |!context)) {
HANDLE: $ (HTML)-> $ (array)
if (Match[1]) {
Context = Context instanceof JQuery? CONTEXT[0]: Context;
Doc = (context && Context.nodetype context.ownerdocument | | context:document);
Scripts is true for Back-compat
Selector is an array of childnodes made up of document fragments
selector = jquery.parsehtml (match[1], doc, true);
If MATCH[1] is an empty single label element (such as a:<div><div>) and the context is an object literal
if (Rsingletag.test (match[1]) && jquery.isplainobject (context)) {
If the context object is not empty, the attribute in the object is added to the only DOM node in the selector array
This.attr.call (selector, context, true);
}
The parameters for the merge function should be two arrays, in order to merge the items from the second array into the first array, and this is not an array.
This is an instance object of the Selector Init constructor that inherits the length property in the Jquery.prototype object (default is 0), so you can understand the merge function source code.
Merges the DOM entry in selector into the This object and returns the object
Return Jquery.merge (this, selector);
HANDLE: $ (#id)
} else {
Elem = document.getElementById (match[2]);
Check parentnode to catch when Blackberry 4.6 returns
Nodes that are no longer in the document #6963
if (Elem && elem.parentnode) {
Handle the case where IE/Opera return items
By name instead of ID
ie6,7 and opera have this bug, when a tag name and a tag ID value are equal,
The document.getElementById (#id) function returns a LABEL element that appears in advance
if (elem.id!== match[2]) {
Returns a collection of descendant elements of the document documents returned by the Find function if the above bugs exist
return Rootjquery.find (selector);
}
Otherwise, we inject the element directly into the JQuery object
This.length = 1;
This[0] = Elem;
}
This.context = document;
This.selector = selector;
return this;
}
HANDLE: $ (expr, $ (...))
Context does not exist or the context is a jquery object
else if (!context | | context.jquery) {
Return (Context | | rootjquery)-FIND (selector);
HANDLE: $ (expr, context)
(which is just equivalent to: $ (context). Find (expr)
Context is classname or DOM node element
} else {
Equivalent to jquery (context). Find (selector)
Return this.constructor, find (selector);
}
Processing $ (FN) ===$ (document). Ready (FN)
else if (jquery.isfunction (selector)) {
return Rootjquery.ready (selector);
}
Process $ (jquery object)
if (selector.selector!== undefined) {
This.selector = Selector.selector;
This.context = Selector.context;
}
When the first argument is selector as a jquery object, the DOM nodes in selector are merged into the this object and returned to this object
return Jquery.makearray (selector, this);
}
}