Each iterator for jquery
Each of the jquery methods is used in 2 situations:
$.each () function $ (selector). each ()
The $.each () function and $ (selector). each () is not the same, and the latter is dedicated to traversing a jquery object and is serving the internal jquery.
The $.each () function can be used to iterate over any collection, whether it is a "name/Value" object (JavaScript Object) or an array. In the case of an iterative algebraic group, the callback function passes an array index and the corresponding array value as an argument each time.
(This value can also be obtained by accessing the This keyword, but JavaScript always takes the this value as an object, even if it is a simple string or numeric value.) The method returns its first argument, which is the object of the iteration.
The instance method of jquery is ultimately a static method of invocation.
Each of these instance methods is as follows:
Visible inside is a static method that is called directly:
Each:function (callback, args) { return Jquery.each (this, callback, args);},
Jquery.each static method:
Each:function (obj, callback, args) { var value, i = 0, length = obj.length, isarray = isarraylike (obj); C8/>if (args) { if (IsArray) { for (; i < length; i++) { value = callback.apply (Obj[i], args); if (value = = = False) {break ; }} } else { for (i in obj) { value = callback.apply (Obj[i], a RGS); if (value = = = False) {break ; }} }
The principle of implementation is almost identical, but increases the judgment of the parameters. The object is traversed with a for in, and the array is used for traversal.
jquery can be more than one collection of array dom, so in the process of dealing with each DOM is often handled separately, so it is generally necessary to call the This.each method, the following code:
Dequeue:function (type) { return This.each (function () { jquery.dequeue (this, type); });
In addition to the simple traversal of the iterator, the most used within jquery is the abstraction of the interface , the same function of the code function merge processing:
For example one:
Jquery.each ("Boolean number String function Array Date RegExp Object Error". Split (""), Function (i, name) { Class2typ e["[Object" + name + "]"] = Name.tolowercase ();});
For example two:
Jquery.each ({ mouseenter: "MouseOver", mouseleave: "Mouseout", pointerenter: "Pointerover", Pointerleave: "Pointerout"}, Function (orig, fix) { //Processed code});
You can see the above code method, for the same function, saving a lot of code space.
Instance code:
<! DOCTYPE html>
Understanding Callback Functions
Functions are the first class of objects, which is an important concept in JavaScript. means that functions can be used like objects in the first class of management, so functions in javascript:
Can "store" in a variable
Can be passed as an argument to a function
Can be created in a function
Can be returned from the function
A callback function is a function that is called through a function pointer. If you pass the pointer (address) of the function as an argument to another function, when the pointer invokes the function it points to, we say this is a callback function. The callback function is not called directly by the implementing party of the function, but is invoked by another party when a particular event or condition occurs, and is used to respond to the event or condition .
So as can be seen from the above, the callback is essentially a design principle, and jquery's design principles follow this pattern.
In the backend programming language, the traditional function enters data as a parameter and returns a value using the return statement. Theoretically, there is a return statement at the end of the function, structured as an input and an output. A simple understanding function is essentially a mapping of the implementation process between input and output .
However, when the implementation of the function is very long, do you choose to wait for the function to finish processing, or use the callback function for asynchronous processing? In this case, it becomes critical to use a callback function, such as an AJAX request. If the callback function is used for processing, the code can proceed with other tasks without having to wait. In real-world development, asynchronous calls are often used in JavaScript.
The design of the callback is everywhere in jquery:
Asynchronous callbacks:
Event Handle Callback
$ (document). Ready (callback); $ (document). On (' click ', Callback)
Ajax asynchronous request success failure callback
$.ajax ({ URL: "aaron.html", context:document}). Done (function () { //successfully executed}). Fail (function () { // Failure execution);
The animation finishes executing the callback:
$ (' #clickme '). Click (function () { $ (' #book '). Animate ({ opacity:0.25, left : ' +=50 ', height: ' Toggle ' }, the function () { //Animation complete.}) ;
All of this is a direct use of the jquery callback, and the basic use of this is to pass the anonymous function as an argument to another function or method. And all of these have a characteristic that the code executed is asynchronous .
Synchronous callbacks:
Of course, callbacks are often used in scenarios where callback is more than just handling asynchronous, typically synchronous (time-consuming tasks), such as requiring a callback function to execute after certain operations are performed.
An example of using callbacks in a synchronous (blocking) order to execute callbacks after the Test1 code execution is complete callback
var test1 = function (callback) { //Perform long operation callback ();} Test1 (function () { //execution method in callback});
So understand the 2 most important points of the callback function:
1. One callback function passed as a parameter to another function is that we simply pass the function definition. We did not execute the function in the parameter. We don't pass a function like our usual execution function with a pair of execution parentheses ()
2. The callback function will not be executed immediately, it will be "callback" at a specific point in the function containing it.
Instance code:
<! DOCTYPE html>
The flexible use of callbacks
We often use function callbacks like this:
Event Trigger Notification
Resource Load Notification
Timer delay
Ajax, animation notifications, and more.
All of this is a single way of handling event listener callbacks, but jquery designs the use of callback functions as a higher image for decoupling and separating changes.
jquery source Analysis (eight)