jquery prototype method first,last,eq,slice source code Analysis

The first 3 methods of these 4 methods are commonly seen, but the slice method may be thought of as an array method, in fact, Slice is also a prototype of jquery, but the underlying approach is to serve other methods (more specifically, the EQ Method of service), First of all, look at these methods of how the foreground is used;

EQ Overviewgets the nth elementParameters

An integer that indicates the position of the element, starting from the last element in the collection. (1 count)

Exampleparameter Index Description:

// gets the second element of a match // HTML Code:<p> This was just a test.</p> <p> so is this</p>//jQuery code:
    
     $ ("P"). EQ (1
     )
     // 
     Result:
     
     this </p>]
    

parameter-index Description:

// gets the second element of a match // HTML Code:<p> This was just a test.</p> <p> so is this</p>//jQuery code:
    
     $ ("P"). EQ ( -2
     )
     // 
     Result:
     <p> This is just a test.</p>]
    

First ()gets the first elementExampleDescription:

Gets the first element of a match

// HTML Code:<ul>    <li>list Item 1</li>    <li>list item 2</li>    <li >list Item 3</li>    <li>list Item 4</li>    <li>list item 5</li></ul>/ /jQuery Code:$ (' li '). First ()// Result:<li> List item 1</li>]

Last ()Get last elementExampleDescription:

Gets the last element of a match

// HTML Code:<ul>    <li>list Item 1</li>    <li>list item 2</li>    <li >list Item 3</li>    <li>list Item 4</li>    <li>list item 5</li></ul>/ /jQuery Code:$ (' li '). Last ()// Result:<li> List item 5</li>]

Let's look at the source code in 1.7.1:

eqfunction(i) {i= +i; returni = = = 1? This. Slice (i): This. Slice (I, i + 1 ); }, First:function() {        return  This. EQ (0 ); }, Last:function() {        return  This. EQ (-1 ); }, Slice:function() {        return  This. Pushstack (Slice.apply ( This, arguments),"Slice", slice.call (arguments). Join (",") ); },

Things are not much and are quoted each other, first we can simply divide their relationship first,last>eq>slice>pushstack;

Therefore, the output of the most red result depends on the Pushstack method, this method introduced in the previous essay http://www.cnblogs.com/yy-hh/p/4636106.html interested can understand the next or reference source, so directly from the slice method;

In the source code can be seen directly ruturn pushstack processing results, and in the Pushstack method requires 3 parameters, the first is an array of elements to be processed, the second is the method of invocation, the third is the incoming selector, What really works is that the two remaining parameters of the first parameter are used for debugging, he eventually returns a new jquery object, and adds a Prevobject property to the object to perform the original or jquery object that was called when the method was executed. Please refer to the essay about Pushstack for details. The following emphasis is on the processing of the parameters:

this, arguments)

This is an array of interception, in fact, a class array or a special array to convert to a pure array method, the ToArray method we described earlier is also the case

function () {        returnthis, 0 );    },

It's just that this is not about needing all the elements, but just preserving the DOM elements of the digital subscript, in order to make it easier to understand how we call this method in the foreground and then observe the changes in the source code:

    < Script >         $ ('div'). Slice ();     </ Script >

Slicefunction() {Console.log ( This); Console.log ( This. ToArray ()); Console.log (Slice.apply ( This, arguments)); return  This. Pushstack (Slice.apply ( This, arguments),"Slice", slice.call (arguments). Join (",") ); },//Object {0: <div>, 1: <div>, Length:2, Prevobject:object, context:htmldocument→test.html, selector: " Div "}//Array [<div>, <div>]//Array [<div>, <div>]

The result is not very obvious? Before processing is a jquery object, with many properties and methods in use the ToArray method and slice.apply (this, arguments) The result is the same only reserved is two DOM elements, Not all non-arrays can be converted in this way. It is possible to use a For loop if the index is subscript from 0 and has the length property. But since you can use the ToArray method directly do not have to write an object to impersonate once, in fact, the ToArray method is only arguments for 0 of the special case, ToArray method is also written very clearly, if I call this method plus the parameter is not the same as:

$ (' div '). Slice (0,1);

Object {0: <div>, 1: <div>, Length:2, Prevobject:object, context:htmldocument→test.html, selector: "Div"  <div>, <div><div>]

The second argument "slice" is from this method into the stack as debugging, the third parameter is a string arguments is an array of classes so the object to impersonate the join method in the above example of the call is "0,1" finally to see the next slice method final return results

Console.log ($ (' div '). Slice (0,1));

Object {0: <div>, Length:1, Prevobject:object, context:htmldocument→test.html, selector: "Div.slice (0,1)"}

If it's not clear enough, you can see the catalogue

Console.dir ($ (' div '). Slice (0,1));

The Prevobject property points to an object that does not call the slice (that is, the Pushstack) method when the Selector property tells us what element is calling what method into the stack and what the parameter is

Understanding the Slice method The EQ method is clear:

function (i) {        = +i;         return i = = = 1?             This . Slice (i):             this. Slice (i, i + 1 );    },

Returning the result of the slice, the example above is actually an EQ method call conversion, because normally we will not call the slice method separately for example:

$ (' div '). EQ (0);

After execution is actually return This.slice (0,1);

The first method is the special case of the EQ method when the value is 0 or 1, so it is not recommended to use this method, not a good point called take off the pants fart superfluous ah, nice point is to increase the cost of calls AH.

Analysis is complete: If you read this article patiently or unintelligible may have the following reasons:

1.js Foundation is not solid, such as the use of slice,apply and other methods

2. There is no understanding of the Pushstack method, this method is the underlying support method of many jquery methods must first understand

jquery prototype method first,last,eq,slice source code Analysis