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中valueOf与toString区别浅析
Mar 19 Javascript
简单实现js页面切换功能
Jan 10 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
JS实现简单打字测试
Jun 24 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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中Object对象的笔记分享
2011/06/28 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
python解析xml文件实例分析
2015/05/27 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
pandas计数 value_counts()的使用
2019/06/24 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
简历中的自我评价范文
2014/02/05 职场文书
教师演讲稿大全
2014/05/16 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
《实心球》教学反思
2016/02/23 职场文书
六年级语文教学反思
2016/03/03 职场文书