Simulation code of jQuery implementation principle-1 core part

The core part implements two selectors: id and id, and css settings and text settings.
Copy codeThe Code is as follows:
// # Indicates the number of rows in jQuery 1.4.2.
// Define the variable undefined for ease of use
Var undefined = undefined;
// JQuery is a function that actually calls jQuery. fn. init to create an object.
Var $ = jQuery = window. $ = window. jQuery // #19
= Function (selector, context ){
Return new jQuery. fn. init (selector, context );
};
// Used to check whether it is an id
IdExpr =/^ # ([\ w-] +) $ /;
// Set the jQuery prototype object for all jQuery objects to share
JQuery. fn = jQuery. prototype = {// #74
Length: 0, // #190
Jquery: "1.4.2", // #187
// This is an example. There are only two options: id and id
Init: function (selector, context) {// #75
// Handle HTML strings
If (typeof selector = "string "){
// Are we dealing with HTML string or an ID?
Match = idExpr.exe c (selector );
// Verify a match, and that no context was specified for # id
If (match & match [1]) {
Var elem = document. getElementById (match [1]);
If (elem ){
This. length = 1;
This [0] = elem;
}
}
Else {
// Directly use the Tag Name
Var nodes = document. getElementsByTagName (selector );
For (var l = nodes. length, j = 0; j <l; j ++ ){
This [j] = nodes [j];
}
This. length = nodes. length;
}
This. context = document;
This. selector = selector;
Return this;
}
},
// Represents the number of DOM objects
Size: function () {// #193
Return this. length;
},
// Set the css style
Css: function (name, value) {// #4564
This. each (
Function (name, value ){
This. style [name] = value;
},
Arguments // The actual parameters are transmitted as arrays.
);
Return this;
},
// Set text content
Text: function (val) {// #3995
If (val ){
This. each (function (){
This. innerHTML = val;
},
Arguments // The actual parameters are transmitted as arrays.
)
}
Return this;
},
// Operation on all DOM objects
// Callback custom callback function
// Args custom Parameters
Each: function (callback, args) {// #244
Return jQuery. each (this, callback, args );
}
}
// The prototype of the init function is jQuery.
JQuery. fn. init. prototype = jQuery. prototype; // #303
// Used to traverse the elements contained in the jQuery object
JQuery. each = function (object, callback, args) {// #550
Var I = 0, length = object. length;
// No parameters are provided
If (args === undefined ){
For (var value = object [0];
I <length & callback. call (value, I, value )! = False;
Value = object [++ I])
{}
}
Else {
For (; I <length ;){
If (callback. apply (object [I ++], args) === false ){
Break;
}
}
}
}

In jQuery, The jQuery object is actually an array-like object, representing a set of all DOM objects obtained through the selector. It has the length attribute like an array, represents the number of DOM objects, and can be traversed by subscript.

Row 95 jQuery. each is the basic method in jQuery to traverse this imitation array and process each element. callback indicates the function to process this DOM object. In general, instead of using this method, we use the each method of the jQuery object for traversal. The css and text methods of jQuery objects use the each method of jQuery objects internally to process the selected elements.

For the relationship between these functions and objects, see the jQuery prototype diagram.


The following script uses this script library.
Copy codeThe Code is as follows:
// Prototype operation
$ ("H1"). text ("Hello, world." ).css ("color", "green ");