A detailed description of each of the jquery functions

The recent project by each function pit miserable, want to or well tidy up about each function of every aspect, one to facilitate their own access, and secondly for the reader to provide experience and lessons, nonsense not to say, to see how each function is deceptive.

I. Global Jquery.each () functions

The so-called Global Jquery.each () function is also referred to as the $.each () function, which can be used to traverse any set, whether it is a JavaScript object or an array, or a JSON object. Its basic syntax is as follows:

Collection can be an array, can be any JS object or JSON object, callback we call the return function, if it is an array, the callback function each time passing an array of subscript and the subscript corresponding to the value of the array The callback callback function iterates through the specified objects and arrays, and iterates through the specified function as a context for each property of the object (or each member of the array).
Let's take a look at some of the following examples:

"001" Each function handles one-dimensional arrays

var " AAA " " BBB " " CCC "  ];        $.each (arr1, function (i,val) {            console.log (i);        Console.log (Val);  
Here is the array, so I array index, starting from 0, Val represents the index corresponding to the value of the array, the return function is only to use the alert popup array index and value

The function above works as follows:

"002" Each function traverses a two-dimensional array

 　 varARR2 = [['a','AA','AAA'], ['b','BB','BBB'], ['C','cc','CCC']  ] $.each (arr2, function (I, item) {Console.log (i);      　　Console.log (item); });  

Compared to the first example above, at this time the collections is a two-dimensional array, according to the above, then I is a two-dimensional array index, item for the index corresponding element, that is, each one-dimensional array, the effect is as follows:

Now I have a need to iterate through all the elements in a one-dimensional array. You only need to nest a layer of functions inside each function:

$.each (arr2, function (I, item) {            $.each (item,function (j,val) {  console.log (j);                Console.log (val);    }); });　　　　

"003" uses the each function to traverse the object properties

// Traversing Object Properties " Zhang San "  - }, function (property, value) {    alert (" attribute name =""; Property value =" + value";    });

In this case, the property in function is equivalent to the attribute name of the object name and age, and value is the property corresponding to the values, here is a JSON object, and then look at a similar example:

 var obj = {one:1, one:2, three:3};       $.each (obj, function (key, Val) {            console.log (key);         Console.log (val);       });

The effect of the operation is as follows:

The "004" Jquery.each () function can also traverse the matching elements in the JQuery object, taking the following HTML code as an example, creating a new HTML file and pasting it in:

<div id="N1"> <div id="N2"> <ul id="N3"> <li id="N4">item1</li> <li id="N5">item2</li> <li id="N6">item3</li> </ul> </div> </div><form id="Demoform"> <input name="Goods_weight"Type="checkbox"Value=" -">a (20kg) <br> <input name="Goods_weight"Type="checkbox"Value=" -">b (33kg) <br> <input name="Goods_weight"Type="checkbox"Value=" $">c (36kg) <br> <input name="Goods_weight"Type="checkbox"Value=" the">d (49kg) <br> <input name="Goods_weight"Type="checkbox"Value=" About">e (56kg) <br> <input name="Goods_weight"Type="checkbox"Value=" +">f (78kg) <br> <input id="Btnbuy"Type="Button"Value="Order"> </form>

Now, let's change the innerHTML of all the <li> elements to "number n" (n 1, 2, 3 ...) as follows:

$.each ($ ("ul li"), function (index, Element) {    // this = = = Element    $ (this" number "1));  });

As shown below, the results are changed:

Next, we register the click event of the "Order" button, which is used to process the order of goods, the product weight of each order must not exceed 100kg, otherwise we cannot order and prompt the corresponding information:

$("#btn"). Click (function () {varWeight =0; $.each ($ ("[name=goods_weight]:checked"), function () {Weight+ = parseint ( This. Value); if(Weight > -){            return false;    }    }); if(Weight <=0) {alert ("No products selected!"); }Else if(Weight > -) {alert ("the product weight of one order cannot exceed 100kg!"); }Else{        //Order ProductsAlert"Order Product success!"); }});

"005" traverses the elements in the DOM

"Text/javascript"Src="/jquery/jquery.js"></script><script type="Text/javascript">$ (document). Ready (function () {$ ("Button"). Click (function () {$ ("Li"). each (function () {alert ($ ( This). Text ())}); });});</script>

"006" Look at a JSON example:

var json = [  'red'#f00'  ' Green ' ' #0f0 '  'blue'#00f'  }];

Traverse the code:

$.each (JSON, function () {
This represents each JSON object in the array   $.each (this, function (name, value) {      '=' + value);   } );

The results are as follows:

"007" Difference $ (). each () and $.each ()/jquery.each ()

The previous example shows that the $.each () function represents

and $ (). each () iterates through the current jquery object and executes a callback function on each element, with the syntax formatted as follows:

---restore content ends---

A detailed description of each of the jquery functions