Simulation code of jQuery's implementation principle -1 Core part_jquery

The core part implements two selectors, using id and tag name, and can also provide css settings and text settings.

Copy code The code is as follows:

// # Represents the corresponding in jQuery 1.4.2 Number of lines
// Define variable undefined for convenience
var undefined = undefined;
// jQuery is a function, in fact, jQuery.fn.init is called to create an object
var $ = jQuery = window.$ = window.jQuery // #19
= function (selector, context) {
return new jQuery.fn.init(selector, context);
};
// Used to check if it is An id
idExpr = /^#([w-] )$/;
// Set the prototype object of jQuery for sharing by all jQuery objects
jQuery.fn = jQuery.prototype = { // #74
length: 0, // #190
jquery: "1.4.2", // # 187
// This is an example, only providing two selection methods: id and tag name
init: function (selector, context) { // #75
// Handle HTML strings
if (typeof selector === "string") {
// Are we dealing with HTML string or an ID?
match = idExpr.exec(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 {
// Use tag name directly
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;
}
},
//The number of represented DOM objects
size: function () { // #193
return this.length;
} ,
// Used to set css style
css: function (name, value) { // #4564
this.each(
function (name, value) {
this.style [name] = value;
},
arguments // The actual parameters are passed in the form of an array
);
return this;
},
// Used to set the text Content
text: function (val) { // #3995
if (val) {
this.each(function () {
this.innerHTML = val;
},
arguments // The actual parameters are passed in the form of array
)
}
return this;
},
// Used to operate on all DOM objects
// callback Customized callback function
// args Customized parameters
each: function (callback, args) { // #244
return jQuery.each(this, callback, args);
}
}
// The prototype of the init function is also the prototype of jQuery
jQuery.fn.init.prototype = jQuery.prototype; // #303
// Used to traverse the jQuery object contained Elements of
jQuery.each = function (object, callback, args) { // #550
var i = 0, length = object.length;
// No parameters 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 that represents the selector The obtained collection of all DOM objects has a length attribute like an array, indicating the number of DOM objects represented. It can also be traversed through subscripts.

The jQuery.each on line 95 is the basic method used in jQuery to traverse this imitation array and traverse each element in it. The callback represents the function that processes this DOM object. Normally, we do not use this method, but use the each method of the jQuery object to traverse. Internally, the jQuery object's css and text methods actually use the jQuery object's each method to process the selected element.

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


The following script uses this script library.

Copy code The code is as follows:

// Prototype operation
$("h1" ).text("Hello, world.").css("color", "green");