In Jquery, $. map () and $. each () are used to operate the array:
The first is an ordinary array (an array with an index of integers ):
Copy codeThe Code is as follows:
$. Map (arr, fn );
Call the fn function to process each element in the array one by one. The fn function returns a new array.
Var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1];
Var newarr = $. map (arr, function (item) {return item * 2 });
Alert (newarr );
$. Each (array, fn) calls the fn function to process each element of the array. No return value is returned.
Var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1];
$. Each (arr, function (key, value) {alert ("key:" + key + "value:" + value );});
You can also omit the function parameter. In this case, you can obtain the value of the current element to be traversed.
Var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1];
$. Each (arr, function () {alert (this );});
Then there is an array of key-value pairs indexed as strings. For such arrays,
$. Each (array, fn) is generally used for operations:
Var arr = {"jim": "11", "tom": "12", "lilei": "13 "};
$. Each (arr, function (key, value) {alert ("name:" + key + "Age:" + value );});
Of course, you can also use a function without parameters to traverse;
This type of data can be obtained from the server as follows:
Server:
Copy codeThe Code is as follows:
<% @ WebHandler Language = "C #" Class = "Handler" %>
Using System;
Using System. Web;
Using System. Web. Script. Serialization;
Using System. Collections. Generic;
Public class Handler: IHttpHandler {
Public void ProcessRequest (HttpContext context ){
Context. Response. ContentType = "text/plain ";
Person p1 = new Person {Age = "22", Name = "tom "};
Person p2 = new Person {Age = "23", Name = "jim "};
Person p3 = new Person {Age = "24", Name = "lilei "};
IList <Person> persons = new List <Person> {p1, p2, p3 };
JavaScriptSerializer js = new JavaScriptSerializer ();
String s = js. Serialize (persons );
Context. Response. Write (s );
}
Public class Person
{
Public string Name {get; set ;}
Public string Age {get; set ;}
}
Public bool IsReusable {
Get {
Return false;
}
}
}
Three person objects are instantiated first, then put into a collection, and finally serialized into a string to flow to the client;
Client:
The client uses $. parseJSON () to convert the string passed in the background to a js array object. Next, we use the Normal Array Operation Method to operate the obtained array.
The third is the Jquery object array obtained through the tag selector,
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script src = "../myjs/jquery-1.4.2.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("P"). text ("this is the p tag ");
});
</Script>
</Head>
<Body>
<P> </p>
<P> </p>
<P> </p>
</Body>
</Html>
The effect of running in a browser is:
After dom loading is complete, the text is dynamically added to each p element. First, $ ("p") gets the set of p tags, which is equivalent to the document in Javascript. getElementByTagName is only the array of Jquery objects obtained here, so that Jquery's inherent implicit iteration function is available, followed by text ("this is the p tag ") the operation is iterated to every P tag. We can also call the each function to display the Jquery object array obtained by the iteration. The following code can also achieve the above effect:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> </title>
<Script src = "../myjs/jquery-1.4.2.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("P"). each (function (){
$ (This). text ("this is the p tag ");
});
});
</Script>
</Head>
<Body>
<P> </p>
<P> </p>
<P> </p>
</Body>
</Html>