(每一段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{}