A brief analysis of jQuery's chain calls_jquery

The core part of the jQuery-style method chain is three points:
1) jquery’s wrapper function (that is, jQuery(), used to build the wrapper object), this constructor can generate a wrapper containing a native DOM object device object.
It probably looks like this... (Of course, the scale, function and implementation method are much different from the official library. I just wrote a rough implementation method):
Uh... My mistake, please If you are interested in trying the code, remember not to import the jQuery library. There is a naming conflict

Copy the code The code is as follows:

(function(){
//For simplicity, it does not support subclass selectors, attribute selectors, etc., only accepts the form ".className" or "#id" or "tagName" and the ones between them. The combined form of custom tool functions (red) will be 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(); //Prevent hand pumping from inserting too much before and after Space
var sign = element.substr(0, 1);
if (sign == "#") { //Find
element by id = document.getElementById(element.substr(1) );
this.elements.push(element);
}
else
if (sign == ".") {
//Search by class name A customization is used here The tool function getElementsByClassName that returns the dom array by class name
element = getElementsByClassName(element.substr(1)); //element is an array object at this time, this method is customized, see below
this.elements = this .elements.merge(element);
}
else { //No identifier, search by tag name
element = document.getElementsByTagName(element); //element is an array object at this time
this.elements = this.elements.merge(element);//This method can make only different DOM objects exist in the elements array, just like set
}
}
else {
this.elements.push(element);
}
}
}
/*Here you can start extending the prototype function of the wrapper object such as
_ jQuery.prototype.addEvent=function() {………}
*/ window['jQuery'] = function(){ return new _jQuery(arguments) }; if (!window['$']) window['$'] = window['jQuery ']; })()//Self-executing anonymous function

OK. Insert the following simple html document to test it (don't despise the fact that this html is not written in a standardized way...just for testing)

Copy code The code is as follows:

header1

header2

< p id="header3"class="entrance">
header3

---

node1

node2

< ;p id="content3" class="topic">
node3

---

Enter:

Copy code The code is as follows:

var f=$('#header').elements[0];
consoles.write ("nodeName: " f.nodeName "==> Id:" f.id)
/*A customized debugging panel tool that replaces alert, because the one I am using is copied from a certain book. It’s a bug and the function and operability are not very good. I may modify it in two days and post it. You can use alert instead for debugging yourself*/

Output:

Input:

Copy code The code is as follows :

var e=jQuery(' div ',' p').elements; //A few extra spaces are deliberately added here
for(var i=0;iconsoles.write("nodeName: " e[i].nodeName "==> Id: " e[i].id);
}

Output:

Although it integrates several methods of dom object search, you can still see that it is very irritating to use loop statements to operate dom objects every time things, and then many methods for this wrapper object will be introduced based on this wrapper, such as the addEvent method above, etc. These methods are ultimately introduced to operate the native DOM object wrapped in the object, so each method A for or while statement must be introduced, which leads to the second core function ==> jQuery.each(){}; It’s too late... I will summarize it tomorrow
The tool functions used in this article (all are very useful Function):

Copy code The code is as follows:

//className: class name tag: in Find parent within the scope of this tag name: Search within this parent node
function getElementsByClassName(className, tag, parent){
parent = parent || document; //The default is document
var tag = tag || '*'; //The default is to find all tags
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;
}

Copy code 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){ //Make the array have set-like characteristics. The same objects cannot be put into the same array. Don’t despise the even algorithm. The problem is just to explain the principle
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;
}
}