Implementation principle and application example of pushStack in jQuery _ jquery

This article mainly introduces the implementation principle and application example of pushStack in jQuery. pushStack is a very important function in the jQuery Kernel. many jQuery internal functions frequently use it to master this function, it is helpful to understand the running principle of jQuery. if you need it, you can refer to pushStack as a very important function in the jQuery Kernel. it is so important that many jQuery internal functions frequently use it. In general, although it is rarely used, it is not only helpful to understand the running principle of jQuery, but also to facilitate more advanced jQuery operations.

As the name suggests, pushStack is an inbound stack. as a data structure, it is a special linear table that can only be inserted or deleted at one end. When data is imported into the stack, it is similar to when we enter the elevator, and then go first, for example:

The stack in jQuery is not a real stack. Instead, it attaches an attribute to the jQuery object, pointing to the previous object of the current object, and returns the previous element through the end method. As follows:

123《script》$('span').eq(0).css('fontSize','20px').end().fadeOut(2000);《script》

The above code sets the font size of the first span to 20 PX, and sets fadaout for all spans within 2 seconds.

Background ('background', 'blue') sets the background of all p to blue. So what is pushStack's principle? why can I use css to operate the imported DOM object? Let's take a look at the pushStack source code in jQuery:

pushStack: function( elems ) { // Build a new jQuery matched element set var ret = jQuery.merge( this.constructor(), elems ); // Add the old object onto the stack (as a reference) ret.prevObject = this; ret.context = this.context; // Return the newly-formed element set return ret;}//jQuery.mergemerge: function( first, second ) { var l = second.length, i = first.length, j = 0; if ( typeof l === "number" ) { for ( ; j < l; j++ ) {  first[ i++ ] = second[ j ]; } } else { while ( second[j] !== undefined ) {  first[ i++ ] = second[ j++ ]; } } first.length = i; return first;}

The implementation of pushStack is relatively simple, mainly involving the jQuery static method merge, which is used to merge objects. the design idea is based on the first object, it is important to append the attribute (0 to n) of the second object. Return to the pushStack function. First, define a local variable ret to store the merged object, store the prevObject and context attributes for the object, and finally return the merged ret object. Note the following points:
1. this. constructor is the jQuery constructor init, so this. constructor () returns a jQuery object.
2. Since the object returned by the jQuery merge function is attached to the first function by the second function, ret is also a jQuery object, here we can explain why DOM objects in and out of pushStack can also be operated using the CSS method.
3. the returned object's prevObject attribute points to the previous object, so you can find the previous object on the stack through this attribute.