Jquery中对数组的操作代码


Posted in Javascript onAugust 12, 2011

而在Jquery中则使用$.map()、$.each()来操作数组:
首先是普通的数组(索引为整数的数组):

$.map(arr,fn); 
对数组中的每个元素调用fn函数逐个进行处理,fn函数将处理返回最后得到的一个新的数组 
var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]; 
var newarr = $.map(arr, function(item) {return item*2 }); 
alert(newarr); 
$.each(array,fn)对数组array每个元素调用fn函数进行处理,没有返回值 
var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]; 
$.each(arr, function(key, value) { alert("key:" + key + "value:" + value); }); 
还可以省略function的参数,这个时候this可以得到遍历的当前元素的值 
var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]; 
$.each(arr, function() { alert(this); });

然后是索引为字符串的 键值对数组,针对这类数组,
一般采用$.each(array,fn)来操作:
var arr = { "jim": "11", "tom": "12", "lilei": "13" };
$.each(arr, function(key, value) { alert("姓名:"+key+"年龄:"+value); });
当然也可以使用无参的的function进行遍历;
当这类数据从服务器端获取时可以如下进行:
服务器端:
<%@ WebHandler Language="C#" Class="Handler" %> 
using System; 
using System.Web; 
using System.Web.Script.Serialization; 
using System.Collections.Generic; 
public class Handler : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
context.Response.ContentType = "text/plain"; 
Person p1 = new Person { Age = "22", Name = "tom" }; 
Person p2 = new Person { Age = "23", Name = "jim" }; 
Person p3 = new Person { Age = "24", Name = "lilei" }; 
IList<Person> persons = new List<Person> {p1,p2,p3}; 
JavaScriptSerializer js = new JavaScriptSerializer(); 
string s= js.Serialize(persons); 
context.Response.Write(s); 
} 
public class Person 
{ 
public string Name { get; set; } 
public string Age { get; set; } 
} 
public bool IsReusable { 
get { 
return false; 
} 
} 
}

先实例化了三个person对象,然后放到一个集合中,最后把这个集合序列化成字符串流到客户端;
客户端:
客户端通过$.parseJSON()将后台传递过来的字符串转化为js数组对象,接下来我们就使用操作普通数组的方式来操作这个得到的数组
第三种就是通过标签选择器获取的Jquery对象数组,
<!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="../myjs/jquery-1.4.2.js" type="text/javascript"></script> 
<script type ="text/javascript" > 
$(function() { 
$("p").text("这是p标签"); 
}); 
</script> 
</head> 
<body> 
<p></p> 
<p></p> <p></p> <p></p> <p></p> 
<p></p> 
</body> 
</html>

在浏览器中运行的效果为:
Jquery中对数组的操作代码
在dom加载完成后为每一个p元素动态的添加了文本,首先$("p")获取p标签的集合,相当于Javascript中的 document.getElementByTagName只是这里得到的是Jquery对象的数组,这样就有了Jquery固有的隐式迭代的功能,后面的text("这是p标签")的操作就迭代到了每一个P标签上,我们也可以显示的调用each函数来显示的迭代获得的Jquery对象数组,下面的代码同样可以实现上面的效果:
<!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="../myjs/jquery-1.4.2.js" type="text/javascript"></script> 
<script type ="text/javascript" > 
$(function() { 
$("p").each(function() { 
$(this).text("这是p标签"); 
}); 
}); 
</script> 
</head> 
<body> 
<p></p> 
<p></p> <p></p> <p></p> <p></p> 
<p></p> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript的9个陷阱及评点分析
May 16 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
JS从一组数据中找到指定的单条数据的方法
Jun 02 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
基于jQuery的星级评分插件
Aug 12 #Javascript
基于jQuery的投票系统显示结果插件
Aug 12 #Javascript
JavaScript中的View-Model使用介绍
Aug 11 #Javascript
仿jQuery的siblings效果的js代码
Aug 09 #Javascript
html中table数据排序的js代码
Aug 09 #Javascript
最常用的12种设计模式小结
Aug 09 #Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 #Javascript
You might like
提升PHP执行速度全攻略(下)
2006/10/09 PHP
也谈截取首页新闻 - 范例
2006/10/09 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
asp.net和asp下ACCESS的参数化查询
2008/06/11 Javascript
checkbox 复选框不能为空
2009/07/11 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
angularjs中回车键触发某一事件的方法
2017/04/24 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
使用python实现对元素的长截图功能
2019/11/14 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Python网页解析器使用实例详解
2020/05/30 Python
HTML5实现音频和视频嵌入的方法
2018/08/22 HTML / CSS
参观监狱心得体会
2014/01/02 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
签约仪式主持词
2014/03/19 职场文书
解除财产保全担保书
2014/05/20 职场文书
检讨书范文500字
2015/01/28 职场文书
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
2021/08/07 HTML / CSS