JQuery中 数组与字符串(过滤，排序,拆分，合并)
2013-12-18 11:50
357 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery中 数组与字符串(过滤，排序,拆分，合并)
- Jquery字符串，数组（拷贝、删选、合并等），each循环，阻止冒泡，ajax出错，$.grep筛选，$.param序列化，$.when
- Java与JavaScript 完美实现字符串拆分(利用数组存储）与合并的互逆操作
- 剑指offer2.3.2字符串：有两个排序的数组A1和A2，内存在A1的末尾有足够多的空余空间容纳A2，编写一个函数，将A2合并到A1并排序
- php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
- php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
- 合并数组--jQuery数组和字符串
- Jquery操作数组元素(三)字符串数组与数值数组的排序
- 合并并且排序指针数组和二维数组里面存放的字符串用函数调用的格式
- Jquery字符串，数组（拷贝、删选、合并等），each循环，阻止冒泡，ajax出错，$.grep筛选，$.param序列化，$.when
- Jquery字符串，数组（拷贝、删选、合并等），each循环，阻止冒泡，ajax出错，$.grep筛选，$.param序列化，$.when
- 【JQuery学习总结2 】Jquery字符串, 数组（拷贝、删选、合并等）, each循环，阻止冒泡，ajax出错，$.grep筛选，$.param序列化
- 两个数组合并，去掉重复的然后再排序
- JavaScript中数组的合并以及排序实现示例
- jquery 中如何将数组转化为json字符串，然后再转化回来？
- 合并排序数组
- 删除字符串开始及末尾的空白符，并且把数组中间的多个空格（如果有）符转化（合并）为1个
- js中的Array对象转成字符串;java中的List转成String数组, List集合的合并
- 关于网上搜查得到的3DC3的基于字符串后缀数组的排序方法的怀疑
- 比较字符串数组，并排序