Jquery direct element operations

Jquery gives me the greatest impression that the operation elements are extremely convenient. You can easily select DOM objects and then perform operations.
How does jquery implement direct use of DOM elements?
To allow DOM objects to directly use methods, either directly add methods to DOM objects or trace the methods in prototype

 

 1. Add a method directly to the object

VaR Ele = Function (){ Return Get DOM object}
VaR O = {Method1: Function () {}, Method2: Function (){},...}
Manually add the methods in O to the ele object one by one

In this way, the speed seems to be slow.

 
2. Add a method directly on the element constructor.

VaR Ele = Function (){ Return Get DOM object}
Element. Prototype = {Method1: Function () {}, Method2: Function (){}...}

Because all DOM objects are inherited from elements. Therefore, all DOM elements can be used in the methods added on the element.
In this way, it is quite convenient to fundamentally solve the problem. However, the native attributes are damaged. At the same time, IE8 and the following element constructors are not supported.

 

It seems that this is the end, because the DOM object must use methods, and the methods should all be in the DOM object.
However, in turn, if you do not use the method directly, but indirectly, and then use the method, it is convenient.

 

3 indirect object Method

3.1 object-only approach

// Based on the first method above, make improvements
VaR Ele = Function (){ This [0] = Function () {return DOM object }}
VaR O = {Method1: Function () {}, Method2: Function (){}...}
Ele. Prototype = O
VaR A = new Ele

In this case, a can operate on the O method. However, Dom cannot be easily returned.

3.2 jquery Method

VaR F = Function (){ Return New F. FN. INIT ();}
F. fn = f. Prototype = {
Init: Function (){ This [0] = ;},
Get: Function (){ Return A ;},
}
F. FN. init. Prototype = f. FN
Console.info (f ('body'). Get (3 ))

In fact, this is almost the same as the above object method.
Here, all attributes in init are DOM elements and length. Prototype attributes are some methods.
Now console. Log (f (M) displays an object that contains the above method. So why is it an array when we look at the content output by jquery?

 

3.3 display jquery values as Arrays

VaR F = Function (){ Return New F. FN. INIT ();}
F. fn = f. Prototype = {
Init: Function (){ This [0] =; This . Length = 1 ;}, // jquery here return this. Actually, this is useless.
Get: Function (){ Return A ;},
Splice: []. splice
}
F. FN. init. Prototype = f. FN
Console.info (f ('body '))

The displayed value is an array. This is a problem of firebug display.

 

4. Other Ideas
In fact, the jquery object is an object composed of DOM objects and methods. Instead of putting other methods in the prototype chain of the DOM object or directly in the attribute.
Jquery objects have two features.
1: The DOM object is returned in the constructor.
2: The method is in the prototype.

In fact, we can also use other methods to imitate jquery. As follows:

VaR O = {M1: Function (){ Return A;}, method2: Function (){}}
VaR Ele = Function (S ){
VaR M = Function (){ This [0] = s; This . Length = 1 ;}
M. Prototype = o
M. Prototype. Splice = m;
Return ( New M );
}
VaR S = New Ele ('body ')
Console.info (s)

5. Sighs

The success of jquery makes me feel that the technology is good enough to serve the masses better, and also to serve friends who write JavaScript better. Therefore, it is more convenient to use JS and to use JS with laziness. It is best to allow everyone to quickly get started with JS, which is the greatest success.
Only the simplest method is the best method that an idiot can use.