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 相关文章推荐
JSQL  一个 web DB 的封装
May 05 Javascript
Javascript中For In语句用法实例
May 14 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
vue.js实现价格格式化的方法
May 23 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
react-router4按需加载(踩坑填坑)
Jan 06 Javascript
javascript实现京东快递单号的查询效果
Nov 30 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
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
详解Vue源码之数据的代理访问
2018/12/11 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
python中操作文件的模块的方法总结
2021/02/04 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
杠杆的科学教学反思
2014/01/10 职场文书
列车长先进事迹材料
2014/01/25 职场文书
实习公司领导推荐函
2014/05/21 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
关于五一放假的通知
2015/08/18 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
Go gorilla/sessions库安装使用
2022/08/14 Golang