Analysis of jQuery's chain call _ jquery-js tutorial

Not all browsers expose the dom object prototype. Therefore, you cannot implement cross-browser chained calling by simply extending the prototype method and using returnthis, jquery uses the package method to solve this problem. The core part of the jQuery method chain is three points:
1) jquery's Package function (that is, jQuery () to build the package object). This constructor can generate a package object full of native DOM objects.
It looks like this... (Of course, the scale and functions of the official database are much different from the implementation methods. I just wrote a rough Implementation Method ):
Er ............ My mistakes. If you are interested in trying the code, remember not to introduce the jQuery library. The name conflict.

The Code is as follows:

(Function (){
// For the sake of simplification, the subclass selector attribute selector is not supported. It only accepts the form such ". className "or" # id "or" tagName "and custom tool functions in combination between them (red) are described below
Function _ jQuery (els ){
This. elements = new Array ();
For (var I = 0; I <els. length; I ++ ){
Var element = els [I];
If (typeof element = 'string '){
Element = element. trim (); // prevents hand-drawn spaces from entering the front and back spaces.
Var sign = element. substr (0, 1 );
If (sign = "#") {// search by id
Element = document. getElementById (element. substr (1 ));
This. elements. push (element );
}
Else
If (sign = "."){
// Query by class name here a custom tool function for returning dom arrays by class name is used to getElementsByClassName
Element = getElementsByClassName (element. substr (1); // element is an array object at this time. This method is customized as shown in the following figure.
This. elements = this. elements. merge (element );
}
Else {// No identifier found by Tag Name
Element = document. getElementsByTagName (element); // The element is an array object.
This. elements = this. elements. merge (element); // this method can make the elements array only contain different dom objects, just like set.
}
}
Else {
This. elements. push (element );
}
}
}
/* Here, you can start to extend the prototype function of the package object, such
_ JQuery. prototype. addEvent = function (){.........}
*/Window ['jquery '] = function () {return new _ jQuery (arguments)}; if (! Window ['$']) window ['$'] = window ['jquery '];}) () // self-executed anonymous Function

OK. Insert the following simple html document to test it. (do not despise the nonstandard html writing rules... Test)

The Code is as follows:

My function addtion

Header1

Header2

Header3

Node1

Node2

Node3

Input:

The Code is as follows:

Var f = $ ('# header'). elements [0];
Using LES. write ("nodeName:" + f. nodeName + "=> Id:" + f. id)
/* A custom debugging panel tool that replaces alert. Because it is used to copy a book, it is a bit of a bug and its functions and operability are not very good, in the next two days, I may modify it and put it up. I can use alert instead of alert for debugging */

Output:

Input:

The Code is as follows:

Var e = jQuery ('P', 'P'). elements; // here, a few spaces are intentionally entered.
For (var I = 0; I Using LES. write ("nodeName:" + e [I]. nodeName + "=> Id:" + e [I]. id );
}

Output:

Although we have integrated several methods for dom object search, we can still see that it is very annoying to use circular statements to operate dom objects every time, in addition, many methods for this package object will be introduced based on this package, such as the addEvent method above, these methods are finally introduced to manipulate the native dom objects encapsulated in the object. Therefore, each method must introduce the for or while statement, which leads to the second core function ==> jQuery. each () {}; too late... Summary tomorrow
The tool functions used in this article (they are all useful functions ):

The Code is as follows:

// ClassName: Class Name tag: Search for parent within the range of tag names: Search for parent within this parent node
Function getElementsByClassName (className, tag, parent ){
Parent = parent | document; // The default value is document.
Var tag = tag | '*'; // All tags are searched by default.
Var elements = new Array ();
Var re = new RegExp ('(^ | \ s)' + className + '(\ s | $ )');
Var allList = parent. getElementsByTagName (tag );
Var element;
For (var I = 0; I <allList. length; I ++ ){
Element = allList [I];
If (element. className. match (re )){
Elements. push (element );
}
}
Return elements;
}

The Code is as follows:

If (! String. prototype. trim) {// remove leading and trailing Spaces
String. prototype. trim = function (){
Return this. replace (/^ \ s + | \ s + $/g ,'');
}
}

If (! Array. prototype. merge ){
Array. prototype. merge = function (arr) {// makes it possible to put an Array of objects with the same set characteristics into the same Array. Do not despise the even algorithm.
For (var I = 0; I <arr. length; I ++ ){
Var signals = false;
For (var j = 0; j <this. length; j ++ ){
If (arr [I] = this [j])
Signals = true;
}
If (! Signals) this. push (arr [I]);
}
Return this;
}
}