jQuery攻略之数组处理

 

(每一段jQuery对应一段html代码,以标记为准则,css为共用代码,每段代码需独立运行。htmlcss代码在文章尾部,如下例)

                              

 

数组的处理

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
{}



posted @ 2012-02-26 21:44  Ghost Soar  阅读(3422)  评论(0编辑  收藏