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 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
Javascript中各种trim的实现详细解析
Dec 10 Javascript
Sort()函数的多种用法
Mar 20 Javascript
javascript数组去重方法分析
Dec 15 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 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
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
Javascript中的数学函数
2007/04/04 Javascript
javascript add event remove event
2008/04/07 Javascript
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
jQuery中jqGrid分页实现代码
2011/11/04 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
JavaScript中的编码和解码函数
2017/02/15 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
谈谈JS中的!!
2017/12/07 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
vue a标签点击实现赋值方式
2020/09/07 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
Python的Django框架中的数据库配置指南
2015/07/17 Python
python 实现A*算法的示例代码
2018/08/13 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
Python中无限循环需要什么条件
2020/05/27 Python
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
护理职业生涯规划书
2014/01/24 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
保洁员岗位职责
2015/02/04 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python