第二章 jQuery数组和字符串
章节内容：
1、利用数组在列表中显示名字
（1）利用数组显示名字列表——join()方法
（2）从数组中获取名字并追加到有序列表——each()方法
（3）利用HTML元素创建数组和计算数组长度——get()方法
2.操作数组元素——map()方法
3、筛选数组元素，只显示所需要的数据——grep()方法
4、字符串数组和数值数组的排序——sort()方法
5、拆分数组——splice()方法
6、合并数组——concat()方法
7、把数值数组转换为字符传数组，并查找其子字符串——substr()方法
1、利用数组在列表中显示名字
（1）利用数组显示名字列表——join()方法
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <title>Test</title> 8 9 <meta charset="utf-8"> 10 11 <link rel="stylesheet" type="text/css" href="style.css"> 12 13 <script type="text/javascript" src="jquery.js"></script> 14 15 <script type="text/javascript"> 16 17 $(document).ready(function(){ 18 19 var members = ["小明","小红","小李","小花"]; 20 21 $('p').text(members.join(',')); //使用join方法以逗号（，）连接 22 23 }); 24 25 </script> 26 27 </head> 28 29 <body> 30 31 <h3>数组：</h3> 32 33 <p></p> 34 35 </body> 36 37 </html>
注意：join()只是数组对象的方法，不能用于字符串。
显示页面：
纵向显示名字列表（只修改一行jQuery代码，其余不变）
|
$('p').html(members.join("<br/>")); //插入html元素，注意这里是html()方法，而不是text()方法 |
显示效果：
（2）从数组中获取名字并追加到有序列表——each()方法
全部代码如下：
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <title>Test</title> 8 9 <meta charset="utf-8"> 10 11 <link rel="stylesheet" type="text/css" href="style.css"> 12 13 <script type="text/javascript" src="jquery.js"></script> 14 15 <script type="text/javascript"> 16 17 $(document).ready(function(){ 18 19 var members = ["小明","小红","小李","小花"]; 20 21 $('p').text(members.join(',')); //使用join方法以逗号（，）连接 22 23 }); 24 25 </script> 26 27 </head> 28 29 <body> 30 31 <h3>数组：</h3> 32 33 <p></p> 34 35 </body> 36 37 </html>
以上代码把HTML页面中id为list元素的（有序列表元素）分配到变量memlist。也就是说，memlist引用了HTML文件中的ol元素。定义名为member的数组，并将5个名字存储到数组中，然后利用each()方法提取数组中的每个元素（名字）并追加到ol元素。
显示效果：
（3）利用HTML元素创建数组和计算数组长度——get()方法
|
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var names = $("li").get(); //使用get()方法提取所有的li元素中的文本 $("p").text("数组长度：" + names.length); }); </script> </head> <body> <p></p> <ul> <li>小明</li> <li>小红</li> <li>小李</li> <li>小花</li> </ul> </body> </html> |
显示效果：
2.操作数组元素——map()方法
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var names = $("li").get(); //使用get()方法提取所有的li元素中的文本 $("p").text("数组长度：" + names.length); }); </script> </head> <body> <p></p> <ul> <li>小明</li> <li>小红</li> <li>小李</li> <li>小花</li> </ul> </body> </html>
Map()方法迭代数组的每个元素，并为每个数组元素分别调用一次回调函数，可以把返回的元素分配到一个数组（当然也可以分配到同一个数组，如上代码所示）。map()方法代码：
|
map(Array,callback); |
此处的回调函数包含对数组元素执行处理任务的语句。以上代码想连同序号一起显示存储在数组的名字。定义members数组，包含想要显示的名字。接着把数组传到map()方法。Map()方法中的回调函数包含两个参数，其中n指向传递到map方法中的数组的元素，i表示元素的索引值（从零开始计数）。
3、筛选数组元素，只显示所需要的数据——grep()方法
问题：一个数组包含了一些名字，为了只看到需要的名字，需要筛选数组元素。例如：只希望看到长度超过3个字符的名字。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var members = ["小明","欧阳小红","小李","上官小花"];
$("p.allmem").html(members.join("<br/>"));
members = $.grep(members,function(v){ //使用grep()方法返回符合字符串长度大于3的元素到members数组中；
return v.length > 3;
});
$("p.selected").html(members.join("<br/>"));
});
</script>
</head>
<body>
<h3>显示所有的数组元素：</h3>
<p class="allmem"></p>
<h3>显示只希望显示的数组元素</h3>
<p class="selected"></p>
</body>
</html>
显示效果：
grep()方法对数组进行筛选。这个方法分析数组的所有元素，为每个元素分别调用回调函数。在回调函数中编写语句，把不想要的元素过滤掉，这就是说，回调函数只返回被过滤的数组中符合需求的元素。grep()方法的语法：
|
grep(array,callback,boolean); |
array是原始数组，grep对原始数组进行筛选；
callback是回调函数，执行筛选任务，返回构成过滤数组的元素。回调函数有两个默认的参数，第一个是数组元素，第二个是数组索引值（这里和map()方法一样）。
boolean值通常省略。如果指定该参数为false（默认值），则没有任何效果，如果设置为true，那么回调函数的运算则是逆向的。也就是说，它将返回与回调函数中提供的条件语句不匹配的值。
4、字符串数组和数值数组的排序——sort()方法
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var members = ["John","Ben","Damon","Ian"];
$("p.allmem").html(members.join("<br/>"));
members = members.sort(); //调用数组的sort方法对members数组进行排序，返回到原数组中
$("p.sorted").html(members.join("<br/>"));
});
</script>
</head>
<body>
<h3>显示所有的数组元素：</h3>
<p class="allmem"></p>
<h3>显示排序后的数组：</h3>
<p class="sorted"></p>
</body>
</html>
显示效果：
显然是按字母顺序为字符串数组排序（由小到大）。
Sort()方法基于ASCII码为元素进行排序，所以sort()方法不能为数值排序，因为它会认为3大于10（3的ASCII值大于10的ASCII值）。为了正确地对数值排序，需要为sort()方法重新定义一个比较函数。如果定义了比较函数，将把数组中的一对值发送到函数进行比较，然后返回以下3个值的任何一个：小于0（表示第一个数小于第二个数，此时第二个数靠后排）、等于0（表示两个数大小相等）、大于0（表示第一个数大于第二个数，此时第一数靠后排）；
对数组排序代码（从小到大排序）：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var members = [100,56,23,45,72];
$("p.allmem").html(members.join("<br/>"));
members = members.sort(function(a,b){
return a-b;
});
$("p.sorted").html(members.join("<br/>"));
});
</script>
</head>
<body>
<h3>显示所有的数组元素：</h3>
<p class="allmem"></p>
<h3>显示排序后的数组：</h3>
<p class="sorted"></p>
</body>
</html>
注意：如果要从大到小排序只需将a-b改为b-a，即用后一个数减前一个数。
5、拆分数组——splice()方法
使用splice()方法有两个参数，第一个参数指定索引位置，即从哪里开始分拆，第二个参数指定从原始数组中删除多少个元素。从原来的数组提取并返回这两个参数所定义范围的数组元素，可以在另一个数组中保留返回的数组元素。总之，删除并返回数组的一部分（由发送到splice的两个参数所定义），其余部分留在原来的数组中。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 <script type="text/javascript" src="jquery.js"></script> 8 <script type="text/javascript"> 9 $(document).ready(function(){ 10 var members = [0,1,2,3,4,5,6,7,8,9]; 11 $("p.allmem").text(members.join(",")); 12 var memsecond = members.splice(0,3); 13 $("p.splicing").text(memsecond.join(",")); 14 $("p.spliced").text(members.join(",")); 15 }); 16 </script> 17 </head> 18 <body> 19 <h3>显示所有的数组元素：</h3> 20 <p class="allmem"></p> 21 <h3>显示分拆后的数组：</h3> 22 <p class="splicing"></p> 23 <h3>显示分拆后的原数组：</h3> 24 <p class="spliced"></p> 25 </body> 26 </html>
显示效果：
6、合并数组——concat()方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 <script type="text/javascript" src="jquery.js"></script> 8 <script type="text/javascript"> 9 $(document).ready(function(){ 10 var first = [0,1,2,3,4,5,6,7,8,9]; 11 $("p.first").text(first.join(",")); 12 var second = [10,11,12,13,14,15,16,17,18,19]; 13 $("p.second").text(second.join(",")); 14 var allmem = first.concat(second); 15 $("p.allmem").text(allmem.join(",")); 16 }); 17 </script> 18 </head> 19 <body> 20 <h3>第一个数组：</h3> 21 <p class="first"></p> 22 <h3>第一个数组：</h3> 23 <p class="second"></p> 24 <h3>合并后的数组：</h3> 25 <p class="allmem"></p> 26 </body> 27 </html>
显示效果：
7、把数值数组转换为字符传数组，并查找其子字符串——substr()方法
假设有一个数值数组，请将它转化为字符串数组，以便于使用substr()方法获取子字符串。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test</title> 5 <meta charset="utf-8"> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 <script type="text/javascript" src="jquery.js"></script> 8 <script type="text/javascript"> 9 $(document).ready(function(){ 10 var origarr = [0,1,2,3,4,5,6,7,8,9]; 11 $("p.origarr").text(origarr.join(",")); 12 var arrstring = origarr.join(""); //将数值数组转化为字符串数组 13 $("p.arrstring").text(arrstring); 14 var partstirng = arrstring.substr(0,3); //使用substr方法截取部分字符串 15 $("p.partstirng").text(partstirng); 16 }); 17 </script> 18 </head> 19 <body> 20 <h3>原始数值数组：</h3> 21 <p class="origarr"></p> 22 <h3>转换为字符串后的数组：</h3> 23 <p class="arrstring"></p> 24 <h3>获取部分数组元素：</h3> 25 <p class="partstirng"></p> 26 </body> 27 </html>
显示效果：
posted on 2016-11-10 21:19 Miss.coding 阅读(403) 评论(0) 编辑 收藏 举报
