（每一段jQuery对应一段html代码，以标记为准则,css为共用代码，每段代码需独立运行。html和css代码在文章尾部，如下例）
数组的处理
eg1
$(document).ready(function () {
var num = ["盖茨","乔布斯","马克","苏国强"];
$('p').text(num.join("，"));
});
eg2
$(document).ready(function () {
var num = ["盖茨", "乔布斯", "马克", "苏国强"];
$('p').html(num.join("<br>"));
});
eg3
$(document).ready(function () {
var memlist = $("#list");
var num = ["盖茨", "乔布斯", "马克", "苏国强"];
$.each(num, function (index, value) {
memlist.append($("<li>" + value + "</li>"));
});
});
eg4
$(document).ready(function () {
var num = $("li").get();
$('p').text("数组元素的数量：" + num.length);
});
对数组操作
$(document).ready(function () {
var mem = ["盖茨", "乔布斯a", "马克", "苏国强"];
mem = $.map(mem, function (n, i) { return (i + 1 + "," + n); });
$("p").html(mem.join("<br>"));
});
转换大小写
$(document).ready(function () {
var mem = ["盖茨", "乔布斯a", "马克", "苏国强"];
mem = $.map(mem, function (n, i) { return (i + 1 + "," + n.toUpperCase()); });
$("p").html(mem.join("<br>"));
});
map()方法分配到另一个数组
$(document).ready(function () {
var mems;
var mem = ["盖茨", "乔布斯a", "马克", "苏国强"];
mems = $.map(mem, function (n, i) { return (i + 1 + "," + n.toUpperCase()); });
$("p").html(mems.join("<br>"));
});
map()方法分配到另一个数组，并逐个追加有序列表（a1）
$(document).ready(function () {
var mems=$("#list");
var mem = ["盖茨", "乔布斯a", "马克", "苏国强"];
mem = $.map(mem, function (n, i) { return ( n.toUpperCase()); });
$.each(mem, function (index, value) {
mems.append($("<li>" + value + "</li>"))
})
});
//筛选数组元素大于4个字符的(a2) grep(array,callback,booleam)
$(document).ready(function () {
var mem = ["Tom", "Andy", "John", "Mark", "Jobs", "Micheal"];
$('p.allmem').html(mem.join("<br>"));
mem = $.grep(mem, function (v) { return v.length > 4 });
$('p.selectedmem').html(mem.join("<br>"));
});
筛选数组元素在头字母为A-D之间的，运用到正则表达式(a3) match((array,callback)
$(document).ready(function () {
var mem = ["Tom", "Andy", "John", "Mark", "Jobs", "Micheal"];
$('p.allmem').html(mem.join("<br>"));
mem = $.grep(mem, function (v) { return v.match(/^[A-D]/) });
$('p.selectedmem').html(mem.join("<br>"));
});
字符串数组的排序（a4）sort()
$(document).ready(function () {
var mem = ["Tom", "Andy", "John", "Mark", "Jobs", "Micheal"];
$('p.allmem').html(mem.join("<br>"));
mem = mem.sort();
$('p.sorted').html(mem.join("<br>"));
});
数值数组的排序（a4）sort()
$(document).ready(function () {
var mem = [34, 20, 10, 50, 13];
$('p.allmem').html(mem.join("<br>"));
mem = mem.sort(function (a, b) { return a - b; });
$('p.sorted').html(mem.join("<br>"));
});
拆分数组 （a5）splice(m,n)
$(document).ready(function () {
var mem = [34, 20, 10, 50, 13];
$('p.allmem').html(mem.join("<br>"));
mem = mem.sort(function (a, b) { return b - a; })//倒序排序
memsecond = mem.splice(0, 2);
$('p.firstp').html(memsecond.join("<br>"));
$('p.secondp').html(mem.join("<br>"));
});
合并数组（a6）concat()
$(document).ready(function () {
var mem1 = [34, 20, 10, 50, 13];
var mem2 = [5, 45, 33];
$('p.firstarr').html(mem1.join("<br>"));
$('p.secondarr').html(mem2.join("<br>"));
mem = mem1.concat(mem2);
$('p.comarr').html(mem.join("<br>"));
});
数值数组转换成字符串str，并查找子字符串 substr() （a7）
$(document).ready(function () {
var mem = [34, 20, 10, 50, 13];
$('p.origarr').html(mem.join("<br>"));
var str = mem.join(" ");
$('p.arrstring').text(str);
var substr = str.substr(0, 3);
$('p.partstring').text(substr);
});
创建对象数组（a8）
$(document).ready(function () {
var student = [
{
"rol": 2010324201,
"name": "盖茨",
"Email": "Gates@msn.com"
},
{
"rol": 2010324202,
"name": "乔布斯",
"Email": "Jobs@apple.com"
},
{
"rol": 2010324203,
"name": "苏国强",
"Email": "suguoqiang@idear.com"
}
];
$.each(student, function (index, value) {
$('table.listofstud').append("<tr><td style='background:#FF0000'>" + value.rol + "</td><td>" + value.name + "</td><td style='background:#FF00FF'>" + value.Email + "</td><tr>");
});
});
为对象数组排序（a8） sort()
$(document).ready(function () {
var student = [
{
"rol": 2010324201,
"name": "盖茨",
"Email": "Gates@msn.com"
},
{
"rol": 2010324202,
"name": "乔布斯",
"Email": "Jobs@apple.com"
},
{
"rol": 2010324203,
"name": "苏国强",
"Email": "suguoqiang@idear.com"
}
];
student = student.sort(function (a, b) { return a.rol - b.rol; }); //顺序排序
student = student.sort(function (a, b) { return b.rol - a.rol; });//倒序排序
student = student.sort(function (a, b) {
if (a.name < b.name) { return -1 };
if (a.name > b.name) { return 1 };
});//字母顺序排序
$.each(student, function (index, value) {
$('table.listofstud').append("<tr><td style='background:#FF0000'>" + value.rol + "</td><td>" + value.name + "</td><td style='background:#FF00FF'>" + value.Email + "</td><tr>");
});
});
html代码
<form id="form1" runat="server">
<div>
<h2>数组的元素是</h2>--
<p></p>
<ol id="list">
</ol>
<p></p>
<ul>
<li>盖茨</li>
<li>乔布斯</li>
<li>马克</li>
<li>苏国强</li>
</ul>
<h3>数组的元素：</h3>
<p></p>
<%--a1--%>
<h3>数组元素：</h3>
<ol id="list">
</ol>
<%--a2--%>
<h3>所有的数组元素</h3>
<p class=allmem></p>
<h3>大于4个字符的数组元素有：</h3>
<p class="selectedmem"></p>
<%--a3--%>
<h3>所有的数组元素</h3>
<p class=allmem></p>
<h3>头字母处于A-D的数组元素有：</h3>
<p class="selectedmem"></p>
<%--a4--%>
<h3>所有的数组元素</h3>
<p class=allmem></p>
<h3>头字母处于A-D的数组元素有：</h3>
<p class="sorted"></p>
<%--a5--%>
<h3>所有的数组元素</h3>
<p class=allmem></p>
<h3>第1组数组：</h3>
<p class="firstp"></p>
<h3>第2组数组：</h3>
<p class="secondp"></p>
<%--a6--%>
<h3>第1个数组：</h3>
<p class="firstarr"></p>
<h3>第2个数组：</h3>
<p class="secondarr"></p>
<h3>合并数组后：</h3>
<p class="comarr"></p>
<%--a7--%>
<h3>数值数组元素：</h3>
<p class="origarr"></p>
<h3>字符串数组元素：</h3>
<p class="arrstring"></p>
<h3>子字符串数组元素：</h3>
<p class="partstring"></p>
<%--a8--%>
<h3>学生列表</h3>
<table class="listofstud"></table>
</div>
</form>
css代码
body {
}
.p{color:Blue;}
.highlight
{
font-size:large;
color:#FF0000;
}
#list
{
}
.allmem
{
}
.selectedmem
{
}
.sorted
{
}
/*a5*/
.firstp{}
.secondp{}
/*a6*/
.firstarr{}
.secondarr{}
.comarr{}
/*a7*/
.origarr{}
.arrstring{}
.partstring{}
/*a8*/
.listofstud{}