Jquery framework analysis-initial construction of jquery objects

This is the text for analyzing the jquery framework.
For jquery 1.3.2
Target readers must meet the following requirements:
1. Very familiar with HTML
2. Familiar with JavaScript syntax
3. Familiar with JavaScript Object-Oriented Knowledge
4. Familiar with jquery framework

Let's get down to the truth!
Jquery object initialization is written in anonymous functions.
Like this:

(Function () {alert ("jquery framework analysis ")})();

The first bracket declares a function, and the second bracket executes the function.
That is to say, the jquery framework has done some things during page loading (this anonymous function has been executed)
These tasks enable us to get page elements by $ ("# yourid") or $ (". yourclass ").
And encapsulate the obtained elements into jquery objects.

How do anonymous functions implement these functions?
First, the Framework defines two core objects.

Jquery = Window. jquery = Window. $ = function (selector, context ){}

One is jquery.
One is $
Both objects point to a function.
This function is the entry when we use the $ () or jquery () method.
This method returns an instance of jquery. FN. INIT (selector, context );
In fact, this instance is a jquery object.

What kind of object is a jquery object?
The jquery object is actually a JavaScript array.
This array object contains 125 methods and 4 attributes
The four attributes are
Current jquery Framework Version Number of jquery
Length indicates the number of elements in the array object.
Generally, context is directed to the htmldocument object.
The content of the selector passed in is as follows: # yourid or. yourclass.

If you use the $ ("# yourid") method to obtain the jquery object,
And there is only one element with the ID yourid in your page.
Then $ ("# yourid") [0] is the htmlelement.
It is the same as the element obtained by document. getelementbyid ("yourid ").

How is a jquery object constructed?
This object is just mentioned.

Jquery = Window. jquery = Window. $ = function (selector, context ){}

The framework not only defines a method for this object, but also defines its prototype)

Jquery. fn = jquery. Prototype = {// JSON object here}

The prototype is defined through a JSON object.
For example

{Init: function (selector, context) {// method body}, jquery: "1.3.2", // attribute size: function () {// method body }, //......}

The four attributes of the 125 method mentioned above are partially defined in this JSON object.

The first method in this JSON object is the init method.
That is, jquery. FN. INIT (selector, context) in the entry method );
This method works with a regular expression object to construct a jquery object.
The regular expression is:

Quickexpr =/^ [^ <] * (<(. | \ s) +>) [^>] * $ | ^ # ([\ W-] +) $/

The implementation logic of the init method is described below.
This method has two parameters
One is selector (selector)
One is context)
Selector is the variable we pass in with $ ("# yourid") or jquery (". yourclass ").
This parameter may not be a string or a variable of other forms.
We will introduce it later.
The context parameter is rarely used when jquery is used.
Note that both parameters are reflected in the returned jquery object (displayed with two attributes with the same name)

Next, let's take a look at the internal implementation logic of this method body.
// If there is no selector or the selector is empty, assign the document object to him.

Selector = selector | document;

// If the selector parameter is a DOM element, the jquery object is directly returned.
// You Can $ (document. getelementbyid ("Allen") to encapsulate your elements into jquery objects.

If (selector. nodetype) {This [0] = selector; this. Length = 1; this. Context = selector; return this ;}

// Typeof gets the object type. It is highly efficient to use three equal signs without type conversion. Two equal signs have type conversion by default.

If (typeof selector = "string "){

// The regular expression quickexpr we mentioned above is used here
// Match is actually an array
// The third element is the text that matches the regular expression.
// The first element is the text that matches the 1st sub-expressions of the regular expression (if any)
// The 2nd elements are the texts matching the 2nd subexpressions (if any)
// The 3rd elements are the texts matching the 3rd subexpressions (if any). Here is the element ID, which does not contain #

VaR match = quickexpr.exe C (selector );

// The regular expression matches the content and the match [1] is not empty or the context is empty.
// When Match [1] is not empty, selector is an HTML string, that is, you can use $ ("<div> xland </div>") to wrap the object into a jquery object.
// When the context is empty, the selector is the page element ID.

If (match & (Match [1] |! Context )){

// The selector is an HTML string.

If (Match [1]) {selector = jquery. Clean ([Match [1], context );}

// The selector is ID.

Else {

// Obtain the element

VaR ELEM = Document. getelementbyid (Match [3]);

// If this element is obtained but the element's ID attribute is not match [3], jump to the branch. What is the work done in the branch?

If (ELEM & ELEM. ID! = Match [3]) {return jquery (). Find (selector );}

// Encapsulate the page elements into jquery objects
// If ELEM is empty, an empty array is passed in. How does the framework handle this empty array?
// If it is not empty, jump into the IF (selector. nodetype) branch we mentioned earlier and construct the jquery object

VaR ret = jquery (ELEM | []);

// Set the context attribute of the jquery object

Ret. Context = document;

// Set the selector attribute of the jquery object

Ret. selector = selector;

// Return this object to the caller

Return ret ;}

So far
VaR OBJ = $ ("# yourid ");
The initial work of constructing the jquery object is complete.