jquery implementation of the principle of the simulation code-1 Core Parts _jquery

The core section implements two selectors, using ID and tag names, and also provides CSS settings and text settings.

Copy Code code as follows:

# represents the number of rows in the JQuery 1.4.2
Defining variables undefined easy to use
var undefined = undefined;
JQuery is a function that actually calls JQuery.fn.init to create objects
var $ = JQuery = window.$ = window.jquery//#19
= function (Selector, context) {
Return to New JQuery.fn.init (selector, context);
};
Used to check whether it is an ID
idexpr =/^# ([\w-]+) $/;
Set up the prototype object for jquery for all jquery object sharing
Jquery.fn = Jquery.prototype = {//#74
length:0,//#190
jquery: "1.4.2",//# 187
This is an example that offers only two options: ID and label
Init:function (Selector, context) {//#75
Handle HTML Strings
if (typeof selector = = "string") {
Are we dealing with HTML string or a ID?
Match = idexpr.exec (selector);
Verify a match, and that no context is specified for #id
if (Match && match[1]) {
var elem = document.getElementById (match[1]);
if (elem) {
This.length = 1;
This[0] = Elem;
}
}
else {
Use tag names 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 DOM objects represented
Size:function () {//#193
return this.length;
},
Used to set CSS styles
Css:function (name, value) {//#4564
This.each (
function (name, value) {
This.style[name] = value;
},
Arguments//Actual parameters are passed in array form
);
return this;
},
Use to set text content
Text:function (val) {//#3995
if (val) {
This.each (function () {
this.innerhtml = val;
},
Arguments//Actual parameters are passed in array form
)
}
return this;
},
Used to manipulate all DOM objects
Callback a custom callback function
Args Custom Parameters
Each:function (callback, args) {//#244
Return Jquery.each (this, callback, args);
}
}
The prototype of the INIT function is the prototype of 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 arguments supplied
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 a mock array object, representing a collection of all the DOM objects obtained through the selector, which has the length property of an array, represents the number of Dom objects represented, and can be traversed by subscript.

The 95-line Jquery.each is the basic method of using JQuery to iterate through the affine array, traversing each of these elements, callback represents the function that handles the DOM object. Normally, instead of using this method, we use each method of the JQuery object to traverse. The CSS and text methods of the JQuery object internally actually use each method of the jquery object to process the selected element.

The relationship between these functions and objects is as follows: JQuery prototype graph


The following script uses this script library.

Copy Code code as follows:

//prototyping operations
$ ("H1"). Text ("Hello, World."). CSS ("Color", "green");