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 asp.net 获取当前超链接中的文本
Apr 14 Javascript
用json方式实现在 js 中建立一个map
May 02 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
基于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中文件下载功能实现超详细流程分析
2012/06/13 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
smarty实现多级分类的方法
2014/12/05 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
thinkphp5框架实现数据库读取的数据转换成json格式示例
2019/10/10 PHP
jquery提示 &quot;object expected&quot;的解决方法
2009/12/13 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
jQuery插件boxScroll实现图片轮播特效
2015/07/14 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
对python周期性定时器的示例详解
2019/02/19 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
Penhaligon’s英国官网:成立于1870年的英国香水制造商
2021/02/18 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
社区八一活动方案
2014/02/03 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
小学班级标语口号大全
2015/12/26 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL