JQuery. prototype. init selector source code analysis _ jquery

The core idea of jQuery can be simply summarized as "querying and operating the dom". Today we mainly analyze jQuery. prototype. the init selector constructor can process parameters in the selector. If you are interested, you can understand the knowledge provided in this Article. I. Summary of source code ideas
Summary:
The core idea of jQuery can be simply summarized as "querying and operating dom". Today we mainly analyze the jQuery. prototype. init selector constructor to process parameters in the selector function;
The parameter of this function is the parameter in the execution function of jQuery () ===$ (). You can read the basic framework article of jQuery that I wrote before, and then read it again.
Train of Thought Analysis:
The following describes the usage of jQuery (used to query dom). In each case, a selector instance (called jQuery object (A nodeList object) is returned, which contains the queried dom node ):
1. Process $ (""), $ (null), $ (undefined), $ (false)
If the parameter is invalid, the jQuery object does not contain dom nodes.
2. Process $ (DOMElement)
If the parameter is a node element, the jQuery object contains the node element of this parameter, add the attribute values as parameter node elements, the context and length attributes of 1, and use [] to access dom nodes in jQuery objects.
Example 2.1:

The Code is 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. Process $ (HTML string)
If the first parameter is an HTML string, the jQuery object contains the childnodes node in the fragment file fragments created by the jQuery. clean function.
Example 3.1:

The Code is as follows:

Var jqHTML = $ ('Article title

Content

');
Console. log (jqHTML );//[,

];

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

The Code is as follows:

Var jqHTML = $ ('

', {Class: 'css-class', data-name: 'Data-val '});

Console. log (jqHTML. attr ['class']); // css-class
Console. log (jqHTML. attr ['data-name']); // data-val

4. Process $ (# id)
If the first parameter is a # add element id, The jQuery object contains a unique element node with this id,
Add the context, selector, and length attributes whose attribute values are document, parameter string, and 1 respectively, and use [] to access dom nodes in jQuery objects.
Example 4.1:

The Code is as follows:

Var jq = $ ('# iner ');

Console. log (jq. [0]); // contains dom node Elements
Console. log (jq. length); // 1
Console. log (jq. context); // document
Console. log (jq. selector); // container

5. Process $ (. className)
If the first parameter is A. className, The jQuery object has a label element named className, and adds a property value as the parameter string, selector of the document, and context attribute.
The actual code is:

The Code is as follows:

Return jQuery (document). find (className );

6. Process $ (. className, context)
If the first parameter is. className and the second parameter is a context object (it can be. className (equivalent to processing $ (. className. className), jQuery object or dom node ),
The jQuery object contains the child node element whose class name is className in the context object of the second parameter, and adds the context and selector attributes.
The actual code is:

The Code is as follows:

Return jQuery (context). find (className );

Example 6.1:
Html code:

The Code is as follows:

Main Content title

Main title

Content title

Title

JavaScript code:

The Code is as follows:

Var jq, context;
Context = '. sub ';
Var jq = $ ('. title', context );
Console. log (jq. text (); // content title
Console. log (jq. context); // document
Console. log (jq. selector); //. sub. title
Context = $ ('. sub ');
Var jq = $ ('. title', context );
Console. log (jq. text (); // content title
Console. log (jq. context); // document
Console. log (jq. selector); //. sub. title
Context = $ ('. sub') [0];
Var jq = $ ('. title', context );
Console. log (jq. text (); // content title
Console. log (jq. context); // a node element whose className is sub
Console. log (jq. selector); //. title

7. Process $ (fn)
If the first parameter is the fn function, $ (document). ready (fn) is called );
Example 7.1:

The Code is as follows:

$ (Function (e ){
Console. log ('domaincontent is loaded ');
})
// The above code is equivalent:
JQuery (document). ready (function (e ){
Console. log ('domaincontent is loaded ');
});

8. Process $ (jQuery object)
If the first parameter is a jQuery object, the preceding analysis shows that if the parameter is a # add element id when querying the dom, the returned jQuery object will add a property value of the parameter string, the selector of the document, and the context attribute.
Example 8.1:

The Code is as follows:

Var jq = $ ('# iner ');
Console. log (jq. selector); // # container
Console. log (jq. context); // document

What should I do when $ ('# iner') appears? Similarly, the returned jQuery objects are the same as those in case 5 and 6.
Example 8.2:

The Code is as follows:

Var jq2 = $ ('# iner '));
Console. log (jq2.selector); // # container
Console. log (jq2.context); // document

Ii. source code annotation Analysis
[Based on jQuery1.8.3]

The Code is 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 that start and end with <> are HTML and skip the regex check
Match = [null, selector, null];
} Else {
Match = rquickExpr.exe c (selector );
}
// Match html or make sure no context is specified for # id
// If match [1] is not null, it is an html string. If match [2] is not null, It is 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 composed of childnodes in the document fragment.
Selector = jQuery. parseHTML (match [1], doc, true );
// If match [1] is a null single-Tag Element (for example:

) And context is the object literal.
If (rsingleTag. test (match [1]) & jQuery. isPlainObject (context )){
// If the context object is not empty, add the attributes of the object to the only dom node in the selector array.
This. attr. call (selector, context, true );
}
// The parameters of the merge function should be two arrays to merge the items in the second array into the first array. this is not an array,
// This is the Instance Object of the selector init constructor. this object inherits the length attribute of the jQuery. prototype object (0 by default), so you can understand the merge function source code.
// Combine the dom items in selector into this object and return this 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 and Opera return items
// By name instead of ID
// This bug exists in ie6, 7, and Opera. When a tag name is equal to a tag id value,
// The document. getElementById (# id) function returns the Tag Element that appears in advance.
If (elem. id! = Match [2]) {
// If the preceding Bug exists, the child element set of the document returned by the find function is returned.
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, $ (...))
// The 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)
// The context is a className or dom node element.
} Else {
// Equivalent to jQuery (context). find (selector)
Return this. constructor (context). find (selector );
}
// Process $ (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 parameter selector is a jQuery object, the dom node in the selector is merged into the this object and the this object is returned.
Return jQuery. makeArray (selector, this );
}
}