jQuery攻略之数组处理

 

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