Simulation code of jQuery principles-1 core part

Recently I have read jQuery 1.4.2. For ease of understanding, I want to simulate the simple code of jQuery's core. Easy to learn.

The core part implements two selectors: id and id, and css settings and text settings.

1 // # indicates the number of rows in jQuery 1.4.2
2
3 // define the variable undefined for ease of use
4 var undefined = undefined;
5
6 // jQuery is a function. In fact, it calls jQuery. fn. init to create an object.
7 var $ = jQuery = window. $ = window. jQuery // #19
8 = function (selector, context ){
9 return new jQuery. fn. init (selector, context );
10 };
11
12 // used to check whether it is an id
13 idExpr =/^ # ([\ w-] +) $ /;
14
15 // set the jQuery prototype object for all jQuery objects to share
16 jQuery. fn = jQuery. prototype = {// #74
17
18 length: 0, // #190
19
20 jquery: "1.4.2", // #187
21
22 // This is an example. There are only two options: id and id
23 init: function (selector, context) {// #75
24
25 // Handle HTML strings
26 if (typeof selector = "string "){
27 // Are we dealing with HTML string or an ID?
28 match = idExpr.exe c (selector );
29
30 // Verify a match, and that no context was specified for # id
31 if (match & match [1]) {
32 var elem = document. getElementById (match [1]);
33 if (elem ){
34 this. length = 1;
35 this [0] = elem;
36}
37}
38 else {
39 // use the tag name directly
40 var nodes = document. getElementsByTagName (selector );
41 for (var l = nodes. length, j = 0; j <l; j ++ ){
42 this [j] = nodes [j];
43}
44 this. length = nodes. length;
45}
46
47 this. context = document;
48 this. selector = selector;
49
50 return this;
51}
52 },
53
54 // Number of DOM objects
55 size: function () {// #193
56 return this. length;
57 },
58
59 // set the css style
60 css: function (name, value) {// #4564
61 this. each (
62 function (name, value ){
63 this. style [name] = value;
64 },
65 arguments // The actual parameters are passed as Arrays
66 );
67 return this;
68 },
69
70 // used to set text content
71 text: function (val) {// #3995
72 if (val ){
73 this. each (function (){
74 this. innerHTML = val;
75 },
76 arguments // The actual parameters are transmitted as arrays.
77)
78}
79 return this;
80 },
81
82 // used to operate all DOM objects
83 // callback custom callback function
84 // args custom Parameters
85 each: function (callback, args) {// #244
86 return jQuery. each (this, callback, args );
87}
88
89}
90
91 // the prototype of the init function is jQuery.
92 jQuery. fn. init. prototype = jQuery. prototype; // #303
93
94 // used to traverse the elements contained in the jQuery object
95 jQuery. each = function (object, callback, args) {// #550
96
97 var I = 0, length = object. length;
98
99 // no parameters are provided
100 if (args === undefined ){
101
102 for (var value = object [0];
103 I <length & callback. call (value, I, value )! = False;
104 value = object [++ I])
105 {}
106}
107
108 else {
109 for (; I <length ;){
110 if (callback. apply (object [I ++], args) === false ){
111 break;
112}
113}
114}
115}
116

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.

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

Original article: http://www.cnblogs.com/haogj/archive/2010/08/01/1789712.html