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 相关文章推荐
动态加载iframe
Jun 16 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
JS合并两个数组的3种方法详解
Oct 24 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
JavaScript实现随机点名器
Mar 25 Javascript
JS如何监听div的resize事件详解
Dec 03 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 isset()与empty()的使用区别详解
2010/08/29 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php中explode函数用法分析
2014/11/15 PHP
给ECShop添加最新评论
2015/01/07 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
Python实现Linux中的du命令
2017/06/12 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
python实现类之间的方法互相调用
2018/04/29 Python
python数据挖掘需要学的内容
2019/06/23 Python
python中有关时间日期格式转换问题
2019/12/25 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
PHP如何设置和取得Cookie值
2015/06/30 面试题
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
信息技术教学反思
2014/02/12 职场文书
葬礼司仪主持词
2014/03/31 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
Python实现自动玩连连看的脚本分享
2022/04/04 Python
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技
python manim实现排序算法动画示例
2022/08/14 Python