1.操作数组元素--将数组中的元素转换为大写显示出来 <!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="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var NamePosition = $("#names"); var Member = ["Guo Hu", "Lei Hu", "Hunwen Li", "jinghao Liu", "Cheng Fang"]; //map()迭代数组中的每个元素,并为每个元素分别调用一次回调函数 Member = $.map(Member, function (n,i) { return (i+1+"."+n.toUpperCase()); }); $.each(Member, function (index, value) { NamePosition.append($("<li>" + value + "</li>")); }); }); </script> </head> <body> <p id="names"> </p> </body> </html> 2.刷选数组元素--只显示长度超过4个字符的名字 <!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> <style type="text/css"> .All { background-color:Red; } .Part { background-color:Gray; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var Member = ["Guo Hu", "Lei Hu", "Hunwen Li", "jinghao Liu", "Cheng Fang"]; $('p.All').append(Member.join('<br/>')); //grep()分析数组的所有元素，把不想要的元素过滤掉. Member = $.grep(Member, function (n) { return n.length > 6 }); $('p.Part').append(Member.join('<br/>')); }); </script> </head> <body> <h3>Member Name</h3> <p class="All"></p> <h3>Filter Member Name</h3> <p class="Part"></p> </body> </html> 3.字符串数组，数字数组排序 <!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> <style type="text/css"> .All { background-color:Red; } .Part { background-color:Gray; } .AllNumber { background-color:Blue; } .PartNumber { background-color:Lime; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var Member = ["Guo Hu", "Lei Hu", "Hunwen Li", "jinghao Liu", "Cheng Fang"]; $('p.All').append(Member.join('<br/>')); $('p.Part').append(Member.sort().join('<br/>')); var Number = [12, 45, 8, 37, 113]; $('p.AllNumber').append(Number.join('<br/>')); //a,b两个值进行比较，大的那个排后 Number = Number.sort(function (a, b) { return a - b; }); $('p.PartNumber').append(Number.join('<br/>')); }); </script> </head> <body> <h3>Member Name</h3> <p class="All"></p> <h3>Filter Member Name</h3> <p class="Part"></p> <h3>Number</h3> <p class="AllNumber"></p> <h3>Sort Number</h3> <p class="PartNumber"></p> </body> </html> 4.拆分数组 <!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> <style type="text/css"> .All { background-color:Red; } .Part { background-color:Gray; } .Remain { background-color:Green; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var Member = ["Guo Hu", "Lei Hu", "Hunwen Li", "jinghao Liu", "Cheng Fang"]; $('p.All').append(Member.join('<br/>')); //第一个参数为索引开始，第二个参数为删除多少个，返回前2个成员到Filter数组中 var Filter = Member.splice(0, 2); $('p.Part').append(Filter.join('<br/>')); $('p.Remain').append(Member.join('<br/>')); }); </script> </head> <body> <h3>Member Name</h3> <p class="All"></p> <h3>Filter Member Name</h3> <p class="Part"></p> <h3>Remain Name</h3> <p class="Remain"></p> </body> </html> 5.合并数组 <!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> <style type="text/css"> .First { background-color:Red; } .Second { background-color:Gray; } .All { background-color:Green; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var First = ["Guo Hu", "Lei Hu"]; var Second = ["Hunwen Li", "jinghao Liu", "Cheng Fang"]; $('p.First').append(First.join('<br/>')); $('p.Second').append(Second.join('<br/>')); var All = First.concat(Second); $('p.All').append(All.join('<br/>')); }); </script> </head> <body> <h3>First Member Name</h3> <p class="First"></p> <h3>Seond Name</h3> <p class="Second"></p> <h3>Member Name</h3> <p class="All"></p> </body> </html> 6.创建对象数组以及排序 <!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> <style type="text/css"> .All { background-color:Green; } </style> <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { var Students = [ { name: "Guo Hu", Role: "Administrator", Email: "Guo Hu@Microsoft.com" }, { name: "Lei Hu", Role: "Guest", Email: "Lei Hu@Microsoft.com" }, { name: "Junwen Li", Role: "Guest", Email: "JWen Li@Microsoft.com" } ]; Students = Students.sort(function (a, b) { if (a.name > b.name) { return 1 }; if (a.name < b.name) { return -1 }; return 0; }); $.each(Students, function (index, value) { $('p.All').append("<tr><td>" + value.name + "</td><td>" + value.Role + "</td><td>" + value.Email + "</td></tr>"); }); }); </script> </head> <body> <h3>Member Name</h3> <p class="All"></p> </body> </html>