About the each method in jQuery (what does jQuery do?) _ jquery

This article mainly introduces the each method in jQuery. If you need it, you can refer to section 1. It is estimated that many people will use the each method in jQuery.

Let's take a look at what jQuery has done.

Find the each source code in jquery:

The Code is as follows:

Each: function (object, callback, args ){
Var name, I = 0,
Length = object. length,
IsObj = length = undefined | jQuery. isFunction (object );

If (args ){
If (isObj ){
For (name in object ){
If (callback. apply (object [name], args) === false ){
Break;
}
}
} Else {
For (; I <length ;){
If (callback. apply (object [I ++], args) === false ){
Break;
}
}
}

// A special, fast, case for the most common use of each
} Else {
If (isObj ){
For (name in object ){
If (callback. call (object [name], name, object [name]) === false ){
Break;
}
}
} Else {
For (; I <length ;){
If (callback. call (object [I], I, object [I ++]) === false ){
Break;
}
}
}
}

Return object;
},

This code is still relatively simple and should be fine.

To test this, I wrote the following JavaScript code;

The Code is as follows:

$. Each ($ (". demo"), function (){
Console. log ("show ");
});

Then add another html:

The Code is as follows:

Then debug with the jQuery source code to get the correct result. But unfortunately.

As you can see, the object here is not the three html objects I want, and is actually the eight built-in data types of js.

Then we added a piece of code in jquery's source code:

The Code is as follows:

Console. log (Object. prototype. toString (object ));
Console. log (length );

The input is as follows:

That is to say, when the document is loaded, jQuery will use each to traverse the dom object, even if no

The Code is as follows:

$ (Function (){
});

After the specified object is traversed, the Child-level elements are continuously traversed by bubbling.

2. Use callback function parameters based on jQuery source code

The Code is as follows:

$. Each ($ (". demo"), function (a, B ){
Console. log (a + "" + $ (a). attr ("class "));
})

We can see from the source code:

The Code is as follows:

Callback. call (object [I], I, object [I ++])

Finally, the current object is passed to the callback function through the call method, so you can use the attributes of the current object as above. Of course, this can also be called directly.

For example, I pass $ (". demo") as an object to $. each ()

For example, in some cases, it is not a passed jQuery or html object. But an Object or array.

There are many other objects or methods in array.

In this way, more results can be achieved.

3. Use call or apply to implement the callback mode.

From the code above, we can see that:

The Code is as follows:

Callback. call (obj, args)

The Code is as follows:

Callback. apply ([obj], args)

For code like this, you only need to pass the callback function to implement your own calls, which is of no small use to improve code reuse.

However, there are also some disadvantages, such as reduced code readability and increased coupling.

The occasional gains are recorded to prevent forgetting!