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/Css 文件的代码
Jul 03 Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
微信小程序对接七牛云存储的方法
Jul 30 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
Vue移动端项目实现使用手机预览调试操作
Jul 18 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/09/05 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
浅谈vue项目打包优化策略
2018/09/29 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
卫生系统先进事迹
2014/05/13 职场文书
生活部的活动方案
2014/08/19 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
高中班主任心得体会
2016/01/07 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
Redis可视化客户端小结
2021/06/10 Redis