What does each method of jQuery do

1. Many people will probably use the each method in jQuery.

Take a look at what jQuery does.

Find each source in jquery:

 
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 relatively simple and should be fine.

To test this, I wrote the following section of js;

 
$.each($(".demo"),function(){ 
console.log("show"); 
}); 

Then add a paragraph of HTML:

 
<a href="" class="demo"></a> 
<a href="" class="demo"></a> 
<a href="" class="demo"></a> 

Then take the jQuery source code to debug, think you can get the right results. But I'm sorry.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403051653394.gif? 201425165350 ">  
As you can see, the objects here are not the three HTML objects I want, but the eight built-in js data types.

Later, we added a piece of code in the source code of jquery:

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

The subsequent input is as follows:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201403/201403051654215.gif? 201425165432 ">  
That is, jQuery iterates over the dom object with each when the document is loaded, even if it is not used

 
$(function(){ 
}); 

After traversing the specified object, the parent element continues to bubble over.

2. Use callback function parameters according to the source code of jQuery

 
$.each($(".demo"),function(a,b){ 
console.log(a + "" + $(a).attr("class")); 
}) 

From the source you can see:

 
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 properties in the current object as above. Of course, you can also call this directly.

If something is more complicated, for example, here I'm passing $(".demo") as an object to $.each()

For example, sometimes the jQuery or HTML object is not passed. It's an Object or an array.

There are many other objects or methods in array.

This will give you more effect.

3. Implement the callback pattern using call or apply.

As you can see from the above code:

 
callback.call(obj,args) 

 
callback.apply([obj],args) 

Code like this, where you just need to pass the callback function to implement the call itself, is useful for improving the degree of reuse of the code.

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

Occasionally get, to record it, in case you forget!