JQuery learning experience

JQuery learning experience
1. Closure

Every time you see jQuery, the first thing that comes to mind is the closure. This is a common question. Today I recalled the closure again.

• What is a closure? When a function wants to access the variables in another function, it cannot be accessed. We use closures to access all of them. To put it simply, the closure is a bridge between the interior and exterior of the function. Through the closure, we can access the internal variables of other functions.

1.1 Scope

To understand the closure, you must first know the scope. Global variables and local variables.

 

• Global variables: can be referenced anywhere in the script.

• Local variable: it exists only within the function that declares it, and cannot be referenced outside of this function.

Variables declared with var only take effect in the current scope. variables declared without var are global variables no matter where they are declared. Variables declared with var are not necessarily local variables.

1.2 function of closure

The biggest role of closures is the privatization of global variables. As mentioned above, the closure can access the variables in other functions, and another is to permanently store a variable in the current scope. It will not be recycled by the garbage collection mechanism unique to JavaScript after the function is called.

　function outer(){　　　　var n=0;

　　　　nAdd=function(){n+=1}　　　　function inner(){
　　　　　　alert(n);　　　　}　　　　return inner;　　}　　var result=outer();　　result(); // 0　　nAdd();　　result(); // 1

1.3 closure function throttling

    window.onresize = throttle(function () {        console.log(document.documentElement.clientWidth);    },400);    function throttle(fn,delay) {        var timer = null;        return function () {            clearTimeout(timer);            timer = setTimeout(fn, delay);        }    }

2. each Method

Objects traversed by the each method => common objects | array | Node

　

Var obj = {
Name: "sean", age: 22}; (1) .. in loop traversal for (var key in obj) {console. log (key, obj [key]);} (2) each loop traversal // traverses an object | array // The first parameter: the object to be traversed // The second parameter: the callback function returns the current key-value to us as the callback function parameter once every cycle: // The first parameter of the callback function: it indicates the key corresponding to the current loop // The second parameter: it indicates the value corresponding to the current loop $. each (obj, function (key, value) {console. log (key, value); // sean 22 // if the name value is zs. if (value = "sean") return false;}) is not traversed ;});

2.1 use of each in the static method of jQuery Constructor

    $.each($(".box>div"),function (index,oDom) {            console.log(index, oDom);        });

2.2 Use of each methods on jQuery's prototype object

 $(".box>div").each(function () {            console.log(index, oDom);        })

Summary: to traverse jQ objects, use $ (). each (fn (index, oDom), if you want to traverse an array or an object, use $. each (traversal target, fn (key, value ))

2.3 notes for using the each method

(1) point of this: the point of this in each is special. The point of this is the value of this loop, not to the window

Thinking? Why does this point to value?

Because we often operate on the value of each loop during traversal, it is advantageous to set this to value, and we write less code, the callback function parameter can be omitted without writing.

(2) interrupt Loop

If conditions are met, terminate the loop by returning false in the callback function. return false

$. Each (obj, function (key, value) {console. log (key, value); // if the value of name is zs. if (value = "sean") return false;}) is not traversed ;});

Traverse objects (with additional parameters ):

$. Each (Object, function (p1, p2) {this; // here this points to the current property value of the Object in each traversal p1; p2; // access additional parameter }, ['parameter 1', 'parameter 2']);

　　 Traverse the Array (with attachment parameters ):

$. Each (Array, function (p1, p2) {this; // here this points to the current element p1; p2 in each traversal; // access additional parameter }, ['parameter 1', 'parameter 2'])

Traverse objects (no additional parameters)

$. Each (Object, function (name, value) {this; // this points to the value name of the current attribute; // name indicates the name value of the current attribute of the Object; // value indicates the value of the current property of the Object });

Traverse the Array (no additional parameters)

$. Each (Array, function (I, value) {this; // this points to the current element I; // I indicates the current subscript value of the Array; // value indicates the current element of the Array });

　 2.4 By the way, some common points of this

This indicates who is determined by the function call method.
(1) Call fn () this --> window
(2) The constructor calls new fn () this --> internally created object
(3) object method call obj. fn () this-> Object
(4) call function context | apply this-> first Parameter

2.5 comparison

(1) Use of the map Method

$. Map (traversed object, fn)

$ (). Map (fn)

(2) differences with each:

• The callback function of map is opposite to the key-value in the callback function of each.
• Map cannot terminate the loop, but it can collect the return values of each callback function and return them as an array.
• This of map points to window

$. Each (obj, function (key, value) {console. log (key, value); // sean 22 // if the name value is zs. if (value = "sean") return false;}) is not traversed ;});

$.map(obj,function (key,value) {    console.log(key, value);//22 sean    // if(value == "sean") return false;
　　
});

 

References:Ruan Yifeng's network logs