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 相关文章推荐
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
基于Angularjs实现分页功能
May 30 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
js模块加载方式浅析
Aug 12 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
security.js实现的RSA加密功能示例
Jun 06 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
JS写滑稽笑脸运动效果
May 28 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传输数据的代码
2007/11/13 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
php实现websocket实时消息推送
2018/03/30 PHP
js 动态选中下拉框
2009/11/26 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
Python获取某一天是星期几的方法示例
2017/01/17 Python
python 上下文管理器使用方法小结
2017/10/10 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
python中四舍五入的正确打开方式
2021/01/18 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
纽约手袋品牌:KARA
2018/03/18 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
数学系毕业生求职信
2014/05/29 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
党员批评与自我批评总结
2014/10/15 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技